国产gaysexchina男同gay,japanrcep老熟妇乱子伦视频,吃奶呻吟打开双腿做受动态图,成人色网站,国产av一区二区三区最新精品

ElementPlus Input 輸入框

2021-09-07 15:46 更新

nput 輸入框

通過鼠標(biāo)或鍵盤輸入字符

Input 為受控組件，它總會(huì)顯示 Vue 綁定值。
通常情況下，應(yīng)當(dāng)處理 input 事件，并更新組件的綁定值（或使用v-model）。否則，輸入框內(nèi)顯示的值將不會(huì)改變。
不支持 v-model 修飾符。

基礎(chǔ)用法


<template>
  <el-input v-model="input" placeholder="請輸入內(nèi)容"></el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

禁用狀態(tài)


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

<template>
  <el-input placeholder="請輸入內(nèi)容" v-model="input" :disabled="true"> </el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

可清空


使用clearable屬性即可得到一個(gè)可清空的輸入框

<template>
  <el-input placeholder="請輸入內(nèi)容" v-model="input" clearable> </el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

密碼框


使用show-password屬性即可得到一個(gè)可切換顯示隱藏的密碼框

<template>
  <el-input placeholder="請輸入密碼" v-model="input" show-password></el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

帶 icon 的輸入框

帶有圖標(biāo)標(biāo)記輸入類型


可以通過 prefix-icon 和 suffix-icon 屬性在 input 組件首部和尾部增加顯示圖標(biāo)，也可以通過 slot 來放置圖標(biāo)。

<template>
  <div class="demo-input-suffix">
  屬性方式：
  <el-input
    placeholder="請選擇日期"
    suffix-icon="el-icon-date"
    v-model="input1"
  >
  </el-input>
  <el-input
    placeholder="請輸入內(nèi)容"
    prefix-icon="el-icon-search"
    v-model="input2"
  >
  </el-input>
</div>
<div class="demo-input-suffix">
  slot 方式：
  <el-input placeholder="請選擇日期" v-model="input3">
    <template #suffix>
      <i class="el-input__icon el-icon-date"></i>
    </template>
  </el-input>
  <el-input placeholder="請輸入內(nèi)容" v-model="input4">
    <template #prefix>
      <i class="el-input__icon el-icon-search"></i>
    </template>
  </el-input>
</div>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input1: ref(''),
        input2: ref(''),
        input3: ref(''),
        input4: ref(''),
      }
    },
  })
</script>
<style>
  .demo-input-label {
    display: inline-block;
    width: 130px;
  }
</style>

文本域

用于輸入多行文本信息，通過將 type 屬性的值指定為 textarea。


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

<template>
  <el-input type="textarea" :rows="2" placeholder="請輸入內(nèi)容" v-model="textarea">
</el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        textarea: ref(''),
      }
    },
  })
</script>

可自適應(yīng)文本高度的文本域

通過設(shè)置 autosize 屬性可以使得文本域的高度能夠根據(jù)文本內(nèi)容自動(dòng)進(jìn)行調(diào)整，并且 autosize 還可以設(shè)定為一個(gè)對象，指定最小行數(shù)和最大行數(shù)。


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

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        textarea1: ref(''),
        textarea2: ref(''),
      }
    },
  })
</script>

復(fù)合型輸入框

可前置或后置元素，一般為標(biāo)簽或按鈕

可通過 slot 來指定在 input 中前置或者后置內(nèi)容。

<template>
  <div>
  <el-input placeholder="請輸入內(nèi)容" v-model="input1">
    <template #prepend>Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px">
  <el-input placeholder="請輸入內(nèi)容" v-model="input2">
    <template #append>.com</template>
  </el-input>
</div>
<div style="margin-top: 15px">
  <el-input placeholder="請輸入內(nèi)容" v-model="input3" class="input-with-select">
    <template #prepend>
      <el-select v-model="select" placeholder="請選擇">
        <el-option label="餐廳名" value="1"></el-option>
        <el-option label="訂單號" value="2"></el-option>
        <el-option label="用戶電話" value="3"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button icon="el-icon-search"></el-button>
    </template>
  </el-input>
</div>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input1: ref(''),
        input2: ref(''),
        input3: ref(''),
        select: ref(''),
      }
    },
  })
</script>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

尺寸


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

