vue.js遇到的一个小问题

天一同学
    19723570

    有这么一个需求，

    假如有一个div元素,点击他的时候他要触发他的点击事件之后再隐藏

    如果点击了别的地方，那么他也要隐藏

    需要用vue实现，大家有什么好的想法

    vue.js
    回复
    阅读 2.5k
    6 个回答
    得票最新
    chess99
      70421326
      <template>
<div>
  <el-button type="primary" v-if="buttonShow" @click="onClickButton1">button1</el-button>
  <el-button type="primary" @click="buttonShow=false">click to hide button1</el-button>
</div>
</template>

<script>
export default {
  data() {
    return {
      buttonShow: true
    };
  },
  methods: {
    onClickButton1() {
      alert("button1 clicked");
    }
  }
};
</script>
      回复
      _Nathan
        2473

        隐藏的写在最外层 点击的就写在你说的那个div上就行了 事件有冒泡

        回复
        qk4089
          176510

          你这不就是弹出层的需求?
          这玩意一般是用指令去做,在全局dom监听一个click事件,当发现点击的不是绑定指令的元素的时候,隐藏它

          回复
          邓海
            301715

            你应该是做Modal对吧，那么你记住modal也有遮罩，你给遮罩和按钮都添加同一个dismiss事件，用于隐藏你的内容。

            回复
            Dean
              205146

              我猜测你大概是想实现个模态框吧。

              <body>
    <div id="app">
      <div @click="btnShow = false" style="width: 100vw;height: 100vh; background-color: rgba(100,100,100,0.2);" v-show="btnShow">
        <button @click.stop="doAndThenHide">点击</button>
      </div>
    </div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
          btnShow: true
        },
        methods: {
          doAndThenHide (ev){
            console.log(ev.target.nodeName);
            this.btnShow = false;
          }
        }
    })
</script>
              回复
              大雪小雪
                13316

                我自己有个想法大概如下思路：

                 <body>
        <div id="app">
          <div @click="isShow = false" style="padding:100px;background:#ededed;" class="other">
            {{text}} <!-- 这是外部内容区域 -->
            <button @click.stop="doHide"  v-show="isShow" class="self">点击<!-- 这是可点击区域 --></button>
          </div>
        </div>
    </body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
          isShow: true,
          text:""
        },
        methods: {
          doHide (e){
            this.text = "测试下"
            this.isShow = false;
          }
        }
    })
</script>
                回复
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏
                2517