Element UI实战教程之input输入框组件05
input输入框组件
1.创建输入框input组件
<el-input v-model="input"></el-input>2.常用属性
<el-input disabled v-model="input"></el-input>
<el-input disabled type="textarea" v-model="input"></el-input>
<el-input :maxlength="10" :minlenght="1" v-model="input"></el-input>
<el-input show-word-limit :maxlength="10" :minlenght="1" v-model="input"></el-input>
<el-input v-model="name" placeholder="请输入"></el-input>
3.常用事件的使用
<el-input auto v-model="name" @clear="clears" placeholder="请输入"></el-input>
<el-input auto v-model="name" @change="ccc" @blur="aaa" @focus="bbb" placeholder="请输入"></el-input>
<script>
export default {
name: "Input",
data(){
return{
input:"小轩",
name:""
}
},methods:{
aaa(){
alert("失去焦点");
},
bbb(){
alert("获得焦点")
},ccc(){
alert("改变")
},
clears(){
alert("清除")
}
}
}
</script>
总结: 在使用组件的方法时需要在对应组件中加入 ref="组件别名"
在调用方法时直接使用 this.$refs.组件别名.方法名()
注意:在element-ui中所有组件都存在 属性 事件 和方法
属性: 直接写在对应的组件标签上 使用方式:属性名=属性值 方式
事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式: @事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用ref =组件别名 2.通过this.$refs.组件别名.方法名() 进行调用