juliancheng/components/watch-button.vue

<template>
	<view>
		<!-- 按钮 -->
		<button :class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']" :style="{'background':bgColor, 'color': fontColor}"
		 @click="$emit('click', $event)" @contact="$emit('contact', $event)" @error="$emit('error', $event)" @getphonenumber="$emit('getphonenumber', $event)"
		 @getuserinfo="$emit('getuserinfo', $event)" @launchapp="$emit('launchapp', $event)" @longtap="$emit('longtap', $event)"
		 @opensetting="$emit('opensetting', $event)" @touchcancel="$emit('touchcancel', $event)" @touchend="$emit('touchend', $event)"
		 @touchmove="$emit('touchmove', $event)" @touchstart="$emit('touchstart', $event)">
			<view :class="_rotate?'rotate_loop':''">
				<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
				<view v-if="!_rotate">
					<slot name="text">{{ text }}</slot>
				</view>
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			text: String, //显示文本
			rotate: {
				//是否启动加载
				type: [Boolean, String],
				default: false,
			},
			bgColor: {
				//按钮背景颜色
				type: String,
				default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
			},
			fontColor: {
				//按钮字体颜色
				type: String,
				default: "#FFFFFF",
			},
		},
		computed: {
			_rotate() {
				//处理值
				return String(this.rotate) !== 'false'
			},
		}
	}
</script>

<style>
	@import url("./colorui/icon.css");
	.dlbutton {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		width: 601rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.dlbutton_loading {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.buttonBorder {
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		-webkit-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-moz-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-ms-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-o-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
	}

	/* 旋转动画 */
	.rotate_loop {
		-webkit-transition-property: -webkit-transform;
		-webkit-transition-duration: 1s;
		-moz-transition-property: -moz-transform;
		-moz-transition-duration: 1s;
		-webkit-animation: rotate 1s linear infinite;
		-moz-animation: rotate 1s linear infinite;
		-o-animation: rotate 1s linear infinite;
		animation: rotate 1s linear infinite;
	}

	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(360deg)
		}
	}

	@-moz-keyframes rotate {
		from {
			-moz-transform: rotate(0deg)
		}

		to {
			-moz-transform: rotate(359deg)
		}
	}

	@-o-keyframes rotate {
		from {
			-o-transform: rotate(0deg)
		}

		to {
			-o-transform: rotate(359deg)
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}
	
	button::after {
		border: none;
	}
</style>