<template>
  <div class="demo-input-size">
  <el-input
    placeholder="請輸入內(nèi)容"
    suffix-icon="el-icon-date"
    v-model="input1"
  >
  </el-input>
  <el-input
    size="medium"
    placeholder="請輸入內(nèi)容"
    suffix-icon="el-icon-date"
    v-model="input2"
  >
  </el-input>
  <el-input
    size="small"
    placeholder="請輸入內(nèi)容"
    suffix-icon="el-icon-date"
    v-model="input3"
  >
  </el-input>
  <el-input
    size="mini"
    placeholder="請輸入內(nèi)容"
    suffix-icon="el-icon-date"
    v-model="input4"
  >
  </el-input>
</div>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input1: ref(''),
        input2: ref(''),
        input3: ref(''),
        input4: ref(''),
      }
    },
  })
</script>

帶輸入建議

根據(jù)輸入內(nèi)容提供對應(yīng)的輸入建議


autocomplete 是一個(gè)可帶輸入建議的輸入框組件，fetch-suggestions 是一個(gè)返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你可以在你的輸入建議數(shù)據(jù)準(zhǔn)備好時(shí)通過 cb(data) 返回到 autocomplete 組件中。
<template>
  <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="請輸入內(nèi)容"
      @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="請輸入內(nèi)容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'

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

自定義模板

可自定義輸入建議的顯示


從服務(wù)端搜索數(shù)據(jù)
遠(yuǎn)程搜索
使用#default自定義輸入建議的模板。該 scope 的參數(shù)為item，表示當(dāng)前輸入建議對象。
<template>
  <el-autocomplete
  popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="請輸入內(nèi)容"
  @select="handleSelect"
>
  <template #suffix>
    <i class="el-icon-edit el-input__icon" @click="handleIconClick"> </i>
  </template>
  <template #default="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</el-autocomplete>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'

  export default defineComponent({
    setup() {
      const restaurants = ref([])

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

      const handleIconClick = (ev) => {
        console.log(ev)
      }

      onMounted(() => {
        restaurants.value = loadAll()
      })

      return {
        restaurants,
        state: ref(''),
        querySearch,
        createFilter,
        loadAll,
        handleSelect,
        handleIconClick,
      }
    },
  })
</script>
<style>
  .my-autocomplete li {
    line-height: normal;
    padding: 7px;
  }
  .my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .my-autocomplete li .highlighted .addr {
    color: #ddd;
  }
</style>

遠(yuǎn)程搜索

從服務(wù)端搜索數(shù)據(jù)


<template>
  <el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="請輸入內(nèi)容"
  @select="handleSelect"
></el-autocomplete>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'

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

      let timeout
      const querySearchAsync = (queryString, cb) => {
        var results = queryString
          ? restaurants.value.filter(createFilter(queryString))
          : restaurants.value

        clearTimeout(timeout)
        timeout = setTimeout(() => {
          cb(results)
        }, 3000 * Math.random())
      }
      const createFilter = (queryString) => {
        return (restaurant) => {
          return (
            restaurant.value
              .toLowerCase()
              .indexOf(queryString.toLowerCase()) === 0
          )
        }
      }
      const handleSelect = (item) => {
        console.log(item)
      }
      onMounted(() => {
        restaurants.value = loadAll()
      })
      return {
        restaurants,
        state: ref(''),
        querySearchAsync,
        createFilter,
        loadAll,
        handleSelect,
      }
    },
  })
</script>

輸入長度限制


?maxlength ?和 ?minlength ?屬性，用來限制輸入框的字符長度，其中字符長度是用 Javascript 的字符串長度統(tǒng)計(jì)的。對于類型為 text 或 textarea 的輸入框，在使用 maxlength 屬性限制最大輸入長度的同時(shí)，可通過設(shè)置 show-word-limit 屬性來展示字?jǐn)?shù)統(tǒng)計(jì)。

<template>
  <el-input
  type="text"
  placeholder="請輸入內(nèi)容"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  placeholder="請輸入內(nèi)容"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        text: ref(''),
        textarea: ref(''),
      }
    },
  })
</script>

Input Attributes

