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');