1.0.1 • Published 11 months ago
zelos-ui v1.0.1
相关依赖
一、安装
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. 注意:
请参考前两个组件