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

<template>
  <el-input v-model="proxyValue"
            :placeholder="placeholder"
            :disabled="disabled"
            :style="{width}"
            :maxlength="limit"
            :show-word-limit="showWordLimit && !!limit"
            :clearable="clearable"
            ref="inputRef"></el-input>
</template>
<script>
import { ElInput } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { useInputConfig } from './use-input-config'

export default {
  name: 'BasicInput',
  components: { ElInput },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const formInput = useFormInput(props, context)
    const { width, proxyValue, clearable, inputRef } = formInput
    const { placeholder, limit, showWordLimit } = useInputConfig(formInput)
    context.expose({
      focus: () => { inputRef.value.focus() }
    })
    return {
      inputRef,
      proxyValue,
      placeholder,
      limit,
      showWordLimit,
      width,
      clearable
    }
  }
}
</script>