console
new Vue({
el: '#app',
data() {
return {
value1: '阿斯达三大'
}
},
template: `
<div>
<el-input v-model="value1" ref="value1"></el-input>
<el-button @mousedown.native.prevent="handleChnageFoucus('测试')">测试</el-button>
</div>
`,
methods: {
handleChnageFoucus (val) {
const oInput = this.$refs['value1'].$el.getElementsByTagName('input')[0];
const selectionStart = oInput.selectionStart;
const firstStr = oInput.value.substr(0, selectionStart);
const lastStr = oInput.value.substr(selectionStart);
const allStr = firstStr + val + lastStr;
oInput.value = allStr;
oInput.selectionStart = selectionStart + val.length;
oInput.selectionEnd = selectionStart + val.length;
this.value1 = allStr;
console.log(this.value1)
}
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
</body>
</html>