cashier-ipad/components/my-components/my-button.vue

<template>
	<view class="">
		<button class="btn" hover-class="btn-hover-class"
		@tap="tap"
		@click="click"
		:disabled="disabled"
		:style="computeStyle()"
		:class="[returnShape,returnType,returnShadow,returnDisabled]"
		>
			<view class="u-flex u-row-center u-col-center auto-center">
				<slot></slot>
			</view>
		</button>
	</view>
</template>

<script setup>
import { computed } from 'vue';
	const props=defineProps({
		disabled:{
			type:Boolean,
			default:false
		},
		plain:{
			type:Boolean,
			default:false
		},
		borderRadius:{
			type:String,
			default:''
		},
		bgColor:{
			type:String,
			default:''
		},
		color:{
			type:String
		},
		shape:{
			//circle square
			type:String,
			default:'square'
		},
		type:{
			type:String,
			default:'primary'
		},
		width:{
			type:[String,Number],
			default:''
		},
		height:{
			type:[String,Number],
			default:'80'
		},
		fontSize:{
			type:[String,Number],
			default:'28'
		},
		fontWeight:{
			type:[String,Number],
			default:'500'
		},
		showShadow:{
			type:Boolean,
			default:false
		}
	})
	const emits=defineEmits(['click','tap'])
	function tap(){
		emits('tap')
	}
	function click(){
		emits('click')
	}
	const shapeClassList={circle:'circle',square:'square'}
	const typeClassList={primary:'primary',default:'default',cancel:'cancel'}
	const returnShape= computed(()=>{
		return shapeClassList[props.shape]
	})
	const returnShadow=computed(()=>{
		return props.showShadow?'shadow':''
	})
	const returnDisabled=computed(()=>{
		return props.disabled?'disabled':''
	})
	const returnType=computed(()=>{
		if(props.plain){
			return 'plain-'+typeClassList[props.type]+' '+' plain'
		}
		return typeClassList[props.type]
	})
	function computeStyle(){
		return `
		line-height:${props.height}rpx;
		${props.width>=0?('width:'+props.width+'rpx;'):''}
		${props.plain?('background-color:transparent;'):''}
		font-size:${props.fontSize}rpx;
		font-weight:${props.fontWeight};
		${props.color?('color:'+props.color+';'):''}
		${props.bgColor?('background-color:'+props.bgColor+';'):''}
		${props.bgColor?('border-color:'+props.bgColor+';'):''}
		${props.borderRadius?('border-radius:'+props.borderRadius+';'):''}
		`
	}
</script>

<style lang="scss" scoped>
	.auto-center{
		margin:  auto;
	}
	.shadow{
		// box-shadow: 0 0 10px #aaa;
		box-shadow: 0 20rpx 60rpx -20rpx rgba(0,84,210,0.5);
	}
	.btn {
		font-size: 28rpx;
		border:1px solid transparent ;
		&.disabled{
			color: #bbb!important;
			border-color: #eee!important;
		}
	}
	.plain{
		background-color: transparent;
	}
	.plain-primary{
		color: $my-main-color;
		border-color: $my-main-color;
	}
	.plain-default{
		color: #999;
		border-color:  #999;
	}
	.plain-cancel{
		color: #999;
		border-color:  #999;
	}
	.primary{
		background-color: $my-main-color;
		color: #fff;
		border-color: $my-main-color;
	}
	.default{
		background-color: transparent;
		color: #999;
		border-color: #999;
	}
	.circle{
		border-radius: 200rpx;
	}
	.square{
		border-radius: 12rpx;
	}
	.btn-hover-class {
		opacity: .6;
	}
</style>