自定义按住发送和上滑取消发送组件

说明：使用vue结合css3自定义的按住说话和上滑取消发送组件，代码如下：

<template>
    <div id="playVoice" v-if="show">
        <div class="voiceBox">
            <h5>录音<i @click="close">&times;</i></h5>
            <div class="content">
                <img src="../assets/ic_record@2x.png" alt="">
                <div :class="['vocePlay',isPlay?'play':'']">
                    <div class="imgBg"></div>
                </div>
            </div>
            <p>{{talking}}</p>
            <div class="btm">
                <button 
                    ref="recoding"
                    @touchstart="haldstart"
                    @touchmove="haldmove"
                    @touchend="haldend"
                >{{btnVal}}</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            posStart:0,//初始化起点坐标
            posEnd:0,//初始化终点坐标
            posMove:0,//初始化滑动坐标
            talking:'',
            isPlay:false,//是否在说话
            btnVal:'按住说话'
        };
    },
    methods: {
        haldstart(event){
            event = event || window.event;
            event.preventDefault();//阻止浏览器默认行为
            this.posStart = 0;
            this.posStart = event.touches[0].pageY;//获取起点坐标
            this.isPlay = true;
            this.talking = "正在说话";
            this.btnVal="松开结束";
        },
        haldmove(event){
            event = event || window.event;
            event.preventDefault();//阻止浏览器默认行为
            this.posMove = 0;
            this.posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
            if(this.posStart - this.posMove < 100){
                this.btnVal = '松开结束';
            }else{
                this.btnVal = '松开手指，取消发送';
            };
        },
        haldend(event){
            event = event || window.event;
            event.preventDefault();//阻止浏览器默认行为
            this.posEnd = 0;
            this.posEnd = event.changedTouches[0].pageY;//获取终点坐标
            this.isPlay = false;
            this.talking = "";
            this.btnVal="按住说话";
            if(this.posStart - this.posEnd < 100 ){
                console.log('发送成功');
                this.close();
            }else{
                console.log("取消发送");
            };
        },
        close(){
            this.$emit('close',false);
        }
    }
};
</script>

<style lang="scss">
#playVoice{
    // position: fixed;
    // background-color: #fff;
    // top:0;
    // left: 0;
    // width: 100%;
    // height: 100%;
    .voiceBox{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: rgba(0,0,0,.8);
        z-index: 99;
        width: 220px;
        color: #fff;
        >h5{
            font-size: 12px;
            margin: 0;
            line-height: 35px;
            text-align: left;
            padding-left: 15px;
            border-bottom:1px solid #999;
            i{
                float: right;
                font-size: 20px;
                font-weight: 400;
                margin-right: 10px;
            }
        }
        >.content{
            padding-top: 35px;
            >img{
                width: 45px;
            }
            >.vocePlay{
                position: relative;
                display: inline-block;
                width: 50px;
                height: 73px;
                overflow: hidden;
                >.imgBg{
                    position: absolute;
                    left: 10px;
                    bottom: 0;
                    width: 40px;
                    height: 73px;
                    background: url('../assets/ic_record_ripple@2x-9.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
            @keyframes anmateVoice {
                0%{
                    height: 10px;
                }
                25%{
                    height: 25px;
                }
                50%{
                    height: 50px;
                }
                75%{
                    height: 60px;
                }
                100%{
                    height: 73px;
                }
            }
            .play{
                animation: anmateVoice 1.5s linear infinite;
            }
        }
        >p{
            margin: 0;
            font-size: 14px;
            margin: 10px 0;
        }
        .btm{
            margin-bottom: 20px;
            button{
                border:none;
                border-radius: 20px;
                color:#fff;
                background-color: #4D70FF;
                width: 132px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 12px;
            }
        }
    }
}
</style>
效果如下：