vue2.0+ 移动端 我所遇见的的一些问题（2）插件

一些移动端需要的插件，例如弹窗提示，滑动按钮，确认弹窗，地址选择，日期等等，自己写的话太费时间。所以用这些插件可以加快效率。

我用的是vux，喜欢它的点是有的插件不需要全局引入，vux可以按需引入插件。

主要怎么引用vux 可以参考 官网 。值得注意的是 除了安装vux还需要安装vux-loader

npm install vux --save
npm install vux-loader --save

后面还需要在webpack.base.config.js导入vux-loader

const vuxLoader = require('vux-loader')

然后

const webpackConfig = 原来你的配置项

最后exports

module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

这里我主要要说得还是另外的插件 

1.自定义插件

自己开发插件，先去vue官网了解一下插件开发，分享一个简单的文字提示的，当然这些都是可以找到插件

var Toast = {};
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'center',   // 默认显示位置
        duration:'2500'         // 持续时间
    }
    for(let property in options){
        opt[property] = options[property];  // 使用 options 的配置
    }
    Vue.prototype.$toast = (tips,type) => {
        if(type){
            opt.defaultType = type;         // 如果有传type，位置则设为该type
        }
        if(document.getElementsByClassName('vue-toast').length){
            // 如果toast还在，则不再执行
            return;
        }
        let toastTpl = Vue.extend({
            template: '<div class="vueMesBox"><div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div></div>'
        });
        let tpl = new toastTpl().$mount().$el;
        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
}
module.exports = Toast;

主要是vue的install公开方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

值得注意的是最后这些插件要记得在在main.js中注册同安装的三方插件，当然稍微复杂的插件都需要有回调函数，就需要用到promise

2.修改页面title的插件 vue-wechat-title

npm install vue-wechat-title --save
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

注意的地方是需要在配置路由的地方配置你的页面title，如：

{
      path: '/login',
      name: 'login',
      component: resolve => require(['@/components/login/login'], resolve),
      meta:{
        title:'登陆',
        showBar:false
      }
    },

最后在app或或自己定义的vue文件中的router-view中设置

<template>
  <div id="app">
    <div ></div>
    <router-view v-wechat-title="$route.meta.title"></router-view> 
  </div>
</template>

3.图片懒加载 vue-lazyload

这个插件网上很多博客介绍的也很清楚了，不再赘述，给个别人写的 链 接

但有个小问题因为配置中load.gif/png只有一个 对于不同地方使用懒加载需要设置样式，load.gif/png需要自己设置样式

img[lazy=loading] {
            width: auto;
        }