uview-ui/components/u-button/u-button.vue - dali_platform/mobile - Gitiles

 <template>
 	<button
 		id="u-wave-btn"
 		class="u-btn u-line-1 u-fix-ios-appearance"
 		:class="[
 			'u-size-' + size,
 			plain ? 'u-btn--' + type + '--plain' : '',
 			loading ? 'u-loading' : '',
 			shape == 'circle' ? 'u-round-circle' : '',
 			hairLine ? showHairLineBorder : 'u-btn--bold-border',
 			'u-btn--' + type,
 			disabled ? `u-btn--${type}--disabled` : '',
 		]"
 		:hover-start-time="Number(hoverStartTime)"
 		:hover-stay-time="Number(hoverStayTime)"
 		:disabled="disabled"
 		:form-type="formType"
 		:open-type="openType"
 		:app-parameter="appParameter"
 		:hover-stop-propagation="hoverStopPropagation"
 		:send-message-title="sendMessageTitle"
 		send-message-path="sendMessagePath"
 		:lang="lang"
 		:data-name="dataName"
 		:session-from="sessionFrom"
 		:send-message-img="sendMessageImg"
 		:show-message-card="showMessageCard"
 		@getphonenumber="getphonenumber"
 		@getuserinfo="getuserinfo"
 		@error="error"
 		@opensetting="opensetting"
 		@launchapp="launchapp"
 		:style="[customStyle, {
 			overflow: ripple ? 'hidden' : 'visible'
 		}]"
 		@tap.stop="click($event)"
 		:hover-class="getHoverClass"
 		:loading="loading"
 	>
 		<slot></slot>
 		<view
 			v-if="ripple"
 			class="u-wave-ripple"
 			:class="[waveActive ? 'u-wave-active' : '']"
 			:style="{
 				top: rippleTop + 'px',
 				left: rippleLeft + 'px',
 				width: fields.targetWidth + 'px',
 				height: fields.targetWidth + 'px',
 				'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
 			}"
 		></view>
 	</button>
 </template>

 <script>
 /**
  * button 按钮
  * @description Button 按钮
  * @tutorial https://www.uviewui.com/components/button.html
  * @property {String} size 按钮的大小
  * @property {Boolean} ripple 是否开启点击水波纹效果
  * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
  * @property {String} type 按钮的样式类型
  * @property {Boolean} plain 按钮是否镂空，背景色透明
  * @property {Boolean} disabled 是否禁用
  * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
  * @property {Boolean} shape 按钮外观形状，见文档说明
  * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
  * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
  * @property {String} open-type 开放能力
  * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
  * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
  * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
  * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
  * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
  * @event {Function} click 按钮点击
  * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
  * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
  * @event {Function} error 当使用开放能力时，发生错误的回调
  * @event {Function} opensetting 在打开授权设置页并关闭后回调
  * @event {Function} launchapp 打开 APP 成功的回调
  * @example <u-button>月落</u-button>
  */
 export default {
 	name: 'u-button',
 	props: {
 		// 是否细边框
 		hairLine: {
 			type: Boolean,
 			default: true
 		},
 		// 按钮的预置样式，default，primary，error，warning，success
 		type: {
 			type: String,
 			default: 'default'
 		},
 		// 按钮尺寸，default，medium，mini
 		size: {
 			type: String,
 			default: 'default'
 		},
 		// 按钮形状，circle（两边为半圆），square（带圆角）
 		shape: {
 			type: String,
 			default: 'square'
 		},
 		// 按钮是否镂空
 		plain: {
 			type: Boolean,
 			default: false
 		},
 		// 是否禁止状态
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		// 是否加载中
 		loading: {
 			type: Boolean,
 			default: false
 		},
 		// 开放能力，具体请看uniapp稳定关于button组件部分说明
 		// https://uniapp.dcloud.io/component/button
 		openType: {
 			type: String,
 			default: ''
 		},
 		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
 		// 取值为submit（提交表单），reset（重置表单）
 		formType: {
 			type: String,
 			default: ''
 		},
 		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
 		// 只微信小程序、QQ小程序有效
 		appParameter: {
 			type: String,
 			default: ''
 		},
 		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
 		hoverStopPropagation: {
 			type: Boolean,
 			default: false
 		},
 		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
 		lang: {
 			type: String,
 			default: 'en'
 		},
 		// 会话来源，open-type="contact"时有效。只微信小程序有效
 		sessionFrom: {
 			type: String,
 			default: ''
 		},
 		// 会话内消息卡片标题，open-type="contact"时有效
 		// 默认当前标题，只微信小程序有效
 		sendMessageTitle: {
 			type: String,
 			default: ''
 		},
 		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
 		// 默认当前分享路径，只微信小程序有效
 		sendMessagePath: {
 			type: String,
 			default: ''
 		},
 		// 会话内消息卡片图片，open-type="contact"时有效
 		// 默认当前页面截图，只微信小程序有效
 		sendMessageImg: {
 			type: String,
 			default: ''
 		},
 		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
 		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
 		showMessageCard: {
 			type: Boolean,
 			default: false
 		},
 		// 手指按（触摸）按钮时按钮时的背景颜色
 		hoverBgColor: {
 			type: String,
 			default: ''
 		},
 		// 水波纹的背景颜色
 		rippleBgColor: {
 			type: String,
 			default: ''
 		},
 		// 是否开启水波纹效果
 		ripple: {
 			type: Boolean,
 			default: false
 		},
 		// 按下的类名
 		hoverClass: {
 			type: String,
 			default: ''
 		},
 		// 自定义样式，对象形式
 		customStyle: {
 			type: Object,
 			default() {
 				return {};
 			}
 		},
 		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
 		dataName: {
 			type: String,
 			default: ''
 		},
 		// 节流，一定时间内只能触发一次
 		throttleTime: {
 			type: [String, Number],
 			default: 1000
 		},
 		// 按住后多久出现点击态，单位毫秒
 		hoverStartTime: {
 			type: [String, Number],
 			default: 20
 		},
 		// 手指松开后点击态保留时间，单位毫秒
 		hoverStayTime: {
 			type: [String, Number],
 			default: 150
 		},
 	},
 	computed: {
 		// 当没有传bgColor变量时，按钮按下去的颜色类名
 		getHoverClass() {
 			// 如果开启水波纹效果，则不启用hover-class效果
 			if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
 			let hoverClass = '';
 			hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
 			return hoverClass;
 		},
 		// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
 		showHairLineBorder() {
 			if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
 				return '';
 			} else {
 				return 'u-hairline-border';
 			}
 		}
 	},
 	data() {
 		return {
 			rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
 			rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
 			fields: {}, // 波纹按钮节点信息
 			waveActive: false // 激活水波纹
 		};
 	},
 	methods: {
 		// 按钮点击
 		click(e) {
 			// 进行节流控制，每this.throttle毫秒内，只在开始处执行
 			this.$u.throttle(() => {
 				// 如果按钮时disabled和loading状态，不触发水波纹效果
 				if (this.loading === true || this.disabled === true) return;
 				// 是否开启水波纹效果
 				if (this.ripple) {
 					// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
 					this.waveActive = false;
 					this.$nextTick(function() {
 						this.getWaveQuery(e);
 					});
 				}
 				this.$emit('click', e);
 			}, this.throttleTime);
 		},
 		// 查询按钮的节点信息
 		getWaveQuery(e) {
 			this.getElQuery().then(res => {
 				// 查询返回的是一个数组节点
 				let data = res[0];
 				// 查询不到节点信息，不操作
 				if (!data.width || !data.width) return;
 				// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
 				// 最终的方形（变换后的圆形）才能覆盖整个按钮
 				data.targetWidth = data.height > data.width ? data.height : data.width;
 				if (!data.targetWidth) return;
 				this.fields = data;
 				let touchesX = '',
 					touchesY = '';
 				// #ifdef MP-BAIDU
 				touchesX = e.changedTouches[0].clientX;
 				touchesY = e.changedTouches[0].clientY;
 				// #endif
 				// #ifdef MP-ALIPAY
 				touchesX = e.detail.clientX;
 				touchesY = e.detail.clientY;
 				// #endif
 				// #ifndef MP-BAIDU || MP-ALIPAY
 				touchesX = e.touches[0].clientX;
 				touchesY = e.touches[0].clientY;
 				// #endif
 				// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
 				// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
 				// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
 				this.rippleTop = touchesY - data.top - data.targetWidth / 2;
 				this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
 				this.$nextTick(() => {
 					this.waveActive = true;
 				});
 			});
 		},
 		// 获取节点信息
 		getElQuery() {
 			return new Promise(resolve => {
 				let queryInfo = '';
 				// 获取元素节点信息，请查看uniapp相关文档
 				// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
 				queryInfo = uni.createSelectorQuery().in(this);
 				//#ifdef MP-ALIPAY
 				queryInfo = uni.createSelectorQuery();
 				//#endif
 				queryInfo.select('.u-btn').boundingClientRect();
 				queryInfo.exec(data => {
 					resolve(data);
 				});
 			});
 		},
 		// 下面为对接uniapp官方按钮开放能力事件回调的对接
 		getphonenumber(res) {
 			this.$emit('getphonenumber', res);
 		},
 		getuserinfo(res) {
 			this.$emit('getuserinfo', res);
 		},
 		error(res) {
 			this.$emit('error', res);
 		},
 		opensetting(res) {
 			this.$emit('opensetting', res);
 		},
 		launchapp(res) {
 			this.$emit('launchapp', res);
 		}
 	}
 };
 </script>

 <style scoped lang="scss">
 @import '../../libs/css/style.components.scss';
 .u-btn::after {
 	border: none;
 }

 .u-btn {
 	position: relative;
 	border: 0;
 	//border-radius: 10rpx;
 	/* #ifndef APP-NVUE */
 	display: inline-flex;
 	/* #endif */
 	// 避免边框某些场景可能被“裁剪”，不能设置为hidden
 	overflow: visible;
 	line-height: 1;
 	@include vue-flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
 	padding: 0 40rpx;
 	z-index: 1;
 	box-sizing: border-box;
 	transition: all 0.15s;

 	&--bold-border {
 		border: 1px solid #ffffff;
 	}

 	&--default {
 		color: $u-content-color;
 		border-color: #c0c4cc;
 		background-color: #ffffff;
 	}

 	&--primary {
 		color: #ffffff;
 		border-color: $u-type-primary;
 		background-color: $u-type-primary;
 	}

 	&--success {
 		color: #ffffff;
 		border-color: $u-type-success;
 		background-color: $u-type-success;
 	}

 	&--error {
 		color: #ffffff;
 		border-color: $u-type-error;
 		background-color: $u-type-error;
 	}

 	&--warning {
 		color: #ffffff;
 		border-color: $u-type-warning;
 		background-color: $u-type-warning;
 	}

 	&--default--disabled {
 		color: #ffffff;
 		border-color: #e4e7ed;
 		background-color: #ffffff;
 	}

 	&--primary--disabled {
 		color: #ffffff!important;
 		border-color: $u-type-primary-disabled!important;
 		background-color: $u-type-primary-disabled!important;
 	}

 	&--success--disabled {
 		color: #ffffff!important;
 		border-color: $u-type-success-disabled!important;
 		background-color: $u-type-success-disabled!important;
 	}

 	&--error--disabled {
 		color: #ffffff!important;
 		border-color: $u-type-error-disabled!important;
 		background-color: $u-type-error-disabled!important;
 	}

 	&--warning--disabled {
 		color: #ffffff!important;
 		border-color: $u-type-warning-disabled!important;
 		background-color: $u-type-warning-disabled!important;
 	}

 	&--primary--plain {
 		color: $u-type-primary!important;
 		border-color: $u-type-primary-disabled!important;
 		background-color: $u-type-primary-light!important;
 	}

 	&--success--plain {
 		color: $u-type-success!important;
 		border-color: $u-type-success-disabled!important;
 		background-color: $u-type-success-light!important;
 	}

 	&--error--plain {
 		color: $u-type-error!important;
 		border-color: $u-type-error-disabled!important;
 		background-color: $u-type-error-light!important;
 	}

 	&--warning--plain {
 		color: $u-type-warning!important;
 		border-color: $u-type-warning-disabled!important;
 		background-color: $u-type-warning-light!important;
 	}
 }

 .u-hairline-border:after {
 	content: ' ';
 	position: absolute;
 	pointer-events: none;
 	// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
 	box-sizing: border-box;
 	// 中心点作为变形(scale())的原点
 	-webkit-transform-origin: 0 0;
 	transform-origin: 0 0;
 	left: 0;
 	top: 0;
 	width: 199.8%;
 	height: 199.7%;
 	-webkit-transform: scale(0.5, 0.5);
 	transform: scale(0.5, 0.5);
 	border: 1px solid currentColor;
 	z-index: 1;
 }

 .u-wave-ripple {
 	z-index: 0;
 	position: absolute;
 	border-radius: 100%;
 	background-clip: padding-box;
 	pointer-events: none;
 	user-select: none;
 	transform: scale(0);
 	opacity: 1;
 	transform-origin: center;
 }

 .u-wave-ripple.u-wave-active {
 	opacity: 0;
 	transform: scale(2);
 	transition: opacity 1s linear, transform 0.4s linear;
 }

 .u-round-circle {
 	border-radius: 100rpx;
 }

 .u-round-circle::after {
 	border-radius: 100rpx;
 }

 .u-loading::after {
 	background-color: hsla(0, 0%, 100%, 0.35);
 }

 .u-size-default {
 	font-size: 30rpx;
 	height: 80rpx;
 	line-height: 80rpx;
 }

 .u-size-medium {
 	/* #ifndef APP-NVUE */
 	display: inline-flex;
 	/* #endif */
 	width: auto;
 	font-size: 26rpx;
 	height: 70rpx;
 	line-height: 70rpx;
 	padding: 0 80rpx;
 }

 .u-size-mini {
 	/* #ifndef APP-NVUE */
 	display: inline-flex;
 	/* #endif */
 	width: auto;
 	font-size: 22rpx;
 	padding-top: 1px;
 	height: 50rpx;
 	line-height: 50rpx;
 	padding: 0 20rpx;
 }

 .u-primary-plain-hover {
 	color: #ffffff !important;
 	background: $u-type-primary-dark !important;
 }

 .u-default-plain-hover {
 	color: $u-type-primary-dark !important;
 	background: $u-type-primary-light !important;
 }

 .u-success-plain-hover {
 	color: #ffffff !important;
 	background: $u-type-success-dark !important;
 }

 .u-warning-plain-hover {
 	color: #ffffff !important;
 	background: $u-type-warning-dark !important;
 }

 .u-error-plain-hover {
 	color: #ffffff !important;
 	background: $u-type-error-dark !important;
 }

 .u-info-plain-hover {
 	color: #ffffff !important;
 	background: $u-type-info-dark !important;
 }

 .u-default-hover {
 	color: $u-type-primary-dark !important;
 	border-color: $u-type-primary-dark !important;
 	background-color: $u-type-primary-light !important;
 }

 .u-primary-hover {
 	background: $u-type-primary-dark !important;
 	color: #fff;
 }

 .u-success-hover {
 	background: $u-type-success-dark !important;
 	color: #fff;
 }

 .u-info-hover {
 	background: $u-type-info-dark !important;
 	color: #fff;
 }

 .u-warning-hover {
 	background: $u-type-warning-dark !important;
 	color: #fff;
 }

 .u-error-hover {
 	background: $u-type-error-dark !important;
 	color: #fff;
 }
 </style>
	<template>
	<button
	id="u-wave-btn"
	class="u-btn u-line-1 u-fix-ios-appearance"
	:class="[
	'u-size-' + size,
	plain ? 'u-btn--' + type + '--plain' : '',
	loading ? 'u-loading' : '',
	shape == 'circle' ? 'u-round-circle' : '',
	hairLine ? showHairLineBorder : 'u-btn--bold-border',
	'u-btn--' + type,
	disabled ? `u-btn--${type}--disabled` : '',
	]"
	:hover-start-time="Number(hoverStartTime)"
	:hover-stay-time="Number(hoverStayTime)"
	:disabled="disabled"
	:form-type="formType"
	:open-type="openType"
	:app-parameter="appParameter"
	:hover-stop-propagation="hoverStopPropagation"
	:send-message-title="sendMessageTitle"
	send-message-path="sendMessagePath"
	:lang="lang"
	:data-name="dataName"
	:session-from="sessionFrom"
	:send-message-img="sendMessageImg"
	:show-message-card="showMessageCard"
	@getphonenumber="getphonenumber"
	@getuserinfo="getuserinfo"
	@error="error"
	@opensetting="opensetting"
	@launchapp="launchapp"
	:style="[customStyle, {
	overflow: ripple ? 'hidden' : 'visible'
	}]"
	@tap.stop="click($event)"
	:hover-class="getHoverClass"
	:loading="loading"
	>
	<slot></slot>
	<view
	v-if="ripple"
	class="u-wave-ripple"
	:class="[waveActive ? 'u-wave-active' : '']"
	:style="{
	top: rippleTop + 'px',
	left: rippleLeft + 'px',
	width: fields.targetWidth + 'px',
	height: fields.targetWidth + 'px',
	'background-color': rippleBgColor \|\| 'rgba(0, 0, 0, 0.15)'
	}"
	></view>
	</button>
	</template>

	<script>
	/**
	* button 按钮
	* @description Button 按钮
	* @tutorial https://www.uviewui.com/components/button.html
	* @property {String} size 按钮的大小
	* @property {Boolean} ripple 是否开启点击水波纹效果
	* @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
	* @property {String} type 按钮的样式类型
	* @property {Boolean} plain 按钮是否镂空，背景色透明
	* @property {Boolean} disabled 是否禁用
	* @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
	* @property {Boolean} shape 按钮外观形状，见文档说明
	* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
	* @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
	* @property {String} open-type 开放能力
	* @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
	* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
	* @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
	* @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
	* @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
	* @event {Function} click 按钮点击
	* @event {Function} getphonenumber open-type="getPhoneNumber"时有效
	* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
	* @event {Function} error 当使用开放能力时，发生错误的回调
	* @event {Function} opensetting 在打开授权设置页并关闭后回调
	* @event {Function} launchapp 打开 APP 成功的回调
	* @example <u-button>月落</u-button>
	*/
	export default {
	name: 'u-button',
	props: {
	// 是否细边框
	hairLine: {
	type: Boolean,
	default: true
	},
	// 按钮的预置样式，default，primary，error，warning，success
	type: {
	type: String,
	default: 'default'
	},
	// 按钮尺寸，default，medium，mini
	size: {
	type: String,
	default: 'default'
	},
	// 按钮形状，circle（两边为半圆），square（带圆角）
	shape: {
	type: String,
	default: 'square'
	},
	// 按钮是否镂空
	plain: {
	type: Boolean,
	default: false
	},
	// 是否禁止状态
	disabled: {
	type: Boolean,
	default: false
	},
	// 是否加载中
	loading: {
	type: Boolean,
	default: false
	},
	// 开放能力，具体请看uniapp稳定关于button组件部分说明
	// https://uniapp.dcloud.io/component/button
	openType: {
	type: String,
	default: ''
	},
	// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
	// 取值为submit（提交表单），reset（重置表单）
	formType: {
	type: String,
	default: ''
	},
	// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
	// 只微信小程序、QQ小程序有效
	appParameter: {
	type: String,
	default: ''
	},
	// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
	hoverStopPropagation: {
	type: Boolean,
	default: false
	},
	// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
	lang: {
	type: String,
	default: 'en'
	},
	// 会话来源，open-type="contact"时有效。只微信小程序有效
	sessionFrom: {
	type: String,
	default: ''
	},
	// 会话内消息卡片标题，open-type="contact"时有效
	// 默认当前标题，只微信小程序有效
	sendMessageTitle: {
	type: String,
	default: ''
	},
	// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
	// 默认当前分享路径，只微信小程序有效
	sendMessagePath: {
	type: String,
	default: ''
	},
	// 会话内消息卡片图片，open-type="contact"时有效
	// 默认当前页面截图，只微信小程序有效
	sendMessageImg: {
	type: String,
	default: ''
	},
	// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
	// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
	showMessageCard: {
	type: Boolean,
	default: false
	},
	// 手指按（触摸）按钮时按钮时的背景颜色
	hoverBgColor: {
	type: String,
	default: ''
	},
	// 水波纹的背景颜色
	rippleBgColor: {
	type: String,
	default: ''
	},
	// 是否开启水波纹效果
	ripple: {
	type: Boolean,
	default: false
	},
	// 按下的类名
	hoverClass: {
	type: String,
	default: ''
	},
	// 自定义样式，对象形式
	customStyle: {
	type: Object,
	default() {
	return {};
	}
	},
	// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
	dataName: {
	type: String,
	default: ''
	},
	// 节流，一定时间内只能触发一次
	throttleTime: {
	type: [String, Number],
	default: 1000
	},
	// 按住后多久出现点击态，单位毫秒
	hoverStartTime: {
	type: [String, Number],
	default: 20
	},
	// 手指松开后点击态保留时间，单位毫秒
	hoverStayTime: {
	type: [String, Number],
	default: 150
	},
	},
	computed: {
	// 当没有传bgColor变量时，按钮按下去的颜色类名
	getHoverClass() {
	// 如果开启水波纹效果，则不启用hover-class效果
	if (this.loading \|\| this.disabled \|\| this.ripple \|\| this.hoverClass) return '';
	let hoverClass = '';
	hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
	return hoverClass;
	},
	// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
	showHairLineBorder() {
	if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
	return '';
	} else {
	return 'u-hairline-border';
	}
	}
	},
	data() {
	return {
	rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
	rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
	fields: {}, // 波纹按钮节点信息
	waveActive: false // 激活水波纹
	};
	},
	methods: {
	// 按钮点击
	click(e) {
	// 进行节流控制，每this.throttle毫秒内，只在开始处执行
	this.$u.throttle(() => {
	// 如果按钮时disabled和loading状态，不触发水波纹效果
	if (this.loading === true \|\| this.disabled === true) return;
	// 是否开启水波纹效果
	if (this.ripple) {
	// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
	this.waveActive = false;
	this.$nextTick(function() {
	this.getWaveQuery(e);
	});
	}
	this.$emit('click', e);
	}, this.throttleTime);
	},
	// 查询按钮的节点信息
	getWaveQuery(e) {
	this.getElQuery().then(res => {
	// 查询返回的是一个数组节点
	let data = res[0];
	// 查询不到节点信息，不操作
	if (!data.width \|\| !data.width) return;
	// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
	// 最终的方形（变换后的圆形）才能覆盖整个按钮
	data.targetWidth = data.height > data.width ? data.height : data.width;
	if (!data.targetWidth) return;
	this.fields = data;
	let touchesX = '',
	touchesY = '';
	// #ifdef MP-BAIDU
	touchesX = e.changedTouches[0].clientX;
	touchesY = e.changedTouches[0].clientY;
	// #endif
	// #ifdef MP-ALIPAY
	touchesX = e.detail.clientX;
	touchesY = e.detail.clientY;
	// #endif
	// #ifndef MP-BAIDU \|\| MP-ALIPAY
	touchesX = e.touches[0].clientX;
	touchesY = e.touches[0].clientY;
	// #endif
	// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
	// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
	// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
	this.rippleTop = touchesY - data.top - data.targetWidth / 2;
	this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
	this.$nextTick(() => {
	this.waveActive = true;
	});
	});
	},
	// 获取节点信息
	getElQuery() {
	return new Promise(resolve => {
	let queryInfo = '';
	// 获取元素节点信息，请查看uniapp相关文档
	// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
	queryInfo = uni.createSelectorQuery().in(this);
	//#ifdef MP-ALIPAY
	queryInfo = uni.createSelectorQuery();
	//#endif
	queryInfo.select('.u-btn').boundingClientRect();
	queryInfo.exec(data => {
	resolve(data);
	});
	});
	},
	// 下面为对接uniapp官方按钮开放能力事件回调的对接
	getphonenumber(res) {
	this.$emit('getphonenumber', res);
	},
	getuserinfo(res) {
	this.$emit('getuserinfo', res);
	},
	error(res) {
	this.$emit('error', res);
	},
	opensetting(res) {
	this.$emit('opensetting', res);
	},
	launchapp(res) {
	this.$emit('launchapp', res);
	}
	}
	};
	</script>

	<style scoped lang="scss">
	@import '../../libs/css/style.components.scss';
	.u-btn::after {
	border: none;
	}

	.u-btn {
	position: relative;
	border: 0;
	//border-radius: 10rpx;
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	// 避免边框某些场景可能被“裁剪”，不能设置为hidden
	overflow: visible;
	line-height: 1;
	@include vue-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 40rpx;
	z-index: 1;
	box-sizing: border-box;
	transition: all 0.15s;

	&--bold-border {
	border: 1px solid #ffffff;
	}

	&--default {
	color: $u-content-color;
	border-color: #c0c4cc;
	background-color: #ffffff;
	}

	&--primary {
	color: #ffffff;
	border-color: $u-type-primary;
	background-color: $u-type-primary;
	}

	&--success {
	color: #ffffff;
	border-color: $u-type-success;
	background-color: $u-type-success;
	}

	&--error {
	color: #ffffff;
	border-color: $u-type-error;
	background-color: $u-type-error;
	}

	&--warning {
	color: #ffffff;
	border-color: $u-type-warning;
	background-color: $u-type-warning;
	}

	&--default--disabled {
	color: #ffffff;
	border-color: #e4e7ed;
	background-color: #ffffff;
	}

	&--primary--disabled {
	color: #ffffff!important;
	border-color: $u-type-primary-disabled!important;
	background-color: $u-type-primary-disabled!important;
	}

	&--success--disabled {
	color: #ffffff!important;
	border-color: $u-type-success-disabled!important;
	background-color: $u-type-success-disabled!important;
	}

	&--error--disabled {
	color: #ffffff!important;
	border-color: $u-type-error-disabled!important;
	background-color: $u-type-error-disabled!important;
	}

	&--warning--disabled {
	color: #ffffff!important;
	border-color: $u-type-warning-disabled!important;
	background-color: $u-type-warning-disabled!important;
	}

	&--primary--plain {
	color: $u-type-primary!important;
	border-color: $u-type-primary-disabled!important;
	background-color: $u-type-primary-light!important;
	}

	&--success--plain {
	color: $u-type-success!important;
	border-color: $u-type-success-disabled!important;
	background-color: $u-type-success-light!important;
	}

	&--error--plain {
	color: $u-type-error!important;
	border-color: $u-type-error-disabled!important;
	background-color: $u-type-error-light!important;
	}

	&--warning--plain {
	color: $u-type-warning!important;
	border-color: $u-type-warning-disabled!important;
	background-color: $u-type-warning-light!important;
	}
	}

	.u-hairline-border:after {
	content: ' ';
	position: absolute;
	pointer-events: none;
	// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
	box-sizing: border-box;
	// 中心点作为变形(scale())的原点
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	left: 0;
	top: 0;
	width: 199.8%;
	height: 199.7%;
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
	border: 1px solid currentColor;
	z-index: 1;
	}

	.u-wave-ripple {
	z-index: 0;
	position: absolute;
	border-radius: 100%;
	background-clip: padding-box;
	pointer-events: none;
	user-select: none;
	transform: scale(0);
	opacity: 1;
	transform-origin: center;
	}

	.u-wave-ripple.u-wave-active {
	opacity: 0;
	transform: scale(2);
	transition: opacity 1s linear, transform 0.4s linear;
	}

	.u-round-circle {
	border-radius: 100rpx;
	}

	.u-round-circle::after {
	border-radius: 100rpx;
	}

	.u-loading::after {
	background-color: hsla(0, 0%, 100%, 0.35);
	}

	.u-size-default {
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	}

	.u-size-medium {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	width: auto;
	font-size: 26rpx;
	height: 70rpx;
	line-height: 70rpx;
	padding: 0 80rpx;
	}

	.u-size-mini {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	width: auto;
	font-size: 22rpx;
	padding-top: 1px;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 20rpx;
	}

	.u-primary-plain-hover {
	color: #ffffff !important;
	background: $u-type-primary-dark !important;
	}

	.u-default-plain-hover {
	color: $u-type-primary-dark !important;
	background: $u-type-primary-light !important;
	}

	.u-success-plain-hover {
	color: #ffffff !important;
	background: $u-type-success-dark !important;
	}

	.u-warning-plain-hover {
	color: #ffffff !important;
	background: $u-type-warning-dark !important;
	}

	.u-error-plain-hover {
	color: #ffffff !important;
	background: $u-type-error-dark !important;
	}

	.u-info-plain-hover {
	color: #ffffff !important;
	background: $u-type-info-dark !important;
	}

	.u-default-hover {
	color: $u-type-primary-dark !important;
	border-color: $u-type-primary-dark !important;
	background-color: $u-type-primary-light !important;
	}

	.u-primary-hover {
	background: $u-type-primary-dark !important;
	color: #fff;
	}

	.u-success-hover {
	background: $u-type-success-dark !important;
	color: #fff;
	}

	.u-info-hover {
	background: $u-type-info-dark !important;
	color: #fff;
	}

	.u-warning-hover {
	background: $u-type-warning-dark !important;
	color: #fff;
	}

	.u-error-hover {
	background: $u-type-error-dark !important;
	color: #fff;
	}
	</style>