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

UPairInput 键值对输入框

• 示例
  • 基本用法
  • 双向绑定
  • 指定键值字段名
  • 表单验证
  • 分隔符与复制粘贴
  • 禁用状态
  • 一键清除
  • 添加图标
  • 修改尺寸
  • 综合示例
• API
  • Props/Attrs
  • Slots
  • Events
  • Methods
  • ARIA and Keyboard

用于输入一系列键值对。

示例

基本用法

点击输入区域进行输入。在完成键或值的输入之后，可以通过 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

Slots

(default)

插入文本或 HTML。

prefix

自定义前缀内容

suffix

自定义后缀内容

Events

@before-add

添加前触发

@add

添加后触发

@before-edit

编辑前触发

@edit

编辑后触发

@before-remove

删除前触发

@remove

删除后触发

@clear

清除前触发

@before-clear

清除前触发

@change

键值对数组改变后触发

Methods

edit(index, type)

编辑某一项

save(index)

保存正在编辑的项

remove(index)

删除某一项

focus()

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

blur()

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

clear()

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

ARIA and Keyboard