【缺陷修复】商城装修: 顶部导航栏-文字链接支持

Author: puhui999

src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

@@ -2,17 +2,17 @@
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
       v-model="cellList"
-      class="m-b-16px"
-      :rows="1"
       :cols="cellCount"
       :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" />
+    <img v-if="isMp" alt="" class="h-30px w-76px" src="@/assets/imgs/diy/app-nav-bar-mp.png" />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === cellIndex">
-      <el-form-item label="类型" :prop="`cell[${cellIndex}].type`">
+      <el-form-item :prop="`cell[${cellIndex}].type`" label="类型">
         <el-radio-group v-model="cell.type">
           <el-radio value="text">文字</el-radio>
           <el-radio value="image">图片</el-radio>
@@ -21,45 +21,48 @@
       </el-form-item>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <el-form-item label="内容" :prop="`cell[${cellIndex}].text`">
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="内容">
           <el-input v-model="cell!.text" maxlength="10" show-word-limit />
         </el-form-item>
-        <el-form-item label="颜色" :prop="`cell[${cellIndex}].text`">
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </el-form-item>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`">
+        <el-form-item :prop="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
             <template #tip>建议尺寸 56*56</template>
           </UploadImg>
         </el-form-item>
-        <el-form-item label="链接" :prop="`cell[${cellIndex}].url`">
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </el-form-item>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
+        <el-form-item :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
         </el-form-item>
-        <el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
+        <el-form-item :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
           <el-slider
             v-model="cell.borderRadius"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
             :show-input-controls="false"
+            input-size="small"
+            show-input
           />
         </el-form-item>
       </template>
     </template>
   </template>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { NavigationBarCellProperty } from '../config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 // 导航栏属性面板
@@ -87,4 +90,4 @@ const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: numb
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>