|
@@ -3,7 +3,7 @@
|
|
|
<!-- 表单 -->
|
|
<!-- 表单 -->
|
|
|
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
|
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
|
|
<el-card header="搜索热词" class="property-group" shadow="never">
|
|
<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 }">
|
|
<template #default="{ index }">
|
|
|
<el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
|
|
<el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
|
|
|
</template>
|
|
</template>
|
|
@@ -61,6 +61,7 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { useVModel } from '@vueuse/core'
|
|
import { useVModel } from '@vueuse/core'
|
|
|
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
|
|
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
|
|
|
|
|
+import { isString } from '@/utils/is'
|
|
|
|
|
|
|
|
/** 搜索框属性面板 */
|
|
/** 搜索框属性面板 */
|
|
|
defineOptions({ name: 'SearchProperty' })
|
|
defineOptions({ name: 'SearchProperty' })
|
|
@@ -68,6 +69,19 @@ defineOptions({ name: 'SearchProperty' })
|
|
|
const props = defineProps<{ modelValue: SearchProperty }>()
|
|
const props = defineProps<{ modelValue: SearchProperty }>()
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
const formData = useVModel(props, 'modelValue', emit)
|
|
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>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
|
<style scoped lang="scss"></style>
|