vue开发过程中，发现有大量的代码是重复的，这些代码就非常有必要做成公共方法，从一开始就开始构建项目就做好准备，不仅能积累经验，也可以提高开发效率。

1.filter 过滤

vue的filter通道，可以对一些数据进行预处理，使用起来非常方便，非常适合做成全局组件随时使用。

• vueFilter.js

const vueFilterFuns = {
    capitalize(value){
        if (!value) return ''; 
        value = value.toString(); 
        return value.charAt(0).toUpperCase() + value.slice(1);
    },
    ...
}
const install = (vue) => { 
    Object.keys(vueFilterFuns).forEach((key) => { 
        vue.filter(key, vueFilterFuns[key]); 
    });
}; 
const vueFilter = { install }; 
export default vueFilter;

• viewVue.vue

...
<!-- 在 `v-bind` 中 --> 
<div :class="rawId | capitalize"></div>
<!-- 在双花括号中 -->
<p>{{ message | capitalize }}</p>
...

2.自定义全局组件批量注册

• vueComponentsAll.js

const components = {
    MyTable:import('@/components/MyTable'),
    Breadcrumb:import('@/components/Breadcrumb'),
    ...
}
export default {
    install(vue) {
        Object.keys(components).forEach((key) => { 
            vue.component(key, components[key]); 
        });
    }
};

3.自定义全局directive

1.resetButton

• resetButton.js

export const resetButton = {
    inserted(el, binding) {
        el.addEventListener("click", () => {
            if (!el.disabled) {
                el.disabled = true; el.style.cursor = "not-allowed";
                setTimeout(() => {
                    el.disabled = false; el.style.cursor = "pointer";
                }, binding.value || 1000);
            } 
        });
    },
}

• vueDirective.js

import {resetButton} from '@/resetButton.js'
export default (vue) => {
    vue.directive("resetButton",resetButton);
}

2.inputBlurHandlerValue

• inputBlurHandlerValue.js

function startsWithFun(value) {
    let bool = false;
    ['http://','https://'].forEach(v => {
        if(value.startsWith(v)) {
            bool = true;
        }
    });
    return bool;
}
function valueHandler(value) {
    if(value && !startsWithFun(value)) {
        return `http://${value}`
    } else {
        return value;
    }
}
const inputBlurHttp = {
    inserted(el,binding) {
        el.addEventListener('blur',(e) => {
            binding.value(valueHandler(e.target.value),binding.arg);
        });
    },
    unbind(el,binding) {
        el.removeEventListener('blur',(e) => {
            binding.value(valueHandler(e.target.value),binding.arg);
        });
    }
}
export default {
    install(Vue) {
        Vue.directive('inputBlurHttp',inputBlurHttp);
    }
}

• vueView.vue

<el-button v-resetButton="2000">确 定</el-button>
<input v-model="urlStr" v-inputBlurHttp[argStr]="inputBlurHttpFun"></input>
...
<script>
export dafault {
    ...
    data() {
        return {
            urlStr:'',
            argStr:'sysUrl'
        }
    },
    ...
    methods:{
        inputBlurHttpFun(val,prop){
            this.$set(this,'urlStr',val);
        }
    }
}
</script>

main.js

import Vue from "vue";
...
import vueFilter from "@/utils/vueFilter";
import vueComponentsAll from '@/vueComponentsAll';
import vueDirective from '@/vueDirective';
import inputBlurHandlerValue from '@/inputBlurHandlerValue';
//在入口js中的进行注册;
Vue.use(vueFilter);
Vue.use(vueDirective);
//自定义全局组件批量注册
Vue.use(vueComponentsAll);
Vue.use(inputBlurHandlerValue);