diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 835b3af..378d100 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -2951,8 +2951,6 @@ export default { } if (row.contentType.indexOf('audio') > -1) { // 音频文件 - // this.audioPreviewVisible = true - // this.audioPreviewRow = row Bus.$emit('onAddAudio', row, this.audioCoverUrl) return } diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue index 0bafa0e..fa82758 100644 --- a/src/components/preview/AudioPreview.vue +++ b/src/components/preview/AudioPreview.vue @@ -2,7 +2,7 @@
+ @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend"> diff --git a/src/utils/directives.js b/src/utils/directives.js index 7093a86..ca2a85e 100644 --- a/src/utils/directives.js +++ b/src/utils/directives.js @@ -75,6 +75,49 @@ Vue.directive('aplayerDrag', { // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); // 鼠标按下事件 + dragDom.addEventListener('touchstart', touchstart, false); + dragDom.addEventListener('touchmove', touchmove, false); + let disX,disY,styL,styT; + function touchstart(e) { + // 鼠标按下,计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离) + disX = e.touches[0].clientX - dialogHeaderEl.offsetLeft; + disY = e.touches[0].clientY - dialogHeaderEl.offsetTop; + // 获取到的值带px 正则匹配替换 + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px + if (sty.left.includes('%')) { + styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) + binding.value.x; + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) + binding.value.y; + } else { + styL = +sty.left.replace(/\px/g, '') + binding.value.x; + styT = +sty.top.replace(/\px/g, '') + binding.value.y; + } + } + // 鼠标拖拽事件 + function touchmove(e) { + e.preventDefault() + // 通过事件委托,计算移动的距离 (开始拖拽至结束拖拽的距离) + const l = e.touches[0].clientX - disX; + const t = e.touches[0].clientY - disY; + let finallyL = l + styL; + let finallyT = t + styT; + // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值 + if (finallyL < 0) {//// 左边 + finallyL = 0 + } else if (finallyL > document.body.clientWidth - dragDom.clientWidth) {///右边 + finallyL = document.body.clientWidth - dragDom.clientWidth + } + + if (finallyT < 0) {////顶部 + finallyT = 0 + } else if (finallyT > document.body.clientHeight - dragDom.clientHeight) (///底部 + finallyT = document.body.clientHeight - dragDom.clientHeight + ) + dragDom.style.transform = "translate(" + finallyL + "px," + finallyT + "px)"; + //将此时的位置传出去 + binding.value.x = finallyL; + binding.value.y = finallyT; + } + // 鼠标按下事件 dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离) const disX = e.clientX - dialogHeaderEl.offsetLeft + 81; diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue index 559adf4..0d5710f 100644 --- a/src/views/home/mobile/index.vue +++ b/src/views/home/mobile/index.vue @@ -979,6 +979,11 @@ this.videoPreviewRow = row return } + if (row.contentType.indexOf('audio') > -1) { + // 音频文件 + Bus.$emit('onAddAudio', row, this.audioCoverUrl) + return + } // 通用打开文件的方法 fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token) }