场景：双击标题可修改标题，失焦进行标题保存
实现：因为input页面初始化的时候是隐藏的，设置autofocus失效，最终利用自定义指令实现功能
<div class="head">
<span v-show="!showEditName" @dblclick="tpEdit">{{name}}</span>
<el-input
v-show="showEditName"
v-model="tpEditName"
v-focus="showEditName"
maxlength="30"
clearable
placeholder="请输入标题"
@blur="sureEdit"
style="width:260px">
</el-input>
</div>
<script>
name: 'home',
data() {
return {
name: "标题",
showEditName: false,
tpEditName: ''
}
}
methods: {
tpEdit() {
this.showEditName = true
this.tpEditName = this.name
},
sureEdit() {
const tpEditName = this.tpEditName.trim()
const name = this.name.trim()
if (tpEditName.length > 0 && tpEditName !== name) {
// 这里请求修改标题的接口
} else if (tpEditName.length === 0) {
this.$message.error('标题不能为空')
this.showEditName = false
} else {
this.showEditName = false
}
}
},
directives: {
focus: {
inserted(el, { value }) {
if (value) {
el.children[0].focus()
}
},
// 更新判断
update: function(el, { value }) {
if (value) {
el.children[0].focus()
}
},
// 更新完成
componentUpdated: function(el, { value }) {},
}
}
</script>
