自动提示文本组件

依赖

Vue 2.6.10+

安装

npm install @thtf/vue-autocomplete

发布

master 分支提交即可。

快速上手

// 使用组件
<template>
  <div id="app">
    <p>本地测试</p>
    <div style="height: 300px; width: 500px">
      <autocomplete v-model="content" :rules="rulesLocal" @matched="matchedLocal"/>
    </div>
    <p>远程测试</p>
    <div style="height: 300px; width: 500px">
      <autocomplete v-model="content" remote :rules="rules" :options="options" :loading="loading" @matched="matched"/>
    </div>
  </div>
</template>

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

  // 引用组件
  export default {
    components: {
      Autocomplete
    },
    data() {
      return {
        content: {
          html: '',
          text: '',
        },
        // 本地相关参数
        rulesLocal: [
          {
            rule: /\[/,
            enterAdd: '&',
            data: [
              {
                label: '指标1',
                value: 'foo1',
                children: [
                  {
                    label: '时点1',
                    value: 'bar1',
                    children: [
                      {label: '计量单位1', value: 'foobar1'},
                    ],
                  },
                  {label: '时点2', value: 'bar2'},
                  {label: '时点3', value: 'bar3'},
                ],
              },
              {label: '指标2', value: 'foo2'},
              {label: '指标3', value: 'foo3'},
            ]
          },
          {
            rule: /{/,
            enterAdd: '&',
            data: [
              {
                label: '指标1',
                value: 'foo1',
                children: [
                  {
                    label: '时点1',
                    value: 'bar1',
                    children: [
                      {label: '计量单位1', value: 'foobar1'},
                      {label: '计量单位2', value: 'foobar2'},
                      {label: '计量单位3', value: 'foobar3'},
                    ],
                  },
                  {label: '时点2', value: 'bar2'},
                  {label: '时点3', value: 'bar3'},
                ],
              },
              {label: '指标2', value: 'foo2'},
              {label: '指标3', value: 'foo3'},
            ],
          },
        ],
        // 远程相关参数
        loading: false,
        options: [],
        rules: [
          {
            rule: /\[/,
            enterAdd: '&',
          },
          {
            rule: /{/,
            enterAdd: '&',
          },
        ],
      };
    },
    methods: {
      // 本地回调事件
      matchedLocal(rule, query, row) {
        // console.log(`rule ${JSON.stringify(rule)}`);
        // console.log(`query ${JSON.stringify(query)}`);
        // console.log(`row ${JSON.stringify(row)}`)
      },
      // -------------------------------------------------
      // 远程回调事件
      matched(rule, query, row) {
        console.log(`rule ${JSON.stringify(rule)}`);
        console.log(`query ${JSON.stringify(query)}`);
        console.log(`row ${JSON.stringify(row)}`);
        if (row) {
          // 调用后台接口获取数据
          this.loading = true;
          // 模拟查询条件。
          // 如果 query 为空，返回指标的相关数据
          // 如果 query 为foox，即指标相关的值，则返回时点的相关数据
          // 如果 query 为 [foox, barx]，即指标和时点相关的值，则返回计量单位的相关数据
          let params = null;
          if (query.length === 0) {
            params = 1;
          } else if (query.length === 1) {
            params = 2;
          } else if (query.length === 2) {
            params = 3;
          }

          this.getData(params).then((response) => {
            this.loading = false;
            this.options = response;
          });
        }
      },
      // 模拟后台接口
      getData(params) {
        const mockData = {
          1: [
            {label: '指标1', value: 'foo1'},
            {label: '指标2', value: 'foo2'},
            {label: '指标3', value: 'foo3'},
          ],
          2: [
            {label: '时点1', value: 'bar1'},
            {label: '时点2', value: 'bar2'},
            {label: '时点3', value: 'bar3'},
          ],
          3: [
            {label: '计量单位1', value: 'foobar1'},
            {label: '计量单位2', value: 'foobar2'},
            {label: '计量单位3', value: 'foobar3'},
          ],
        };
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(mockData[params]);
          }, 100);
        });
      },
    }
  }
</script>

@thtf/vue-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-autocomplete Methods

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

@thtf/vue-autocomplete Events

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