165 lines
3.1 KiB
Vue
165 lines
3.1 KiB
Vue
<template>
|
|
<view class="btn-container"
|
|
:style="{width, marginTop, marginBottom}"
|
|
:hover-class="isActive ? 'fixed-mask-layer-radius8' : 'none'"
|
|
hover-start-time="0"
|
|
hover-stay-time="50"
|
|
@click="submit()"
|
|
>
|
|
|
|
<!--线框按钮-->
|
|
<view v-if="isBorderButton"
|
|
class="wireframe-btn">
|
|
<view class="btn flex-c" :style="{color: iconColor}">
|
|
<view class="icon" v-if="iconType">
|
|
<me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
|
|
</view>
|
|
<text class="text">{{ text }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!--纯色按钮-->
|
|
<view v-else
|
|
:class="['flex-c', 'btn', isActive ? '' : 'btn-default']"
|
|
:style="{backgroundColor: btnBgColor, color: textColor}"
|
|
>
|
|
<view class="icon" v-if="iconType">
|
|
<me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
|
|
</view>
|
|
<text class="text">{{ text }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from 'vue';
|
|
import MeIcon from "../../components/me-icon/me-icon";
|
|
|
|
const emit = defineEmits(["click"]);
|
|
const props = defineProps({
|
|
//按钮文本
|
|
text: {
|
|
type: String,
|
|
required: false,
|
|
default: '保 存',
|
|
},
|
|
//按钮 icon 样式
|
|
iconType: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
//是否可点击
|
|
isActive: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
//是否为线框按钮
|
|
isBorderButton: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
//按钮宽度
|
|
width: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
//距离顶部
|
|
marginTop: {
|
|
type: String,
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
//距离底部
|
|
marginBottom: {
|
|
type: String,
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
//按钮活动颜色
|
|
activeColor: {
|
|
type: String,
|
|
required: false,
|
|
default: 'var(--themeColor)',
|
|
},
|
|
//按钮文本颜色
|
|
textColor: {
|
|
type: String,
|
|
required: false,
|
|
default: '#FFFFFF',
|
|
},
|
|
//指定icon颜色
|
|
customIconColor: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
}
|
|
});
|
|
|
|
const btnBgColor = computed(() => {
|
|
if (!props.isActive) {
|
|
return 'var(--contentBgColor)'
|
|
}
|
|
|
|
return props.activeColor;
|
|
})
|
|
|
|
//计算 icon 颜色
|
|
const iconColor = computed(() => {
|
|
if (props.customIconColor) {
|
|
return props.customIconColor
|
|
}
|
|
|
|
if (!props.isActive) {
|
|
return 'var(--descriptionColor)'
|
|
}
|
|
|
|
if (props.isBorderButton) {
|
|
return 'var(--themeColor)'
|
|
}
|
|
|
|
return '#FFFFFF';
|
|
})
|
|
|
|
//提交
|
|
const submit = () => {
|
|
emit("click");
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-container {
|
|
.icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 30rpx;
|
|
line-height: 112rpx;
|
|
text-align: center;
|
|
.text {
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
}
|
|
}
|
|
.btn-active {
|
|
color: #FFFFFF;
|
|
}
|
|
.btn-default {
|
|
color: var(--descriptionColor);
|
|
}
|
|
|
|
.wireframe-btn {
|
|
.btn {
|
|
border: 1px solid var(--contentBgColor);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|