21-Vue之Element UI-input组件

1. <template>
2. <div>
3. <h2>这是Input组件</h2>
4. <el-input v-model="input" placeholder="请输入内容"></el-input>
5. <el-input disabled placeholder="请输入内容"></el-input>
6. <el-input type="textarea" placeholder="请输入内容"></el-input>
7. <el-input v-model="input" size="medium" :maxlength="10" show-word-limit clearable placeholder="请输入内容"></el-input>
8. <el-input type="password" placeholder="请输入密码" v-model="input" show-password></el-input>
9. <!--    事件使用-->
10. <h2>事件使用</h2>
11. <el-input v-model="username" @blur="changeBlur" @focus="changeFocus"></el-input>
12. <el-input v-model="password" @change="changed"></el-input>
13. <!--    方法使用-->
14. <h2>方法使用</h2>
15. <el-input v-model="mes" ref="method"></el-input>
16. <el-button @click="focusInput">focus方法</el-button>
17. <el-button @click="blurInput">blur方法</el-button>
18. <el-button @click="selectInput">select方法</el-button>
19. </div>
20. </template>
21. 
22. <script>
23. export default {
24. name: 'Input',
25.   data () {
26. return {
27. input: '',
28. username: '',
29. password: '',
30. mes: ''
31.     }
32.   },
33. methods: {
34.     changeBlur () {
35. console.log(this.username)
36.     },
37.     changeFocus () {
38. console.log(this.username)
39.     },
40.     changed () {
41. console.log(this.password)
42.     },
43.     focusInput () {
44. this.$refs.method.focus()
45.     },
46.     blurInput () {
47. this.$refs.method.blur()
48.     },
49.     selectInput () {
50. this.$refs.method.select()
51.     }
52.   }
53. }
54. </script>
55. 
56. <style scoped>
57. 
58. </style>