属性更新

  • 属性编辑通过 store 获取属性值
  • 通过发射事件触发 commit 修改属性值
  • 支持属性值的转换

image.png

  1. import { TextComponentProps } from '@/ts/defaultProps'
  3. // 属性转化成表单 哪个属性使用哪个类型的组件去编辑
  4. export interface PropsToForm {
  5.   component: string
  6.   // 支持给组件库传入属性
  7.   extraProps?: { [key: string]: any }
  8.   text: string
  9.   // 支持组件包裹
  10.   subComponent?: string
  11.   // 包裹的组件选项
  12.   options?: {
  13.     text: string
  14.     value: any
  15.   }[]
  16.   // 支持类型转换
  17.   initalTransform?: (v: any) => any
  18.   //因为开始定义的是any，这样会各个组件的类型不同发生错误，处理更新后的函数
  19.   afterTransform?: (v: any) => any
  20.   // 支持自定义属性名称
  21.   valueProp?: string
  22.   //触发事件的名称
  23.   eventName?: string
  24. }
  26. // 属性列表转化成表单列表
  27. export type PropsToForms = {
  28.   [p in keyof TextComponentProps]?: PropsToForm
  29. }
  31. // 属性转化成表单的映射表 key:属性  value:使用的组件
  32. export const mapPropsToForms: PropsToForms = {
  33.   // 比如: text 属性,使用 a-input 这个组件去编辑
  34.   text: {
  35.     component: 'a-textarea',
  36.     extraProps: {
  37.       rows: 3,
  38.     },
  39.     text: '文本',
  40.     afterTransform: (e: any) => e.target.value,
  41.   },
  42.   fontSize: {
  43.     text: '字号',
  44.     component: 'a-input-number',
  45.     initalTransform: (v: string) => parseInt(v),
  46.     afterTransform: (e: any) => (e ? `${e}px` : ''),
  47.   },
  48.   lineHeight: {
  49.     text: '行高',
  50.     component: 'a-slider',
  51.     extraProps: {
  52.       min: 0,
  53.       max: 3,
  54.       step: 0.1,
  55.     },
  56.     initalTransform: (v: string) => parseFloat(v),
  57.     afterTransform: (v: string) => String(v),
  58.   },
  59.   textAlign: {
  60.     component: 'a-radio-group',
  61.     subComponent: 'a-radio-button',
  62.     text: '对齐',
  63.     options: [
  64.       {
  65.         value: 'left',
  66.         text: '左',
  67.       },
  68.       {
  69.         value: 'center',
  70.         text: '中',
  71.       },
  72.       {
  73.         value: 'right',
  74.         text: '右',
  75.       },
  76.     ],
  77.     afterTransform: (e: any) => e.target.value,
  78.   },
  79.   fontFamily: {
  80.     component: 'a-select',
  81.     subComponent: 'a-select-option',
  82.     text: '字体',
  83.     options: [
  84.       {
  85.         value: '',
  86.         text: '无',
  87.       },
  88.       {
  89.         value: '"SimSun","STSong',
  90.         text: '宋体',
  91.       },
  92.       {
  93.         value: '"SimHei","STHeiti',
  94.         text: '黑体',
  95.       },
  96.     ],
  97.     afterTransform: (e: any) => e,
  98.   },
  99. }
  1. <template>
  2.   <div class="props-table">
  3.     <div v-for="(item, index) in finalPros" class="prop-item" :key="index">
  4.       <span class="label" v-if="item.text">{{ item.text }}</span>
  5.       <div class="prop-component">
  6.         <!--v-bind 绑定属性 v-on 绑定事件 重点-->
  7.         <component
  8.           v-if="item.valueProp"
  9.           :is="item?.component"
  10.           :value="item?.valueProp"
  11.           v-bind="item.extraProps"
  12.           v-on="item.events"
  13.         >
  14.           <template v-if="item.options">
  15.             <component
  16.               v-for="(option, k) in item.options"
  17.               :is="item.subComponent"
  18.               :value="option.value"
  19.               :key="k"
  20.             >
  21.               {{ option.text }}
  22.             </component>
  23.           </template>
  24.         </component>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </template>
  30. <script lang="ts">
  31. import { TextComponentProps } from '@/ts/defaultProps'
  32. import { mapPropsToForms, PropsToForms } from '@/ts/propsMap'
  33. import { reduce } from 'lodash'
  34. import { computed, defineComponent, PropType } from 'vue'
  36. export interface FormProps {
  37.   component: string
  38.   subComponent?: string
  39.   value: string
  40.   extraProps?: { [key: string]: any }
  41.   text?: string
  42.   options?: {
  43.     text: string
  44.     value: any
  45.   }[]
  46.   initalTransform?: (v: any) => any
  47.   valueProp: string
  48.   eventName: string
  49.   events: { [key: string]: (e: any) => void }
  50. }
  52. export default defineComponent({
  53.   name: 'props-table',
  54.   props: {
  55.     props: {
  56.       type: Object as PropType<TextComponentProps>,
  57.       required: true,
  58.     },
  59.   },
  60.   emits: ['change'],
  61.   setup(props, context) {
  62.     const finalPros = computed(() => {
  63.       //重点1
  64.       return reduce(
  65.         props.props,
  66.         (res, value, key) => {
  67.           // console.log(value, key) //value是每一个组件属性值 value表示属性
  68.           const newKey = key as keyof TextComponentProps
  69.           const item = mapPropsToForms[newKey]
  70.           if (item) {
  71.             const {
  72.               valueProp = value,
  73.               eventName = 'change',
  74.               initalTransform,
  75.               afterTransform,
  76.             } = item
  77.             //转成特定的form表单
  78.             const newItem: FormProps = {
  79.               ...item,
  80.               value: initalTransform ? initalTransform(value) : value,
  81.               valueProp: initalTransform
  82.                 ? initalTransform(valueProp)
  83.                 : valueProp,
  84.               eventName,
  85.               events: {
  86.                 [eventName]: (e: any) => {
  87.                   context.emit('change', {
  88.                     key,
  89.                     value: afterTransform ? afterTransform(e) : e,
  90.                   })
  91.                 },
  92.               },
  93.             }
  94.             res[newKey] = newItem
  95.           }
  96.           // console.log(res)
  97.           return res
  98.         },
  99.         {} as { [key: string]: FormProps },
  100.       )
  101.     })
  102.     return { finalPros }
  103.   },
  104. })
  105. </script>
  106. ...
  1. <template>
  2.   <div class="editor-container">
  3.      ...
  4.       <a-layout-sider
  5.         width="300"
  6.         style="background: #fff"
  7.         class="settings-panel"
  8.       >
  9.         组件属性
  10.         <props-table
  11.           v-if="currentElement && currentElement?.props"
  12.           :props="currentElement?.props"
  13.           @change="handleChange"
  14.         ></props-table>
  15.       </a-layout-sider>
  16.     </a-layout>
  17.   </div>
  18. </template>
  20. <script lang="ts">
  21. ...
  22. import {
  23.   ADDCOMPONENT,
  24.   DELCOMPONENT,
  25.   AETACTIVE,
  26.   GETCURRENTCOMPONENT,
  27.   UPDATECOMPONENT,
  28. } from '@/store/mutation-types'
  30. export default defineComponent({
  31.   components: { LText, ComponentsList, CloseOutlined, EditWrapper, PropsTable },
  32.   setup() {
  33.     ...
  34.     const handleChange = (e: any) => {
  35.       console.log('event', e)
  36.       store.commit(UPDATECOMPONENT, e)
  37.     }
  38.     return {
  39.       handleChange,
  40.     }
  41.   },
  42. })
  43. </script>
  44. ...
  1. import {
  2.   ADDCOMPONENT,
  3.   DELCOMPONENT,
  4.   AETACTIVE,
  5.   GETCURRENTCOMPONENT,
  6.   UPDATECOMPONENT,
  7. } from './mutation-types'
  9. ...
  11. //两个参数 第一个本地的interface，第二个是全局的interface
  12. const editor: Module<EditorProps, GloabalDataProps> = {
  13.   state: {
  14.     components: testComponents,
  15.     currentElement: '',
  16.   },
  17.   mutations: {
  18.     ...
  19.     [UPDATECOMPONENT](state, { key, value }) {
  20.       const updatedComponent = state.components.find(
  21.         (component) => component.id === state.currentElement,
  22.       )
  23.       if (updatedComponent) {
  24.         updatedComponent.props[key as keyof TextComponentProps] = value
  25.       }
  26.     },
  27.   },    
  28.   ...
  29. }
  31. export default editor

