添加音乐播放器

package.json

@@ -40,6 +40,7 @@
     "viewerjs": "^1.5.0",
     "vonic": "^1.1.3",
     "vue": "2.6.10",
+    "vue-aplayer": "^1.6.1",
     "vue-codemirror-lite": "^1.0.4",
     "vue-grid-layout": "^2.3.7",
     "vue-router": "3.0.6",

src/components/ShowFile/ShowFile.vue

@@ -331,6 +331,7 @@
     <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
+    <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview>
   </div>
 </template>
 
@@ -354,10 +355,11 @@
   import SimTextPreview from "@/components/preview/SimTextPreview";
   import ImageViewer from "@/components/preview/ImageViewer";
   import VideoPreview from "@/components/preview/VideoPreview";
+  import AudioPreview from "@/components/preview/AudioPreview";
 
   export default {
     name: 'ShowFile',
-    components: {VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile},
+    components: {AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile},
     props: {
       emptyStatus: {
         'type': String,
@@ -543,6 +545,8 @@
         imagePreviewVisible : false,
         videoPreviewRow: {},
         videoPreviewVisible: false,
+        audioPreviewRow: {},
+        audioPreviewVisible: false,
       }
     },
     computed: {
@@ -1912,11 +1916,17 @@
             return
           }
           if(row.contentType.indexOf('video') > -1){
-            // 视屏
+            // 视频文件
             this.videoPreviewVisible = true
             this.videoPreviewRow = row
             return
           }
+          if(row.contentType.indexOf('audio') > -1){
+            // 音频文件
+            this.audioPreviewVisible = true
+            this.audioPreviewRow = row
+            return
+          }
           if(row.contentType.includes('text')){
             // let routeData = this.$router.resolve({path: '/public/articles/article',query: {mark: row.id}})
             // window.open(routeData.href, '_blank');

src/components/VueCodemirror/VueCodeMirror.vue

@@ -113,8 +113,10 @@
         var editorValue = this.editor.getValue()
         if (newVal !== editorValue) {
           this.skipNextChangeEvent = true
-          var scrollInfo = this.editor.getScrollInfo()
+          // var scrollInfo = this.editor.getScrollInfo()
+          // this.editor.refresh()
           this.editor.setValue(newVal)
+          this.editor.scrollTo(0, 0)
           // this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
         }
         this.editor.clearHistory();

src/components/preview/AudioPreview.vue

@@ -0,0 +1,84 @@
+<template>
+<div v-if="show">
+  <div class="audio-player" v-aplayerDrag="{ x: transformX, y: transformY }">
+  <!-- <div class="audio-player"> -->
+    <aplayer 
+    autoplay
+    :list="list"
+    :music="musicOperation"
+    :float="true"
+  />
+  </div>
+</div>
+</template>
+
+<script>
+import '@/utils/directives.js'
+import Aplayer from 'vue-aplayer'
+export default {
+    name: 'VideoPreview',
+    components: {
+      Aplayer
+    },
+    props: {
+      file: {
+        type: Object,
+        default: function () {
+          return {}
+        }
+      },
+      status: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    data() {
+      return {
+        transformX: 0,
+        transformY: 0,
+        show: this.status,
+        list: [],
+        audioProps: {}
+      }  
+    },
+    watch: {
+      file: function(newFile){
+        let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
+        this.musicOperation = {
+          theme: 'pic',
+          title: newFile.name,
+          artist: 'Silent Siren',
+          src: url,
+          pic: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+        }
+        this.list.push(this.musicOperation)
+      },
+      status: function(visible){
+        if(visible){
+          this.show = true
+        }
+      }
+    },
+    methods: {
+      close(){
+        this.show = false
+        this.$emit('update:status', false)
+      }
+    }
+}
+</script>
+
+<style>
+.aplayer {
+  position: fixed;
+  width: 500px;
+}
+.audio-player {
+  z-index: 2005;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+</style>

src/components/preview/SimTextPreview.vue

@@ -5,7 +5,7 @@
              :close-on-click-modal="false"
              @close="closeDialog"
              :before-close="handleClose"
-             dialogDragWidth v-dialogDrag="{ x: transformX, y: transformY }">
+             v-dialogDrag="{ x: transformX, y: transformY }">
     <div slot="title" class="header-title">
           <span class="title-name">{{file.name}}</span>
         <div class="title-extension">

src/main.js

@@ -26,8 +26,6 @@ import '@/permission' // permission control
 
 import VueTouch from"vue-touch";
 import Viewer from 'v-viewer'
-// import VideoPlayer from 'vue-video-player'
-// Vue.use(VideoPlayer)
 Vue.use(Viewer)
 Vue.use(VueTouch, {name:'v-touch'})
 

src/utils/directives.js

@@ -1,6 +1,65 @@
 
 import Vue from 'vue'
 
+// v-aplayerDrag: 音乐播放拖拽
+Vue.directive('aplayerDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    // 获取拖拽内容头部
+    const dialogHeaderEl = el.querySelector('.aplayer-music');
+    const dragDom = el;
+    dragDom.style.transform="translate("+binding.value.x+"px,"+binding.value.y+"px)";
+    dialogHeaderEl.style.cursor = 'move';
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+    // 鼠标按下事件
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
+      const disX = e.clientX - dialogHeaderEl.offsetLeft + 76;
+      const disY = e.clientY - dialogHeaderEl.offsetTop + 14;
+      // 获取到的值带px 正则匹配替换
+      let styL, styT;
+      // 注意在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;
+      };
+      console.log('styL',styL,'styT',styT,'disX',disX,'disY',disY)
+      // 鼠标拖拽事件
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
+        const l = e.clientX - disX;
+        const t = e.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;
+      };
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }
+  }
+})
+
+
 // v-dialogDrag: 弹窗拖拽
 Vue.directive('dialogDrag', {
   bind(el, binding, vnode, oldVnode) {