首先创建两个图层，用来显示不同的状态

<!-- 中间黑框 录音状态 -->
<div class="blackBoxSpeakbg">
<div ref="tagnew" v-show="isShowYuyin" class="blackBoxSpeak" :style="{background:` url(${imagetest2}) no-repeat 28px 16px/65px 104px,url(${imagetest1}) no-repeat 111.2px 32px/28.8px 88px`}">
<p class="blackBoxSpeakConent">手指上划，取消发送</p>
</div>
</div>
<!-- 中间黑框 暂停状态 -->
  <div v-if="isShowQuxiao" class="blackBoxPause" :style="{background:`url(${imagetest3}) no-repeat center 8px/67.2px 104px`,backgroundColor:`rgba(0,0,0,.6)`}">
            <p class="blackBoxPauseContent" style="background: red">松开手指,取消发送</p>
        </div>
        <div class="chat-content" ref="messageBox" style="
    padding-bottom: 10px;">

.blackBoxSpeak {
        z-index: 999999999;
        width: 176px;
        height: 176px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
        /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
        background-color: rgba(0, 0, 0, .7);
        display: display;
        border-radius: 12px;
    }

    .blackBoxSpeakbg {
        z-index: 1;
        width: 176px;
        height: 176px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
        /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
        background-color: rgba(0, 0, 0, .7);
        display: display;
        border-radius: 12px;
    }

    .blackBoxSpeakConent {
        font: 14.4px '微软雅黑 Light';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        display: block;
        text-align: center;
        width: 90%;
        padding: 8px 0;
        margin: auto;
        color: #ffffff;
        font-weight: 200;
        border-radius: 4px;
    }

    .blackBoxPause {
        z-index: 999999999;
        width: 176px;
        height: 176px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /* background-image: url(../../static/images/tu.png); */
        /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
        background: rgba(0, 0, 0, .7);
        display: display;
        border-radius: 12px;
    }

    .blackBoxPauseContent {
        font: 14.4px '微软雅黑 Light';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        display: block;
        text-align: center;
        width: 90%;
        padding: 8px 0;
        margin: auto;
        color: #ffffff;
        font-weight: 200;
        border-radius: 4px;
    }

创建按钮

<div class="inputYuYin" @touchstart="beginRecordAction"@touchend="stopRecordAction" @touchmove="moveRecordAction">
<button class="yuyinanniu" id="bt_recoding" ref="tag">按住 说话</button>
</div>

接下来是touchstart，touchend，touchmove的实现

beginRecordAction(event) {
                this.longClick = 0;
                this.loop = setTimeout(function() {
                    this.longClick = 1;
                    event.preventDefault(); //阻止浏览器默认行为
                    this.posStart = 0;
                    this.posStart = event.touches[0].pageY; //获取起点坐标
                    this.setTimer();
                    //显示录音 隐藏暂停
                    this.showBlackBoxSpeak();
                }.bind(this), 500);
            },
            stopRecordAction(event) {
                clearTimeout(this.loop);
                clearInterval(this.timer)
                event.preventDefault(); //阻止浏览器默认行为
                this.posEnd = 0;
                this.posEnd = event.changedTouches[0].pageY; //获取终点
                if (this.timeOutEvent != 0 && this.longClick == 0) {
                    
                } else {
                    if (this.posStart - this.posEnd < 100) {
                        alert("发送成功");
                        this.showBlackBoxNone();
                    } else {
                        alert("取消发送");
                        this.initStatus();
                        this.showBlackBoxNone();
                    }
                }
                console.log('长按结束')
            },
            moveRecordAction() {
                clearTimeout(this.loop);
                this.loop = 0;
                this.posMove = event.targetTouches[0].pageY; //获取滑动实时坐标
                if (this.posStart - this.posMove < 100) {
                    //隐藏录音 显示暂停
                    this.showBlackBoxSpeak();
                } else {
                    //显示录音 隐藏暂停
                    this.showBlackBoxPause();
                }
            },

                    //初始化状态
            initStatus() {
                var bt_recoding = document.getElementById("bt_recoding");
                bt_recoding.textContent = '按住 说话';
                //全部隐藏
                this.showBlackBoxNone();
            },
            //显示录音 隐藏暂停
            showBlackBoxSpeak() {
                var bt_recoding = document.getElementById("bt_recoding");
                bt_recoding.textContent = '松开 发送';
            },
            //隐藏录音 显示暂停
            showBlackBoxPause() {
                var bt_recoding = document.getElementById("bt_recoding");
                bt_recoding.textContent = '上滑 取消';
            },
            //隐藏录音
            showBlackBoxNone() {
                this.isShowYuyin = false
                this.isShowQuxiao = false
            },

以下是循环实现音量的不停变化，因为没有获取音量的接口，所以直接写了动画

setTimer() {
                let that = this
                this.isShowYuyin = true
                var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                var num = index.length;
                var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
                this.timer = setInterval(function() {
                    setTimeout(function() {
                        num++;
                        that.imagetest2 = require('../../static/images/ic_record@2x.png')
                        that.imagetest1 = require(
                            `../../static/images/ic_record_ripple@2x-${index[num]}.png`)
                        that.bgColor = 'rgba(0,0,0,.7) !important'
                    if (num >= index.length - 1) {
                        num = 0;
                    }
                }, 70);
            }

基本的逻辑就是这样，有哪方面不对请指正