<!--基本-->

<el-input
    v-model="input"
    placeholder="請輸入內容">
</el-input>

new Vue({
    el: '#app',
   data() {
        return {
            input: ''
        }
   }
})

<!--通過 disabled 屬性指定是否禁用 input 元件-->
<el-input
    v-model="input"
    placeholder="禁用狀態"
    :disabled="true">
</el-input>
 

<!--使用clearable屬性即可得到一個可清空的輸入框（點選後面的x）-->
<el-input
    v-model="input"
    placeholder="可清空的輸入框"
    clearable>
</el-input>

<!--用於輸入多行文字資訊，通過將 type 屬性的值指定為 textarea。
文字域高度可通過 rows 屬性控制；
通過設定 autosize 屬性可以使得文字域的高度能夠根據文字內容自動進行調整，並且 autosize 還可以設定為一個物件，指定最小行數和最大行數。-->
<el-input
    type="textarea"
    :rows="2"
    v-model="textarea"
    placeholder="多行文字域">
</el-input>
 

<!--可通過 size 屬性指定輸入框的尺寸（改變的只是高度，寬度不變），除了預設的大小外，還提供了 large、small 和 mini 三種尺寸。
可以通過 prefix-icon 和 suffix-icon 屬性在 input 元件首部和尾部增加顯示圖示-->
<el-input
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input6">
</el-input>
<el-input
    size="medium"
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input7">
</el-input>
 

Input Attributes

Input Events

Input Methods