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
    }
  }
  
}

就可以了.

React教程-2 版本v16.2.0

进阶

现在,每个状态都封装到了每个方格组件里。要完成整个游戏,我们要检查一个玩家是否赢得比赛,还有除了X还有O放到方格。为了检查是否赢,我们需要在一个地方获取9个方格信息,而不是每一个方格组件。

You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.

 

Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Pulling state upwards like this is common when refactoring React components, so let’s take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:

React教程-1 版本v16.2.0

在开始之前

我们在创建什么

我们先来开发一个交互的井字棋游戏.

如果你喜欢,你可以直接查看最终项目代码Final Resul.无需担心你现在是否明白理解里面的代码,或者是一些你不熟悉的语法。我们将一步步学习如何制作这个游戏。

玩一下这个游戏,还可以使用悔棋.

好了让我们开始教程.

继续阅读“React教程-1 版本v16.2.0”

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介绍”