AutoComplete 自动补全输入框

基于 el-autocomplete 做了进一步封装。

完整引入

import DgAdminComponent from '@degon/admin-component-vue3'
// ...
createApp(App)
  .use(DgAdminComponent)

按需引入

import { DgAutoComplete } from '@degon/admin-component-vue3'
// ...
createApp(App)
  .use(DgAutoComplete)

基础使用

<template>
  <dg-auto-complete
    v-model="form.name"
    :data="api"
    value-key="value"
    query-key="account_name"
    placeholder="请输入"
    @select="handleChange"
  />
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const api = Promise.resolve({data: {data: [
  {value: 'name1'},
  {value: 'name2'},
]}})

const form = reactive({
  name: ''
})

function handleChange(val: string) {
  form.name = val
}
</script>

属性

参数	说明	类型	可选值	默认值
v-model	绑定值	string	-	-
data	数据源，可以是api接口或者数组	function array	-	-
value-key	输入建议对象中用于显示的键名	string	-	-
query-key	输入查询数据时的关键词的键名	string	-	-

事件

事件名	说明	参数
select	点击选中建议项时触发	选中的建议项
clear	点击清空按钮时触发	-