H5编辑器整体思路（二）：组件元素

快乐的多余
1,243 阅读4分钟

1、前言

感谢各位看官对我的关注和浏览，因为我也是初次写博客类，如有不好的地方大家可以发评论讨论一下，再次感谢官方的推荐以及各位看官，我就不说太多的废话，尽量以大家能懂的白话讲一下。

书接上回，回忆一下一个元素从无到有需要经历：1、选择元素。2、初始元素的默认属性。3、元素的动作行为。如果大家有点蒙蔽的话可以看下我的第一篇介绍：H5编辑器整体思路（一）：前言，这一节我们大概讲一下项目的整个布局以及元素的创建

2、组件的效果

2月23日 (1).gif

3、页面分布

页面分布主要分为以下区域：

1、头部组件区域

2、左侧页面、弹窗类型区域

3、左侧页面管理、弹窗管理区域

4、中间画布区域

5、画布右侧快捷管理条

6、右侧（组件、页面）的属性、事件、动画等管理区域

4、头部组件

头部组件通过一个配置文件数组来让其for循环后展示

export default [
  {
    title: '图片',// 组件的名称
    icon: 'tupian', // 展示组件的icon名称
    activeIcon: 'tupian-active', // 展示组件数据移入后的icon
    elName: 'image',// 组件对应plugin的名称（每个组件的elName都是唯一）
    valueType: '', // 标识数据类型，用于表单组件,
    defaultStyle: { // 默认宽高
      width: 300,
      height: 168.75
    },
    defaultEname: '图片',
    hasAttr: true, //是否有属性
    hasEvent: true, // 是否有事件
    hasAnimation: true,// 是否有动画
    hasStyle: false,
    childrens: []
  },
  
  {
    title: '控件',
    icon: 'kongjian',
    activeIcon: 'kongjian-active',

    elName: 'qk-control',
    defaultEname: '控件',
    childrens: [
      ...
    ]
  }
];

image.png

如果你需要这样只需要在上述的数据结构的childrens数组内增加组件类型

5、创建组件

创建组件通过函数createElement来完成

creatElement() {
      // 获取元素的props
      let props = this.getComponentProps(this.element.elName);
      let item = { needProps: props, ...this.element };
      // 新增组建
      this.addElement(item);
      this.setIsActiveElement(true);
      this.$emit('setOperationBar', this.element);
      this.$nextTick(() => {
        if (item.elName === 'qk-text') {
          // 如果是文本组件就双击选中文本的内容
          this.$Bus.$emit('selectText', this.activeElement.uuid);
        }
      });
    }

通过函数getComponentProps获取当前组件的props设置，比如图片组件的props是这样

props: {
    imageSrc: {
      type: String,
      default: ''
    }
  }

再比如视频组件的props是这样的

props: {
    video: {
      type: Object,
      default: () => {
        return {
          width: '100%',
          height: '',
          videoSrc: '',
          type: 'autoPlay',
          name: '',
          id: randomStr(5),
          isPreview: false,
          noControls: false,
          voice: false, // 静音
          control: true, // 状态栏默认不显示
          loop: true // 循环
        };
      }
    }
  },

获取默认的props主要是为了初始化组件的默认值。

然后通过addElement创建组件的数据结构，也就是H5编辑器整体思路（一）：前言中提到的组件数据，如果不清楚可以点过去看一下，上述的props的数据值都会被塞进组件数据结构中propsValue，并且将当前的元素添加至当前的页面当中

然后设置当前选中的元素为图片元素，这就是组件元素的初始创建。

走到这步基本上一个初始的元素就被创建出来了

image.png

从上图可以看到右侧打印看出，元素被添加至pages.elements的数组中。

image.png

右侧部分的控制，主要是控制它的样式，长宽高等还有名称。右侧代码的实现主要放在attr的文件夹

image.png

每个文件对应相应的组件设置，这里的属性设置主要是针对它的样式和它的一些功能，这里大家可以根据各自公司业务的不同做相应的调整，调整宽高、位置就是动态更改当前element的commonStyle,然后动态更改。

其实前面所有组件的生产内容其实都还是比较简单的。比较复杂的可能属于组件的拖拽、放大缩小、旋转等功能。相信有人会说这块可以用相应的插件，其实我当时在写的时候没找到好用的插件，到后面某次迭代元素的辅助线、吸附这个功能的时候在github找到了相应的插件，但是事已至此我已经无法回头，所以这里的功能就是我自己手撸的。

本次的分享到此结束，下节分享我重点拿组件的拖拽、旋转、等比例放大缩小、不等比例放大缩小做详细拆解

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

avatar
文章
阅读
粉丝