鍍金池/ 問答/HTML/ vue.js遇到的一個小問題

vue.js遇到的一個小問題

有這么一個需求，

假如有一個div元素,點擊他的時候他要觸發(fā)他的點擊事件之后再隱藏

如果點擊了別的地方，那么他也要隱藏

需要用vue實現(xiàn)，大家有什么好的想法

回答
編輯回答
骨殘心

你應(yīng)該是做Modal對吧，那么你記住modal也有遮罩，你給遮罩和按鈕都添加同一個dismiss事件，用于隱藏你的內(nèi)容。

2017年11月11日 01:07
編輯回答
尕筱澄

你這不就是彈出層的需求?
這玩意一般是用指令去做,在全局dom監(jiān)聽一個click事件,當(dāng)發(fā)現(xiàn)點擊的不是綁定指令的元素的時候,隱藏它

2018年9月11日 03:16
編輯回答
只愛你

我猜測你大概是想實現(xiàn)個模態(tài)框吧。

<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>
2018年8月5日 02:12
編輯回答
雨蝶

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

 <body>
        <div id="app">
          <div @click="isShow = false" style="padding:100px;background:#ededed;" class="other">
            {{text}} <!-- 這是外部內(nèi)容區(qū)域 -->
            <button @click.stop="doHide"  v-show="isShow" class="self">點擊<!-- 這是可點擊區(qū)域 --></button>
          </div>
        </div>
    </body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
          isShow: true,
          text:""
        },
        methods: {
          doHide (e){
            this.text = "測試下"
            this.isShow = false;
          }
        }
    })
</script>
2018年2月26日 11:15
編輯回答
葬愛

隱藏的寫在最外層 點擊的就寫在你說的那個div上就行了 事件有冒泡

2017年10月18日 11:39
編輯回答
擱淺
<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>
2018年3月26日 15:25