2-2 LText 组件初步实现

  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.   </a-layout-sider>
  7.     <a-layout style="padding: 0 24px 24px">
  8.       <a-layout-content class="preview-container">
  9.         <p>画布区域</p>
  10.         <!--引用的是component-->
  11.         <component
  12.                    class="preview-list"
  13.                    id="canvas-area"
  14.                    v-for="item in components"
  15.                    :key="item.id"
  16.                    :is="item.name"
  17.                    v-bind="item.props"
  18.                    >
  19.   </component>
  20.   </a-layout-content>
  21.   </a-layout>
  22.     <a-layout-sider
  23.                     width="300"
  24.                     style="background: #fff"
  25.                     class="settings-panel"
  26.                     >
  27.       组件属性
  28.   </a-layout-sider>
  29.   </a-layout>
  30.   </div>
  31. </template>
  33. <script lang="ts">
  34.   import { GloabalDataProps } from '@/store'
  35.   import { defineComponent, computed } from 'vue'
  36.   import { useStore } from 'vuex'
  37.   import LText from '@/components/LText.vue'
  38.   export default defineComponent({
  39.     components: { LText },
  40.     setup() {
  41.       const store = useStore<GloabalDataProps>()
  42.       return {
  43.         components: store.state.editor.components,
  44.       }
  45.     },
  46.   })
  47. </script>
  49. <style lang="less" scoped>
  50.   .editor-container .preview-container {
  51.     padding: 24px;
  52.     margin: 0;
  53.     display: flex;
  54.     flex-direction: column;
  55.     align-items: center;
  56.     position: relative;
  57.   }
  58.   .editor-container .preview-list {
  59.     padding: 0;
  60.     margin: 0;
  61.     border: 1px solid #efefef;
  62.     background: #fff;
  63.     overflow-x: hidden;
  64.     overflow-y: auto;
  65.     position: fixed;
  66.   }
  67. </style>
  1. <template>
  2.   <!--component 的tag是一个的动态组件-->
  3.   <component :is="tag" :style="styleProps" class="l-text-component">
  4.     {{ text }}
  5.   </component>
  6. </template>
  8. <script>
  9. import { computed, defineComponent, PropType } from 'vue'
  10. import _ from 'lodash-es'
  11. export default defineComponent({
  12.   name: 'l-text',
  13.   props: {
  14.     text: {
  15.       type: String,
  16.     },
  17.     fontSize: {
  18.       type: String,
  19.     },
  20.     tag: {
  21.       type: String,
  22.       default: 'div',
  23.     },
  24.   },
  25.   setup(props) {
  26.     console.log(props)
  27.     const styleProps = computed(() => _.pick(props, ['fontSize']))
  28.     return {
  29.       styleProps,
  30.     }
  31.   },
  32. })
  33. </script>
  35. <style lang="less" scoped>
  36. h2.l-text-component,
  37. p.l-text-component {
  38.   margin-bottom: 0;
  39. }
  40. button.l-text-component {
  41.   padding: 5px 10px;
  42.   cursor: pointer;
  43. }
  44. .l-text-component {
  45.   box-sizing: border-box;
  46.   white-space: pre-wrap;
  47.   position: relative !important;
  48.   width: 100%;
  49.   height: 100%;
  50. }
  51. </style>

2-3 LText 添加通用属性

配置组件的通用默认属性以及 l-text 组件的特有默认属性。

  1. ...
  3. <script>
  4. import { computed, defineComponent, PropType } from 'vue'
  5. import _ from 'lodash-es'
  6. import {
  7.   transformToComponentProps,
  8.   textDefaultProps,
  9.   textStylePropNames,
  10. } from '@/ts/defaultProps'
  11. const defaultProps = transformToComponentProps(textDefaultProps)
  12. //增加其他通用属性
  13. export default defineComponent({
  14.   name: 'l-text',
  15.   props: {
  16.     tag: {
  17.       type: String,
  18.       default: 'div',
  19.     },
  20.     ...defaultProps,
  21.   },
  22.   setup(props) {
  23.     const styleProps = computed(() => _.pick(props, textStylePropNames))
  24.     return {
  25.       styleProps,
  26.     }
  27.   },
  28. })
  29. </script>
  30. ...
  1. import _, { without } from 'lodash-es'
  3. export interface CommonComponentProps {
  4.   // actions
  5.   actionType: string
  6.   url: string
  7.   // size
  8.   height: string
  9.   width: string
  10.   paddingLeft: string
  11.   paddingRight: string
  12.   paddingTop: string
  13.   paddingBottom: string
  14.   // border type
  15.   borderStyle: string
  16.   borderColor: string
  17.   borderWidth: string
  18.   borderRadius: string
  19.   // shadow and opacity
  20.   boxShadow: string
  21.   opacity: string
  22.   // position and x,y
  23.   position: string
  24.   left: string
  25.   top: string
  26.   right: string
  27. }
  29. export const commonDefaultProps: CommonComponentProps = {
  30.   // actions
  31.   actionType: '',
  32.   url: '',
  33.   // size
  34.   height: '',
  35.   width: '373px',
  36.   paddingLeft: '0px',
  37.   paddingRight: '0px',
  38.   paddingTop: '0px',
  39.   paddingBottom: '0px',
  40.   // border type
  41.   borderStyle: 'none',
  42.   borderColor: '#000',
  43.   borderWidth: '0',
  44.   borderRadius: '0',
  45.   // shadow and opacity
  46.   boxShadow: '0 0 0 #000000',
  47.   opacity: '1',
  48.   // position and x,y
  49.   position: 'absolute',
  50.   left: '0',
  51.   top: '0',
  52.   right: '0',
  53. }
  55. export interface TextComponentProps extends CommonComponentProps {
  56.   text: string
  57.   fontSize: string
  58.   fontFamily: string
  59.   fontWeight: string
  60.   fontStyle: string
  61.   textDecoration: string
  62.   lineHeight: string
  63.   textAlign: string
  64.   color: string
  65.   backgroundColor: string
  66. }
  68. //extends 追加
  69. export interface TextComponentProps extends CommonComponentProps {
  70.   text: string
  71.   fontSize: string
  72.   fontFamily: string
  73.   fontWeight: string
  74.   fontStyle: string
  75.   textDecoration: string
  76.   lineHeight: string
  77.   textAlign: string
  78.   color: string
  79.   backgroundColor: string
  80. }
  82. export const textDefaultProps: TextComponentProps = {
  83.   // basic props - font styles
  84.   text: '正文内容',
  85.   fontSize: '14px',
  86.   fontFamily: '',
  87.   fontWeight: 'normal',
  88.   fontStyle: 'normal',
  89.   textDecoration: 'none',
  90.   lineHeight: '1',
  91.   textAlign: 'left',
  92.   color: '#000000',
  93.   backgroundColor: '',
  94.   ...commonDefaultProps,
  95. }
  97. export interface ImageComponentProps extends CommonComponentProps {
  98.   src: string
  99. }
  101. export const imageDefaultProps: ImageComponentProps = {
  102.   src: 'test.url',
  103.   ...commonDefaultProps,
  104. }
  106. // 排除非样式属性
  107. export const textStylePropNames = without(
  108.   Object.keys(textDefaultProps),
  109.   'actionType',
  110.   'url',
  111.   'text',
  112. )
  114. // 转换成组件的props属性
  115. export const transformToComponentProps = (props: { [key: string]: any }) => {
  116.   return _.mapValues(props, (item) => {
  117.     return {
  118.       type: item.constructor,
  119.       default: item,
  120.     }
  121.   })
  122. }

2-4 LText 使用 hooks 重用逻辑

封装一个 hooks ，挑选出样式属性，并返回一个点击事件处理函数。

  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 (props.actionType === 'url' && props.url) {
  11.       window.location.href = props.url
  12.     }
  13.   }
  14.   //事件类型:无|跳转URL下拉菜单
  15.   return { styleProps, handleClick }
  16. }
  1. <template>
  2. <!--component 的tag是一个的动态组件-->
  3. <component
  4.            :is="tag"
  5.            :style="styleProps"
  6.            class="l-text-component"
  7.            @click="handleClick"
  8.            >
  9.   {{ text }}
  10.   </component>
  11. </template>
  13. <script>
  14.   import { computed, defineComponent, PropType } from 'vue'
  15.   import _ from 'lodash-es'
  16.   import {
  17.     transformToComponentProps,
  18.     textDefaultProps,
  19.     textStylePropNames,
  20.   } from '@/ts/defaultProps'
  21.   import useComponentCommon from '@/hooks/useComponentCommon'
  22.   const defaultProps = transformToComponentProps(textDefaultProps)
  23.   export default defineComponent({
  24.     name: 'l-text',
  25.     props: {
  26.       tag: {
  27.         type: String,
  28.         default: 'div',
  29.       },
  30.       ...defaultProps,
  31.     },
  32.     setup(props) {
  33.       console.log(props)
  34.       const { styleProps, handleClick } = useComponentCommon(
  35.         props,
  36.         textStylePropNames,
  37.       )
  38.       return {
  39.         styleProps,
  40.         handleClick,
  41.       }
  42.     },
  43.   })
  44. </script>
  45. ...

image.png