@thtf/vue-textarea-autocomplete

自动提示文本组件

依赖

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	获取内容	文本内容