拿來就用vue-gird-layout組件封裝示例

更新時間：2023年08月01日 11:31:58 作者：Xbbing

這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

先來效果圖展示

展示

拖拽尺寸

拖拽后

移動

組件封裝

大家這塊直接復(fù)制使用就OK

<template>
    <grid-layout
            :layout="layout"
            :col-num="colNum"
            :row-height="rowHeight"
            :is-mirrored="isMirrored"
            :vertical-compact="verticalCompact"
            :margin="margin"
            :use-css-transforms="useCssTransforms"
            :useStyleCursor="useStyleCursor"
            :is-draggable="isDraggable"
            :is-resizable="isResizable"
            @layout-updated="layoutUpdatedEvent"
    >
        <grid-item v-for="(item, index) in layout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :minW="minW"
            :minH="minH"
            :key="index"
            @resized="resize(item.i)">
            <slot name="chart" :item="item" :index="index"></slot>
        </grid-item>
    </grid-layout>
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
// import Chart from "@/components/chart/index.vue";
export default {
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        // Chart
    },
    props: {
        // 布局?jǐn)?shù)據(jù)
        layout: {
            type: Array,
            default: () => []
        },
        // 是否可拖拽
        isDraggable: {
            type: Boolean,
            default: true
        },
        // 是否可改變大小
        isResizable: {
            type: Boolean,
            default: true
        },
        // 多少列
        colNum: {
            type: Number,
            default: 12
        },
        // 每行得高度
        rowHeight: {
            type: Number,
            default: 30
        },
        // 是否可鏡像反轉(zhuǎn)
        isMirrored: {
            type: Boolean,
            default: false
        },
        // 標(biāo)識布局是否垂直壓縮
        verticalCompact: {
            type: Boolean,
            default: true
        },
        // 定義柵格中的元素邊距
        margin: {
            type: Array,
            default: () => [10,10]
        },
        // 標(biāo)識是否使用CSS屬性 transition-property: transform;
        useCssTransforms: {
            type: Boolean,
            default: true
        },
        // 是否使用動態(tài)鼠標(biāo)指針樣式
        useStyleCursor: {
            type: Boolean,
            default: true
        },
        // 元素最小寬
        minW: {
            type: Number,
            default: 1
        },
        // 最小高
        minH: {
            type: Number,
            default: 1
        },
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            height: '',
            option: {},
            gridShow: false
        }
    },
    methods: {
        layoutUpdatedEvent(newLayout) {
            this.$emit('layoutUpdatedEvent',newLayout)
        },
        // 更新resize
        resize(i) {
            this.$emit('resize',i)
        }
    }
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
    height: 100%;
}
</style>

組件的調(diào)用

（主要是使用這塊上面的直接復(fù)制即可）

<template>
    <div>
        <gridCanvas :layout="layout" @layoutUpdatedEvent="layoutUpdatedEvent" @resize="resize">
            <template #chart="{item,index}">
                <el-card v-if="show" ref="elCard" style="height: 100%" :key="item.i">
                    <Chart :ref="'echarts'+item.i" :chartsData="item.data" :radioShow="false" :height="'100%'" :id="index"></Chart>
                </el-card>
            </template>
        </gridCanvas>
    </div>
</template>
<script>
import gridCanvas from "@/components/gridCanvas/index.vue";
import Chart from "@/components/chart/index.vue";
export default {
    components: {
        gridCanvas,
        Chart
    },
    data() {
        return {
            show: false,
            layout: [
                {"x":0,"y":0,"w":6,"h":10,"i":"0",
                    data: {
                        descData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                        dis_type: "barh",
                        label_desc: "最近一次測試",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "圖標(biāo)1",
                        xData: [2211, 333, 372, 226, 248, 218, 103, 199, 174, 177, 146, 148, 171, 162],
                        yData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                    }
                },
                {"x":4,"y":0,"w":4,"h":8,"i":"1",
                    data: {
                        descData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                        dis_type: "pie",
                        label_desc: "最近二次測試",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "圖標(biāo)2",
                        xData: [810, 357, 372, 226, 248, 218, 193, 189, 174, 477, 146, 148, 131, 162],
                        yData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                    }
                },
                {"x":0,"y":5,"w":4,"h":8,"i":"6",
                    data: {
                        descData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                        dis_type: "bar",
                        label_desc: "最近三次測試",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "圖標(biāo)3",
                        xData: [810, 377, 342, 286, 274, 219, 190, 199, 174, 147, 146, 438, 171, 162],
                        yData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
                    }
                },
            ]
        }
    },
    methods: {
        // 拖拽之后觸發(fā)
        layoutUpdatedEvent(newLayout) {
            console.log(newLayout)
        },
        resize(i) {
            this.$nextTick(() => {
                const chart = eval(`this.$refs.echarts${i}`)
                if(chart) {
                    chart.resize()
                }
            })
        }
    },
    mounted() {
        setTimeout(() => {
            this.show = true
        })
    }
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
    height: 100%;
}
</style>

使用講解

直接引用我們自己封裝的組件代碼中chart組件為我自己封裝的echarts組件,后續(xù)我會更新，你只需講chart組件換為你自己封裝的組件其中#chart為插槽參數(shù) （其實(shí)就是每塊的數(shù)據(jù)）layout變量為grid的核心數(shù)據(jù),分別代表x軸坐標(biāo)y軸坐標(biāo)寬度和高度其中data為你需要渲染的數(shù)據(jù) 還不能使用的

您可能感興趣的文章: