diff --git a/src/assets/svgs/el-button.svg b/src/assets/svgs/el-button.svg
new file mode 100644
index 0000000..ec1af84
--- /dev/null
+++ b/src/assets/svgs/el-button.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/src/assets/svgs/el-tag.svg b/src/assets/svgs/el-tag.svg
new file mode 100644
index 0000000..e981826
--- /dev/null
+++ b/src/assets/svgs/el-tag.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/src/components/webtopo-svgedit/components/center-panel/index.vue b/src/components/webtopo-svgedit/components/center-panel/index.vue
index a51a409..68d884b 100644
--- a/src/components/webtopo-svgedit/components/center-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/center-panel/index.vue
@@ -74,6 +74,26 @@
item.actual_bound.width / 2
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
>
+
+ {{ item.tag_slot }}
+
+
(globalStore.config_center.svg文件);
- const activeNames = ref(['stateful', 'stateless', 'have_animation', 'custom_svg_group']);
+ const activeNames = ref([
+ 'stateful',
+ 'stateless',
+ 'have_animation',
+ 'custom_svg_group',
+ 'element-ui'
+ ]);
const libChange = (val: any) => {
config_center.value = [];
config_center.value = val;
diff --git a/src/components/webtopo-svgedit/components/right-panel/index.vue b/src/components/webtopo-svgedit/components/right-panel/index.vue
index 8628b4f..89e3d95 100644
--- a/src/components/webtopo-svgedit/components/right-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/right-panel/index.vue
@@ -49,6 +49,13 @@
>
+
+
+
diff --git a/src/config-center/index.ts b/src/config-center/index.ts
index 1ac0f66..9e0973d 100644
--- a/src/config-center/index.ts
+++ b/src/config-center/index.ts
@@ -1,12 +1,14 @@
import { svgfile_config_center } from './svg-file';
import { IComponentImport, IConfigCenter } from './types';
import customSvgText from '@/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue';
+import { vue_config_center } from './vue';
+import { ElButton, ElTag } from 'element-plus';
export const configCenter: IConfigCenter = {
svg文件: svgfile_config_center,
- vue组件: [],
- 自定义组件: [],
- 图表: []
+ vue组件: vue_config_center
};
export const ComponentImport: IComponentImport = {
- 'custom-svg-text': customSvgText
+ 'custom-svg-text': customSvgText,
+ 'el-button': ElButton,
+ 'el-tag': ElTag
};
diff --git a/src/config-center/svg-file/stateless/alternator/index.ts b/src/config-center/svg-file/stateless/alternator/index.ts
index e9a92a1..1e52e93 100644
--- a/src/config-center/svg-file/stateless/alternator/index.ts
+++ b/src/config-center/svg-file/stateless/alternator/index.ts
@@ -13,7 +13,7 @@ export const alternator_svg_file: IConfigItem = {
fill: {
title: '填充色',
type: EConfigItemPropsType.Color,
- val: '#ff0000'
+ val: '#00ff00'
}
}
};
diff --git a/src/config-center/types.ts b/src/config-center/types.ts
index f73ae48..d3f4514 100644
--- a/src/config-center/types.ts
+++ b/src/config-center/types.ts
@@ -24,13 +24,14 @@ export interface IConfigItem {
animations?: IConfigItemProps;
tag?: any;
state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件
+ tag_slot?: string;
}
export interface IConfigItemProps {
[key: string]: {
title: string;
type: EConfigItemPropsType;
val: any;
- options?: { value: any; label: string }[];
+ options?: any;
disabled?: boolean;
};
}
@@ -53,7 +54,8 @@ export enum EDoneJsonType {
File = 'File',
StraightLine = 'StraightLine',
ConnectionLine = 'ConnectionLine',
- CustomSvg = 'CustomSvg'
+ CustomSvg = 'CustomSvg',
+ Vue = 'Vue'
}
interface IDoneJsonConfig {
can_zoom: boolean;
diff --git a/src/config-center/vue/element-ui/button/index.ts b/src/config-center/vue/element-ui/button/index.ts
new file mode 100644
index 0000000..e6c2ee2
--- /dev/null
+++ b/src/config-center/vue/element-ui/button/index.ts
@@ -0,0 +1,48 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
+
+export const el_button_vue: IConfigItem = {
+ name: 'el-button',
+ tag: 'el-button',
+ title: '按钮',
+ type: EDoneJsonType.Vue,
+ config: {
+ can_zoom: true,
+ have_anchor: true,
+ actual_rect: true
+ },
+ props: {
+ size: {
+ title: '尺寸',
+ type: EConfigItemPropsType.Select,
+ val: 'default',
+ options: [
+ { label: '大', value: 'large' },
+ { label: '默认', value: 'default' },
+ { label: '小', value: 'small' }
+ ]
+ },
+ type: {
+ title: '类型',
+ type: EConfigItemPropsType.Select,
+ val: 'primary',
+ options: [
+ { label: '主要按钮', value: 'primary' },
+ { label: '成功按钮', value: 'success' },
+ { label: '警告按钮', value: 'warning' },
+ { label: '危险按钮', value: 'danger' },
+ { label: '信息按钮', value: 'info' }
+ ]
+ },
+ plain: {
+ title: '朴素按钮',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ },
+ text: {
+ title: '文字按钮',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ }
+ },
+ tag_slot: '按钮'
+};
diff --git a/src/config-center/vue/element-ui/index.ts b/src/config-center/vue/element-ui/index.ts
new file mode 100644
index 0000000..e244c54
--- /dev/null
+++ b/src/config-center/vue/element-ui/index.ts
@@ -0,0 +1,9 @@
+import { IConfigComponentGroup } from '@/config-center/types';
+import { el_button_vue } from './button';
+import { el_tag_vue } from './tag';
+
+export const element_ui_group: IConfigComponentGroup = {
+ groupType: 'element-ui',
+ title: 'element-ui',
+ list: [el_button_vue, el_tag_vue]
+};
diff --git a/src/config-center/vue/element-ui/tag/index.ts b/src/config-center/vue/element-ui/tag/index.ts
new file mode 100644
index 0000000..d7b268c
--- /dev/null
+++ b/src/config-center/vue/element-ui/tag/index.ts
@@ -0,0 +1,37 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
+
+export const el_tag_vue: IConfigItem = {
+ name: 'el-tag',
+ tag: 'el-tag',
+ title: '标签',
+ type: EDoneJsonType.Vue,
+ config: {
+ can_zoom: true,
+ have_anchor: true,
+ actual_rect: true
+ },
+ props: {
+ type: {
+ title: '类型',
+ type: EConfigItemPropsType.Select,
+ val: 'success',
+ options: [
+ { label: '成功', value: 'success' },
+ { label: '警告', value: 'warning' },
+ { label: '危险', value: 'danger' },
+ { label: '信息', value: 'info' }
+ ]
+ },
+ closable: {
+ title: '可关闭',
+ type: EConfigItemPropsType.Switch,
+ val: true
+ },
+ 'disable-transitions': {
+ title: '渐变',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ }
+ },
+ tag_slot: '标签'
+};
diff --git a/src/config-center/vue/index.ts b/src/config-center/vue/index.ts
new file mode 100644
index 0000000..3380e38
--- /dev/null
+++ b/src/config-center/vue/index.ts
@@ -0,0 +1,4 @@
+import { IConfigComponentGroup } from '../types';
+import { element_ui_group } from './element-ui';
+
+export const vue_config_center: IConfigComponentGroup[] = Object.seal([element_ui_group]);
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dd9df0d..ce6e87c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
import { ELineBindAnchors } from '@/config-center/system/types';
-import { IConfigItem } from '@/config-center/types';
+import { EDoneJsonType, IConfigItem } from '@/config-center/types';
import type { IDoneJson } from '@/store/global/types';
/**
@@ -122,8 +122,29 @@ export const setSvgActualInfo = (done_json: IDoneJson) => {
const queryBbox = document.querySelector(`#${done_json.id}`);
// const rectBBox = document.querySelector(`#rect${done_json.id}`);
if (queryBbox) {
- const BBox = (queryBbox as SVGGraphicsElement).getBBox();
- const { x, y, width, height } = BBox;
+ let x = 0,
+ y = 0,
+ width = 0,
+ height = 0;
+ if (done_json.type !== EDoneJsonType.Vue) {
+ const BBox = (queryBbox as SVGGraphicsElement).getBBox();
+ x = BBox.x;
+ y = BBox.y;
+ (width = BBox.width), (height = BBox.height);
+ } else {
+ (width = (queryBbox as HTMLElement).offsetWidth),
+ (height = (queryBbox as HTMLElement).offsetHeight);
+ x = 50 - width / 2;
+ y = 50 - height / 2;
+ const foreignObjectBox = document.querySelector(`#foreign-object${done_json.id}`);
+ if (foreignObjectBox) {
+ foreignObjectBox.setAttribute('x', x.toString());
+ foreignObjectBox.setAttribute('y', y.toString());
+ foreignObjectBox.setAttribute('width', width.toString());
+ foreignObjectBox.setAttribute('height', height.toString());
+ }
+ }
+
// rectBBox.setAttribute('x', x.toString());
// rectBBox.setAttribute('y', y.toString());
// rectBBox.setAttribute('width', width.toString());