92 lines
1.5 KiB
Vue
92 lines
1.5 KiB
Vue
<template>
|
|
<view class="b-wrapper" :class="[buttonSize()]" :style="{ paddingBottom: bottom, marginTop: pdTop, padding: pd }">
|
|
<view
|
|
@tap.stop="handleTap"
|
|
class="b-main"
|
|
:style="{
|
|
color: color,
|
|
backgroundColor: bgColor,
|
|
}"
|
|
hover-class="u-cell-hover"
|
|
hover-stay-time="150"
|
|
>
|
|
<slot>登录</slot>
|
|
</view>
|
|
</view>
|
|
<view :style="{ height }" v-if="height"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from "vue"
|
|
|
|
const props = defineProps({
|
|
color: {
|
|
type: String,
|
|
default: "#fff",
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: "$primaryColor",
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
bottom: {
|
|
type: String,
|
|
default: "75rpx",
|
|
},
|
|
pdTop: {
|
|
type: String,
|
|
default: "30rpx",
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
pd: {
|
|
type: String,
|
|
},
|
|
})
|
|
const size = reactive({
|
|
medium: "medium",
|
|
max: "max",
|
|
})
|
|
const buttonSize = () => {
|
|
return size[props.size]
|
|
}
|
|
const emits = defineEmits(["HandleTouch"])
|
|
const handleTap = () => {
|
|
emits("HandleTouch")
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.b-wrapper {
|
|
padding: 50rpx;
|
|
.b-main {
|
|
position: relative;
|
|
font-size: 33rpx;
|
|
height: 110rpx;
|
|
background-color: $primaryColor;
|
|
border-radius: 20rpx;
|
|
outline: 0;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 33rpx;
|
|
}
|
|
|
|
.u-cell-hover {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
.max {
|
|
padding: 50rpx;
|
|
}
|
|
.medium {
|
|
padding: 0 50rpx 50rpx 50rpx;
|
|
}
|
|
</style>
|