仿element ui实现自定义UI插件

有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。博主最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来写一个自己的插件。
首先看一下想要实现的效果在这里插入图片描述
这种UI设计的element中并没有想要样式这时就需要我们自己进行书写
1.首先创建一个插件文件

<template>
    <div :class="
    type=='Default'?'btn'
    :type=='tj'?'btn tj'
    :type=='yd'?'btn yd'
    :type=='ps'?'btn ps'
    :type=='dd'?'btn dd'
    :type=='success'?'btn success'
    :'btn'
    ">
        <img src="../../assets/img/tj.png" v-if="type=='tj'"/>
        <img src="../../assets/img/yd.png" v-if="type=='yd'"/>
        <img src="../../assets/img/dd.png" v-if="type=='ps'"/>
        <img src="../../assets/img/ps.png" v-if="type=='dd'"/>
        <img src="../../assets/img/success.png" v-if="type=='success'"/>
        <slot></slot>
    </div>
</template>


<script>
export default{
    name:"yang-Button",
    props:{
        type:{
            type:String,
            default:"Default"
        }
    }
}
</script>

<style scoped>
.btn{
    border-color: #d9ecff;
    display: inline-block;
    background-color: #ecf5ff;
    height:32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
     white-space: nowrap;
}
.tj{
    color: #0091FF;
}
.yd{
    color: #07C160;
}
.ps{
    color:#FF8B5F;
}
.dd{
    color:#FF8B5F;
}
.success{
color:#A7A9AD;
}
</style>

设置好样式及判断信息
2.在当前根目录下创建一个js文件

import Button from "./index.vue";

 Button.install = (Vue)=>{
    Vue.component(Button.name,Button)
}

export default Button;

在外层再创建js文件

import Button from "./button"
const components = [
    Button
]
const install  = (Vue)=>{
    for(var key in components){
        Vue.component(components[key].name,components[key])
    }
}
export default {
    install,
    Button
}

3.在main.js中直接使用就可以了

import YangUI from "./common/button/index"
Vue.use(YangUI)

4.在想要用的页面中就可以直接使用

<template slot-scope="scope">
            <yang-Button type="tj" v-if="scope.row.currentStatus=='1'&&scope.row.display!=='1'">已提交</yang-Button>
            <yang-Button type="yd" v-if="scope.row.currentStatus=='1'">已读</yang-Button>
            <yang-Button type="ps" v-if="scope.row.currentStatus=='4'">配送中</yang-Button>
            <yang-Button type="success" v-if="scope.row.currentStatus=='0'">已完成</yang-Button>
</template>

仿element ui实现自定义UI插件

悦读