Input 輸入框

時間  2020-06-23
標籤 input 輸入 简体版
原文   原文鏈接

Input 輸入框

經過鼠標或鍵盤輸入字符html

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

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

　　

禁用狀態

經過 disabled 屬性指定是否禁用 input 組件

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

<script>
export default {
  data() {
    return {
      input1: ''
    }
  }
}
</script>

　　

可清空

使用clearable屬性便可獲得一個可清空的輸入框

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

<script>
  export default {
    data() {
      return {
        input10: ''
      }
    }
  }
</script>

　　

帶 icon 的輸入框

帶有圖標標記輸入類型app

能夠經過 prefix-icon 和 suffix-icon 屬性在 input 組件首部和尾部增長顯示圖標，也能夠經過 slot 來放置圖標。

<div class="demo-input-suffix">
  屬性方式：
  <el-input
    placeholder="請選擇日期"
    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>
  <el-input
    placeholder="請輸入內容"
    prefix-icon="el-icon-search"
    v-model="input21">
  </el-input>
</div>
<div class="demo-input-suffix">
  slot 方式：
  <el-input
    placeholder="請選擇日期"
    v-model="input22">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="請輸入內容"
    v-model="input23">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

<script>
export default {
  data() {
    return {
      input2: '',
      input21: '',
      input22: '',
      input23: ''
    }
  }
}
</script>

　　

文本域

用於輸入多行文本信息，經過將 type 屬性的值指定爲 textarea。dom

文本域高度可經過 rows 屬性控制

<el-input
  type="textarea"
  :rows="2"
  placeholder="請輸入內容"
  v-model="textarea">
</el-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

　　

可自適應文本高度的文本域

經過設置 autosize 屬性能夠使得文本域的高度可以根據文本內容自動進行調整，而且 autosize 還能夠設定爲一個對象，指定最小行數和最大行數。fetch

<el-input
  type="textarea"
  autosize
  placeholder="請輸入內容"
  v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="請輸入內容"
  v-model="textarea3">
</el-input>

<script>
export default {
  data() {
    return {
      textarea2: '',
      textarea3: ''
    }
  }
}
</script>

　　

複合型輸入框

可前置或後置元素，通常爲標籤或按鈕this

可經過 slot 來指定在 input 中前置或者後置內容。

<div>
  <el-input placeholder="請輸入內容" v-model="input3">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內容" v-model="input4">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內容" v-model="input5" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="請選擇">
      <el-option label="餐廳名" value="1"></el-option>
      <el-option label="訂單號" value="2"></el-option>
      <el-option label="用戶電話" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input3: '',
      input4: '',
      input5: '',
      select: ''
    }
  }
}
</script>

　　

尺寸

可經過 size 屬性指定輸入框的尺寸，除了默認的大小外，還提供了 large、small 和 mini 三種尺寸。

<div class="demo-input-size">
  <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>
  <el-input
    size="small"
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input8">
  </el-input>
  <el-input
    size="mini"
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input9">
  </el-input>
</div>

<script>
export default {
  data() {
    return {
      input6: '',
      input7: '',
      input8: '',
      input9: ''
    }
  }
}
</script>

　　

帶輸入建議

根據輸入內容提供對應的輸入建議spa

autocomplete 是一個可帶輸入建議的輸入框組件，fetch-suggestions 是一個返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你能夠在你的輸入建議數據準備好時經過 cb(data) 返回到 autocomplete 組件中。

