1.button.vue
<style lang="scss" scoped>
.defalut{
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;
}
.primary{
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.success{
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
</style>
<template>
<button class="defalut" :class="type">
<slot>
按钮
</slot>
</button>
</template>
<script>
export default {
props:{
type:{
type:String,
default:''
}
}
}
</script>
2.使用
<v-button type='primary'>主要按钮</v-button>
<v-button type='success'>成功按钮</v-button>