21-Vue之Element UI-input组件

Posted 2022-01-09 爱学习de测试小白

目录

组件使用

总结

---

组件使用

<template>
  <div>
    <h2>这是Input组件</h2>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-input disabled placeholder="请输入内容"></el-input>
    <el-input type="textarea" placeholder="请输入内容"></el-input>
    <el-input v-model="input" size="medium" :maxlength="10" show-word-limit clearable placeholder="请输入内容"></el-input>
    <el-input type="password" placeholder="请输入密码" v-model="input" show-password></el-input>
    <!--    事件使用-->
    <h2>事件使用</h2>
    <el-input v-model="username" @blur="changeBlur" @focus="changeFocus"></el-input>
    <el-input v-model="password" @change="changed"></el-input>
    <!--    方法使用-->
    <h2>方法使用</h2>
    <el-input v-model="mes" ref="method"></el-input>
    <el-button @click="focusInput">focus方法</el-button>
    <el-button @click="blurInput">blur方法</el-button>
    <el-button @click="selectInput">select方法</el-button>
  </div>
</template>

<script>
export default 
  name: 'Input',
  data () 
    return 
      input: '',
      username: '',
      password: '',
      mes: ''
    
  ,
  methods: 
    changeBlur () 
      console.log(this.username)
    ,
    changeFocus () 
      console.log(this.username)
    ,
    changed () 
      console.log(this.password)
    ,
    focusInput () 
      this.$refs.method.focus()
    ,
    blurInput () 
      this.$refs.method.blur()
    ,
    selectInput () 
      this.$refs.method.select()
    
  

</script>

<style scoped>

</style>

总结

• 在使用组件的方法时需要在对应的组件中加入ref=“组件别名”
• 在调用方法时直接使用this.$refs.组件别名.方法名（）

     注意：在elementui中所有组件都存在属性事件和方法

• 属性：直接写在对应的组件标签上使用方式：属性名=属性值方式
• 事件：直接使用vue绑定事件方式写在对应的组件标签上使用方式：@事件名=vue中事件处理函数
• 方法：1.在对应组件标签上使用ref=组件别名；2.通过使用this.Srefs.组件别名.方法名（）进行调用