ElementUI输入框组件

Posted 2021-07-24 孟挽周

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.组件别名.方法名() 进行调用。