解决方案
我最终使用vue-codemirror来实现此功能。
首先在main.js中注册
import CodeMirror from 'vue-codemirror'
import CodeMirrorJS from 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/anyword-hint';
Vue.use(CodeMirror);
CodeMirrorJS.registerHelper("hint","medication",function(cm,options) {
var cur = cm.getCursor(),token = cm.getTokenAt(cur);
var start = token.start,end = token.end;
return {
list: [],from: CodeMirrorJS.Pos(cur.line,start),to: CodeMirrorJS.Pos(cur.line,end)
}
});
window.CodeMirror = CodeMirrorJS;
然后按如下所示在所需文件中填充列表:
populateAutocompletedMedication(){
firestore.collection("words").doc("medication")
.get().then(snap => {
var words = snap.data().list;
CodeMirror.hint.medication = function (editor) {
var list = words|| [];
var cursor = editor.getCursor();
var currentLine = editor.getLine(cursor.line);
var start = cursor.ch;
var end = start;
while (end < currentLine.length && /[\w$]+/.test(currentLine.charAt(end))) ++end;
while (start && /[\w$]+/.test(currentLine.charAt(start - 1))) --start;
var curWord = start != end && currentLine.slice(start,end);
var regex = new RegExp('^' + curWord,'i');
var result = {
list: (!curWord ? list : list.filter(function (item) {
return item.match(regex);
})).sort(),from: CodeMirror.Pos(cursor.line,to: CodeMirror.Pos(cursor.line,end)
};
return result;
};
});
}
并在前端使用以下命令:
<codemirror
ref="medicationRef"
class="codemirror-custom"
v-model="=medication"
:options="codeMirrorOptions"
@ready="onCmMedicationReady"
></codemirror>
数据:
codeMirrorOptions: {
mode: 'string',lineNumbers: false,line: true,}
在方法中:
onCmMedicationReady(cm) {
cm.on('keypress',() => {
CodeMirror.showHint(cm,CodeMirror.hint.medication,{completeSingle:false});
});
}
这可能不是常规的实现方式,但它可以起作用...
,
您可以像这样将它们拼凑起来
<textarea v-model="textAreaModel" placeholder="add multiple lines"></textarea>
<v-autocomplete
v-model="autocompleteModel"
label="Description"
:items="[one,two,three]"
></v-autocomplete>
您在哪里手动
watch: {
autoCompleteModel() {
this.textAreaModel = this.textAreaModel + this.autoCompleteModel;
}
,然后使用css在文本区域上浮动自动完成功能。
不确定vuetify的自动完成功能是否公开更改侦听器或选择方法,以选择项目。如果是这样,您可以放弃手表,转而选择一种方法。您可以在模型工作here上观看,从vuetify的一个示例中找到一个分叉的代码笔。
本文链接:https://www.f2er.com/3099701.html