multi-input-search

多文本单元输入框

输入项：将复制粘贴的逗号(中英文逗号均可)分割 或 空格分割的字符串, 或输入的字符串转换为 多个单独目标输入项, 返回逗号分割的字符串, 并且可以进行单个目标项删除。

默认绑定项: 逗号(中英文逗号均可)分割 或 空格分割的字符串, 或 字符串数组, 返回逗号分割的字符串, 并且可以进行单个目标项删除。

安装

 npm install multi-input-search

使用

// 导入
import Vue from 'vue';
import multiInputSearch from 'multi-input-search'

// 使用
Vue.use(multiInputSearch);

<template>
  <div >
    <multiInputSearch :extra-config="extraConfig" @updateVal="getVal" @keyUpEnterEvent="keyUpEnterEvent" />
  </div>
</template>

<script>
export default {
  name: 'AppName',
   data() {
    return {
      extraConfig: {
        placeholder: '',
        disabled: false,
        defaultValue: '' // "'YPC202210250001' '' 'YPC202207130138' "// "'YPC202210250001', '', 'YPC202207130138'," // ['YPC202210250001', '', 'YPC202207130138']
      }
    }
  },
  methods: {
    keyUpEnterEvent() {
      console.log('==keyUpEnterEvent==')
    },
    getVal(val) {
      console.log('getVal: ', val)
    },
  }
}
</script>

配置项说明

1. extraConfig

• placeholder: 输入框 placeholder

• disabled: 输入框是否可编辑

• defaultValue: 输入框默认值

  • 入参defaultValue默认值可取(逗号可为中文或英文):

    • ['YPC202210250001', '', 'YPC202207130138']
    • 'YPC202210250001', '', 'YPC202207130138',
    • 'YPC202210250001' '' 'YPC202207130138'

  • 入参空值已处理;

  • 出参为: "YPC202210250001,YPC202207130138";

2. updateVal - 获取最终转换后的值

3. keyUpEnterEvent - 对外暴露的回车事件