V3 Element

Appearance

On this page

Input 输入框 ​

通过鼠标或键盘输入字符

基础文本框 ​

<template>
  <vk-input v-model="test" placeholder="基础文本框，请输入" />
  <span>{{ test }}</span>
</template>

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

const test = ref('');
</script>

禁用文本框 ​

通过 disabled 属性指定是否禁用 input 组件

<template>
  <vk-input v-model="test" disabled />
</template>

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

const test = ref('some text');
</script>

尺寸 ​

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。

<template>
  <div class="size-holder">
    <vk-input v-model="test" placeholder="大的 Input" size="large"></vk-input>
    <vk-input v-model="test" placeholder="普通的 Input"></vk-input>
    <vk-input v-model="test" placeholder="小的 Input" size="small"></vk-input>
  </div>
</template>

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

const test = ref('');
</script>

<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

复合型输入框 ​

可以在输入框前置或后置一个元素，通常是标签或按钮。可以使用 prepend 和 append 插槽。 要在输入框中添加前后元素，可以使用 prefix 和 suffix 插槽。

Https://
.com
<template>
  <vk-input v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </vk-input>

  <vk-input v-model="test" placeholder="prefix suffix">
    <template #prefix>
      <vk-icon icon="fa-user" />
    </template>
    <template #suffix>
      <vk-icon icon="fa-user" />
    </template>
  </vk-input>
</template>

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

const test = ref('');
</script>

Textarea ​

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

<template>
  <vk-input
    v-model="test"
    placeholder="可以是一个 Textarea"
    type="textarea"
  ></vk-input>
</template>

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

const test = ref('');
</script>

密码文本框 ​

使用 show-password属性即可得到一个可切换显示隐藏的密码框

<template>
  <vk-input v-model="test" placeholder="密码文本框，可以切换" showPassword />
</template>

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

const test = ref('');
</script>

清空文本框 ​

使用 clearable 属性即可得到一个可一键清空的输入框

<template>
  <vk-input v-model="test" clearable placeholder="输入字符以后可以点击清空" />
</template>

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

const test = ref('');
</script>

API ​

属性 ​

属性名说明类型默认值
model-value / v-model绑定值string-
size输入框尺寸，只在 type 不为 'textarea' 时有效large | small-
type类型stringtext
disabled是否禁用booleanfalse
placeholder输入框占位文本string—
autofocus原生属性，自动获取焦点booleanfalse
show-password是否显示切换密码图标booleanfalse
clearable是否显示清除按钮，只有当 type 不是 textarea 时生效booleanfalse
readonly原生 readonly 属性，是否只读booleanfalse
autocomplete原生 autocomplete 属性stringoff
form原生属性string-

事件 ​

事件名描述类型
blur当选择器的输入框失去焦点时触发(e: FocusEvent) => void
focus当选择器的输入框获得焦点时触发(e: FocusEvent) => void
input在 Input 值改变时触发(value: string) => void
change仅当 modelValue 改变时，当输入框失去焦点时触发(value: string) => void
clear在点击由 clearable 属性生成的清空按钮时触发() => void

插槽 ​

插槽名说明
prefix输入框头部内容，只对非 type="textarea" 有效
suffix输入框尾部内容，只对非 type="textarea" 有效
prepend输入框前置内容，只对非 type="textarea" 有效
append输入框后置内容，只对非 type="textarea" 有效

实例 ​

名称说明类型
refHTML 元素 input 或 textareaRef<HTMLInputElement | HTMLTextAreaElement>