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

This commit is contained in:
YunaiV
2025-05-01 07:45:08 +08:00
parent 415baa0763
commit e964e47274
2 changed files with 19 additions and 3 deletions

View File

@ -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,6 +61,7 @@
<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' })
@ -68,6 +69,19 @@ 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>

View File

@ -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'])