<dd id="5cfdx"></dd>

vue.js遇到的一個小問題

有這么一個需求，

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

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

需要用vue實現，大家有什么好的想法

回答

編輯回答

骨殘心

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

2017年11月11日 01:07

編輯回答

尕筱澄

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

2018年9月11日 03:16

編輯回答

只愛你

我猜測你大概是想實現個模態(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}} <!-- 這是外部內容區(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