vue 封装一个插件

Posted 2021-02-14 酌酒一杯。

1、创建一个vue组件button/button.vue

　　

<template>
    <div class="btn" :style="{‘background‘:color,‘color‘:fontColor}">
        {{text}}
    </div>
</template>


<script>
export default {
        name:"button",
 //配置项       props:{
            text:{
                type:String,
                default:"按钮"
            },
            color:{
                type:String,
                default:"#ccc"
            },
            fontColor:{
                type:String,
                default:"#fff"
            }   
        }
}
</script>

　　2、Vue.js 的插件有一个公开方法 install方法，第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，我们可以通过这个方法来定义插件button/index.js

　　

import ButtonCom from "./button.vue";

//创建button这个插件
ButtonCom.install = (Vue)=>{
    Vue.component(ButtonCom.name,ButtonCom)
}


export default ButtonCom;

　　3、全局引入插件            library/index.js

　　

import ButtonCom from "./button";


//UI组件
const components = [
    ButtonCom
]

//进行全局引入
const  plugin = (Vue)=>{
    components.map((component)=>{
        Vue.component(component.name,component)
    })
}

//判断当前是否为浏览器环境，获取vue实例
if(typeof window !=="undefined" && window.Vue){
    plugin(window.Vue);
}




export default {
    plugin
}

　　4、使用插件

 　　import Vue from "vue";

　　import Vuez from "./library";

　　import App from "./App.value;
　　Vue.use(Vuez)

　　

<template>
    <buttton   :text="val"/>
</template>
<script>
    export default{
         data(){
            return{
                val:"点击"
         }

     }

}

</script>