版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yhflyl/article/details/88391328
1. 什么UI组件库
个人认为，UI组件库是一个将一些常用的dom分装为一个可以多种样式切换、可扩展、使用方便的一套工具。
现在比较好的如： Vuetify、Element；但是也存在我们一些在我们自己项目中需要实现自己的特定需求。
2. vue的组件
前端组件化是现在前端框架中一个非常重要的思想元素，将页面内容进行拆分之后，可独立维护，可复用性大大提高。哪个地方出问题，直接去修改的对应的组件即可。团队人员配置多的时候，你写你的header，我写我的footer。相互不影响，不冲突。而组件的合理拆分，也就变成了衡量水平的一个维度之一。
3. 开始干货（上面都是废话）
（1）、我们对button组件的扩展分装
定义 可以方便后期扩展
<template>
<button
class="ml-btn"
:class="[
type ? 'ml-btn-' + type : '',
size ? 'ml-btn-' + size : ''
]"
>
<slot/>
</button>
</template>
<script>
export default {
name: 'MlButton',
date: {
'ml-btn': false
},
props: {
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'default'
}
},
methods: {
}
}
</script>
最重要的是样式，首先定义一个基础的ml-btn样式，然后在颜色、大小、内容、圆角等方面进行修改。
<style scoped lang="stylus">
.ml-btn
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
.ml-btn-primary
color: #fff;
background-color: #409eff;
border-color: #409eff;
.ml-btn-success
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
.ml-btn-mini
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
.ml-btn-medium
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
</style>
（2）、使用自定义的组件
<template>
<div>
<ml-button type="primary" @click.native="getInfoHandle">主要按钮</ml-button>
<ml-button type="success" @click.native="getInfoHandle">成功按钮</ml-button>
</div>
</template>
<script>
import MlButton from '@/base/MlButton'
export default {
name: 'Home',
components: {
MlButton
},
methods: {
getInfoHandle (event) {
alert('6666')
}
}
}
</script>
<style scoped lang='stylus'>
</style>