@thtf/vue-autocomplete

自动提示文本组件

依赖

Vue 2.6.10+

安装

npm install @thtf/vue-autocomplete

快速上手

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

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

// 引用组件
export default {
  components: {
    ThtfAutocomplete
  },
  data () {
    return {
        content: '<p class="text">[<span data-value="foo1"> 指标1 </span>&amp;<span data-value="bar1"> 时点1 </span>&amp;<span data-value="foobar1"> 计量单位1 ]</span></p>',
        // 本地相关参数
        extractsLocal: [],
        rulesLocal: [
          {
            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' }
            ]
          },
          {
            rule: /{/,
            enterAdd: '&'
          }
        ],
        // 远程相关参数
        loading: false,
        options: [],
        extracts: [],
        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)}`)
    },
    // 获取内容
    getContent (value) {
      console.log(value)
    },
    // -------------------------------------------------
    // 远程回调事件
    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>