❤
npm
Sign UpSign In

@cloud-ui/u-pair-input.vue

0.9.0 • Public • Published

UPairInput 键值对输入框

用于输入一系列键值对。

示例

基本用法

点击输入区域进行输入。在完成键或值的输入之后，可以通过 Tab, Enter 按键或鼠标失焦切换输入。

<u-pair-input></u-pair-input>

双向绑定

使用v-model或:value.sync双向绑定一个数组。

<template>
<u-pair-input v-model="pairs"></u-pair-input>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaa', value: 'a-value' },
                { key: 'bbb', value: 'b-value' },
                { key: 'ccc', value: 'c-value' },
            ],
        };
    },
};
</script>

指定键值字段名

可以使用key-field和value-field指定字段名。

<template>
<u-pair-input v-model="pairs" key-field="name" value-field="fingerprinter" key-placeholder="请输入 Name" value-placeholder="请输入指纹"></u-pair-input>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { name: 'ssh-name', fingerprinter: '2e:f7:17:a5:c4:41:00:59:dd:46:0d:be:a1:75:a2:86' },
                { name: 'gen-ssh', fingerprinter: '61:36:66:fb:b1:3f:f7:2c:c2:5d:91:45:7a:ed:82:75' },
                { name: 'c163yun', fingerprinter: 'fa:52:8b:7d:34:06:3d:6d:c8:84:ad:4b:a4:b4:dc:c0' },
            ],
        };
    },
};
</script>

表单验证

键值的规则

通过key-rules和value-rules设置规则，条目输入框可以接入到 Cloud UI 表单验证体系中，规则参见UValidator。

比如在下面的例子中，键只能输入字母、数字，值只能输入数字，不得少于 4 位。

<template>
<u-form-item label="键值对" bubble>
    <u-pair-input v-model="pairs" key-rules="alphaNum" value-rules="numeric | minLength(4) # 值不得少于 4 个数字"></u-pair-input>
</u-form-item>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaaa', value: 1234 },
                { key: 'bbbb', value: 5678 },
                { key: 'cccc', value: 9101 },
            ],
        };
    },
};
</script>

列表的规则

通过list-rules设置键值对数组的规则，规则参见UValidator中与数组相关的一些规则。

下面的例子中，数组不能为空，且最多可以添加 2 个键值对。

<template>
<u-form-item label="键值对" bubble>
    <u-pair-input v-model="pairs" key-rules="alphaNum" value-rules="numeric | minLength(4)" list-rules="notEmpty # 需要至少输入一个键值对 | maxLength(2) # 键值对不得超过 2 个"></u-pair-input>
</u-form-item>
</template>
<script>
export default {
    data() {
        return {
            pairs: [],
        };
    },
};
</script>

分隔符与复制粘贴

键与值之间的分隔符固定为:，不能修改。

键值对之间的分隔符为,，如果添加或修改时出现,，会将它前面的输入视为一个完成项进行添加。

另外，本组件支持一次粘贴多个键值对的功能。如果复制粘贴的键值对包括多个分隔符，会依次添加。

如果添加时验证到中间有错误的一项，会中止粘贴的操作。

在下面的例子中，可以尝试复制www: 4444, xxx: 5555, yyy: 666, zzz: 7777，粘贴到输入框中。

<template>
<u-form-item label="键值对" bubble>
    <u-pair-input v-model="pairs" key-rules="alphaNum" value-rules="numeric | minLength(4) # 值不得少于 4 个数字"></u-pair-input>
</u-form-item>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaaa', value: 1234 },
                { key: 'bbbb', value: 5678 },
                { key: 'cccc', value: 9101 },
            ],
        };
    },
};
</script>

修改分隔符

通过修改separators属性，设置分隔符。

比如下面的例子中，需要用;分隔。尝试复制www: 4444; xxx: 5555; yyy: 666; zzz: 7777，粘贴到输入框中。

<template>
<u-form-item label="键值对" bubble>
    <u-pair-input v-model="pairs" separators=";" key-rules="alphaNum" value-rules="numeric | minLength(4) # 值不得少于 4 个数字"></u-pair-input>
</u-form-item>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaaa', value: 1234 },
                { key: 'bbbb', value: 5678 },
                { key: 'cccc', value: 9101 },
            ],
        };
    },
};
</script>

禁用状态

<template>
<u-pair-input v-model="pairs" disabled></u-pair-input>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaa', value: 'a-value' },
                { key: 'bbb', value: 'b-value' },
                { key: 'ccc', value: 'c-value' },
            ],
        };
    },
};
</script>

一键清除

添加clearable属性，可以开启一键清除按钮。

<template>
<u-pair-input v-model="pairs" clearable></u-pair-input>
</template>
<script>
export default {
    data() {
        return {
            pairs: [
                { key: 'aaa', value: 'a-value' },
                { key: 'bbb', value: 'b-value' },
                { key: 'ccc', value: 'c-value' },
            ],
        };
    },
};
</script>

添加图标

可以使用prefix和suffix添加图标。

<template>
<u-linear-layout direction="vertical">
    <u-pair-input v-model="list" prefix="search"></u-pair-input>
    <u-pair-input v-model="list" suffix="search"></u-pair-input>
</u-linear-layout>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { key: 'aaa', value: 'a-value' },
                { key: 'bbb', value: 'b-value' },
                { key: 'ccc', value: 'c-value' },
            ],
        };
    },
};
</script>

修改尺寸

支持normal、large、huge、full几种级别的宽高组合。

<template>
<u-linear-layout direction="vertical">
    <u-pair-input size="normal large" v-model="list"></u-pair-input>
    <u-pair-input size="large" v-model="list"></u-pair-input>
    <u-pair-input size="huge" v-model="list"></u-pair-input>
    <u-pair-input size="full" v-model="list"></u-pair-input>
