apply-assistant-v3/components/button.vue

<template>
	<view class="g-components-button">
		<button class="bocai-btn" :class="['bocai_btn_size_' + size, 'bocai_btn_mode_' + mode, 'bocai_btn_type_' + type, 'g_w_' + width, 'g_h_' + height, customBgColor ? 'customBgColor' : '']" :style="{ lineHeight: height - 2 + 'px', padding: 0, color: color ? color : '' }" :hover-stop-propagation="true" hover-class="thover" @click="handleClick" :form-type="formType" :open-type="openType" @getphonenumber="getphonenumber">
			<view class="g_flex_row_center">
				<view class="g_flex_column_center g_mr_4" v-if="loading">
					<u-loading mode="flower"></u-loading>
				</view>
				<view class="g_flex_column_center" v-if="icon">
					<view class="iconfont icon" :class="icon"></view>
				</view>
				<view class="g_flex_column_center" :class="'g_fs_' + fontSize">
					{{ btnText }}
				</view>
			</view>
		</button>
	</view>
</template>

<script>
/* 按钮
 * @params size 尺寸
 * 			   medium 大；
 * 				 default 默认（中）；
 * 				 small 小；
 * 				 mini 迷你；
 * @params btnText 按钮文本。
 * @params mode 形状
 * 				 circle 胶囊式圆角；square 圆角方形
 * @parmas type 类型
 * 				 primary 主要按钮（底色是主题色）
 * 				 default 默认按钮（底色是白色）
 * 				 infro   信息按钮（底色是灰色）无法触发事件
 * 				 delete  删除按钮（白底红色）
 * 				 none    没有样式（白底黑字）
 *         disabled  禁用（白底黑字）
 * @params openType 开放类型
 * @params openType 开放类型
 * @params icon 图标 项目id 4374774
 * @params gradual 渐变背景色
 * @params customBgColor 背景色
 */
export default {
	props: {
		gradual: {
			type: String,
			default: () => {
				return "";
			},
		},
		size: {
			type: String,
			default: () => {
				return "default";
			},
		},
		btnText: {
			type: String,
			default: () => {
				return "按钮";
			},
		},
		mode: {
			type: String,
			default: () => {
				return "circle";
			},
		},
		type: {
			type: String,
			default: () => {
				return "default";
			},
		},
		openType: {
			type: String,
			default: () => {
				return "";
			},
		},
		formType: {
			type: String,
			default: () => {
				return "";
			},
		},

		icon: {
			type: String,
			default: () => {
				return "";
			},
		},
		width: {
			default: () => {
				return "auto";
			},
		},
		height: {
			default: () => {
				return "auto";
			},
		},
		fontSize: {
			default: () => {
				return "16";
			},
		},
		color: {
			default: () => {
				return "";
			},
		},

		loading: {
			default: () => {
				return false;
			},
		},
		customBgColor: {
			default: () => {
				return "";
			},
		},
	},
	methods: {
		handleClick() {
			if (!this.loading) {
				this.$emit("clickBtn");
			}
		},
		getphonenumber(e) {
			this.$emit("clickTel", e);
		},
	},
};
</script>

<style lang="scss" scoped>
$main_color: #00b666;
.g_mr_4 {
	margin-right: 4px;
}
.g_flex_column_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.g_flex_row_center {
	display: flex;
	justify-content: center;
}

.g-components-button {
	.bocai-btn {
		width: 100%;
		color: #ffffff;
		box-sizing: border-box;
	}
	.bocai_btn_size {
		&_medium {
			height: 56px;
			font-size: 18px;
			line-height: 56px;
		}
		&_default {
			width: 250px !important;
			height: 42px;
			font-size: 18px;
			line-height: 42px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 42px;
				font-size: 18px;
				line-height: 42px;
			}
		}
		&_small {
			width: 120px !important;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
		&_160 {
			width: 160px !important;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
		&_mini {
			height: 28px !important;
			padding: 0 12px !important;
			font-size: 14px !important;
			line-height: 28px !important;
			.icon {
				font-size: 12px;
			}
		}
		&_height {
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}
	.bocai_btn_mode {
		&_circle {
			border-radius: 60px;
		}
		&_square {
			border-radius: 10px;
		}
	}
	.bocai_btn_type {
		&_primary {
			background-color: $main_color;
			color: #fff;
			border: 1px solid $main_color;
			&.thover {
				opacity: 0.8;
			}
		}
		&_default {
			background-color: #fff;
			color: $main_color;
			border: 1px solid $main_color;
			&.thover {
				opacity: 1;
				background: #ddd;
			}
		}
		&_infro {
			pointer-events: none;
			background: #ddd;
			color: #666;
			border: 0.5px solid #ddd;
			&.thover {
				background: #cccccc;
			}
		}
		&_delete {
			border: 1rpx solid #fff;
			background-color: #fff;
			color: #fa5151;
			&.thover {
				opacity: 1;
				background-color: #f9f9f9;
				border: 1rpx solid #f9f9f9;
			}
		}
		&_none {
			background-color: #fff;
			color: #666;
			border: 1rpx solid #ccc;
			&.thover {
				background-color: #ddd;
			}
		}
		&_disabled {
			background-color: rgba(0, 0, 0, 0.05);
			color: rgba(0, 0, 0, 0.2);
			border: 1rpx solid rgba(0, 0, 0, 0.05);
			&.thover {
				// background-color: rgba(0, 0, 0, 0.05);
				opacity: 1;
			}
		}
		&_gradual {
			background: v-bind("gradual");
			color: #fff;
			line-height: 24px !important;
			opacity: 1;
			&.thover {
				opacity: 0.8;
			}
		}
	}
	.customBgColor {
		background-color: v-bind("customBgColor");
		color: #fff;
	}
	.g_w_260 {
		width: 260px !important;
	}
	.g_h_48 {
		height: 48px !important;
		line-height: 48px !important;
	}
}
</style>