优化：移动端音频预览

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
         }

src/components/preview/AudioPreview.vue

@@ -2,7 +2,7 @@
   <div ref="audioPreview" v-if="show">
   <div class="audio-player"
     v-aplayerDrag="{ x: transformX, y: transformY }"
-    @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false">
+    @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend">
     <aplayer
       ref="audioPlayer"
       autoplay
@@ -35,7 +35,8 @@ export default {
     },
     data() {
       return {
-        transformX: (document.body.clientWidth-500)/2,
+        pc: this.$pc,
+        transformX: !this.$pc ? 20: (document.body.clientWidth-500)/2,
         transformY: 0,
         show: false,
         closeBarShow: false,
@@ -49,7 +50,7 @@ export default {
           theme: '', // 歌曲的主题色，会覆盖播放器的主题色
         },
         list: [],
-        mini: false,
+        mini: !this.$pc,
         audioPlayerDoc: undefined
       }
     },
@@ -98,6 +99,12 @@ export default {
         this.audioPlayerDoc = undefined
         this.$refs.audioPlayer.pause()
         this.list.splice(0, this.list.length)
+      },
+      touchend() {
+        const that = this
+        setTimeout(function (){
+          that.closeBarShow = false
+        }, 2500)
       }
     },
     destroyed() {
@@ -168,4 +175,25 @@ export default {
     top: -8px;
     right: 13px;
 }
+@media screen and (max-width: 768px) {
+  /deep/.aplayer {
+    z-index: 2;
+  }
+  .close-bar {
+    top: -34px;
+    right: -34px;
+    border-radius: 36px;
+    border-width: 20px;
+    z-index: 1;
+    transform: rotate(135deg);
+    border-color: #ff000075;
+    /deep/.audio-player-close {
+      top: -7px;
+      right: -7px;
+    }
+  }
+  .close-bar:hover {
+    border-color: #ff0000eb;
+  }
+}
 </style>

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;

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)
           }