自动提示文本组件

依赖

Vue 2.6.10+

安装

npm install @thtf/vue-textarea-autocomplete

发布

main 分支提交即可。

快速上手

// 使用组件
<template>
  <div id="app">
    <p>本地测试</p>
    <div style="height: 300px; width: 500px">
      <autocomplete :rules="rules" @matched="matched"/>
    </div>
  </div>
</template>

<script>
  // 安装组件
  import Autocomplete from '@thtf/vue-textarea-autocomplete'

  // 引用组件
  export default {
    components: {
      Autocomplete
    },
    data() {
      return {
        extracts: [],
        rules: [
          {
            rule: /[A-Za-z0-9]+/,
            data: [{ label: '指标', value: '001' }, { label: '时点', value: '002' }],
          },
        ],
      };
    },
    methods: {
      matched(rule, query, row) {
        console.log(`rule ${JSON.stringify(rule)}`);
        console.log(`query ${JSON.stringify(query)}`);
        console.log(`row ${JSON.stringify(row)}`);
      },
    },
  }
</script>

@thtf/vue-textarea-autocomplete Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------------------------------- | ------- | ------ | ------ | | rules | 匹配规则 | array | - | - | | debounce | 输入时防抖等待时间 | Number | - | 300 | | minWidth | suggester 最小宽度 | string | - | 180px | | remote | 是否为远程远程匹配 | Boolean | - | false | | loading | remote 为 true 时，是否正在从远程获取数据 | Boolean | - | false | | options | remote 为 true 时，远程获取数据列表 | Array | - | [] |

rules Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | --------------------------------------------------------- | ------ | ------ | ------ | | rule | 匹配规则 | 正则 | - | - | | enterAdd | 选中 item 时 向末尾添加的字符 | string | - | 空格 | | data | 匹配规则成功时，suggester 显示列表，remote 为 true 时无效 | array | - | [] |

@thtf/vue-textarea-autocomplete Methods

| 方法名 | 说明 | 参数 | | ------ | -------------- | ---- | | change | 触发匹配的方法 | - |

@thtf/vue-textarea-autocomplete Events

| 方法名 | 说明 | 回调参数 | | ------- | -------------- | ---------------------------------------- | | matched | 匹配成功时触发 | 匹配规则对应的字符串，匹配内容，规则对象 | | change | 获取内容 | 文本内容 |