弹窗添加可移动

 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",

 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;

 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 {

 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,

 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;">

 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">

 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"

 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>

 src/components/group/platformGroup.vue

New file
@@ -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>

 src/components/group/platformGroup2.vue

New file
@@ -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>

 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: {

 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: '',

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

                    //获取日志资源文件

 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>


 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: {

 src/config/moveDragModal.js

New file
@@ -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();
        }
    })
})

 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,

 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