</u-linear-layout>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { key: 'aaa', value: 'a-value' },
                { key: 'bbb', value: 'b-value' },
                { key: 'ccc', value: 'c-value' },
            ],
        };
    },
};
</script>

综合示例

<template>
<u-form ref="form">
    <u-form-item required label="实例名称" rules="required | alphaNum">
        <u-input v-model="model.name" placeholder="请输入实例名称"></u-input>
    </u-form-item>
    <u-form-item required label="端口" rules="required | port">
        <u-input v-model="model.port" placeholder="请输入端口"></u-input>
    </u-form-item>
    <u-form-item required label="环境变量" layout="block" :bubble="true">
        <u-pair-input size="huge" v-model="model.whitelist" key-placeholder="请输入环境变量名称" value-placeholder="请输入环境变量的值" key-rules="required | alphaNumDash" value-rules="required | alphaNumDash" list-rules="notEmpty # 至少输入一个环境变量 | maxLength(3) # 环境变量不得超过 3 个"></u-pair-input>
    </u-form-item>
    <u-form-item>
        <u-button color="primary" @click="submit">立即创建</u-button>
    </u-form-item>
</u-form>
</template>

<script>
export default {
    data() {
        return {
            model: {
                name: 'abc',
                port: '8002',
                whitelist: [],
            }
        };
    },
    methods: {
        submit() {
            this.$refs.form.validate()
                .then(() => this.$toast.show('验证通过，提交成功！'))
                .catch(() => this.$toast.show('验证失败！'));
            },
        },
};
</script>

API

Props/Attrs

Prop/Attr Type Options Default Description
value.sync, v-model Array '\[\]' 键值对列表
key-field string 'key' 键字段
value-field string 'value' 值字段
key-placeholder string '请输入 Key 值' 键输入框的占位符
value-placeholder string '请输入 Value 值' 值输入框的占位符
key-rules string, Array<Rule> 针对键的验证规则
value-rules string, Array<Rule> 针对值的验证规则
list-rules string, Array<Rule> 针对整个键值对列表的验证规则
separators string ',' 分隔符
clearable boolean 是否显示一键清除按钮
prefix enum 'search' 前缀图标
suffix enum 'search' 后缀图标
size string normal、large、huge 几种级别的组合
disabled boolean 是否禁用

Slots

(default)

插入文本或 HTML。

prefix

自定义前缀内容

suffix

自定义后缀内容

Events

@before-add

添加前触发

Param Type Description
$event.item { [keyField]: string, [valueField]: string } 待添加的项
$event.oldValue Array 旧的键值对数组
senderVM UPairInput 发送事件实例

@add

添加后触发

Param Type Description
$event.item { [keyField]: string, [valueField]: string } 添加的项
$event.value Array 当前键值对数组
senderVM UPairInput 发送事件实例

@before-edit

编辑前触发

Param Type Description
$event.oldItem { [keyField]: string, [valueField]: string } 编辑前的项
$event.item { [keyField]: string, [valueField]: string } 编辑后的项
$event.value Array 键值对数组
$event.index number 编辑的索引
$event.type 'key' | 'value' 编辑的类型，为键还是为值
$event.field string 编辑的字段
senderVM UPairInput 发送事件实例

@edit

编辑后触发

Param Type Description
$event.item { [keyField]: string, [valueField]: string } 编辑后的项
$event.value Array 键值对数组
$event.index number 编辑的索引
$event.type 'key' | 'value' 编辑的类型，为键还是为值
$event.field string 编辑的字段
senderVM UPairInput 发送事件实例

@before-remove

删除前触发

Param Type Description
$event.item { [keyField]: string, [valueField]: string } 待删除的项
$event.oldValue Array 旧的键值对数组
$event.index number 删除项的索引
senderVM UPairInput 发送事件实例

@remove

删除后触发

Param Type Description
$event.value Array 当前键值对数组
$event.item { [keyField]: string, [valueField]: string } 待删除的项
$event.index number 删除项的索引
senderVM UPairInput 发送事件实例

@clear

清除前触发

Param Type Description
$event.oldValue Array 旧的键值对数组
senderVM UPairInput 发送事件实例

@before-clear

清除前触发

Param Type Description
$event.value Array 改变后的键值对数组
senderVM UPairInput 发送事件实例

@change

键值对数组改变后触发

Param Type Description
$event.oldValue Array 旧的键值对数组
$event.value Array 改变后的键值对数组
senderVM UPairInput 发送事件实例

Methods

edit(index, type)

编辑某一项

Param Type Default Description
index number 编辑项的索引
type enum 编辑键还是值

save(index)

保存正在编辑的项

Param Type Default Description
index number 保存项的索引

remove(index)

删除某一项

Param Type Default Description
index number 删除项的索引

focus()

让键值对输入框获取焦点。

Param Type Default Description

blur()

让键值对输入框失去焦点。

Param Type Default Description

clear()

清空输入框中所有键值对。

Param Type Default Description

ARIA and Keyboard

Key Description
Enter 完成当前项的输入
Tab 完成当前项的输入
Delete 删除前一项

Dependents (0)

Package Sidebar

Install

npm i @cloud-ui/u-pair-input.vue

Repository

github.com/vusion/cloud-ui-materials

Homepage

static-vusion.163yun.com/packages/@cloud-ui/u-pair-input.vue@0.9.0/index.html

Weekly Downloads

1

Version

0.9.0

License

MIT

Unpacked Size

759 kB

Total Files

40

Last publish

Collaborators

  • lip966
  • damowangdexiaogenban
  • lifuquan
  • rainfore
  • zhangxiaoyudaisy
Try on RunKit
Report malware