From 6461f5659505768e7a90594c3aab47f90d9ee213 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 22 Aug 2022 00:37:40 +0800
Subject: [PATCH] 弹窗添加可移动
---
src/assets/md.less | 14 ++
src/components/fixed/header.vue | 3
src/config/moveDragModal.js | 46 +++++++++
src/components/mini/tagInfo.vue | 2
src/components/swichLabel/main2-music-search.vue | 4
src/components/group/MyPreviewModal.vue | 2
src/components/group/platformGroup2.vue | 54 ++++++++++
src/components/group/MyMessage.vue | 2
src/components/mini/mdDetail.vue | 11 +-
src/components/group/platformGroup.vue | 51 ++++++++++
src/components/mini/Aplayer.vue | 10 +
src/main.js | 8 +
src/components/group/MyVideo.vue | 13 +-
src/components/mini/box7-search.vue | 5
package.json | 1
src/config/router.config.js | 9 +
src/components/group/MyModal.vue | 4
src/App.vue | 18 ++
18 files changed, 220 insertions(+), 37 deletions(-)
diff --git a/package.json b/package.json
index 4e652ff..5936516 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"navigator": "^1.0.1",
"owo": "^1.0.2",
"text-loader": "^0.0.1",
+ "v-viewer": "^1.6.4",
"vue": "^2.6.14",
"vue-infinite-scroll": "^2.0.2",
"vue-markdown": "^2.2.4",
diff --git a/src/App.vue b/src/App.vue
index 421793e..e827779 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,6 +20,15 @@
<style lang="less">
+ body {
+ background: #f0f2f5;
+ }
+
+ .ant-modal-header {
+ //ant 弹窗移动样式
+ cursor: move;
+ }
+
#app {
// overflow: auto;
// border: none;
@@ -48,11 +57,11 @@
margin-top: 20px;
margin-bottom: 20px;
}
-
+
a {
position: relative;
}
-
+
a:hover:after {
left: 0;
width: 100%;
@@ -62,7 +71,7 @@
-o-transition: width 350ms;
transition: width 350ms;
}
-
+
a:after {
position: absolute;
bottom: -0.0625rem;
@@ -76,11 +85,12 @@
-o-transition: width 350ms, left 350ms;
transition: width 350ms, left 350ms;
}
+
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
-
+
.fade-enter,
.fade-leave-to {
opacity: 0;
diff --git a/src/assets/md.less b/src/assets/md.less
index 6e9b3a3..21b696b 100644
--- a/src/assets/md.less
+++ b/src/assets/md.less
@@ -20,7 +20,17 @@
p{
text-indent: 2rem;
}
-
+ img:hover{
+ transform: scale(1.05);
+ //box-shadow: 0 0 4px rgba(0,0,0,0.5);
+ -webkit-filter: drop-shadow(4px 4px 10px rgba(0,0,0,.5));
+ filter: drop-shadow(4px 4px 10px rgba(0,0,0,.5));
+ }
+ img{
+ border-radius: 12px;
+ margin: 10px auto;
+ transition: all .5s;
+ }
// img{
// max-width: -webkit-fill-available;
// display: inline;
@@ -165,7 +175,7 @@
}
blockquote {
border-left:.5em solid #cfcfcf;
- padding: 0 0 0 2em;
+ //padding: 0 0 0 2em;
margin-left:0;
}
blockquote cite {
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index 5fc3ae2..a5b9549 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -66,7 +66,8 @@
data() {
return {
search: {
- placeholder: "ctrl+shift+f/enter",
+ //placeholder: "ctrl+shift+f/enter",
+ placeholder: "搜索框未营业..",
// allowClear: true,
// autoFocus: true,
backfill: true,
diff --git a/src/components/group/MyMessage.vue b/src/components/group/MyMessage.vue
index 31428ee..291e9fe 100644
--- a/src/components/group/MyMessage.vue
+++ b/src/components/group/MyMessage.vue
@@ -1,6 +1,6 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="天涯共此时.." :footer="null"
+ <a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null"
:bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
<div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;">
diff --git a/src/components/group/MyModal.vue b/src/components/group/MyModal.vue
index 7e2799d..9330fcf 100644
--- a/src/components/group/MyModal.vue
+++ b/src/components/group/MyModal.vue
@@ -1,6 +1,6 @@
<template>
- <div class="myModal">
- <a-modal v-model="visible" title="日志添加" on-ok="handleOk"
+ <div class="myModal" ref="test">
+ <a-modal v-drag-modal v-model="visible" title="日志添加" on-ok="handleOk"
:bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
<template slot="footer">
<a-button key="reset" @click="reset" type="danger">
diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
index 7caf14a..02f55ea 100644
--- a/src/components/group/MyPreviewModal.vue
+++ b/src/components/group/MyPreviewModal.vue
@@ -1,6 +1,6 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
+ <a-modal v-drag-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
:bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
<div style="display: flex;">
<a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
index 9b57872..dd11d19 100644
--- a/src/components/group/MyVideo.vue
+++ b/src/components/group/MyVideo.vue
@@ -1,7 +1,7 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true"
- :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose">
+ <a-modal v-drag-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false"
+ :maskClosable="true" :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose">
<videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
</a-modal>
</div>
@@ -77,15 +77,12 @@
afterClose() {
//关闭视频播放
this.$refs.videoDetail.$refs.videoPlayBox.pauseMyVideo()
-
+
this.$emit("closeMyVideo")
}
},
}
</script>
-<style scoped>
-
-
-
-
+<style lang="less">
+
</style>
diff --git a/src/components/group/platformGroup.vue b/src/components/group/platformGroup.vue
new file mode 100644
index 0000000..6e1af1b
--- /dev/null
+++ b/src/components/group/platformGroup.vue
@@ -0,0 +1,51 @@
+<template>
+ <div>
+ <button type="button" class="button" @click="previewURL">URL Array</button>
+ <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
+ </div>
+</template>
+<script>
+ import 'viewerjs/dist/viewer.css'
+ import {
+ api as viewerApi
+ } from "v-viewer"
+ export default {
+ data() {
+ return {
+ sourceImageURLs: [
+ 'https://picsum.photos/200/200?random=1',
+ 'https://picsum.photos/200/200?random=2',
+ ],
+ sourceImageObjects: [{
+ 'src': 'https://picsum.photos/200/200?random=3',
+ 'data-source': 'https://picsum.photos/800/800?random=3'
+ },
+ {
+ 'src': 'https://picsum.photos/200/200?random=4',
+ 'data-source': 'https://picsum.photos/800/800?random=4'
+ }
+ ]
+ }
+ },
+ methods: {
+ previewURL() {
+ // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
+ const $viewer = this.$viewerApi({
+ images: this.sourceImageURLs
+ })
+ },
+ previewImgObject() {
+ // 或者你可以单独引入api然后执行它
+ const $viewer = viewerApi({
+ options: {
+ inline:true,
+ toolbar: true,
+ url: 'data-source',
+ initialViewIndex: 1
+ },
+ images: this.sourceImageObjects
+ })
+ }
+ }
+ }
+</script>
diff --git a/src/components/group/platformGroup2.vue b/src/components/group/platformGroup2.vue
new file mode 100644
index 0000000..fd79c87
--- /dev/null
+++ b/src/components/group/platformGroup2.vue
@@ -0,0 +1,54 @@
+<template>
+ <!-- <a-tabs :centered="true">
+ <a-tab-pane key="1" tab="月">
+ <videoList v-on="$listeners"></videoList>
+ </a-tab-pane>
+ <a-tab-pane key="2" tab="台">
+
+
+ </a-tab-pane>
+ </a-tabs> -->
+
+
+ <div>
+ <!-- <viewer :options="options" :images="images" @inited="inited" class="viewer" ref="viewer">
+ <template scope="scope">
+ <img v-for="src in scope.images" :src="src" :key="src">
+ {{scope.options}}
+ </template>
+ </viewer>
+ <button type="button" @click="show">Show</button> -->
+ 11
+ </div>
+</template>
+
+<script>
+ // import videoList from "../mini/box14-video.vue"
+ // import 'viewerjs/dist/viewer.css'
+ // // import Viewer from "v-viewer/src/component.vue"
+ // import Viewer from "v-viewer/dist/v-viewer.min.js"
+
+ export default {
+ // components: {
+ // videoList,
+ // Viewer
+ // },
+ // data() {
+ // images: ['1.jpg', '2.jpg']
+ // },
+ // methods: {
+ // inited(viewer) {
+ // this.$viewer = viewer
+ // },
+ // show() {
+ // //调用$viewer的show方法，默认显示第一张图片
+ // this.$viewer.show()
+ // //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
+ // //this.$viewer.view(index)
+ // }
+ // }
+ }
+</script>
+
+<style>
+</style>
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
index 42c0fb9..9421d4d 100644
--- a/src/components/mini/Aplayer.vue
+++ b/src/components/mini/Aplayer.vue
@@ -1,7 +1,8 @@
<template>
<div class="fade">
<a-col v-bind="colMain">
- <aplayer :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" :preload="preload" />
+ <aplayer ref="myAplayer" :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1"
+ :preload="preload" />
</a-col>
<!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
@@ -15,7 +16,12 @@
import APlayer from '@moefe/vue-aplayer';
export default {
-
+ created() {
+ this.$nextTick(function() {
+ this.$message.info("stop..")
+ this.$refs.myAplayer.pause();
+ })
+ },
data() {
return {
colMain: {
diff --git a/src/components/mini/box7-search.vue b/src/components/mini/box7-search.vue
index 5356253..0938545 100644
--- a/src/components/mini/box7-search.vue
+++ b/src/components/mini/box7-search.vue
@@ -23,13 +23,14 @@
export default {
name: "box",
props: {
- searchType: ""
+ searchType: "",
},
data() {
return {
sentence: "十里寒塘路,烟花一半醒",
search: {
- placeholder: "搜索..",
+ //placeholder: "搜索..",
+ placeholder: "此搜索框未营业..",
// autoFocus: true,
backfill: true,
value: '',
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index b85966b..5f46771 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -49,12 +49,10 @@
{{introduce}}
</pre>
</div>
-
- <div class="markdown-body article-detail " v-else>
- <vue-markdown :source="source" ></vue-markdown>
+ <div v-viewer.static class="markdown-body article-detail" v-else>
+ <vue-markdown :source="source"></vue-markdown>
</div>
</div>
-
<!-- <div class="articleInfoMiniData">
<div>
<a-icon type="calendar" class="samllPadding" />
@@ -83,7 +81,6 @@
</div>
</div>
-
</template>
<script>
@@ -207,7 +204,9 @@
.get(res.data.articleFileURL)
.then((res) => {
this.source = res.data;
- })
+ }).catch(()=>[
+ this.$message.error("获取文件好像失败了..",3)
+ ])
}
//获取日志资源文件
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 99aa9fb..016d0ab 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -29,7 +29,7 @@
<span style="font-size: 10px;color: #999">(小乖)</span>
</li>
<br>
- <li> touch: inleft#qq.com</li><span style="font-size: 10px;color: #999">替换#为@</span>
+ <!-- <li> touch: inleft#qq.com</li><span style="font-size: 10px;color: #999">替换#为@</span> -->
</ul>
</p>
diff --git a/src/components/swichLabel/main2-music-search.vue b/src/components/swichLabel/main2-music-search.vue
index 02cd100..b5dc323 100644
--- a/src/components/swichLabel/main2-music-search.vue
+++ b/src/components/swichLabel/main2-music-search.vue
@@ -2,7 +2,7 @@
<div class="blog-main">
<a-row>
<a-col v-bind="colApiLeft">
- <box7 :searchType="searchType" class="fade"></box7>
+ <box7 :searchType="searchType" class="fade" > </box7>
</a-col>
<a-col v-bind="colApiMain" class="holdHeight">
<!-- <box8></box8> -->
@@ -33,7 +33,7 @@
data() {
return {
- searchType: "乐谱搜索",
+ searchType: "视频/乐谱 搜索",
colApiLeft: {
xs: 24,
sm: {
diff --git a/src/config/moveDragModal.js b/src/config/moveDragModal.js
new file mode 100644
index 0000000..0866b03
--- /dev/null
+++ b/src/config/moveDragModal.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+
+Vue.directive('drag-modal', (el, bindings, vnode) => {
+ Vue.nextTick(() => {
+ let {
+ visible,
+ destroyOnClose
+ } = vnode.componentInstance
+ // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
+ if (!visible) return
+ let modal = el.getElementsByClassName('ant-modal')[0]
+ let header = el.getElementsByClassName('ant-modal-header')[0]
+ let left = 0
+ let top = 0
+
+ // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
+ if (!destroyOnClose) {
+ left = modal.left || 0
+ top = modal.top || 0
+ }
+ // top 初始值为 offsetTop
+ top = top || modal.offsetTop
+ header.onmousedown = e => {
+ let startX = e.clientX;
+ let startY = e.clientY;
+ header.left = header.offsetLeft;
+ header.top = header.offsetTop;
+ el.onmousemove = event => {
+ let endX = event.clientX;
+ let endY = event.clientY;
+ modal.left = header.left + (endX - startX) + left;
+ modal.top = header.top + (endY - startY) + top;
+ modal.style.left = modal.left + 'px'
+ modal.style.top = modal.top + 'px'
+ }
+ el.onmouseup = event => {
+ left = modal.left
+ top = modal.top
+ el.onmousemove = null;
+ el.onmouseup = null;
+ header.releaseCapture && header.releaseCapture();
+ }
+ header.setCapture && header.setCapture();
+ }
+ })
+})
diff --git a/src/config/router.config.js b/src/config/router.config.js
index c7b9eed..1356650 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -9,6 +9,8 @@
import login from '../components/swichLabel/main5-login.vue'
import comment from '../components/swichLabel/main6-comment.vue'
+import platformGroup from '../components/group/platformGroup.vue'
+
import box1 from '../components/mini/box1-info.vue'
import tagTime from '../components/mini/tagTime.vue'
import tagInfo from '../components/mini/tagInfo.vue'
@@ -77,15 +79,14 @@
component: articleList,
}]
},
-
{
path: '/platform',
component: platform,
children: [{
path: '/',
- name: "videoList",
- component: videoList,
- },{
+ name: "platformGroup",
+ component: platformGroup,
+ }, {
path: '/videoDetail',
name: "videoDetail",
component: videoDetail,
diff --git a/src/main.js b/src/main.js
index 910859d..bdf259d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,11 +2,18 @@
import App from './App';
import axios from 'axios'
import router from './router/router.js'
+import moveDragMoDal from '@/config/moveDragModal.js'
+import './mock/'
import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
+
+import 'viewerjs/dist/viewer.css'
+import VueViewer from 'v-viewer'
+ Vue.use(VueViewer)
+
import 'animate.css'
// import wow from 'wowjs'
@@ -20,7 +27,6 @@
Vue.use(APlayer, {
productionTip: false
})
-import './mock/'
Vue.prototype.$axios = axios
--
Gitblit v1.9.1