diff --git a/package.json b/package.json index 8299b0f..305ac1d 100644 --- a/package.json +++ b/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", diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index f764fc0..3621a7b 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -331,6 +331,7 @@ + @@ -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'); diff --git a/src/components/VueCodemirror/VueCodeMirror.vue b/src/components/VueCodemirror/VueCodeMirror.vue index fbc6148..2fe4f8a 100644 --- a/src/components/VueCodemirror/VueCodeMirror.vue +++ b/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(); diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue new file mode 100644 index 0000000..044d7fd --- /dev/null +++ b/src/components/preview/AudioPreview.vue @@ -0,0 +1,84 @@ + + + + + \ No newline at end of file diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue index 1214cce..2b7c6f6 100644 --- a/src/components/preview/SimTextPreview.vue +++ b/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 }">
{{file.name}}
diff --git a/src/main.js b/src/main.js index b8d1fda..94a3116 100644 --- a/src/main.js +++ b/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'}) diff --git a/src/utils/directives.js b/src/utils/directives.js index e2b7893..7bbf2a7 100644 --- a/src/utils/directives.js +++ b/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) {