Vue
实现这三个功能的踩坑记录。 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑。 那么这里有三个要实现的地方 第一是双击显示编辑框。 第二是自动聚焦点击的显示框。 第三是点击编辑框外的地方,隐藏编辑框。 一二点都是在startPipeLineNameEdit这个method中去实现。 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否。(PipeLineName与我写的当前组件有关)。 然后绑定一个双击时的事件@dblclick="startPipeLineNameEdit"。 父组件BoardArea大致代码 //PipeLine是子组件,可见可以有很多个子组件实例,因为v-for了一个数组 <PipeLine v-for="pipeLine in wrappedPipeLineList" :pipeLine="pipeLine" class="pipe-line-item" :key="pipeLine.id" /> 子组件PipeLine大致代码 <span v-show="!isEditingPipeLineName"> ..未双击前 <span @dblclick="startPipeLineNameEdit"></span>