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

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,否则只会在当期区域生效,如下效果图中当鼠标点击其他部位时不会触发隐藏事件

![QQ录屏20201019105709 00_00_00-00_00_30](https://cdn.easyremember.cn/img/QQ录屏20201019105709 00_00_00-00_00_30.gif)

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()
}

![QQ录屏20201019114921 00_00_00-00_00_30](https://cdn.easyremember.cn/img/QQ录屏20201019114921 00_00_00-00_00_30.gif)

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

image-20201019114937969


前端小白