01月10, 2018

写一个类v-if指令,并封装成vue插件,发布npm

看了vue的指令部分,想自己动手实践一下,就打算自己写一个类似v-if的自定义指令v-diyif,实现最基本的根据data中数据的值隐藏、显示dom功能
这里就不讲解vue指令的东西了,还没理解的可以看一下vue指令文档 地址:https://cn.vuejs.org/v2/guide/custom-directive.html
本文主要是记录自己写一个vue指令,并且封装成vue插件的形式,上传到npm这样一个流程

首先写一个dom和new一个vue对象: 代码很很很简单,看过vue的都能看明白,两个按钮就是到时用来控制改变data中的show的值,来看看,到底自定义的指令v-diyif是否能实现随着数据的变化,隐藏和显示值。

<div id="el">
    <p v-diyif='show'>我是内容</p>
    <button @click="hideClick">hideClick</button>
    <button @click="showClick">showClick</button>
</div>
let vm = new Vue({
        el: '#el',
        data: {
            show: true,
        },
        methods: {
            hideClick() {
                this.show = false;
            },
            showClick() {
                this.show = true;
            }
        }
    });

接着就是写diyif指令(这里写在全局): 代码很简单,就是把dom中绑定在v-diyif中的数据取过来,然后根据该值的布尔类型值,隐藏、显示该dom。

Vue.directive('diyif', {
        bind: function (el, binding, vnode) {
            console.log('binding.value', binding.value);
            if(!binding.value && binding.value !== undefined) {
                el.style.display = 'none';
            }else {
                el.style.display = '';
            }
        }
    });

但是这里有一个问题,按钮点了不起作用,是钩子函数写的有问题,bind是:只调用一次,指令第一次绑定到元素时调用。但是我要实现的是操作data中的show,来修改dom,所以应该选update钩子函数。

Vue.directive('diyif', {
        update: function (el, binding, vnode) {
            if(!binding.value && binding.value !== undefined) {
                el.style.display = 'none';
            }else {
                el.style.display = '';
            }
        }
    });

接下来我们定义一个vueDiyIf插件对象,并在该对象上定义一个install方法。 (Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器)

;(function () {
    let vueDiyIf = {};
    let diyif = {
        update: function (el, binding, vnode) {
            if(!binding.value && binding.value !== undefined) {
                el.style.display = 'none';
            }else {
                el.style.display = '';
            }
        }
    }
    vueDiyIf.install = function (Vue) {
        Vue.directive('diyif', diyif);
    }
})();

把代码放到自执行函数中是为了防止变量污染。
然后,作为一个插件应该要能兼容多种模块规范,所以用如下方式兼容多种模块规范暴露该插件。

if (typeof exports == 'object') {
    module.exports = vueDiyIf;
  } else if (typeof define == 'function' && define.amd) {
    define([], function() {
      return vueDiyIf;
    });
  } else if (window.Vue) {
    window.vueDiyIf = vueDiyIf;
    Vue.use(vueDiyIf);
  }

如何在项目中引入vueDiyIf并使用呢?
(1).非node环境中

我们在上面else if(window.Vue)中其实已经用Vue的全局方法来使用该插件。
所以我们可以直接在项目中使用该指令.。

(2).node环境中

我们可以在项目入口文件中引入该插件,然后全局使用它。
例:
import vueDiyIf from 'vue-diyif';
Vue.use(vueDiyIf);

最后,可以将封装好的插件发布到npm。
1.在Npm官网注册一个账号

2.在项目目录下 使用npm login 登录

3.在项目目录下 使用npm publish 上传插件

4.大功告成,这样以后我们在所有项目中就都可以使用npm install 来下载我们自己封装好的插件啦!

本文链接:http://blog.hiraetho.com/post/imitate-diyif.html

-- EOF --

Comments