【架构师（第二十四篇）】编辑器开发之添加模版到画布

​

当前只有一个 ​​l-text​​​ 组件，所以所有的操作都只针对 ​​l-text​​ 组件。

流程图

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

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

代码部分

defaultProps.ts

新添加了两个类型，这里推荐一个 ​​vscode​​​ 插件，​​vscode-code-to-type​​​ ，复制 ​​js​​​ 对象，生成 ​​ts​​ 类型，非常的好用。

使用 ​​ts​​​ 要尽量消灭 ​​any​​，尽管这会浪费你前期的部分时间，但是会节省后期的大量时间。

// 通用的默认属性类型
export interface CommonComponentProps {
  // actions
  actionType: string;
  url: string;
  // size
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // border type
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // shadow and opacity
  boxShadow: string;
  opacity: string;
  // position and x,y
  position: string;
  top: string;
  left: string;
  right: string;
  bottom: string;
}

// l-text 组件特有默认属性类型
export interface TextComponentProps extends CommonComponentProps {
  // basic props - font styles
  text: string;
  fontSize: string;
  fontFamily: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string;
  lineHeight: string;
  textAlign: string;
  color: string;
  backgroundColor: string;
}

// 把属性改为可选
export type PartialTextComponentProps = Partial<TextComponentProps>;

defaultTemplates.ts

本地写死的模板数据，内部包含 ​​l-text​​ 组件的各个属性，大概就是四种文本的类型。

export const defaultTemplates = [
  {
    text: '大标题',
    fontSize: '30px',
    fontWeight: 'bold',
    tag: 'h2',
  },
  {
    text: '小标题',
    fontSize: '24px',
    fontWeight: 'bold',
    tag: 'h3',
  },
  {
    text: '正文内容',
    fontSize: '14px',
    tag: 'p',
  },
  {
    text: '链接内容',
    tag: 'p',
    color: '#1890ff',
  },
];

Editor.vue

// template
  <!-- 左侧组件列表 -->
  <a-layout-sider width="300"
                  style="background:#fff">
    <div class="sidebar-container">
      组件列表
      <components-list @on-item-click="addItem"
                       :list="defaultTemplates"></components-list>
    </div>
  </a-layout-sider>

// script
import { PartialTextComponentProps } from '../defaultProps'
// 从组件列表添加组件到画布区域
const addItem = (props: PartialTextComponentProps) => {
  store.commit("addComponent", props)
}

ComponentsList.vue

// template
  <div class="create-component-list">
    <div v-for="(item, index) in list"
         @click="onItemClick(item)"
         class="component-item"
         :key="index">
      <l-text v-bind="item"></l-text>
    </div>

  </div>

// script
import LText from '../components/LText.vue'
import { defineProps, withDefaults, defineEmits } from 'vue';
import { PartialTextComponentProps } from '../defaultProps'
interface MyProps {
  list: Array<PartialTextComponentProps>;
}
// 接收 TemplatesData 数据
const props = withDefaults(defineProps<MyProps>(), {
  list: () => [],
})
console.log('???????? ~ props', props);


const emit = defineEmits<{
  (e: 'on-item-click', data: PartialTextComponentProps): void;
}>()

// 点击发射事件
const onItemClick = (data: PartialTextComponentProps) => {
  emit('on-item-click', data)
}

store/editor.ts

添加一条数据到 ​​store​​​，自动生成 ​​uuid​​

mutations: {
    addComponent(state, props: PartialTextComponentProps) {
      const newComponent: ComponentData = {
        id: uuidv4(),
        name: 'l-text',
        props,
      };
      state.components.push(newComponent);
    },
  },

效果截图