vue组件拖拉拽动态渲染

1. vue中的组件其原理都是一个vue对象，里面包含着方法、属性和样式等等。每一个组件都有一个render方法，动态渲染这个vue对象。
2. vue中的拖拉拽组件vuedraggable，可以拖拉拽拿到组件对象，并将这个对象克隆一份到渲染的组件。
3. 利用vue的JSX函数动态渲染克隆的这个组件对象。
4. 因为这个对象地址不变，所以我们操作这个对象的属性都可以触发vue对象的render函数，重新渲染这个组件，以达到动态渲染动态显示的效果

比如下面这个时间选择组件，tag则是html的标签。这个参数就是vue项目中引入的组件名。可以通过局部引入和全局引入。

{
	name: '输入框',
	tag: 'el-input',
	span: 24,
        default: 'hello world'
}


// 主入口文件的全局引入，如main.js中
import ElementUI from 'element-ui';
Vue.use(ElementUI);

// 或者在动态渲染组件中局部渲染
import xxxxx from 'xxxxx';

5. 利用vue的JSX语法动态渲染

'el-input': function(h, element, index, parent) {
        // 向上发送点击请求
	const { activeItem } = this.$listeners;
	let className = this.activeId === element.renderKey ? 'comItem activeItem' : 'comItem';
	// 返回的是JSX函数，可以动态渲染，经vue转换成html
	// 组件属性的双向绑定也在标签添加
	return (<el-col class={className} span={element.span}
		nativeOnClick={e => { activeItem(element); e.stopPropagation(); }}>
		<el-input
			vModel={element.default} />
	</el-col>);
},

生成vue代码

1. ES6模板引擎生成字符串

// ES6模板引擎生成字符串
'el-input': function (c) {
	return `<${c.tag} v-model="${c.vModel}" />`;
}

2. clipboard插件复制到剪切板
3. Blob对象将字符串转二进制
4. file-saver插件将二进制导出为文件

// 下载文件

// 得到字符串
const codeStr = this.generateCode['el-input'](element);
// 字符串转2进制
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' });
// 导出vue文件
saveAs(blob, this.formData.fileName + '.vue');