158 lines
3.3 KiB
Vue
158 lines
3.3 KiB
Vue
<!-- 虚拟按钮（可设置圆角、背景，边框等） -->
|
||
<template>
|
||
<view class="virtualButton" :style="[btnStyle]" :class="{ 'blockBtn': block }" @click.stop="clickHandle">
|
||
<slot>
|
||
<text>虚拟按钮</text>
|
||
</slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'VirtualButton',
|
||
props: {
|
||
// 按钮高
|
||
btnHeight: {
|
||
type: [Number, String],
|
||
default: 64
|
||
},
|
||
// 按钮类型 [ 'default', 'primary'，'dange' ]
|
||
type: {
|
||
type: String,
|
||
default: 'default'
|
||
},
|
||
// 是否需要边框
|
||
border: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 边框类型：[ 'solid', 'dashed' ]
|
||
borderType: {
|
||
type: String,
|
||
default: 'solid'
|
||
},
|
||
// 边框颜色
|
||
borderColor: {
|
||
type: String,
|
||
default: '#564F5F'
|
||
},
|
||
// 是否为块级
|
||
block: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 形状：[ 'circle', 'round' ]
|
||
shape: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 幽灵属性：背景是否透明
|
||
ghost: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 按钮类型
|
||
btnTypeSet: [ 'default', 'primary', 'dange', 'grey', 'D7E1FD', '376AF5', 'F19149', '61596C', 'F7CE68', 'FFCF00' ],
|
||
// 形状
|
||
btnShapeSet: [ 'circle', 'round' ],
|
||
// 背景颜色（与按钮进行映射）
|
||
bgColor: {
|
||
'default': '#fff',
|
||
'primary': '#5FC48D',
|
||
'dange': '#FE4066',
|
||
'grey': '#999999',
|
||
'D7E1FD': '#D7E1FD',
|
||
'376AF5': '#376AF5',
|
||
'F19149': '#F19149',
|
||
'61596C': '#61596C',
|
||
'F7CE68': '#F7CE68',
|
||
'FFCF00': '#FFCF00',
|
||
},
|
||
// 字体颜色
|
||
fontColor: {
|
||
'default': '#999999',
|
||
'primary': '#FFFFFF',
|
||
'dange': '#FFFFFF',
|
||
'grey': '#FFFFFF',
|
||
'D7E1FD': '#FFFFFF',
|
||
'376AF5': '#FFFFFF',
|
||
'F19149': '#FFFFFF',
|
||
'61596C': '#FFFFFF',
|
||
'F7CE68': '#FFFFFF',
|
||
'FFCF00': '#FFFFFF',
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
// 计算按钮样式
|
||
btnStyle () {
|
||
let _style = {
|
||
"height": this.btnHeight + 'rpx',
|
||
"line-height": this.btnHeight + 'rpx'
|
||
}
|
||
// 背景色/字体颜色
|
||
if (this.btnTypeSet.indexOf(this.type) !== -1) {
|
||
if (this.ghost) {
|
||
_style['background-color'] = ''
|
||
_style['color'] = this.bgColor[this.type]
|
||
} else {
|
||
_style['background-color'] = this.bgColor[this.type]
|
||
_style['color'] = this.fontColor[this.type]
|
||
}
|
||
}
|
||
// 边框
|
||
if (this.border) {
|
||
_style['border-width'] = '2rpx'
|
||
_style['border-style'] = this.borderType
|
||
if (this.ghost) {
|
||
_style['border-color'] = this.bgColor[this.type]
|
||
} else {
|
||
_style['border-color'] = this.borderColor
|
||
}
|
||
}
|
||
// 形状
|
||
if (this.btnShapeSet.indexOf(this.shape) !== -1) {
|
||
if (this.shape === 'circle' && !this.block) {
|
||
_style['min-width'] = this.btnHeight + 'rpx'
|
||
} else {
|
||
_style['padding'] = '0 30rpx'
|
||
}
|
||
_style['border-radius'] = this.btnHeight + 'rpx'
|
||
} else {
|
||
_style['padding'] = '0 30rpx'
|
||
}
|
||
return _style
|
||
}
|
||
},
|
||
methods: {
|
||
clickHandle () {
|
||
this.$emit('click')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.virtualButton {
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
text-align: center;
|
||
|
||
&.blockBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
height: inherit;
|
||
line-height: inherit;
|
||
}
|
||
}
|
||
</style>
|