<template>
<input class="edit-div hover_focus"
ref="input"
v-model="innerText"
contenteditable="true"
@blur="shuchu"
@input="changeText"/>
</template>
<script type="text/ecmascript-6">
export default{
name: 'editDiv',
props: {
value: {
type: String,
default: ''
},
initFocus: {
type: Boolean,
default: false,
}
},
mounted(){
if (this.initFocus) {
let obj = this.$refs.input;
this.$refs.input.focus()
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number'
&& typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
},
data(){
return {
innerText: this.value,
}
},
watch: {
'value'(){
this.innerText = this.value;
}
},
methods: {
changeText(){
this.$emit('input', this.innerText);
},
shuchu() {
this.$emit('shuchu', this.innerText);
}
}
}
</script>
<style lang="scss" scoped>
.hover_focus {
border: 1px solid transparent;
&:hover {
border-color: #e0e0e0;
}
&:focus {
outline: 1px solid #42b983;
}
}
</style>
一个默认focus的input组件vue
最新推荐文章于 2024-09-26 17:07:55 发布