vue 封装一个插件

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

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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

  

1
2
3
4
5
6
7
8
9
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>    
复制代码

 

posted @   酌酒一杯。  阅读(618)  评论(0编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示