<el-row class="demo-autocomplete">
  <el-col :span="12">
    <div class="sub-title">激活即列出輸入建議</div>
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
  <el-col :span="12">
    <div class="sub-title">輸入後匹配輸入建議</div>
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 調用 callback 返回建議列表的數據
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },
          { "value": "瀧千家(天山西路店)", "address": "天山西路438號" },
          { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },
          { "value": "貢茶", "address": "上海市長寧區金鐘路633號" },
          { "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },
          { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },
          { "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },
          { "value": "星移濃縮咖啡", "address": "上海市嘉定區新鬱路817號" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },
          { "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },
          { "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },
          { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },
          { "value": "CoCo均可(北新涇店）", "address": "上海市長寧區仙霞西路" },
          { "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },
          { "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },
          { "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },
          { "value": "槍會山", "address": "上海市普陀區棕櫚路" },
          { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },
          { "value": "錢記", "address": "上海市長寧區天山西路" },
          { "value": "壹杯加", "address": "上海市長寧區通協路" },
          { "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },
          { "value": "愛茜茜裏(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },
          { "value": "愛茜茜裏(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },
          { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },
          { "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },
          { "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },
          { "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },
          { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },
          { "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
          { "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },
          { "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },
          { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },
          { "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },
          { "value": "瀏陽蒸菜", "address": "天山西路430號" },
          { "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },
          { "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "壹分米客家傳統調製米粉(天山店)", "address": "天山西路428號" },
          { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },
          { "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },
          { "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },
          { "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },
          { "value": "陽陽麻辣燙", "address": "天山西路389號" },
          { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

　　

自定義模板

可自定義輸入建議的顯示rest

使用scoped slot自定義輸入建議的模板。該 scope 的參數爲item，表示當前輸入建議對象。

<el-autocomplete
  popper-class="my-autocomplete"
  v-model="state3"
  :fetch-suggestions="querySearch"
  placeholder="請輸入內容"
  @select="handleSelect">
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="props">
    <div class="name">{{ props.item.value }}</div>
    <span class="addr">{{ props.item.address }}</span>
  </template>
</el-autocomplete>

<style>
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>

<script>
  export default {
    data() {
      return {
        restaurants: [],
        state3: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 調用 callback 返回建議列表的數據
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },
          { "value": "瀧千家(天山西路店)", "address": "天山西路438號" },
          { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },
          { "value": "貢茶", "address": "上海市長寧區金鐘路633號" },
          { "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },
          { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },
          { "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },
          { "value": "星移濃縮咖啡", "address": "上海市嘉定區新鬱路817號" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },
          { "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },
          { "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },
          { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },
          { "value": "CoCo均可(北新涇店）", "address": "上海市長寧區仙霞西路" },
          { "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },
          { "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },
          { "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },
          { "value": "槍會山", "address": "上海市普陀區棕櫚路" },
          { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },
          { "value": "錢記", "address": "上海市長寧區天山西路" },
          { "value": "壹杯加", "address": "上海市長寧區通協路" },
          { "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },
          { "value": "愛茜茜裏(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },
          { "value": "愛茜茜裏(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },
          { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },
          { "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },
          { "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },
          { "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },
          { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },
          { "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
          { "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },
          { "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },
          { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },
          { "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },
          { "value": "瀏陽蒸菜", "address": "天山西路430號" },
          { "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },
          { "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "壹分米客家傳統調製米粉(天山店)", "address": "天山西路428號" },
          { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },
          { "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },
          { "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },
          { "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },
          { "value": "陽陽麻辣燙", "address": "天山西路389號" },
          { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

　　

遠程搜索

從服務端搜索數據code

<el-autocomplete
  v-model="state4"
  :fetch-suggestions="querySearchAsync"
  placeholder="請輸入內容"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state4: '',
        timeout:  null
      };
    },
    methods: {
      loadAll() {
        return [
          { "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },
          { "value": "瀧千家(天山西路店)", "address": "天山西路438號" },
          { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },
          { "value": "貢茶", "address": "上海市長寧區金鐘路633號" },
          { "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },
          { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },
          { "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },
          { "value": "星移濃縮咖啡", "address": "上海市嘉定區新鬱路817號" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },
          { "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },
          { "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },
          { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長寧區天山西路119號" },
          { "value": "CoCo均可(北新涇店）", "address": "上海市長寧區仙霞西路" },
          { "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },
          { "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },
          { "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },
          { "value": "槍會山", "address": "上海市普陀區棕櫚路" },
          { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },
          { "value": "錢記", "address": "上海市長寧區天山西路" },
          { "value": "壹杯加", "address": "上海市長寧區通協路" },
          { "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },
          { "value": "愛茜茜裏(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },
          { "value": "愛茜茜裏(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },
          { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },
          { "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },
          { "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },
          { "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },
          { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },
          { "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
          { "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },
          { "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },
          { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },
          { "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },
          { "value": "瀏陽蒸菜", "address": "天山西路430號" },
          { "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },
          { "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "壹分米客家傳統調製米粉(天山店)", "address": "天山西路428號" },
          { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },
          { "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },
          { "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },
          { "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },
          { "value": "陽陽麻辣燙", "address": "天山西路389號" },
          { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  };
</script>

　　

Input Attributes

參數 說明 類型 可選值 默認值
type 類型 string text / textarea text
value 綁定值 string / number — —
maxlength 最大輸入長度 number — —
minlength 最小輸入長度 number — —
placeholder 輸入框佔位文本 string — —
clearable 是否可清空 boolean — false
disabled 禁用 boolean — false
size 輸入框尺寸，只在 type!="textarea"時有效 string medium / small / mini —
prefix-icon 輸入框頭部圖標 string — —
suffix-icon 輸入框尾部圖標 string — —
rows 輸入框行數，只對 type="textarea"有效 number — 2
autosize 自適應內容高度，只對 type="textarea" 有效，可傳入對象，如，{ minRows: 2, maxRows: 6 } boolean / object — false
auto-complete 原生屬性，自動補全 string on, off off
name 原生屬性 string — —
readonly 原生屬性，是否只讀 boolean — false
max 原生屬性，設置最大值 — — —
min 原生屬性，設置最小值 — — —
step 原生屬性，設置輸入字段的合法數字間隔 — — —
resize 控制是否能被用戶縮放 string none, both, horizontal, vertical —
autofocus 原生屬性，自動獲取焦點 boolean true, false false
form 原生屬性 string — —
label 輸入框關聯的label文字 string — —
tabindex 輸入框的tabindex string - -

Input slots

name 說明
prefix 輸入框頭部內容，只對 type="text" 有效
suffix 輸入框尾部內容，只對 type="text" 有效
prepend 輸入框前置內容，只對 type="text" 有效
append 輸入框後置內容，只對 type="text" 有效

Input Events

事件名稱 說明 回調參數
blur 在 Input 失去焦點時觸發 (event: Event)
focus 在 Input 得到焦點時觸發 (event: Event)
change 在 Input 值改變時觸發 (value: string | number)

Input Methods

方法名 說明 參數
focus 使 input 獲取焦點 -

Autocomplete Attributes

參數 說明 類型 可選值 默認值
placeholder 輸入框佔位文本 string — —
disabled 禁用 boolean — false
value-key 輸入建議對象中用於顯示的鍵名 string — value
value 必填值，輸入綁定值 string — —
debounce 獲取輸入建議的去抖延時 number — 300
fetch-suggestions 返回輸入建議的方法，僅當你的輸入建議數據 resolve 時，經過調用 callback(data:[]) 來返回它 Function(queryString, callback) — —
popper-class Autocomplete 下拉列表的類名 string — —
trigger-on-focus 是否在輸入框 focus 時顯示建議列表 boolean — true
name 原生屬性 string — —
select-when-unmatched 在輸入沒有任何匹配建議的狀況下，按下回車是否觸發 select 事件 boolean — false
label 輸入框關聯的label文字 string — —
prefix-icon 輸入框頭部圖標 string — —
suffix-icon 輸入框尾部圖標 string — —

Autocomplete slots

name 說明
prefix 輸入框頭部內容
suffix 輸入框尾部內容
prepend 輸入框前置內容
append 輸入框後置內容

Autocomplete Events

事件名稱 說明 回調參數
select 點擊選中建議項時觸發 選中建議項
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程