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

vue cli 3.0 引入 jQuery 插件

虽然说,jQuery可以做到的,都可以用vue做到.

但是有时候用习惯了有些还是想用下jQuery.

不说废话了.网上都是cli2 的教程,我就写一下3.0的改法.

步骤其实很简单,首先安装

npm install jquery --save

第二步改配置vue.config.js

 

增加

chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

例子

// vue.config.js
const webpack = require('webpack');

module.exports = {
  // options...
  assetsDir: 'vasset',

  lintOnSave: undefined,
  chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

  pluginOptions: {
    i18n: {
      locale: 'zh',
      fallbackLocale: 'zh',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
  
}

就可以了.

VueJS 覆盖components的CSS方法

遇到了一个问题需要覆盖组件的CSS。但是如果直接同名写是没办法改的。

所以要加一个Class类似下面这种做法。

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from 'xxx/CompB'

export default {
  components: {
    CompB
  }
}
</script>

<style>
  .wrapper .compb-header {
    color: red;
  }
</style>

Vue好用的日历组件vue-simple-calendar介绍

本来找了一下,感觉vue-fullcalendar 是比较合适我的想法。想找个类似QQ日历的开源项目。可惜作者已经一年没更新了。而且有点复杂。

介绍下vue-simple-calendar

Simple Vue component to show a month-grid calendar with events

作者也是和我想的差不多。不过这位仁兄自己写了一个,我就不造轮子了。

为什么用这个。

  • 支持拖拽(触摸手机设备还不行,作者说之后可能做)
  • vue2.0
  • 还在更新
  • 多语言
  • 轻量
  • flex box layout
  • 没有其他额外依赖(Moment, JQuery, etc.)
  • 使用事件。
  • 也许有机会再做些扩展。

继续阅读“Vue好用的日历组件vue-simple-calendar介绍”