点击按钮显示评论框点击其他部位隐藏

点击按钮显示评论框点击其他部位隐藏

1. 使用纯点击事件（适合多个输入框）

点击按钮触发显示事件，修改输入框的状态为显示；在最外层div添加关闭事件，点击其他部位触发关闭事件（需要使用阻止冒泡来中断）

.review(@click="hiddenForm")
  el-button(type='submit', @click.stop="showForm") 显示
  .red(v-if="isShowForm",@click.stop="showForm")
    el-input

显示隐藏方法如下（isShowForm是显示隐藏标记）

methods: {
  showForm() {  // 显示评论框
    this.isShowForm = true
  },
    hiddenForm() {  // 隐藏评论框
      this.isShowForm = false
    }
},

hiddenForm方法在真正使用中 需要绑定到最外层app，否则只会在当期区域生效，如下效果图中当鼠标点击其他部位时不会触发隐藏事件


2. 使用焦点触发隐藏（适合单个输入框）

触发显示事件时聚焦到输入框，当失去焦点时触发隐藏事件（好处是不需要在最外层绑定隐藏事件，但是需要阻止失去焦点）

.review
  el-button(type='submit', @click.stop="showForm") 显示
  .red(v-if="isShowForm", @mousedown.prevent)
    el-input(ref="in", @blur="hiddenForm", @mousedown.stop)
    el-button(@click="submit") click

显示隐藏事件

showForm() {  // 显示评论框
  if(!this.isShowForm) {
    this.isShowForm = true
    this.$nextTick(() => {
      this.$refs.in.focus()
    })
  }
},
hiddenForm() {  // 隐藏评论框
  this.isShowForm = false
},
submit() {
  console.log(1);
  this.$refs.in.blur()
}


点击当前div不失去焦点，点击按钮执行事件并隐藏输入框