鍍金池/ 問(wèn)答/HTML/ vue點(diǎn)擊區(qū)域外v-show恢復(fù)隱藏？

vue點(diǎn)擊區(qū)域外v-show恢復(fù)隱藏？

<div v-for="(tab,index) in tableList">
<span @click="toggle(index,$event)" data-status="false" class="cursor">
詳情</span>
<div v-show="status ===index"></div>
</div>
點(diǎn)擊v-showw外隱藏？？？？？？？？？

let tableShow = document.querySelector('.tableShow')
let cursor = document.querySelector('.cursor ')
let body = document.querySelector('.body')
body.addEventListener('click', (e) => {
if (e.target !== tableShow && e.target !== cursor) {
for (let i = 0, el = document.querySelectorAll('.tableShow'); i < el.length; i++) {
//還原v-show?????
}
for (let i = 0, el = document.querySelectorAll('.el-table_1_column_7>.cursor'); i < el.length; i++) {
el[i].dataset.status = 'false'
}
}
})

//vue.js
toggle(index){
let tar = event.target
if (tar.dataset.status == 'false') {

  this.status = index
  for (let i = 0, el = document.querySelectorAll('.cursor'); i < el.length; i++) {
  el[i].dataset.status = 'false'
  }
  tar.dataset.status = 'true'

} else {

  this.status = false
  tar.dataset.status = 'false'

}
}

回答
編輯回答
哎呦喂

當(dāng)然是用指令解決啦：
https://github.com/freeze-com...

2017年12月29日 14:10
編輯回答
赱丅呿

核心思想就是監(jiān)聽(tīng)document的click/touchstart
用contains這個(gè)方法去判斷點(diǎn)擊的元素是否在區(qū)域外

    mounted() {
        document.addEventListener('click', this.handleDocumentClick);
        document.addEventListener('touchstart', this.handleDocumentClick);
    },
    
    methods: {
            handleDocumentClick(e) {
                if (!this.$el.contains(e.target)) {
                    this.isShow = false;
                } 
        }
    }
2017年9月12日 12:58