uni按钮button水波纹时间控制

uni的ui库，uview中自带水波纹扩散的效果，但不太支持时间控制。比如涉及button点击时，需要一定时间防误触的设计，就需要用到。

凑合用，一般从左到右

view元素存在after伪类，通常可以设置下拉箭头，省略号等，这里作为遮罩的层。
uni存在touchstart和touchend事件，点击开始时执行animation动画，时长和定时器一致，且needTime--放在结束时检查。

template

本质是遮罩，不过触碰时加入了--和结束时的判断。

<view type="default" :class="showAni?'ani-move':''" 
@touchstart.stop="start" @touchend.end="end"   
 class="u-flex u-row-center u-rela ani" >测试</view>
...
{ needTime:3,
  showAni:false
}

methods

start() {
        this.showAni=true;
        setInterval(()=>{
        this.showAni
        this.needTime--
        },1000)
},
end() {
    // 判断是否持续1秒
    // 清除定时器
    if(this.needTime<=0) {
    console.log('通过')
    this.showAni=false
    }else{
    his.showAni=false
}
},

scss

持续时长和needTime一样，确保能走完btn

.ani {
        overflow: hidden;
        width:200rpx;
        height:60rpx;
        border:1px solid #ccc;
        border-radius:40rpx;
        &-move {
            &::after {
                position: absolute;
                left:0;
                top:0;
                border-radius:40rpx;
                border:1px solid blue;
                content:'';
                // background:1px sold skyblue;
                background:skyblue;
                width:100%;
                height:100%;
                animation: right 1s ease forwards;
            }
        }
        
    }