dk-plus

简体中文

English

简体中文

English

Appearance

目录

Autocomplete 自动补全 ​

用于输入时给出建议列表，支持本地 options 与异步 fetch-suggestions（参考 Element Plus Autocomplete）。

基础用法（本地 options） ​

html
<template>
  <dk-autocomplete v-model="value" :options="options" placeholder="请输入" clearable />
</template>

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

const value = ref('')
const options = [
  { value: 'Vue' },
  { value: 'Vite' },
  { value: 'Vitest' },
  { value: 'TypeScript' }
]
</script>
展开

聚焦触发（trigger-on-focus） ​

trigger-on-focus 为 true 时，聚焦会触发建议列表（本地 options 会直接展示全部）。

html
<template>
  <dk-autocomplete
    v-model="value"
    :options="options"
    placeholder="点击输入框就会出现下拉"
    :trigger-on-focus="true"
  />
</template>

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

const value = ref('')
const options = [
  { value: 'vue' },
  { value: 'element' },
  { value: 'cooking' },
  { value: 'mint-ui' },
  { value: 'vuex' },
  { value: 'vue-router' },
  { value: 'babel' }
]
</script>
展开

远程搜索（fetch-suggestions） ​

html
<template>
  <dk-autocomplete
    v-model="value"
    :fetch-suggestions="fetchSuggestions"
    placeholder="输入关键字"
    :debounce="300"
    highlight-first-item
  />
</template>

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

const value = ref('')

const list = [
  { value: 'Shanghai' },
  { value: 'Beijing' },
  { value: 'Shenzhen' },
  { value: 'Guangzhou' }
]

const fetchSuggestions = (queryString, cb) => {
  const q = (queryString || '').toLowerCase()
  const res = list.filter(item => item.value.toLowerCase().includes(q))
  setTimeout(() => cb(res), 200)
}
</script>
展开

禁用与可清空 ​

html
<template>
  <dk-autocomplete v-model="value1" :options="options" placeholder="禁用状态" disabled />

  <dk-autocomplete v-model="value2" :options="options" placeholder="可清空" clearable />
</template>
展开

自定义下拉项（默认插槽） ​

使用默认插槽可以自定义每一项的渲染（#default="{ item }"）。

html
<template>
  <dk-autocomplete
    v-model="value"
    :options="options"
    value-key="label"
    placeholder="支持自定义 item 渲染"
  >
    <template #default="{ item }">
      <div style="display:flex; justify-content:space-between; width:100%">
        <span>{{ item.label }}</span>
        <span style="opacity:.65; font-size:12px">{{ item.code }}</span>
      </div>
    </template>
  </dk-autocomplete>
</template>

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

const value = ref('')
const options = [
  { label: 'Vue', code: 'vue' },
  { label: 'Vite', code: 'vite' },
  { label: 'Vitest', code: 'vitest' }
]
</script>
展开

加载与空状态（loading/empty 插槽） ​

html
<template>
  <dk-autocomplete v-model="value" :fetch-suggestions="fetchSuggestions" placeholder="输入触发异步" :debounce="200">
    <template #loading>
      <div style="padding: 6px 10px">正在加载...</div>
    </template>
    <template #empty>
      <div style="padding: 6px 10px; text-align:center">暂无匹配数据</div>
    </template>
  </dk-autocomplete>
</template>
展开

Autocomplete 属性 ​

属性名说明类型默认值
model-value / v-model绑定值string''
options本地建议列表Array<string | object>[]
fetch-suggestions获取建议的方法（Element 风格）(queryString, cb) => void | Promise—
placeholder占位符string''
disabled是否禁用booleanfalse
clearable是否可清空booleanfalse
trigger-on-focus聚焦时是否触发建议booleantrue
debounce防抖（ms）number300
value-key对象项显示字段string'value'
highlight-first-item是否高亮第一项booleanfalse
hide-loading是否隐藏 loadingbooleanfalse
size尺寸large / medium / small / mini—

Autocomplete 插槽 ​

插槽名说明参数
default自定义下拉项内容{ item }
loading自定义 loading 内容—
empty自定义空状态内容—
prefix / suffix / prepend / append透传给内部输入框（DkInput）的插槽—

Autocomplete 事件 ​

事件名说明回调参数
change输入值变化(value: string)
select选择某一项(item: string | object)
focus获得焦点(evt: FocusEvent)
blur失去焦点(evt: FocusEvent)
clear清空—

Contributors ​

Mr.Fan