拖拽后台页面的设计思路

[AnnVoV]

设计及初步实现

希望我们的后台页面可以靠拖拽组件来生成，开发时只要处理js部分。拖拽后可以查看code直接复制代码。目前设计了一个大框子，大概长下面这个样子：

思路

先说下我在设计这个大框子时遇到的几个问题：

• 1.如何判断组件被拖拽到了哪个组件的里面？如果是el-row这种，如何判断是el-row的哪一个col里？
• 2.如何动态插入拖动元素
• 3.最终我们要能够拿到生成的这个页面的代码？怎么获取代码？
• 4.点击showCode, 代码如何展示?
• 5.嵌套的组件（比如el-row的el-col里面嵌入了el-button）如何获取嵌套关系，以及获得最终的代码？

  解决方法

• 第一个问题，我通过比较当前鼠标位置是否在componet内部来找到最终的容器
• 第二个问题主要利用了$slots 代码如下
  （1）通过$createElement生成vnode （2）把vnode push到container的$slots.default数组里 （3）vnode.componentInstance 绑定了这个vnode 最终生成的vue实例，这样有了它,我们就能把修改的属性更新到其身上

  handleNest(result) {
    const container = result.vueComp;
    const son = this.$createElement(`my-${this.compName.toLowerCase()}`);
    container.$slots.default.push(son);
    container.$mount();
    this.component = son.componentInstance;// 这样我们还可以使用this.component去拿到我们添加的方法和属性
  },

• 第三个问题，真的是想了很久，后来参考了Vue-Layout 项目的做法，我觉得那个作者的思路特别好！我的组件库是Element-UI。我们本质需要能拿到template 字符串才能实现复制code的功能，所以我们把我们每一个需要用的组件再包裹一层，目的是为了让其有template属性，存储模板的字符串。举个例子，以el-button为例，代码如下：

  
  import { getStringTypeAttr, getResultStringTypeAttr } from '@/components/template';
  import mixins from './mixin.js';

const handle = function (_attr, _slots) { // 定义默认属性 const attributes = { content: { type: 'text', valueType: 'text', value: 'el-button', }, type: { type: 'select', valueType: 'text', items: ['primary', 'success', 'warning', 'danger', 'info', 'text'], value: 'primary', }, size: { type: 'select', valueType: 'text', items: ['medium', 'small', 'mini'], value: 'medium', }, disabled: { type: 'select', valueType: 'boolean', items: ['true', 'false'], value: 'false', }, }; const props = { content: { default: 'el-button', }, type: { default: 'primary', }, size: { default: 'medium', }, disabled: { default: false, }, }; const slots = { default: [], };

// 覆盖默认属性 Object.assign(slots, _slots); Object.assign(attributes, _attr); // 获取组件模板 const template = mixins.getStrTemplate(attributes, 'el-button'); // 获取代码模板（组件模板 + 绑定数据值） const getTemplate = (attr, child) => mixins.getTemplateByTag(attributes, attr, 'el-button', child);

return { template, props, attributes, slots, getTemplate, }; }; export default handle;

* 第3个问题-第5个问题其实可以归为一类，都是生成组件后代码展示问题。  
我们利用我们添加的template属性，可以比较容易的获取到字符串模板。但也遇到了以下一些问题：
（1）比如我们左边是可以修改组件的属性信息的，那么模板如何与属性信息进行绑定的？  
（2）组件之间是可以嵌套的，如何建立组件之间的父子关系?
（3）我们最终得到的字符串在代码模式下如何格式化和高亮？
**让我们来依次回答下这些问题：**
（1）其实我们本质是要用下面这个方法，来获取最终模板, 里面核心的就是获取最终attributes字符串的方法
```javascript
export default {
  getTemplateByTag(attributes, attr, tagName, child) {
    const newAttr = _.overwriteDeep(attributes, attr);
    const resStringAttr = getResultStringTypeAttr(newAttr);
    const resTemplate = `<${tagName}
                        ${resStringAttr}>
                        ${child || ''}
                    </${tagName}>`;
    return resTemplate;
  },
}

const getResultStringTypeAttr = function (attributes) {
  // value为空的不添加到模板中
  let stringAttr = '';
  Object.keys(attributes).forEach((key) => {
    let attrKey;
    const arr = ['text', 'selection', 'icon', 'ionicon', 'color']; // 这些类型都不用加bind
    if (arr.includes(attributes[key].valueType)) {
      attrKey = key;
    } else {
      attrKey = `:${key}`;
    }
    if (attrKey === 'value') {
      attrKey = 'v-model';
    }
    const attr = attributes[key].value ? `${attrKey}="${attributes[key].value}"\n` : '';
    stringAttr += attr;
  });
  return stringAttr;
};

（2）父子关系之间的查找其实很简单，当我们拖拽一个组件的时候，我们就生成一个id，并且遍历这个组件，为其子元素设置id和对应的parentId。当组件之间发生嵌套时，同样进行处理，这样我们最终只要找到根元素id就能遍历出整个dom结构。 （3）html 代码的格式化使用了pretty这个包, html语法高亮使用了vue-highlightjs 这个包

接下来要做的功能

• 可以拖拽删除组件
• 选中组件后可以再次编辑属性
• column选项目前还未添加设置所占宽度百分比功能