首先创建两个图层，用来显示不同的状态
<!-- 中间黑框 录音状态 -->
<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);
}
基本的逻辑就是这样，有哪方面不对请指正
