new-cashier/jeepay-ui-uapp-face/components/JButton/JButton.vue

38 lines
863 B
Vue

<template>
<view class="button-wrapper" hover-class="hover-button" hover-stay-time="50" :style="{
backgroundColor: bgColor, color: color, borderColor: bdColor, fontSize: size +'rpx' }" @tap="emits('click')">
<slot />
</view>
</template>
<script setup>
const props = defineProps({
bgColor: { type: String, default: '' },
color: { type: String, default: '' },
bdColor: { type: String, default: '' },
size: { type: Number }
})
const emits = defineEmits(['click'])
</script>
<style lang="scss" scoped>
.button-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 90%;
height: 110rpx;
background-color: $v-primary;
color: #fff;
border-radius: 14rpx;
font-size: 32rpx;
border: 1rpx solid transparent;
// background-color: transparent;
}
.hover-button {
opacity: 0.5;
}
</style>