流程图

点击模版列表添加到画布的行为流程图如下。

  • TemplatesData 为本地写死的模板数据，内部包含 l-text 组件的各个属性 。
  • 通过 Editor.vue 把 TemplatesData 传递给 ComponentsList.vue 组件。
  • ComponentsList.vue 组件接受并渲染父组件传递过来的 TemplatesData。
  • 在 l-text 外层包裹 Wrapper 用来传递事件。
  • 当点击 Wrapper 的时候，发送事件 onItemClick。
  • 父组件执行 store.commit 向 store 中添加一条数据。
  • 由于 store 是响应式的，所以当 store 多了一条数据的时候，画布就会自动渲染出来。

2编辑器开发之添加模版到画布 - 图2
vscode-code-to-type ，复制 js 对象，生成 ts 类型

添加/删除模版到画布

  1. export const defaultTextTemplates = [
  2.   {
  3.     text: '大标题',
  4.     fontSize: '30px',
  5.     fontWeight: 'bold',
  6.     tag: 'h2',
  7.   },
  8.   {
  9.     text: '正文内容',
  10.     tag: 'p',
  11.   },
  12.   {
  13.     text: '链接内容',
  14.     color: '#1890ff',
  15.     textDecoration: 'underline',
  16.     tag: 'p',
  17.   },
  18.   {
  19.     text: '按钮内容',
  20.     color: '#ffffff',
  21.     backgroundColor: '#1890ff',
  22.     borderWidth: '1px',
  23.     borderColor: '#1890ff',
  24.     borderStyle: 'solid',
  25.     borderRadius: '2px',
  26.     paddingLeft: '10px',
  27.     paddingRight: '10px',
  28.     paddingTop: '5px',
  29.     paddingBottom: '5px',
  30.     width: '100px',
  31.     tag: 'button',
  32.     textAlign: 'center',
  33.   },
  34. ]
  1. import { Module } from 'vuex'
  2. import { v4 as uuidv4 } from 'uuid'
  3. import { ImageComponentProps, TextComponentProps } from '@/ts/defaultProps'
  4. import { GloabalDataProps } from '.'
  5. import { ADDCOMPONENT, DELCOMPONENT } from './mutation-types'
  7. export interface ComponentData {
  8.   // 这个元素的 属性，属性请详见下面
  9.   props: Partial<TextComponentProps & ImageComponentProps>
  10.   // id，uuid v4 生成
  11.   id: string
  12.   // 业务组件库名称 l-text，l-image 等等
  13.   name: 'l-text' | 'l-image'
  14. }
  16. export const testComponents: ComponentData[] = [
  17.   {
  18.     id: uuidv4(),
  19.     name: 'l-text',
  20.     props: {
  21.       text: 'hello',
  22.       fontSize: '20px',
  23.       color: '#000000',
  24.       lineHeight: '1',
  25.       textAlign: 'left',
  26.       fontFamily: '',
  27.     },
  28.   },
  29.   {
  30.     id: uuidv4(),
  31.     name: 'l-text',
  32.     props: {
  33.       text: 'hello2',
  34.       fontSize: '10px',
  35.       fontWeight: 'bold',
  36.       lineHeight: '2',
  37.       textAlign: 'left',
  38.       fontFamily: '',
  39.     },
  40.   },
  41.   {
  42.     id: uuidv4(),
  43.     name: 'l-text',
  44.     props: {
  45.       text: 'hello3',
  46.       fontSize: '15px',
  47.       actionType: 'url',
  48.       url: 'https://www.baidu.com',
  49.       lineHeight: '3',
  50.       textAlign: 'left',
  51.       fontFamily: '',
  52.     },
  53.   },
  54. ]
  56. export interface EditorProps {
  57.   // 供中间编辑器渲染的数组
  58.   components: ComponentData[]
  59.   // 当前编辑的是哪个元素，uuid
  60.   currentElement: string
  61. }
  63. //两个参数 第一个本地的interface，第二个是全局的interface
  64. const editor: Module<EditorProps, GloabalDataProps> = {
  65.   state: {
  66.     components: testComponents,
  67.     currentElement: '',
  68.   },
  69.   mutations: {
  70.     [ADDCOMPONENT](state, componentData: ComponentData) {
  71.       state.components.push(componentData)
  72.     },
  73.     [DELCOMPONENT](state, componentData: ComponentData) {
  74.       const res = state.components.filter(
  75.         (item) => item.id !== componentData.id,
  76.       )
  77.       state.components = res
  78.     },
  79.   },
  80.   getters: {},
  81. }
  83. export default editor
  1. <template>
  2.   <div class="create-component-list">
  3.     <div
  4.       v-for="(item, index) in list"
  5.       :key="index"
  6.       class="component-item"
  7.       @click="onItemClick(index)"
  8.     >
  9.       <l-text v-bind="item"></l-text>
  10.     </div>
  11.   </div>
  12. </template>
  14. <script lang="ts">
  15. import { defineComponent } from 'vue'
  16. import { v4 as uuidv4 } from 'uuid'
  17. import { message } from 'ant-design-vue'
  18. import LText from '@/components/LText.vue'
  19. import props from 'ant-design-vue/lib/dropdown/props'
  20. import { ComponentData } from '@/store/editor'
  21. export default defineComponent({
  22.   props: {
  23.     list: {
  24.       type: Array,
  25.       default: [],
  26.     },
  27.   },
  28.   components: { LText },
  29.   emits: ['on-item-click'],
  30.   setup(props, context) {
  31.     //子向父传值
  32.     const onItemClick = (index: number) => {
  33.       const componentData = {
  34.         name: 'l-text',
  35.         id: uuidv4(),
  36.         props: props.list[index],
  37.       }
  38.       context.emit('on-item-click', componentData)
  39.     }
  40.     return { onItemClick }
  41.   },
  42. })
  43. </script>
  45. <style>
  46. .component-item {
  47.   width: 100px;
  48.   margin: 0 auto;
  49.   margin-bottom: 15px;
  50. }
  51. </style>
  1. <template>
  2.   <div class="editor-container">
  3.     <a-layout>
  4.       <a-layout-sider width="300" style="background: #fff">
  5.         <div class="sidebar-container">组件列表</div>
  6.         <components-list
  7.           :list="defaultTextTemplates"
  8.           @on-item-click="addComponent"
  9.         ></components-list>
  10.       </a-layout-sider>
  11.       <a-layout style="padding: 0 24px 24px">
  12.         <a-layout-content class="preview-container">
  13.           <p>画布区域</p>
  14.           <!--引用的是component-->
  15.           <div v-for="item in components" :key="item.id" class="l-text-wrapper">
  16.             <close-outlined class="icon-close" @click="delComponent(item)" />
  17.             <component
  18.               class="preview-list"
  19.               id="canvas-area"
  20.               :is="item.name"
  21.               v-bind="item.props"
  22.             >
  23.             </component>
  24.           </div>
  25.         </a-layout-content>
  26.       </a-layout>
  27.       <a-layout-sider
  28.         width="300"
  29.         style="background: #fff"
  30.         class="settings-panel"
  31.       >
  32.         组件属性
  33.       </a-layout-sider>
  34.     </a-layout>
  35.   </div>
  36. </template>
  38. <script lang="ts">
  39. import { GloabalDataProps } from '@/store'
  40. import { defineComponent, computed } from 'vue'
  41. import { useStore } from 'vuex'
  42. import LText from '@/components/LText.vue'
  43. import { CloseOutlined } from '@ant-design/icons-vue'
  44. import ComponentsList from '@/components/ComponentsList.vue'
  45. import { defaultTextTemplates } from '@/ts/defaultTemplates'
  46. import { ComponentData } from '@/store/editor'
  47. import { ADDCOMPONENT, DELCOMPONENT } from '@/store/mutation-types'
  49. export default defineComponent({
  50.   components: { LText, ComponentsList, CloseOutlined },
  51.   setup() {
  52.     const store = useStore<GloabalDataProps>()
  53.     const components = computed(() => store.state.editor.components)
  54.     const addComponent = (data: ComponentData) => {
  55.       store.commit(ADDCOMPONENT, data)
  56.     }
  58.     const delComponent = (data: ComponentData) => {
  59.       console.log(data)
  60.       store.commit(DELCOMPONENT, data)
  61.     }
  63.     return {
  64.       components,
  65.       defaultTextTemplates,
  66.       addComponent,
  67.       delComponent,
  68.     }
  69.   },
  70. })
  71. </script>
  73. <style lang="less" scoped>
  74. .icon-close {
  75.   position: absolute;
  76.   z-index: 999;
  77.   right: 0;
  78. }
  79. .l-text-wrapper {
  80.   position: relative;
  81.   border: 1px solid #999;
  82.   margin: 2px 0;
  83. }
  84. .editor-container .preview-container {
  85.   margin: 0;
  86.   display: flex;
  87.   flex-direction: column;
  88.   // align-items: center;
  89.   position: relative;
  90. }
  91. .editor-container .preview-list {
  92.   padding: 0;
  93.   margin: 0;
  94.   border: 1px solid #efefef;
  95.   background: #fff;
  96.   overflow-x: hidden;
  97.   overflow-y: auto;
  98.   position: fixed;
  99. }
  100. </style>

image.png