cip-components/cip-form-input/basic/autocomplete/index.vue

<template>
  <el-autocomplete
    v-bind="inputProps"
    :disabled="disabled"
    :placeholder="placeholder"
    :clearable="clearable"
    :style="{width}"
    v-model="proxyValue"
    :fetch-suggestions="querySearchAsync"
  />
</template>
<script>
import { ElAutocomplete } from 'element-plus'
import { useFormInput, useInputProps, formInputProps, fromInputEmits } from '@cip/components/helper/form-input'
export default {
  components: { ElAutocomplete },
  props: formInputProps,
  emits: fromInputEmits,
  setup (props, content) {
    const { width, securityConfig, proxyValue, placeholder, clearable } = useFormInput(props, content)

    const inputProps = useInputProps(props, [
      'icon',
      'debounce',
      'placement',
      'popperClass',
      'triggerOnFocus',
      'name',
      'selectWhenUnmatched',
      'label',
      'prefixIcon',
      'suffixIcon',
      'hideLoading',
      'teleported',
      'highlightFirstItem',
      'fitInputWidth'
    ])

    const querySearchAsync = async (query, cb) => {
      if (securityConfig.value.asyncOptions) {
        const options = await securityConfig.value.asyncOptions(query)
        cb(options)
      } else {
        // eslint-disable-next-line standard/no-callback-literal
        cb([])
        throw new Error('autocomplete 类型的 config 需要编写 asyncOptions')
      }
    }
    return {
      width,
      securityConfig,
      proxyValue,
      placeholder,
      clearable,
      inputProps,
      querySearchAsync
    }
  }
}
</script>