点击页面关闭某个打开的列表

问题描述

当点击“添加按钮”的时候，会显示一个列表，当再次点击“添加按钮”,这个列表就会关闭，这样做的话，交互性并不是那么良好，所以就需要修改一下啦……

思路及解决办法

增加的交互就是，在用户点击该页面的其他地方的时候，关闭这个列表，下面就是这个的具体实现
梳理下用的东西：
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);
                  }
              }
          }
      },
    }
})

加油，^_^