elementUI 组件使用分析

elementUI 事件传参：##

<el-input v-model="form.input1" placeholder="请输入内容" size="mini" @change="(val) => handleValueChange(val,'xxxx')"></el-input>

handleValueChange(val,newVal){
  console.log('默认参数：'+val,'自定义参数：'+newVal)
}

//ps: 多个参数同理,其它组件事件同理

elementUI 组件参数说明（Page）

Slot：自定义内容，需要在 layout 中列出 slot

<el-pagination
  background
  layout="prev, pager, next,slot"
  :total="1000">
	<span>我是自定义内容哦，无所谓什么标签，样式可以自定义<i class="el-icon-search"></i></span>
</el-pagination>

/* ps: 主要是在layout属性中加入slot,组件中的元素才可显示,
原理应该与vue中slot插槽同理，其它组件方式使用同理例如Step */

<el-steps :active="1">
	// 官网默认提供方式
	<el-step 
		 title="步骤 1"  
		 description="描述" 
		 icon="el-icon-picture">
	</el-step>
	
	// 想要自定义样式
	<el-step>
		<i slot="icon" class="el-icon-search"></i>
		<h3 slot="title">步骤 2</h3> 
		<div slot="description">描述</div> 
	</el-step>
</el-steps> 

//这里步骤1也可以实现，我为什么要提供步骤2的方式，这样可以很方便的给元素定义样式

• 效果图：