我尝试通过按钮在 Vuetify textarea 中添加一些文本(标签)。
<v-btn small flat @click.stop="insertTag('{{title}}', <model-name-here>)">+ Title</v-btn>
insertTag 方法提供了这个:
this.$refs[model][0].focus()
我不知道如何将文本插入文本区域中的光标位置...
最佳答案
Kallan DAUTRICHE 的回答是正确的,但不是我所需要的(或者我认为 OP 所需要的)。
您必须设置元素的引用,以便您可以直接选择 DOM 的输入元素以获取/设置选择详细信息
模板:
<v-text-field v-model="model" ref="textField">
脚本:
export default Vue.extend({
data: () => ({
model: "",
}),
methods: {
insertText(text) {
// Get the input element by tag name, using the ref as a base for the search
// This is more vue-friendly and plays nicer when you duplicate components
const el = this.$refs.textField.querySelector("input");
// Insert text into current position
let cursorPos = el.selectionEnd; // Get current Position
this.model =
this.model.substring(0, cursorPos) +
text +
this.model.substring(cursorPos);
// Get new cursor position
cursorPos += text.length;
// Wait until vue finishes rendering the new text and set the cursor position.
this.$nextTick(() => el.setSelectionRange(cursorPos, cursorPos));
}
},
});
关于vue.js - VueJS/Vuetify - 添加一些文本到文本区域的焦点位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50103339/