shop-app/components/UiButton.vue

<!--
 * @Author: ch
 * @Date: 2022-03-26 10:06:38
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 20:07:26
 * @Description: file content
-->
<template>
	<button :class="`ui-btn ui-btn__${type} ui-btn__${size} ${disable ? ' x ui-btn__disabed' : ' xx'}`" @click="click"><slot></slot></button>
</template>
<script>
export default {
	props : {
		type : {
			type : String,
			default : 'line' //gradual 渐变色 solid 纯色 line轻线条 primaryLine彩色线
		},
		size : {
			type : String,
			default : 'normal' //normal 60 max 80 min 50
		},
		disable:{
			type : Boolean,
			default : false
		}
	},
	methods:{
		click(){
			!this.disable && this.$emit('click');
		}
	}
}
</script>
<style lang="scss" scoped>
.ui-btn{
	display: inline-block;
	padding: 0 50rpx;
	border-radius: 50rpx;
	&::after{
		display: none;
	}
	&__normal{
		height: 70rpx;
		line-height: 70rpx;
		font-size: $font-size-base;
	}
	&__min{
		height: 60rpx;
		line-height: 60rpx;
		font-size: $font-size-base;
	}
	&__small{
		height: 50rpx;
		line-height: 50rpx;
		font-size: $font-size-base;
	}
	&__max{
		height: 80rpx;
		line-height: 80rpx;
		font-size: $font-size-lg;
	}
	&__gradual{
		background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
		color: $color-grey0;
	}
	&__solid{
		background: $color-yellow3;
		color: $color-grey0;
	}
	&__line{
		background: none;
		color: $color-grey6;
		border: 1px solid $color-grey4;
	}
	&__primaryLine{
		background: none;
		color: $color-yellow3;
		border: 1px solid $color-yellow3;
	}
	&__disabed{
		opacity: .5;
	}
}
</style>