mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-05-02 15:56:36 +08:00
feat(playground): 新增表单编辑器
This commit is contained in:
roymondchen
parent
ba2f1e5ac5
commit
cf72039ff1
266
playground/src/configs/formDsl.ts
Normal file
266
playground/src/configs/formDsl.ts
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
text: '文本',
|
||||||
|
name: 'text',
|
||||||
|
tooltip: (vm: any, { model }: any) => model.text,
|
||||||
|
extra: (vm: any, { model }: any) => `${model.text}extra`,
|
||||||
|
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
text: 'checkbox',
|
||||||
|
name: 'option',
|
||||||
|
activeValue: 1,
|
||||||
|
inactiveValue: 0,
|
||||||
|
defaultValue: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'link',
|
||||||
|
displayText: '链接',
|
||||||
|
text: 'link',
|
||||||
|
name: 'link',
|
||||||
|
href: '',
|
||||||
|
tooltip: 'element-ui',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'display',
|
||||||
|
text: '展示',
|
||||||
|
name: 'display',
|
||||||
|
initValue: 'display',
|
||||||
|
tooltip: 'hello',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
text: '计数器',
|
||||||
|
name: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'textarea',
|
||||||
|
text: '输入框',
|
||||||
|
name: 'textarea1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datetime',
|
||||||
|
text: '日期',
|
||||||
|
name: 'datetime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'switch',
|
||||||
|
text: '开关',
|
||||||
|
name: 'switch',
|
||||||
|
filter: 'number',
|
||||||
|
defaultValue: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'daterange',
|
||||||
|
text: '日期范围',
|
||||||
|
name: 'daterange',
|
||||||
|
// names: ['one', 'two'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'time',
|
||||||
|
text: '日期选择',
|
||||||
|
name: 'time',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'colorPicker',
|
||||||
|
text: '取色器',
|
||||||
|
name: 'colorPicker',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'checkbox-group',
|
||||||
|
text: '选项组',
|
||||||
|
name: 'checkGroup',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: 'one',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: 'two',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio-group',
|
||||||
|
text: '单选框',
|
||||||
|
name: 'radioGroup',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: 'one',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: 'two',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'cascader',
|
||||||
|
text: '级联选择',
|
||||||
|
placeholder: 'test',
|
||||||
|
name: 'cascader',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: 'one',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: 'three',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 8,
|
||||||
|
label: 'eight',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: 'four',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 6,
|
||||||
|
label: 'six',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: 'two',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
label: 'five',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 7,
|
||||||
|
label: 'seven',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'dynamic-field',
|
||||||
|
name: 'dynamic-field',
|
||||||
|
dynamicKey: 'textarea',
|
||||||
|
text: '动态表单',
|
||||||
|
returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'row',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: 'date',
|
||||||
|
text: '日期',
|
||||||
|
name: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
text: '多选框',
|
||||||
|
name: 'checkbox',
|
||||||
|
tooltip: '分组xxxxxxxxxxxx',
|
||||||
|
extra: 'extra',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'fieldset',
|
||||||
|
name: 'fieldset',
|
||||||
|
legend: '分组',
|
||||||
|
extra: 'extra',
|
||||||
|
checkbox: true,
|
||||||
|
expand: 'checkbox',
|
||||||
|
// schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
text: '下拉选项',
|
||||||
|
name: 'select',
|
||||||
|
options: [
|
||||||
|
{ text: '选项1', value: 1 },
|
||||||
|
{ text: '选项2', value: 2 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'table',
|
||||||
|
name: 'table',
|
||||||
|
defautSort: { prop: 'name', order: 'descending' },
|
||||||
|
extra: 'extra',
|
||||||
|
itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'id',
|
||||||
|
name: 'id',
|
||||||
|
sortable: true,
|
||||||
|
tooltip: '分组xxxxxxxxxxxx',
|
||||||
|
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
name: 'name',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'groupList',
|
||||||
|
name: 'groupList',
|
||||||
|
extra: '分组xxxxxxxxxxxx',
|
||||||
|
itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'id',
|
||||||
|
name: 'id',
|
||||||
|
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '名称',
|
||||||
|
name: 'name',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'panel',
|
||||||
|
title: 'panel',
|
||||||
|
extra: 'panel',
|
||||||
|
schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '名称',
|
||||||
|
name: 'name',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'step',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'step1',
|
||||||
|
title: 'step1',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '名称',
|
||||||
|
name: 'name',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'step2',
|
||||||
|
title: 'step2',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '名称2',
|
||||||
|
name: 'name',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -105,6 +105,11 @@ const menu: MenuBarData = {
|
|||||||
text: 'Form Playground',
|
text: 'Form Playground',
|
||||||
handler: () => router.push('form'),
|
handler: () => router.push('form'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Form Editor Playground',
|
||||||
|
handler: () => router.push('form-editor'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
text: 'Table Playground',
|
text: 'Table Playground',
|
||||||
|
|||||||
@ -35,6 +35,7 @@ import { MenuButton } from '@tmagic/editor';
|
|||||||
import { MForm } from '@tmagic/form';
|
import { MForm } from '@tmagic/form';
|
||||||
|
|
||||||
import NavMenu from '../components/NavMenu.vue';
|
import NavMenu from '../components/NavMenu.vue';
|
||||||
|
import formDsl from '../configs/formDsl';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -94,272 +95,7 @@ const lastVersion = ref({
|
|||||||
colorPicker: '#000000',
|
colorPicker: '#000000',
|
||||||
});
|
});
|
||||||
|
|
||||||
const config = ref([
|
const config = ref(formDsl);
|
||||||
{
|
|
||||||
text: '文本',
|
|
||||||
name: 'text',
|
|
||||||
tooltip: (vm: any, { model }: any) => model.text,
|
|
||||||
extra: (vm: any, { model }: any) => `${model.text}extra`,
|
|
||||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'checkbox',
|
|
||||||
text: 'checkbox',
|
|
||||||
name: 'option',
|
|
||||||
activeValue: 1,
|
|
||||||
inactiveValue: 0,
|
|
||||||
defaultValue: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'link',
|
|
||||||
displayText: '链接',
|
|
||||||
text: 'link',
|
|
||||||
name: 'link',
|
|
||||||
href: '',
|
|
||||||
tooltip: 'element-ui',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'display',
|
|
||||||
text: '展示',
|
|
||||||
name: 'display',
|
|
||||||
initValue: 'display',
|
|
||||||
tooltip: 'hello',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'number',
|
|
||||||
text: '计数器',
|
|
||||||
name: 'number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'textarea',
|
|
||||||
text: '输入框',
|
|
||||||
name: 'textarea1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'datetime',
|
|
||||||
text: '日期',
|
|
||||||
name: 'datetime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'switch',
|
|
||||||
text: '开关',
|
|
||||||
name: 'switch',
|
|
||||||
filter: 'number',
|
|
||||||
defaultValue: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'daterange',
|
|
||||||
text: '日期范围',
|
|
||||||
name: 'daterange',
|
|
||||||
// names: ['one', 'two'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'time',
|
|
||||||
text: '日期选择',
|
|
||||||
name: 'time',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'colorPicker',
|
|
||||||
text: '取色器',
|
|
||||||
name: 'colorPicker',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'checkbox-group',
|
|
||||||
text: '选项组',
|
|
||||||
name: 'checkGroup',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
text: 'one',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
text: 'two',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'radio-group',
|
|
||||||
text: '单选框',
|
|
||||||
name: 'radioGroup',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
text: 'one',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
text: 'two',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'cascader',
|
|
||||||
text: '级联选择',
|
|
||||||
placeholder: 'test',
|
|
||||||
name: 'cascader',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: 'one',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 3,
|
|
||||||
label: 'three',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 8,
|
|
||||||
label: 'eight',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 4,
|
|
||||||
label: 'four',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 6,
|
|
||||||
label: 'six',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
label: 'two',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 5,
|
|
||||||
label: 'five',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 7,
|
|
||||||
label: 'seven',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'dynamic-field',
|
|
||||||
name: 'dynamic-field',
|
|
||||||
dynamicKey: 'textarea',
|
|
||||||
text: '动态表单',
|
|
||||||
returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'row',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
type: 'date',
|
|
||||||
text: '日期',
|
|
||||||
name: 'date',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'checkbox',
|
|
||||||
text: '多选框',
|
|
||||||
name: 'checkbox',
|
|
||||||
tooltip: '分组xxxxxxxxxxxx',
|
|
||||||
extra: 'extra',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'fieldset',
|
|
||||||
name: 'fieldset',
|
|
||||||
legend: '分组',
|
|
||||||
extra: 'extra',
|
|
||||||
checkbox: true,
|
|
||||||
expand: 'checkbox',
|
|
||||||
// schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
text: '下拉选项',
|
|
||||||
name: 'select',
|
|
||||||
options: [
|
|
||||||
{ text: '选项1', value: 1 },
|
|
||||||
{ text: '选项2', value: 2 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'table',
|
|
||||||
name: 'table',
|
|
||||||
defautSort: { prop: 'name', order: 'descending' },
|
|
||||||
extra: 'extra',
|
|
||||||
itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'id',
|
|
||||||
name: 'id',
|
|
||||||
sortable: true,
|
|
||||||
tooltip: '分组xxxxxxxxxxxx',
|
|
||||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '名称',
|
|
||||||
name: 'name',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'groupList',
|
|
||||||
name: 'groupList',
|
|
||||||
extra: '分组xxxxxxxxxxxx',
|
|
||||||
itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'id',
|
|
||||||
name: 'id',
|
|
||||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '名称',
|
|
||||||
name: 'name',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
type: 'panel',
|
|
||||||
title: 'panel',
|
|
||||||
extra: 'panel',
|
|
||||||
schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: '名称',
|
|
||||||
name: 'name',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
type: 'step',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'step1',
|
|
||||||
title: 'step1',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: '名称',
|
|
||||||
name: 'name',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'step2',
|
|
||||||
title: 'step2',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: '名称2',
|
|
||||||
name: 'name',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const initValue = ref({
|
const initValue = ref({
|
||||||
text: '文本',
|
text: '文本',
|
||||||
@ -379,6 +115,11 @@ const menu: MenuButton[] = [
|
|||||||
text: 'Editor Playground',
|
text: 'Editor Playground',
|
||||||
handler: () => router.push('/'),
|
handler: () => router.push('/'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Form Editor Playground',
|
||||||
|
handler: () => router.push('form-editor'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
text: 'Table Playground',
|
text: 'Table Playground',
|
||||||
|
|||||||
166
playground/src/pages/FormEditor.vue
Normal file
166
playground/src/pages/FormEditor.vue
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<TMagicEditor
|
||||||
|
v-model="config"
|
||||||
|
:menu="menu"
|
||||||
|
:sidebar="sidebar"
|
||||||
|
:component-group-list="componentGroupList"
|
||||||
|
:render-type="RenderType.NATIVE"
|
||||||
|
:render="render"
|
||||||
|
:can-select="canSelect"
|
||||||
|
:update-drag-el="updateDragEl"
|
||||||
|
:stage-rect="{ width: 'calc(100% - 70px)', height: '100%' }"
|
||||||
|
>
|
||||||
|
<template #layer-node-label="{ data }">
|
||||||
|
{{ data.text || data.name || 'container' }}
|
||||||
|
</template>
|
||||||
|
</TMagicEditor>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="tsx">
|
||||||
|
import { createApp, nextTick, ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { Document } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
import { ComponentGroup, MenuBarData, SideBarData, TMagicEditor, traverseNode, uiService } from '@tmagic/editor';
|
||||||
|
import MagicForm, { MForm } from '@tmagic/form';
|
||||||
|
import { MApp, MNode, NodeType } from '@tmagic/schema';
|
||||||
|
import { getOffset, RenderType, RuntimeWindow, TargetElement } from '@tmagic/stage';
|
||||||
|
import { guid } from '@tmagic/utils';
|
||||||
|
|
||||||
|
import formDsl from '../configs/formDsl';
|
||||||
|
|
||||||
|
formDsl.forEach((item) => {
|
||||||
|
traverseNode<any>(item, (item) => {
|
||||||
|
item.id = `${item.type}_${guid()}`;
|
||||||
|
item.style = {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
position: 'relative',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = ref<MApp>({
|
||||||
|
type: NodeType.ROOT,
|
||||||
|
id: 'app_form',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: NodeType.PAGE,
|
||||||
|
id: 'page_form',
|
||||||
|
layout: 'relative',
|
||||||
|
items: formDsl as unknown as MNode[],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const el = globalThis.document.createElement('div');
|
||||||
|
el.style.position = 'relative';
|
||||||
|
createApp(MForm, {
|
||||||
|
config: formDsl,
|
||||||
|
initValues: {},
|
||||||
|
})
|
||||||
|
.use(MagicForm)
|
||||||
|
.mount(el);
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
(globalThis as unknown as RuntimeWindow).magic.onPageElUpdate(el);
|
||||||
|
uiService.set('showRule', false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return el;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => {
|
||||||
|
const { left, top } = getOffset(container);
|
||||||
|
el.style.left = `${globalThis.parseFloat(el.style.left) - left}px`;
|
||||||
|
el.style.top = `${globalThis.parseFloat(el.style.top) - top}px`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const componentGroupList: ComponentGroup[] = [
|
||||||
|
{
|
||||||
|
title: '容器',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '普通容器',
|
||||||
|
type: 'container',
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '表格',
|
||||||
|
type: 'table',
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '组列表',
|
||||||
|
type: 'group-list',
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '面板',
|
||||||
|
type: 'panel',
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '行',
|
||||||
|
type: 'row',
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const menu: MenuBarData = {
|
||||||
|
left: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: '魔方',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
center: ['delete', 'undo', 'redo', 'zoom'],
|
||||||
|
right: [
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Editor Playground',
|
||||||
|
handler: () => router.push('/'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Form Playground',
|
||||||
|
handler: () => router.push('form'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Table Playground',
|
||||||
|
handler: () => router.push('table'),
|
||||||
|
},
|
||||||
|
'/',
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
icon: Document,
|
||||||
|
tooltip: '源码',
|
||||||
|
handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const sidebar: SideBarData = {
|
||||||
|
type: 'tabs',
|
||||||
|
status: '组件',
|
||||||
|
items: ['component-list', 'layer'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const canSelect = (el: HTMLElement) => el.classList.contains('m-form-container');
|
||||||
|
</script>
|
||||||
@ -60,6 +60,11 @@ const menu: MenuButton[] = [
|
|||||||
text: 'Editor Playground',
|
text: 'Editor Playground',
|
||||||
handler: () => router.push('/'),
|
handler: () => router.push('/'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
text: 'Form Editor Playground',
|
||||||
|
handler: () => router.push('form-editor'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
text: 'Form Playground',
|
text: 'Form Playground',
|
||||||
|
|||||||
@ -20,11 +20,13 @@ import { createRouter, createWebHashHistory } from 'vue-router';
|
|||||||
|
|
||||||
import Editor from './pages/Editor.vue';
|
import Editor from './pages/Editor.vue';
|
||||||
import Form from './pages/Form.vue';
|
import Form from './pages/Form.vue';
|
||||||
|
import FormEditor from './pages/FormEditor.vue';
|
||||||
import Table from './pages/Table.vue';
|
import Table from './pages/Table.vue';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', component: Editor },
|
{ path: '/', component: Editor },
|
||||||
{ path: '/form', component: Form },
|
{ path: '/form', component: Form },
|
||||||
|
{ path: '/form-editor', component: FormEditor },
|
||||||
{ path: '/table', component: Table },
|
{ path: '/table', component: Table },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user