feat：【商城】店铺装修-搜索栏：新增热词，出现 object object 的情况

Author: YunaiV

src/components/DiyEditor/components/mobile/SearchBar/property.vue

@@ -3,7 +3,7 @@
     <!-- 表单 -->
     <el-form label-width="80px" :model="formData" class="m-t-8px">
       <el-card header="搜索热词" class="property-group" shadow="never">
-        <Draggable v-model="formData.hotKeywords" :empty-item="''">
+        <Draggable v-model="formData.hotKeywords" :empty-item="''" :min="0">
           <template #default="{ index }">
             <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
           </template>
@@ -61,13 +61,27 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
+import { isString } from '@/utils/is'
 
 /** 搜索框属性面板 */
 defineOptions({ name: 'SearchProperty' })
 
 const props = defineProps<{ modelValue: SearchProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const formData = useVModel(props, 'modelValue', emit)
+
+// 监听热词数组变化
+watch(
+  () => formData.value.hotKeywords,
+  (newVal) => {
+    // 找到非字符串项的索引
+    const nonStringIndex = newVal.findIndex((item) => !isString(item))
+    if (nonStringIndex !== -1) {
+      formData.value.hotKeywords[nonStringIndex] = ''
+    }
+  },
+  { deep: true, flush: 'post' }
+)
 </script>
 
 <style scoped lang="scss"></style>

src/components/Draggable/index.vue

@@ -28,7 +28,7 @@
             <Icon
               icon="ep:delete"
               class="cursor-pointer text-red-5"
-              v-if="formData.length > 1"
+              v-if="formData.length > min"
               @click="handleDelete(index)"
             />
           </el-tooltip>
@@ -69,7 +69,9 @@ const props = defineProps({
   // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
   emptyItem: any<unknown>().def({}),
   // 数量限制：默认为0，表示不限制
-  limit: propTypes.number.def(0)
+  limit: propTypes.number.def(0),
+  // 最小数量：默认为1
+  min: propTypes.number.def(1)
 })
 // 定义事件
 const emit = defineEmits(['update:modelValue'])