七. Input 输入框
- 通过鼠标或键盘输入字符
创建
<el-input> </el-input>
Input属性的使用
<el-input type="textarea" v-model="name" disabled show-password></el-input> <el-input type="textarea" show-word-limit textarea :maxlength="10000" v-model="age"></el-input> <el-input type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="userName"></el-input> <el-input type="text" prefix-icon="el-icon-paperclip"></el-input>
事件的使用
<el-input v-model="userSex" @input="ccc"></el-input> <script> export default { name: "Input", methods:{ ccc(value){ console.log(value) }, } } </script>
方法的使用
<el-button @click="focusInputs">focus方法</el-button> <script> export default { methods:{ focusInputs(){ this.$refs.inputs.select(); } } } </script>
总结：
- 在使用组件的方法时需要在对应的组件中加入
ref="组件别名" - 在调用方法时直接使用
this.$refs.组件别名.方法名()
注意：在elementui中所有组件 都存在 属性和方法属性：直接写在对应的组件标签上 使用方式：属性名=属性值 方式事件：直接使用vue绑定事件方式写在对应的组件标签上 使用方式：@事件名=vue中事件处理函数方法：1.在对应组件标签上使用 ref=组件别名 2.通过使用this.$refs.组件别名.方法名() 进行调用。
八. Select选择器组件
- 当选项过多时，使用下拉菜单展示并选择内容。
选择器组件的使用
- 数据写死在页面上
<el-select v-model="cityName"> <el-option value="北京">北京</el-option> <el-option value="北京">上海</el-option> <el-option value="北京">澳门</el-option> <el-option value="北京">曹县</el-option> </el-select>
注意：要求下拉列表中必须存在option的value属性值，select中必须使用v-modek进行数据绑定
- 如何动态获取数据
<el-select v-model="cityId"> <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option> </el-select> <script> export default { data(){ return{ cityId:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, } </script>
事件与属性的使用
<el-select v-model="cityId" @change="aa" multiple clearable> <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option> </el-select> <script> export default { name: "Select", data(){ return{ cityId:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, methods:{ aa(value){ console.log(value) } } } </script>
方法的使用
<el-select v-model="city" ref="selects"> <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option> </el-select> <el-button @click="bbb">测试方法</el-button> <script> export default { name: "Select", data(){ return{ city:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, methods:{ bbb(){ this.$refs.selects.focus(); } } } </script>
剩下的组件大家可以下去自行练习！感谢观看！
