vue點(diǎn)擊其它任何地方隱藏dom

圖片描述

紅色是導(dǎo)入的組件，頭部，身體，底部。我想點(diǎn)擊綠色塊的其它任何地方，都使這塊綠色塊隱藏掉，vue該怎么做呢？

回答

編輯回答

荒城

1 遮罩層，有一個(gè)遮罩層，蓋住其他地方，然后只有綠色按鈕可以點(diǎn)，點(diǎn)擊遮罩層就可以隱藏，
缺點(diǎn)是z-index層數(shù)要控制好，還有就是如果點(diǎn)擊其他功能按鈕，會(huì)失效，因?yàn)橛姓谡謱樱瑢?dǎo)致往往要點(diǎn)擊兩次
2 監(jiān)聽(tīng)，點(diǎn)擊其他地方就關(guān)閉

methods: {
    handleBodyClick(){
        if (綠色區(qū)域出來(lái)了，要判斷點(diǎn)擊其他地方就要關(guān)閉，這樣可以避免綠色區(qū)域已經(jīng)關(guān)閉還在操作) {
          let _con = $(目標(biāo)區(qū)域)
          if (!_con.is(e.target) && _con.has(e.target).length === 0) {
            // 點(diǎn)擊目標(biāo)區(qū)域外的時(shí)候關(guān)閉綠色區(qū)域
          }
        }
    },
},
mounted () {
  document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
  document.removeEventListener('click', this.handleBodyClick)
}

2017年3月19日 22:02

編輯回答

陪妳哭

body上綁定事件，關(guān)閉，組件銷(xiāo)毀前把事件移除。

methods: {
    handleBodyClick(){
        // 關(guān)閉
    },
},
mounted(){
    this.$nextTick(() => {
        document.querySelector('body').addEventListener('click', this.handleBodyClick);
    })
},
beforeDestroy(){
    document.querySelector('body').removeEventListener('click', this.handleBodyClick);
}

2018年9月20日 22:31

編輯回答

孤巷

上面套一個(gè)透明的遮罩層，然后再放綠色的按鈕，這樣點(diǎn)到這個(gè)綠色透明層，隱藏透明的層

2017年7月2日 12:55

編輯回答

涼薄

自問(wèn)自答，最后還是解決了這個(gè)問(wèn)題。

用一個(gè)遮罩層完美的解決了這個(gè)問(wèn)題，并且不需要判斷是否點(diǎn)擊自身。遮罩層和綠色塊不需要嵌套。
遮罩層，fixed定位，寬高100%。綠色塊根據(jù)父元素position定位,設(shè)置一個(gè)z-index為1就好。

層級(jí)關(guān)系：綠色塊>遮罩層>列表頁(yè)面.

 //遮罩層，綁定關(guān)閉方法
    <div class="shade" v-show="submenu.show" @touchstart="closeSubmenu($event)"></div>
//綠色塊，zindex:1
   <div class="submenu" :style="submenu.style" v-show="submenu.show" ref="submenu" >
      <span v-for="item in submenu.list" >{{item}}</span>
    </div>

2017年5月14日 19:02

編輯回答