el-autocomplete详解

el-autocomplete 是 Element Plus 框架中的一个自动完成组件，用于根据用户输入提供匹配的建议列表。它支持异步数据加载和自定义模板。

一。 el-autocomplete 属性详解

1. value / v-model:

   • 类型: String
   • 用途: 绑定值。
   • 默认值: ''

2. placeholder:

   • 类型: String
   • 用途: 输入框占位符。

3. disabled:

   • 类型: Boolean
   • 用途: 是否禁用。
   • 默认值: false

4. name:

   • 类型: String
   • 用途: 原生 name 属性。

5. fetch-suggestions:

   • 类型: Function
   • 用途: 异步获取建议的方法。

6. popper-class:

   • 类型: String
   • 用途: 自定义建议列表的类名。

7. trigger-on-focus:

   • 类型: Boolean
   • 用途: 是否在聚焦时触发建议列表。
   • 默认值: true

8. debounce:

   • 类型: Number
   • 用途: 输入值的去抖延迟，单位为毫秒。
   • 默认值: 300

9. placement:

   • 类型: String
   • 用途: 建议列表的定位方式，可选值为 bottom、top。
   • 默认值: bottom

10. icon:

    • 类型: String
    • 用途: 输入框尾部图标。

11. fetch-suggestions-debounce:

    • 类型: Number
    • 用途: 异步获取建议的去抖延迟，单位为毫秒。
    • 默认值: 300

12. value-key:

    • 类型: String
    • 用途: 指定选项的值为选项对象的哪个属性。
    • 默认值: value

二。 el-autocomplete 事件详解

1. select:

   • 类型: Function
   • 用途: 当选中建议项时触发的事件。
   • 参数: item（选中的建议项）

2. input:

   • 类型: Function
   • 用途: 当输入框值变化时触发的事件。
   • 参数: value（输入框的值）

3. focus:

   • 类型: Function
   • 用途: 当输入框获得焦点时触发的事件。
   • 参数: event（事件对象）

4. blur:

   • 类型: Function
   • 用途: 当输入框失去焦点时触发的事件。
   • 参数: event（事件对象）

三。 el-autocomplete 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 输入框的内容。

2. prefix:

   • 插槽名称: prefix
   • 用途: 输入框前缀图标。

3. suffix:

   • 插槽名称: suffix
   • 用途: 输入框后缀图标。

4. prepend:

   • 插槽名称: prepend
   • 用途: 输入框前置内容。

5. append:

   • 插槽名称: append
   • 用途: 输入框后置内容。

四。示例代码

<template>
  <div>
    <h2>Autocomplete 示例</h2>

    <!-- 基本用法 -->
    <el-autocomplete
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>

    <!-- 异步获取建议 -->
    <el-autocomplete
      v-model="state2"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>

    <!-- 自定义模板 -->
    <el-autocomplete
      v-model="state3"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    >
      <template #default="{ item }">
        <div class="autocomplete-item">
          <img :src="item.image" alt="item.title" class="autocomplete-image">
          <span>{{ item.title }}</span>
        </div>
      </template>
    </el-autocomplete>

    <!-- 禁用状态 -->
    <el-autocomplete
      v-model="state4"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      disabled
    ></el-autocomplete>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const state1 = ref('')
const state2 = ref('')
const state3 = ref('')
const state4 = ref('')

const links = [
  { title: 'vue', address: 'https://www.vuejs.org', image: 'https://vuejs.org/images/logo.png' },
  { title: 'element', address: 'https://element.eleme.io', image: 'https://element-plus.org/images/element-plus-logo.svg' },
  { title: 'cooking', address: 'https://www.cooking.com', image: 'https://www.cooking.com/images/logo.png' }
]

const querySearch = (queryString, cb) => {
  const results = queryString ? links.filter(createFilter(queryString)) : links
  // 调用 callback 返回建议列表的数据
  cb(results)
}

const querySearchAsync = (queryString, cb) => {
  setTimeout(() => {
    const results = queryString ? links.filter(createFilter(queryString)) : links
    cb(results)
  }, 300)
}

const createFilter = (queryString) => {
  return (link) => {
    return link.title.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  }
}

const handleSelect = (item) => {
  console.log('选中建议项:', item)
}
</script>

五。 代码解释

1. 基本用法:

   • 使用 el-autocomplete 组件并绑定值，设置 fetch-suggestions 方法和 placeholder。

   • <el-autocomplete
       v-model="state1"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       @select="handleSelect"
     ></el-autocomplete>
     

2. 异步获取建议:

   • 使用 fetch-suggestions 方法异步获取建议。

   • <el-autocomplete
       v-model="state2"
       :fetch-suggestions="querySearchAsync"
       placeholder="请输入内容"
       @select="handleSelect"
     ></el-autocomplete>
     

3. 自定义模板:

   • 使用插槽自定义建议项的显示内容。

   • <el-autocomplete
       v-model="state3"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       @select="handleSelect"
     >
       <template #default="{ item }">
         <div class="autocomplete-item">
           <img :src="item.image" alt="item.title" class="autocomplete-image">
           <span>{{ item.title }}</span>
         </div>
       </template>
     </el-autocomplete>
     

4. 禁用状态:

   • 使用 disabled 属性禁用输入框。

   • <el-autocomplete
       v-model="state4"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       disabled
     ></el-autocomplete>