ERP 组件库

Appearance

输入框 Input ​

基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。 ​

基本用法 ​

输入框的基本用法。

代码事例
vue
<template>
  <fk-space>
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" allow-clear />
    <fk-input :style="{width:'320px'}" default-value="content" placeholder="商品衣诚" allow-clear />
  </fk-space>
</template>

输入框状态 ​

输入框可以设置禁用和错误状态。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input :style="{width:'320px'}" placeholder="Disabled status" disabled/>
    <fk-input :style="{width:'320px'}" default-value="Disabled" placeholder="Disabled status" disabled/>
    <fk-input :style="{width:'320px'}" placeholder="Error status" error/>
  </fk-space>
</template>

输入框尺寸 ​

输入框定义了四种默认尺寸 mini, small, medium, large ，分别为 24px, 28px, 32px, 36px 。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="size" type="button">
      <fk-radio value="mini">mini</fk-radio>
      <fk-radio value="small">small</fk-radio>
      <fk-radio value="medium">medium</fk-radio>
      <fk-radio value="large">large</fk-radio>
    </fk-radio-group>
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" :size="size" allow-clear />
  </fk-space>
</template>

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

export default {
  setup() {
    const size = ref('medium');

    return {
      size
    }
  },
}
</script>

前缀与后缀 ​

通过指定 prefix 和 suffix 插槽来在输入框内添加前缀和后缀。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" allow-clear>
      <template #prefix>
        <icon-user />
      </template>
    </fk-input>
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" allow-clear>
      <template #suffix>
        <icon-info-circle />
      </template>
    </fk-input>
  </fk-space>
</template>

前置、后置标签 ​

通过指定 prepend 和 append 插槽在输入框前后添加元素。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" allow-clear>
      <template #prepend>
        +86
      </template>
    </fk-input>
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" allow-clear>
      <template #append>
        RMB
      </template>
    </fk-input>
    <fk-input :bordered="false" class="input-select-group" :style="{width:'320px'}" placeholder="商品衣诚" allow-clear>
      <template #append>
          <fk-select :bordered="false" :options="['Option1','Option2','Option3']" placeholder="second" />
      </template>
    </fk-input>
  </fk-space>
</template>
<style lang="less">
.input-select-group {
  .fk-select-view-value {
    color: rgb(var(--fkblue-6));
  }
  &>:first-child:not(.fk-input-focus, :hover) {
    border-right-color: transparent;
  }
  .fk-input-append {
    width: 45%;
    padding: 2px;
    display: inline-flex;
    background-color: var(--color-bg-1);
  }
  .fk-select {
    width: 100%;
    margin-left: 0;
    background-color: var(--color-fill-2) !important;
    border-radius: 0;
  }
}
</style>

字数统计 ​

设置 max-length 可以限制最大字数，配合 show-word-limit 可以显示字数统计。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large" fill>
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" :max-length="10" allow-clear show-word-limit />
    <fk-input :style="{width:'320px'}" placeholder="商品衣诚" :max-length="{length:10,errorOnly:true}" allow-clear show-word-limit />
  </fk-space>
</template>

输入框组合 ​

通过 input-group 可以组合使用输入框。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input-group>
      <fk-input :style="{width:'160px'}" placeholder="first" />
      <fk-input :style="{width:'160px'}" placeholder="second" />
    </fk-input-group>
    <fk-input-group>
      <fk-select :options="['Option1','Option2','Option3']" :style="{width:'160px'}" placeholder="first" />
      <fk-input :style="{width:'160px'}" placeholder="second" />
    </fk-input-group>

    <fk-input-group :bordered="false">
      <fk-input :style="{width:'160px'}" placeholder="first" />
      <fk-select :options="['Option1','Option2','Option3']" :style="{width:'160px'}" placeholder="second" />
    </fk-input-group>
  </fk-space>
</template>

搜索框 ​

带有搜索按钮的输入框，用于内容检索。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚"/>
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚" search-button/>
  </fk-space>
</template>

自定义搜索按钮 ​

自定义搜索按钮的内容

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚" button-text="Search" search-button/>
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚" search-button>
      <template #button-icon>
        <icon-search/>
      </template>
      <template #button-default>
        Search
      </template>
    </fk-input-search>
  </fk-space>
</template>

搜索框（加载中） ​

通过 loading 属性可以让搜索框展示加载中状态。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚" loading />
    <fk-input-search :style="{width:'320px'}" placeholder="商品衣诚" search-button loading />
  </fk-space>
</template>

密码输入框 ​

用于输入密码。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-switch v-model="visibility" />
    <fk-input-password
      v-model:visibility="visibility"
      placeholder="商品衣诚"
      :style="{width:'320px'}"
      :default-visibility="false"
      allow-clear
    />
  </fk-space>
</template>

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

export default {
  setup() {
    const visibility = ref(true);

    return {
      visibility
    }
  },
}
</script>

API ​

<input> Props ​

参数名描述类型默认值版本
model-value (v-model)绑定值string-
default-value默认值（非受控状态）string''
size输入框大小'mini' | 'small' | 'medium' | 'large''medium'
allow-clear是否允许清空输入框booleanfalse
disabled是否禁用booleanfalse
readonly是否为只读状态booleanfalse
error是否为错误状态booleanfalse
placeholder提示文字string-
max-length输入值的最大长度，errorOnly 属性在 1.0.0 版本添加number | { length: number; errorOnly?: boolean }0
show-word-limit是否显示字数统计booleanfalse
word-length字符长度的计算方法(value: string) => number-
word-slice字符截取方法，同 wordLength 一起使用(value: string, maxLength: number) => string-1.0.0
input-attrs内部 input 元素的属性object-1.0.0

<input> Events ​

事件名描述参数
input用户输入时触发value: string
ev: Event
change仅在输入框失焦或按下回车时触发value: string
ev: Event
press-enter用户按下回车时触发ev: KeyboardEvent
clear用户点击清除按钮时触发ev: MouseEvent
focus输入框获取焦点时触发ev: FocusEvent
blur输入框失去焦点时触发ev: FocusEvent

<input> Methods ​

方法名描述参数返回值
focus使输入框获取焦点--
blur使输入框失去焦点--

<input> Slots ​

插槽名描述参数
append后置标签-
prepend前置标签-
suffix后缀元素-
prefix前缀元素-

<input-password> Props ​

参数名描述类型默认值
visibility (v-model)是否可见，受控属性boolean-
default-visibility默认是否可见，非受控booleantrue
invisible-button是否显示可见按钮booleantrue

<input-password> Events ​

事件名描述参数
visibility-changevisibility 改变时触发visible: boolean

<input-search> Props ​

参数名描述类型默认值版本
search-button是否为后置按钮模式booleanfalse
loading是否为加载中状态booleanfalse
disabled是否禁用booleanfalse
size输入框大小'mini' | 'small' | 'medium' | 'large''medium'
button-text搜索按钮的文字，使用后会替换原本的图标string-1.0.0
button-props搜索按钮的属性ButtonProps-

<input-search> Events ​

事件名描述参数
search单击搜索按钮时触发value: string
ev: MouseEvent

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team