源码学习

关于uniapp 按钮的优化

1. 首先 可以增加 loading 状态，增加用户体验
2. 使用节流
3. 使用水波纹

```javascript
// 获取节点信息
 		getElQuery() {
 			return new Promise(resolve => {
 				let queryInfo = '';
 				// 获取元素节点信息，请查看uniapp相关文档
 				queryInfo = uni.createSelectorQuery().in(this);
 				queryInfo.select('.container').boundingClientRect();
 				queryInfo.exec(data => {
 					resolve(data);
 				});
 			});
 		},
 		点击事件
 			dd: function(e) {
 			let touchesY = e.detail.y;
 			let touchesX = e.detail.x;
 			this.getElQuery().then(res => {
 				let data = res[0];
 				data.targetWidth = data.height > data.width ? data.height : data.width;
 				// 原理是使用了 transform，但是由于 transform-origin 是center，所以需要去掉
 				// 最大尺寸的一半 data.top 是该元素距离视口的top 值，固定值
 				this.rippleTop = touchesY - data.top  - data.targetWidth / 2;
 				this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
 				// console.log(rippleTop,rippleLeft);
 				console.log(data.targetWidth); //
 				console.log(touchesY);
 				this.rippleWidth = data.width;
 				this.rippleHeight =data.height
 				this.title = !this.title;
 			})
 		},
//css 
.container {
 	width: 400rpx;
 	height: 400rpx;
 	background-color: red;
 	position: relative;
 	overflow: hidden;
 }

 .inner {
 	position: absolute;
 	border-radius: 100%;
 	background-clip: padding-box;
 	background-color: yellow;
 	transform: scale(0);
 	transform-origin:center;
 	opacity: 1;
 	z-index: 1000;
 }

 .active {
 	z-index: 1000;
 	opacity: 0;
 	transform: scale(2);
 	transition: opacity 1s linear, transform 2s linear;
 }
// html
<view class="container" @click="dd">
 		<view :class="[title ? 'active':'','inner']" :style="{
 			top: rippleTop + 'px',
 			left: rippleLeft + 'px',
 			width: rippleWidth + 'px',
 			height: rippleHeight + 'px'
 			}">
 		</view>
 	</view>

总结：水波纹的原理是通过点击元素，通过transform 来用内部元素由scale(0) 变成scale(2);
scale(0) 让元素不可见
4. 禁用事件
pointer-events: none;
5. 禁止复制
user-select: none;