Vue自定义命令,实现捕获点击对象外部事件处理.

Vue一直有个问题就是,像JQuery这种处理下面这行代码的时候可以直接获取html,body之类的DOM对象.但是Vue的组件没办法这么做.

$('html').click(function() {
      $('.nav-dropdown').hide();
});

常见场景是,下图这样一个下拉框,要点击空白处去隐藏就非常难做.

解决方法就是,添加自定义指令

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
});

使用方法v-click-outside=’closeEvent’

<ul class="nav-list" v-click-outside='closeEvent' v-show="showList">
            <li v-for="item in menuList" :key="item.title" v-on:click="item.isShow = !item.isShow" >
                <router-link :to=item.href>{{item.title}}</router-link>
                <!-- 有子菜单的 -->
                <ul class="nav-dropdown" v-if="item.dropDown" v-show="item.isShow">
                  <li v-for="subTitle in item.dropDown" :key="subTitle.title">
                    <router-link :to=subTitle.href>{{subTitle.title}}</router-link>
                  </li>
                </ul>
            </li>
          </ul>


—-

methods: {
      backHome: function () {
        this.$store.commit("viewState/updateView", "home");
      },
      closeEvent:function(event){
        // console.log('close event called');
        this.menuList.forEach(function(value,key,arr){
          value.isShow=false;
        });
        // this.showList=false;
      }
    }

类似这样.

还有就是使用插件,但是感觉略麻烦.而且其实一般不想引入太多包。管理起来好麻烦。

https://github.com/ndelvalle/v-click-outside

个人主页开发记录

当前目标:在Mars项目,方向,将固定头部和响应式布局结合起来.

后台,直接用iview了.

3D的话让threejs嵌入项目中.

完成目标: 响应式布局研究.


解决了一个组件外关闭下拉框的问题.=.=

-.iView Cli3有插件了,不要用以前的安装方法了.

2.主页写的还好.有些坑处理了.

现在完成了的内容有,点击切换跳转不同的页面,

MGOW是响应式布局固定头.关于现在是响应式布局界面.

博客自然是跳博客.

主页还没想好,在测试多语言.

3D还没开始

后台也没开始.

继续阅读“个人主页开发记录”