Vue2 button 组件
props校验
type: {
type: String,
default: '',
validator: value => {
return ['', 'success', 'primary', 'warning', 'danger'].includes(value)
}
},
vue 绑定 class
<template>
<button class="r-button" :disabled="disabled" :class="styleClass" @click="handleClick">
<span v-if="icon">
<r-icon :name="icon"></r-icon>
</span>
<slot></slot>
</button>
</template>
computed: {
styleClass () {
// 就是一种写法，类名称绑定对象，对象的值是true，那么有这个类名
return {
"is-disabled": this.disabled,
// 对象属性如果是变量用中括号
// [`is-${this.type}`]: this.type,
[`r-button--${this.type}`]: this.type,
'is-round': this.round
}
}
},
// 后面所有的
.r-button + .r-button {
margin-left: 10px;
}
// 按钮点击后（只有一个）
.r-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
// 不可点击
.r-button.is-disabled,
.r-button.is-disabled:focus,
.r-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}