vue阻止默认_vue中，阻止默认事件

用vue的写法就是：

id="freeinput"

:rows="6"

placeholder="请输入自由条件内容(json格式)"

@focus="add_eventListener"

@blur="remove_eventListener">

methods:{

//在vue项目中，需要将事件监听封装成函数，让this托管，才能生效，所以是这样的写法。

add_eventListener() {

window.addEventListener('keydown', this.keyFun, true)

},

remove_eventListener() {

window.removeEventListener('keydown', this.keyFun, true)

},

keyFun(event) {

if (event.keyCode === 9) {

// 阻止默认事件

event.preventDefault();

let ids = " ";

// 获取对应标签

let obj = document.getElementById('freeinput');

// 获取光标的起始位置, 在未做人为选中的情况下, start和end是一样的

let start = obj.selectionStart; // 注意：使用vue对象时，没有selectionStart/selectionEnd属性，所以换成了原生js对象

let end = obj.selectionEnd;

// 获取选中的文本

let text = window.getSelection().toString();

// 如果有换行符, 需要替换, 实现效果同代码编辑器的选中集体缩进

text = ids + text.replace(/\n/g, '\n' + ids);

// 在原始光标位置中插入tab对应的字符

obj.value = obj.value.substring(0, start) + text + obj.value.substring(end);

// 将光标设置到新的位置

obj.setSelectionRange(start + ids.length, start + text.length);

}

}

}