优化需求

选择字体的下拉框可以直接显示当前的字体样式
image.png

使用 h 函数改写

  1. ...
  2. import { h, VNode } from 'vue';
  4. const fontFamilyArr = [
  5.   { text: '宋体', value: '"SimSun","STSong"' },
  6.   { text: '黑体', value: '"SimHei","STHeiti"' },
  7.   { text: '楷体', value: '"KaiTi","STKaiti"' },
  8.   { text: '仿宋', value: '"FangSong","STFangsong"' },
  9. ]
  10. const fontFamilyOptions = fontFamilyArr.map((font) => {
  11.   return {
  12.     value: font.value,
  13.     text: h('span', { style: { fontFamily: font.value } }, font.text),
  14.   };
  15. });
  16. // 属性转化成表单的映射表 key:属性  value:使用的组件
  17. export const mapPropsToForms: PropsToForms = {
  18.   fontFamily: {
  19.     component: 'a-select',
  20.     subComponent: 'a-select-option',
  21.     text: '字体',
  22.     options: [
  23.       {
  24.         value: '',
  25.         text: '无',
  26.       },
  27.       ...fontFamilyOptions,
  28.     ],
  29.     afterTransform: (e: any) => e,
  30.   },
  31. };
  32. ...

tsx

  1. import { TextComponentProps } from '@/ts/defaultProps'
  2. import { VNode } from 'vue'
  4. // 属性转化成表单 哪个属性使用哪个类型的组件去编辑
  5. export interface PropsToForm {
  6.   component: string
  7.   // 支持给组件库传入属性
  8.   extraProps?: { [key: string]: any }
  9.   text?: string
  10.   // 支持组件包裹
  11.   subComponent?: string
  12.   // 包裹的组件选项
  13.   options?: {
  14.     text: string | VNode
  15.     value: any
  16.   }[]
  17.   // 支持类型转换
  18.   initalTransform?: (v: any) => any
  19.   afterTransform?: (v: any) => any
  20.   // 支持自定义属性名称
  21.   valueProp?: string
  22.   //触发事件的名称
  23.   eventName?: string
  24. }
  26. // 属性列表转化成表单列表
  27. export type PropsToForms = {
  28.   [p in keyof TextComponentProps]?: PropsToForm
  29. }
  31. const fontFamilyArr = [
  32.   { text: '宋体', value: '"SimSun","STSong"' },
  33.   { text: '黑体', value: '"SimHei","STHeiti"' },
  34.   { text: '楷体', value: '"KaiTi","STKaiti"' },
  35.   { text: '仿宋', value: '"FangSong","STFangsong"' },
  36. ]
  37. const fontFamilyOptions = fontFamilyArr.map((font) => {
  38.   return {
  39.     value: font.value,
  40.     text: (
  41.       <span style={{ fontFamily: font.value }}>{font.text}</span>
  42.     ) as VNode,
  43.   }
  44. })
  46. // 属性转化成表单的映射表 key:属性  value:使用的组件
  47. const pxToNumberHandler: PropsToForm = {
  48.   component: 'a-input-number',
  49.   initalTransform: (v: string) => parseInt(v),
  50.   afterTransform: (e: number) => (e ? `${e}px` : ''),
  51. }
  53. export const mapPropsToForms: PropsToForms = {
  54.   text: {
  55.     text: '文本',
  56.     component: 'a-textarea',
  57.     extraProps: { rows: 3 },
  58.     afterTransform: (e: any) => e.target.value,
  59.   },
  60.   fontSize: {
  61.     text: '字号',
  62.     ...pxToNumberHandler,
  63.   },
  64.   lineHeight: {
  65.     text: '行高',
  66.     component: 'a-slider',
  67.     extraProps: { min: 0, max: 3, step: 0.1 },
  68.     initalTransform: (v: string) => parseFloat(v),
  69.     afterTransform: (e: number) => e.toString(),
  70.   },
  71.   textAlign: {
  72.     component: 'a-radio-group',
  73.     subComponent: 'a-radio-button',
  74.     text: '对齐',
  75.     options: [
  76.       { value: 'left', text: '左' },
  77.       { value: 'center', text: '中' },
  78.       { value: 'right', text: '右' },
  79.     ],
  80.     afterTransform: (e: any) => e.target.value,
  81.   },
  82.   fontFamily: {
  83.     component: 'a-select',
  84.     subComponent: 'a-select-option',
  85.     text: '字体',
  86.     options: fontFamilyOptions,
  87.   },
  88.   width: {
  89.     text: '宽度',
  90.     ...pxToNumberHandler,
  91.   },
  92. }

