自动提示文本组件
依赖
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
@thtf/vue-autocomplete Events
方法名 | 说明 | 回调参数 |
---|
matched | 匹配成功时触发 | 匹配规则对应的字符串,匹配内容,规则对象 |
change | 获取内容 | 文本内容 |