相关依赖

一、安装

   yarn add vue3-draggable-resizable zelos-ui --save-dev

二、引入

import { createApp } from 'vue'
import App from './App.vue'
import VueDraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import zelos from 'zelos-ui'
import'zelos-ui/style.css'

createApp(App).use(zelos).use(VueDraggableResizable).mount('#app')

zelos 公共组件库

一、可自由拖拽缩放的组件--GDragResize

1. 使用方法

    <g-drag-resize :initConfig="initConfig" @resize="onResize">
        <div>这里放用户自定义的组件或者模板</div>
    </g-drag-resize>

   const initConfig = reactive({
      onlyKey: 'pie1',  // 组件唯一的标识,必须传
      w: 800, // 可拖拽组件的宽度,默认最小100，可选
      h: 600, // 可拖拽组件的高度,默认最小100，可选
      x: 500, // 可拖拽组件的x坐标,默认0，可选
      y: 100, // 可拖拽组件的y坐标,默认0，可选
      draggable: false, // 是否可拖拽,默认true，可选
      resizable: false, // 是否可改变大小,默认true，可选
   })

   const onResize = () => {
      // 这个是拖拽组件拖动结束后的回调，用于通知父组件拖拽结束，可选
   }

2. 注意：

当没有设置w h x y 的值时，组件会记录用户拖拽大小和位置，下次打开或者刷新页面都会按照最后一次进行渲染 当设置w h x y 的值时，组件将会按照设置的值进行渲染，且不会记录用户的拖拽大小和位置 如果既要设置值，又要记录用户的拖拽行为时，可以先判断本地存储是否有值，没值再设置，有值就不设置，即可 本地存储获取的方法: localStorage.getItem(drag-resize-${你设置的onlykey})

二、echarts图表组件--GEcharts

1. 使用方法

   <g-echarts :initConfig="initConfig" :options="options"></g-echarts>

   const initConfig = reactive({
      onlyKey: 'echart',  // 组件唯一的标识，必须传，且唯一
      class: 'className', // 类名，可选，默认空
   })
   const options = reactive({
      // 这里是图表的配置项，根据自己的实际业务进行传值
      // 以下是默认值
      title: {
         text: '',
         padding: [5, 0, 0, 0]
      },
      tooltip: {
         trigger: 'axis'
      },
      legend: {
         data: []
      },
      grid: {
         top: '5%',
         left: '5%',
         right: '5%',
         bottom: '5%',
         containLabel: true
      },
      toolbox: {
         feature: {
            saveAsImage: {},
            dataZoom: {}
         }
      },
      dataZoom: [
         {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100
         },
         {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            start: 0,
            end: 100
         },
         {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 100
         },
         {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100
         }
      ],
   })

2. 注意：

该插件单独使用时需要给父盒子设置宽高，不然可能会因为高度塌陷而显示不出来图表

三、echarts图表和拖拽组件的组合组件--GCompositionEchart

1. 使用方法

<g-composition-echart :initConfig="initConfig" :options="options"></g-composition-echart>

const initConfig = reactive({
  show: true, // 是否显示，默认true，可选
  onlyKey: 'pie1',  // 组件唯一的标识,必须传
  w: 800, // 可拖拽组件的宽度,默认最小100，可选
  h: 600, // 可拖拽组件的高度,默认最小100，可选
  x: 500, // 可拖拽组件的x坐标,默认0，可选
  y: 100, // 可拖拽组件的y坐标,默认0，可选
  draggable: false, // 是否可拖拽,默认true，可选
  resizable: false, // 是否可改变大小,默认true，可选
  class: 'out_echart_wrap',
})

const options = reactive({
   // 这里是图表的配置项，根据自己的实际业务进行传值
   // 默认值同上
})

2. 注意：

请参考前两个组件