问题描述
当点击“添加按钮”的时候,会显示一个列表,当再次点击“添加按钮”,这个列表就会关闭,这样做的话,交互性并不是那么良好,所以就需要修改一下啦……
思路及解决办法
增加的交互就是,在用户点击该页面的其他地方的时候,关闭这个列表,下面就是这个的具体实现
梳理下用的东西:
1. ref 来获取元素,可以参考这里
2. watch来监测showGoodsList变量的变化
3. 事件的添加方式,这里判断的事件对象ev.target既不能是那个按钮,也不能在显示的列表中,满足这两个条件,才可以继续处理
<div class="form-inline relative">
<button class="btn btn-creat" @click="showGoodsList=!showGoodsList" ref="trigger">
<i class="icon-plus5 font16" style="vertical-align: text-bottom;"></i>
添加按钮
</button>
<div class="absolute panel goodsPop searchGoods" v-show="showGoodsList" ref="menu">
<ul>
<li>...</li>
</ul>
</div>
</div>
new Vue({
....
data() {
showGoodsList:false,
},
watch : {
showGoodsList: function (newVal) {
if (newVal) {
let self = this;
let trigger = this.$refs.trigger;
let menu = this.$refs.menu;
if (self.showGoodsList) {
self._closeEvent = self.listen(window, 'click', function (ev) {
if (!trigger.contains(ev.target) && !menu.contains(ev.target)) {
self.showGoodsList = false;
self._closeEvent.remove();
}
})
}
}
},
},
methods: {
listen: function (target, event, cb) {
if (target.addEventListener) {
target.addEventListener(event, cb, false);
return {
remove: function () {
target.removeEventListener(event, cb, false);
}
}
} else {
target.attachEvent('on' + event, cb);
return {
remove: function () {
target.detachEvent('on' + event, cb);
}
}
}
},
}
})
加油,^_^