KvInput
When To Use
When you need to use object or json key-value pair input, this component can simplify your input
Examples
Key:
Value:
Key:
Value:
Key:
Value:
<template>
<h-kv-input :modelValue="payload" @change="handleChange" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const payload = ref('');
function handleChange(obj: Record<string, string>[]) {
const mergeResult = obj.reduce((total, cur) => {
if (!cur.key) return total;
return Object.assign(total, { [cur.key]: cur.value });
}, {});
payload.value = JSON.stringify(mergeResult, null, 4);
}
</script>
API
Props
| Property | Description | Type | default |
|---|---|---|---|
| modelValue | input value | string | |
| defaultValue | default key-value pair | Object | |
| mode | show mode | enum | list |
Events
| Events Name | Description | Type | default |
|---|---|---|---|
| change | Callback function triggered by key-value pair change | Function |
参数修改
defaultRow -> defaultValue
changeProps 已废弃，请在changeEvents中传入参数