參數(shù)說明類型可選值默認(rèn)值
type類型stringtext，textarea 和其他 原生 input 的 type 值text
model-value / v-model綁定值string / number——
maxlength最大輸入長度string / number——
minlength原生屬性，最小輸入長度number——
show-word-limit是否顯示輸入字?jǐn)?shù)統(tǒng)計(jì)，只在 type = "text" 或 type = "textarea" 時(shí)有效boolean—false
placeholder輸入框占位文本string——
clearable是否可清空boolean—false
show-password是否顯示切換密碼圖標(biāo)boolean—false
disabled禁用boolean—false
size輸入框尺寸，只在 type!="textarea" 時(shí)有效stringmedium / small / mini—
prefix-icon輸入框頭部圖標(biāo)string——
suffix-icon輸入框尾部圖標(biāo)string——
rows輸入框行數(shù)，只對 type="textarea" 有效number—2
autosize自適應(yīng)內(nèi)容高度，只對 type="textarea" 有效，可傳入對象，如，{ minRows: 2, maxRows: 6 }boolean / object—false
autocomplete原生屬性，自動(dòng)補(bǔ)全string—off
name原生屬性string——
readonly原生屬性，是否只讀boolean—false
max原生屬性，設(shè)置最大值———
min原生屬性，設(shè)置最小值———
step原生屬性，設(shè)置輸入字段的合法數(shù)字間隔———
resize控制是否能被用戶縮放stringnone, both, horizontal, vertical—
autofocus原生屬性，自動(dòng)獲取焦點(diǎn)booleantrue, falsefalse
form原生屬性string——
label輸入框關(guān)聯(lián)的 label 文字string——
tabindex輸入框的 tabindexstring / number--
validate-event輸入時(shí)是否觸發(fā)表單的校驗(yàn)boolean-true
input-styleinput 元素或 textarea 元素的 styleobject-{}

Input Slots

name說明
prefix輸入框頭部內(nèi)容，只對 type="text" 有效
suffix輸入框尾部內(nèi)容，只對 type="text" 有效
prepend輸入框前置內(nèi)容，只對 type="text" 有效
append輸入框后置內(nèi)容，只對 type="text" 有效

Input Events

事件名稱說明回調(diào)參數(shù)
blur在 Input 失去焦點(diǎn)時(shí)觸發(fā)(event: Event)
focus在 Input 獲得焦點(diǎn)時(shí)觸發(fā)(event: Event)
change僅在輸入框失去焦點(diǎn)或用戶按下回車時(shí)觸發(fā)(value: string | number)
input在 Input 值改變時(shí)觸發(fā)(value: string | number)
clear在點(diǎn)擊由 clearable 屬性生成的清空按鈕時(shí)觸發(fā)—

Input Methods

方法名說明參數(shù)
focus使 input 獲取焦點(diǎn)—
blur使 input 失去焦點(diǎn)—
select選中 input 中的文字—

Autocomplete Attributes

參數(shù)說明類型可選值默認(rèn)值
placeholder輸入框占位文本string——
disabled禁用boolean—false
value-key輸入建議對象中用于顯示的鍵名string—value
model-value / v-model必填值，輸入綁定值string——
debounce獲取輸入建議的去抖延時(shí)number—300
placement菜單彈出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestions返回輸入建議的方法，僅當(dāng)你的輸入建議數(shù)據(jù) resolve 時(shí)，通過調(diào)用 callback(data:[]) 來返回它Function(queryString, callback)——
popper-classAutocomplete 下拉列表的類名string——
trigger-on-focus是否在輸入框 focus 時(shí)顯示建議列表boolean—true
name原生屬性string——
select-when-unmatched在輸入沒有任何匹配建議的情況下，按下回車是否觸發(fā) select 事件boolean—false
label輸入框關(guān)聯(lián)的 label 文字string——
prefix-icon輸入框頭部圖標(biāo)string——
suffix-icon輸入框尾部圖標(biāo)string——
hide-loading是否隱藏遠(yuǎn)程加載時(shí)的加載圖標(biāo)boolean—false
popper-append-to-body是否將下拉列表插入至 body 元素。在下拉列表的定位出現(xiàn)問題時(shí)，可將該屬性設(shè)置為 falseboolean-false
highlight-first-item是否默認(rèn)突出顯示遠(yuǎn)程搜索建議中的第一項(xiàng)boolean—false

Autocomplete Slots

name說明
prefix輸入框頭部內(nèi)容
suffix輸入框尾部內(nèi)容
prepend輸入框前置內(nèi)容
append輸入框后置內(nèi)容

Autocomplete Scoped Slot

name說明
—自定義輸入建議，參數(shù)為 { item }

Autocomplete Events

事件名稱說明回調(diào)參數(shù)
select點(diǎn)擊選中建議項(xiàng)時(shí)觸發(fā)選中建議項(xiàng)
change在 Input 值改變時(shí)觸發(fā)(value: string | number)

Autocomplete Methods

方法名說明參數(shù)
focus使 input 獲取焦點(diǎn)-


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號