<template>
|
<div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
|
<el-input v-model="item.key" class="mr-2" placeholder="键" />
|
<el-input v-model="item.value" placeholder="值" />
|
<el-button class="ml-2" text type="danger" @click="removeItem(index)">
|
<el-icon>
|
<Delete />
|
</el-icon>
|
删除
|
</el-button>
|
</div>
|
<el-button text type="primary" @click="addItem">
|
<el-icon>
|
<Plus />
|
</el-icon>
|
{{ addButtonText }}
|
</el-button>
|
</template>
|
|
<script lang="ts" setup>
|
import { Delete, Plus } from '@element-plus/icons-vue'
|
import { isEmpty } from '@/utils/is'
|
|
defineOptions({ name: 'KeyValueEditor' })
|
|
interface KeyValueItem {
|
key: string
|
value: string
|
}
|
|
const props = defineProps<{
|
modelValue: Record<string, string>
|
addButtonText: string
|
}>()
|
const emit = defineEmits(['update:modelValue'])
|
const items = ref<KeyValueItem[]>([]) // 内部 key-value 项列表
|
|
/** 添加项目 */
|
const addItem = () => {
|
items.value.push({ key: '', value: '' })
|
updateModelValue()
|
}
|
|
/** 移除项目 */
|
const removeItem = (index: number) => {
|
items.value.splice(index, 1)
|
updateModelValue()
|
}
|
|
/** 更新 modelValue */
|
const updateModelValue = () => {
|
const result: Record<string, string> = {}
|
items.value.forEach((item) => {
|
if (item.key) {
|
result[item.key] = item.value
|
}
|
})
|
emit('update:modelValue', result)
|
}
|
|
/** 监听项目变化 */
|
watch(items, updateModelValue, { deep: true })
|
watch(
|
() => props.modelValue,
|
(val) => {
|
// 列表有值后以列表中的值为准
|
if (isEmpty(val) || !isEmpty(items.value)) {
|
return
|
}
|
items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
|
}
|
)
|
</script>
|
