<template>
<van-button
class="i-button"
type="default"
round
:class="classMap"
:icon="icon"
:size="size"
:loading="loading"
:loading-text="loadingText"
:loading-type="loadingType"
:loading-size="loadingSize"
:disabled="disabled"
@click="$emit('click', $event)"
@touchstart="$emit('touchstart', $event)"
>
<slot />
</van-button>
</template>
<script>
// 这里只提供了 van-button 部分功能, 其他功能需要使用时自行添加
// 参开文档 https://vant-contrib.gitee.io/vant/#/zh-CN/button
export default {
props: {
// default|primary|gradient|grey
type: {
type: String,
default: 'default'
},
// 图标
icon: {
type: String,
default: ''
},
// 是否显示为加载状态
loading: {
type: Boolean,
default: false
},
// 加载状态提示文字
loadingText: {
type: String,
default: ''
},
// 加载图标类型,可选值为 spinner
loadingType: {
type: String,
default: 'circular'
},
// 加载图标大小
loadingSize: {
type: String,
default: '20px'
},
// 是否禁用按钮
disabled: {
type: Boolean,
default: false
}
},
computed: {
classMap() {
return {
primary: this.type === 'primary',
grey: this.type === 'grey',
gradient: this.type === 'gradient'
};
},
size() {
return this.type === 'gradient' ? 'large' : 'small';
}
}
};
</script>
<style lang="less" scoped>
.i-button {
font-size: 13px;
color: #262626;
border-color: #d9d9d9;
padding: 4px 10px;
background-color: #fff;
.van-icon {
font-size: 13px;
}
&:not(.gradient) {
height: 26px;
line-height: 26px;
}
}
.primary {
color: @red;
background-color: @red-bg;
border-color: @red-bg;
}
.grey {
border-color: #f4f5f7;
background-color: #f4f5f7;
}
.gradient {
background: linear-gradient(to right, #e92f60, #f9792a);
border: 1px solid transparent;
border-radius: 10px;
color: #fff;
font-size: 16px;
}
</style>
使用
<i-button type="primary">切换</i-button>
<i-button type="default">查看详情</i-button>
<i-button type="grey" icon="plus">新增报修</i-button>
<i-button type="gradient">渐变</i-button>