first

components/my-components/my-button.vue

@@ -0,0 +1,153 @@
+<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'
+		},
+		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 `
+		height:${props.height}rpx;
+		line-height:${props.height}rpx;
+		${props.width>=0?('width:'+props.width+'rpx;'):''}
+		${props.plain?('background-color:transparent;'):''}
+		font-size:${props.fontSize}rpx;
+		${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 #999;
+	}
+	.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>