首页模块可自由拖动的切换位置，带动画效果

最新推荐文章于 2023-11-27 09:45:00 发布

铁头vs头铁

最新推荐文章于 2023-11-27 09:45:00 发布

阅读量803

点赞数

分类专栏：分享文章标签： vue 拖拽

本文链接：https://blog.csdn.net/qq_37957866/article/details/103715912

版权

分享专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求：在其他页面添加首页报表模块。模块添加到首页后，可随意拖动，并插入当前位置。

<template>
    <div class="content-default" style="padding: unset;overflow-y: scroll">
        <transition-group tag="div" class="container">
            <div class="item" v-for="(item,index) in items" :key="item.key "
                 draggable="true"
                 @dragstart="handleDragStart($event, index)"
                 @drop.prevent="drop($event, index)"
                 @dragover.prevent>
                <div style="margin: 10px;border: 1px solid #c0c4cc;height: calc(100% - 20px);width: calc(100% - 20px)">
                    <div style="width: 100%;height: 40px;background: #f1f1f1;">
                        <span style="display: inline-block;margin-left: 20px;font-weight: 600;font-size: 18px;border-left: 6px solid #1890ff;line-height: 18px;margin-top: 10px;padding-left: 6px">顾客类型分布</span>
                        <span style="font-size: 12px;color: #c0c4cc;display: inline-block">(全品牌/全部性别/2019-10-10至2019-11-15)</span>
                        <i class="el-icon-delete" style="float: right;display: inline-block;line-height: 40px;margin-right: 15px;cursor: pointer"></i>
                    </div>
                    <ve-ring :series="item.series" width="100%" height="calc(100% - 40px)" :legend="item.legend"></ve-ring>
                </div>
            </div>
        </transition-group>
    </div>
</template>

<script>

    export default {

        name: 'Toolbar',

        data() {
            return {
                items: [],
                draggingIndex: 0, //拖动div的下标
                dropIndex: 0 //拖到那个div的下标
            }
        },
        mounted() {
            //初始化图表结构
            for (let i = 0; i < 5; i++) {
                this.items.push(
                    {
                        key:i,
                        series: [
                            {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            center: ["30%", "50%"],
                            label: {
                                show:false
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                        ],
                        legend: {
                            orient: 'vertical',
                            x: '60%',
                            y: "15%",
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        }
                    }
                )
            }
        },

        methods: {
            handleDragStart(e, index) {
                this.draggingIndex = index;
            },
            drop(e, index) {
                if (index === this.draggingIndex) {
                    return
                }
                this.items.splice(index, 0, this.items.splice(this.draggingIndex, 1)[0]);
            }
        }
    }

</script>

<style scoped>

    .container {
        width: 100%;
        height: 100%;
    }

    .item {
        width: 50%;
        height: 50%;
        float: left;
        transition: all linear .3s;
    }

</style>