方案一：使用 JSX 重写 PropsTable 组件(较推荐）

  2. import { computed, defineComponent, PropType, VNode } from 'vue'
  3. import { reduce } from 'lodash'
  4. import { PropsToForms, mapPropsToForms } from '../propsMap'
  5. import { TextComponentProps } from '../defaultProps'
  6. import { Input, InputNumber, Slider, Radio, Select  } from 'ant-design-vue'
  7. const mapToComponent = {
  8.   'a-textarea': Input.TextArea,
  9.   'a-input-number': InputNumber,
  10.   'a-slider': Slider,
  11.   'a-radio-group': Radio.Group,
  12.   'a-radio-button': Radio.Button,
  13.   'a-select': Select,
  14.   'a-select-option': Select.Option
  15. } as any
  17. interface FormProps {
  18.   component: string;
  19.   subComponent?: string;
  20.   value: string;
  21.   extraProps?: { [key: string]: any };
  22.   text?: string;
  23.   options?: { text: string | VNode; value: any }[];
  24.   valueProp: string;
  25.   eventName: string;
  26.   events: { [key: string]: (e: any) => void };
  27. }
  28. function capitalizeFirstLetter(string: string) {
  29.   return string.charAt(0).toUpperCase() + string.slice(1)
  30. }
  32. export default defineComponent({
  33.   name: 'props-table',
  34.   props: {
  35.     props: {
  36.       type: Object as PropType<TextComponentProps>,
  37.       required: true
  38.     }
  39.   },
  40.   emits: ['change'],
  41.   setup(props, context) {
  42.     const finalProps = computed(() => {
  43.       return reduce(props.props, (result, value, key) => {
  44.         const newKey = key as keyof TextComponentProps
  45.         const item = mapPropsToForms[newKey]
  46.         if (item) {
  47.           const { valueProp = 'value', eventName = 'change', initalTransform, afterTransform } = item
  48.           const newItem: FormProps = {
  49.             ...item,
  50.             value: initalTransform ? initalTransform(value) : value,
  51.             valueProp,
  52.             eventName,
  53.             events: {
  54.               ['on' + capitalizeFirstLetter(eventName)]: (e: any) => { context.emit('change', { key, value: afterTransform? afterTransform(e) : e })}
  55.             }
  56.           }
  57.           result[newKey] = newItem
  58.         }
  59.         return result
  60.       }, {} as { [key: string]: FormProps })
  61.     })
  62.     return () => 
  63.       <div class="props-table">
  64.         {
  65.           Object.keys(finalProps.value).map(key => {
  66.             const value = finalProps.value[key]
  67.             const ComponentName = mapToComponent[value.component]
  68.             const SubComponent = value.subComponent ? mapToComponent[value.subComponent] : null
  69.             const props = {
  70.               [value.valueProp]: value.value,
  71.               ...value.extraProps,
  72.               ...value.events
  73.             }
  74.             return (
  75.               <div key={key} class="prop-item">
  76.                 { value.text && <span class="label">{value.text}</span> }
  77.                 <div class="prop-component">
  78.                   <ComponentName {...props}>
  79.                     { value.options && 
  80.                       value.options.map(option => {
  81.                         return (
  82.                         <SubComponent value={option.value}>{option.text}</SubComponent>
  83.                         )
  84.                       })
  85.                     }
  86.                   </ComponentName>
  87.                 </div>
  88.               </div>
  89.             )
  90.           })
  91.         }
  92.       </div>
  93.   }
  94. })

方案二：使用 render 函数实现桥梁

增加返回render的Vnode

  1. import { defineComponent } from 'vue'
  3. const renderNode = defineComponent({
  4.   name: 'render-node',
  5.   props: {
  6.     vNode: {
  7.       type: [Object, String],
  8.       required: true,
  9.     },
  10.   },
  11.   render() {
  12.     return this.vNode
  13.   },
  14. })
  16. export default renderNode

修改{{option.text}}成render-node组件

  1. <template>
  2. <div class="props-table">
  3.   <div v-for="(item, index) in finalPros" class="prop-item" :key="index">
  4.     <span class="label" v-if="item.text">{{ item.text }}</span>
  5.     <div class="prop-component">
  6.       <!--v-bind 绑定属性 v-on 绑定事件-->
  7.       <component
  8.                  v-if="item.valueProp"
  9.                  :is="item?.component"
  10.                  :value="item?.valueProp"
  11.                  v-bind="item.extraProps"
  12.                  v-on="item.events"
  13.                  >
  14.         <template v-if="item.options">
  15.           <component
  16.                      v-for="(option, k) in item.options"
  17.                      :is="item.subComponent"
  18.                      :value="option.value"
  19.                      :key="k"
  20.                      >
  21.             <render-node :vNode="option.text"></render-node>
  22.   </component>
  23. </template>
  24. </component>
  25. </div>
  26. </div>
  27. </div>
  28. </template>
  30. <script lang="ts">
  31.   ...
  33.   export default defineComponent({
  34.   name: 'props-table',
  35.     ...
  36.   components: { RenderNode },
  37.     ...
  38.   })
  39. </script>

处理编辑时跳转问题

  1. import { computed } from 'vue'
  2. import _ from 'lodash-es'
  4. export default function useComponentCommon<T extends { [key: string]: any }>(
  5. props: T,
  6.  picks: string[],
  7. ) {
  8.   const styleProps = computed(() => _.pick(props, picks))
  9.   const handleClick = () => {
  10.     if (
  11.       window.location.hash !== '#/editor' &&
  12.       props.actionType === 'url' &&
  13.       props.url
  14.     ) {
  15.       window.location.href = props.url
  16.     }
  17.   }
  18.   //事件类型:无|跳转URL下拉菜单
  19.   return { styleProps, handleClick }
  20. }

修改data数据，字体为空时不显示数据

  1. ...
  2. export const testComponents: ComponentData[] = [
  3.   {
  4.     id: uuidv4(),
  5.     name: 'l-text',
  6.     props: {
  7.       text: 'hello',
  8.       fontSize: '20px',
  9.       color: '#000000',
  10.       lineHeight: '1',
  11.       textAlign: 'left',
  12.       fontFamily: '宋体',
  13.     },
  14.   },
  15.   {
  16.     id: uuidv4(),
  17.     name: 'l-text',
  18.     props: {
  19.       text: 'hello2',
  20.       fontSize: '10px',
  21.       fontWeight: 'bold',
  22.       lineHeight: '2',
  23.       textAlign: 'left',
  24.       fontFamily: '宋体',
  25.     },
  26.   },
  27.   {
  28.     id: uuidv4(),
  29.     name: 'l-text',
  30.     props: {
  31.       text: 'hello3',
  32.       fontSize: '15px',
  33.       actionType: 'url',
  34.       url: 'https://www.baidu.com',
  35.       lineHeight: '3',
  36.       textAlign: 'left',
  37.       fontFamily: '宋体',
  38.     },
  39.   },
  40. ]
  41. ...
  42. export default editor

image.png

总结：

业务组件

  • 创建编辑器 vuex store 结构，画布循环展示组件
  • 组件初步实现，使用 lodash 分离样式属性
  • 添加通用和特殊属性，转换为 props 类型
  • 抽取重用逻辑，style 抽取和点击跳转
  • 左侧组件库点击添加到画布的逻辑

组件属性对应表单组件的展示和更新

  • 获得正在被编辑的元素，通过 vuex getters
  • 创建属性和表单组件的对应关系
  • 使用 propsTable 将传入的属性渲染为对应的表单组件
  • 丰富对应关系字段支持更多自定义配置
  • 使用标准流程更新表单并实时同步单项数据流
  • 使用 h 函数以及 vnode 实现字体下拉框实时显示

存在问题：设置为0或者’’时，组件会消失，后续记得改