一、定制自己的组件
- 在
src
下新建一个libs
- 设计组件传值样式
Button.vue
<template>
<button :class="['my-btn', btnStyle]">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'MyBtn',
props: {
btnStyle: String
},
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="less" scoped>
.my-btn {
height: 32px;
padding: 0 15px;
border: 1px solid #d9d9d9;
outline: none;
border-radius: 4px;
background-color: #fff;
color: rgba(0,0,0,.65);
}
.my-btn.primary {
background-color: #40a9ff;
color: #FFF;
}
.my-btn.success {
background-color: #52c41a;
color: #FFF;
}
.my-btn.danger {
background-color: #ff7371;
color: #FFF;
}
.my-btn.warn {
background-color: #faad14;
color: #FFF;
}
</style>
- 在myUI的index导出
index.js
import MyBtn from './Button'
export default {
components: {
MyBtn
}
}
二、在main.js
全局注入自己的组件
import MyUi from '@/libs/myUi'
// 注入MyUi
Vue.mixin(MyUi)
三、使用
<template>
<div>
<my-btn >MYBTN</my-btn>
<my-btn btnStyle="primary">MYBTN</my-btn>
<my-btn btnStyle="success">MYBTN</my-btn>
<my-btn btnStyle="warn">MYBTN</my-btn>
<my-btn btnStyle="danger">MYBTN</my-btn>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
效果