94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<div class="kv-editor">
|
|
<div v-for="(item, index) in kvList" :key="index" class="kv-row">
|
|
<el-input v-model="item.key" placeholder="key" size="small" class="kv-key" @input="emitUpdate" />
|
|
<el-input v-model="item.value" placeholder="value" size="small" class="kv-value" @input="emitUpdate" />
|
|
<el-button size="small" text type="danger" class="kv-del" @click="removeRow(index)">
|
|
<el-icon><Delete /></el-icon>
|
|
</el-button>
|
|
</div>
|
|
<el-button size="small" class="kv-add" @click="addRow">
|
|
<el-icon><Plus /></el-icon> 添加
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { Plus, Delete } from '@element-plus/icons-vue';
|
|
|
|
const props = defineProps<{
|
|
modelValue: Record<string, unknown>;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', val: Record<string, unknown>): void;
|
|
}>();
|
|
|
|
const kvList = ref<{ key: string; value: string }[]>([]);
|
|
|
|
function toKvList(obj: Record<string, unknown>): { key: string; value: string }[] {
|
|
return Object.entries(obj || {}).map(([k, v]) => ({
|
|
key: k,
|
|
value: typeof v === 'string' ? v : JSON.stringify(v),
|
|
}));
|
|
}
|
|
|
|
function toRecord(list: { key: string; value: string }[]): Record<string, unknown> {
|
|
const obj: Record<string, unknown> = {};
|
|
for (const item of list) {
|
|
if (item.key.trim()) {
|
|
obj[item.key.trim()] = item.value;
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
function emitUpdate() {
|
|
emit('update:modelValue', toRecord(kvList.value));
|
|
}
|
|
|
|
function addRow() {
|
|
kvList.value.push({ key: '', value: '' });
|
|
}
|
|
|
|
function removeRow(index: number) {
|
|
kvList.value.splice(index, 1);
|
|
emitUpdate();
|
|
}
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => {
|
|
kvList.value = toKvList(val);
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.kv-editor {
|
|
width: 100%;
|
|
.kv-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 6px;
|
|
align-items: center;
|
|
.kv-key {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.kv-value {
|
|
flex: 2;
|
|
min-width: 0;
|
|
}
|
|
.kv-del {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.kv-add {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|