vue点击ul中的li显示弹框,点击其他地方隐藏弹框
注意:ref="seatTipOperation"
<ul
ref="seatTipOperation"
v-if="seatTipOperationVisible"
>
<li @click="handleSeatTipAdd()">添加</li>
<li @click="handleSeatTipDelect()">删除</li>
<li @click="handleSeatTipLock()">锁定</li>
<li @click="handleSeatTipFillIn()">插空</li>
<li @click="handleSeatTipSocket()">插座</li>
<li @click="handleSeatTipSwop()">对调</li>
</ul>
handleSeatList () {
this.seatTipOperationVisible = true
}
mounted () {
// this的指向问题
let that = this
document.addEventListener('click', function (e) {
// 这里that代表组件,this代表document
// 冒泡也不会隐藏
if(!that.$refs.seatTipOperation.contains(e.target)){
that.seatTipOperationVisible = false
}
})
}