Vue封装工具栏

1、在页面如html、jsp重复写着相同的代码，挺繁琐，而且不便于维护，以下尝试自己学习如何封装工具栏，比如四个按钮：添加删除、修改、查询等，后面可以自己扩展

2、工具栏js

/**公共工具栏*/
Toolbar = function(config) {
    //config是调用时候，传递过来的参数
	this.config = config;
	this.render = function() {
		var html = [];
		html.push("<div>");
		html.push("<template v-for=\"button in options.items\" >");
		html.push("<el-button type=\"primary\"  size=\"mini\"  @click=\"button.handler\" icon=\"button.icon\">{{button.text}}</el-button>");		
		html.push("</template>");
		html.push("</div>");
		var app = new (Vue.extend({
			template:html.join(""),
			data:function() {
				return {
					options:config
				};
			}
		}))().$mount($("#" + this.config.renderTo)[0]);
	
	};
};

3、主页面js

   //主页面，工具栏实例化
	var toolbar = new Toolbar({
		"renderTo":"toolbar", 
		"items":[
		{
			type:"button", 
			text:"查询", 
			useable:"T", 
			handler:function () {
				APP.$options.methods.doSearch(1);
			}
		},
		{
			type:"button", 
			text:"新增", 
			useable:"T", 
			handler:function () {
				addOsuser();
			}
		},
		{
			type:"button", 
			text:"修改", 
			useable:"T", 
			icon:"el-icon-download",
			handler:function () {
				updateOsuser();
			}
		},
		{
			type:"button", 
			text:"删除", 
			bodyStyle:"delete", 
			useable:"T", 
			icon:"el-icon-download",
			handler:function () {
				deleteOsuser();
			}
		}]
	}).render();

4、html工具栏代码

<el-row style="margin-bottom: 5px;">
			<el-col :span="24">
				<div id="toolbar"></div>
			</el-col>
</el-row>

总结：将繁琐的html代码，比如button 标签啊 超链接标签之类的，重复繁琐的代码，放到一个公共js里调用即可，可能几个html，你感觉工作量还不大，但是当一个系统有上百个html需要维护的时候，你才会发现封装起来的好处。