fs-uni-template/components/fs-button/fs-button.vue

<template>
	<button
		hover-class="fs-hover"
		class="fs-button"
		:class="[
			type,
			size,
			plain ? 'plain' : '',
			radius ? 'radius' : '',
			round ? 'round' : '',
			disabled ? 'disabled' : '',
			block ? 'block' : '',
			full ? 'block full' : ''
		]"
		:style="[{ width: width }, customStyle]"
		:open-type="openType"
		:form-type="formType"
		@getuserinfo="getuserinfo"
		@contact="contact"
		@getphonenumber="getphonenumber"
		@opensetting="opensetting"
		@error="error"
		@click="handleClick"
	>
		<view class="fs-loader" v-if="loading"></view>
		<template v-else>
			<slot></slot>
		</template>
	</button>
</template>

<script>
/**
 * 按钮组件
 * @description 按钮组件
 * @property {String} openType 参考小程序
 * @property {String} formType 参考小程序
 * @property {String} size = [mini | small | medium] 按钮大小
 * @property {Boolean} plain 是否镂空
 * @property {Boolean} radius 是否圆角
 * @property {Boolean} round 是否半圆
 * @property {Boolean} loading 加载效果
 * @property {Boolean} disabled disabled
 * @property {Boolean} full 通屏按钮
 * @property {Boolean} block 块状按钮
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 * @property {String} width 按钮宽度
 * @property {Object} customStyle 按钮自定义样式
 * @property {String} type = [primary | danger | warning | info | success | default] 按钮颜色类型
 */
export default {
	name: 'fs-button'
}
</script>

<script setup>
import { computed, useAttrs } from 'vue'

const props = defineProps({
	openType: String,
	formType: String,
	size: {
		type: String,
		validator(value) {
			return ['mini', 'small', 'medium'].includes(value)
		}
	},
	type: {
		type: String,
		default: 'primary',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'default'].includes(value)
		}
	},
	plain: Boolean,
	radius: Boolean,
	round: Boolean,
	disabled: Boolean,
	full: Boolean,
	block: Boolean,
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	},
	width: String,
	customStyle: {
		type: Object,
		default() {
			return {}
		}
	},
	loading: Boolean
})

const emits = defineEmits(['click', 'getuserinfo', 'contact', 'getphonenumber', 'opensetting', 'error'])

const handleClick = e => {
	if (props.link && !props.disabled) {
		uni[props.linkType]({
			url: props.link
		})
	}
	!props.disabled && emits('click')
}
const getuserinfo = event => {
	emits('getuserinfo', event.detail)
}
const contact = event => {
	emits('contact', event.detail)
}
const getphonenumber = event => {
	emits('getphonenumber', event.detail)
}
const opensetting = event => {
	emits('opensetting', event.detail)
}
const error = event => {
	emits('error', event.detail)
}
</script>

<style lang="scss" scoped>
.fs-button {
	font-weight: normal;
	font-size: 14px;
	color: #fff;
	padding: 0 40rpx;
	line-height: 1;
	text-align: center;
	border-radius: 0;
	display: inline-block;
	vertical-align: bottom;
	background-color: #cfcfcf;
	margin: 0;
	border: 0;
	height: 70rpx;
	line-height: 70rpx;

	&.primary,
	&.primary.selected,
	&.selected {
		background-color: var(--primary);
	}
	&.success {
		background-color: var(--success);
	}
	&.info {
		background-color: var(--info);
	}
	&.warning {
		background-color: var(--warning);
	}
	&.danger {
		background-color: var(--danger);
	}

	&.plain,
	&.plain.selected {
		background-color: transparent;
		box-shadow: inset 0 0 0 1px currentColor;
		color: #999999;
	}

	&.medium {
		// width: auto !important;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 13px;
		padding: 0 30rpx;
	}
	&.small {
		width: auto !important;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 12px;
		padding: 0 20rpx;
	}
	&.mini {
		width: auto !important;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 12px;
		padding: 0 20rpx;
	}
	&.block {
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		margin-left: var(--gutter) !important;
		margin-right: var(--gutter) !important;
		font-size: 18px;
		width: auto;

		&.radius {
			border-radius: 16rpx;
		}
	}
	&.full {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	&::after {
		border: none;
	}

	&.radius {
		border-radius: 8rpx;
	}
	&.round {
		border-radius: 30px;
	}

	&.plain.primary,
	&.plain.selected {
		color: var(--primary);
	}

	&.plain.success {
		color: var(--success);
	}

	&.plain.warning {
		color: var(--warning);
	}

	&.plain.danger {
		color: var(--danger);
	}

	&.plain.info {
		color: var(--info);
	}

	&.disabled {
		opacity: 0.5;
	}
}

.fs-hover {
	opacity: 0.5;
}

.fs-loader {
	display: inline-block;
	width: 40rpx;
	height: 40rpx;
	color: inherit;
	vertical-align: middle;
	border: 4rpx solid currentcolor;
	border-bottom-color: transparent;
	border-radius: 50%;
	animation: 1s loader linear infinite;
	position: relative;
}
@keyframes loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>