vue.js遇到的一个小问题

有这么一个需求，

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

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

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

vue.js

阅读 2.5k

6 个回答

得票最新

大雪小雪

13316

发布于
2018-04-11

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

 <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>

Dean

205146

发布于
2018-04-11

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

<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>

邓海

301715

发布于
2018-04-11

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

chess99

70421326

发布于
2018-04-11

<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>