Sakana Element

简体中文

English

简体中文

English

主题

Input 输入框 ​

用于接收用户输入的文本框组件。

?
名称分类说明类型默认值
type? 风格输入框类型，支持原生 HTML input 类型'text' | 'password' | 'textarea' | 'date' | 'time' | 'url' | ...'text'
color? 风格输入框颜色，支持预设主题色或自定义十六进制色值'primary' | 'success' | 'warning' | 'danger' | 'info' | string—
ghost? 风格是否为幽灵样式（无边框/阴影，悬浮时显示）booleanfalse
size? 尺寸尺寸'large' | 'default' | 'small''default'
disabled? 状态是否禁用booleanfalse
readonly? 状态是否只读booleanfalse
clearable? 行为是否可清空booleanfalse
show-password? 行为是否显示密码切换按钮booleanfalse
autocomplete? 行为原生 autocomplete 属性string'off'
autofocus? 行为是否自动聚焦booleanfalse
form? 行为原生 form 属性，关联到指定表单string—
model-value / v-model? 内容绑定值string—
placeholder? 内容占位符string—
prefix-icon? 内容前缀图标string—
suffix-icon? 内容后缀图标string—
input? 事件输入时触发(value: string) => void—
change? 事件值改变时触发(value: string) => void—
focus? 事件获取焦点时触发(event: FocusEvent) => void—
blur? 事件失去焦点时触发(event: FocusEvent) => void—
clear? 事件清空时触发() => void—
prefix? 插槽前缀内容—
suffix? 插槽后缀内容—
prepend? 插槽前置内容—
append? 插槽后置内容—
ref? 暴露输入框 HTML 元素Ref<HTMLInputElement>—
focus? 暴露使输入框获取焦点() => void—
blur? 暴露使输入框失去焦点() => void—
clear? 暴露清空输入框内容() => void—
select? 暴露选中输入框中的文本() => void—

基础用法 ​

基础的输入框用法。

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="请输入内容" />
    <px-input v-model="input2" placeholder="禁用状态" disabled />
  </div>
</template>

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

const input1 = ref('');
const input2 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

输入框颜色 ​

使用 color 属性为输入框应用预设主题颜色的边框和阴影。

<template>
  <div class="demo-input">
    <px-input v-model="v1" color="primary" placeholder="Primary" />
    <px-input v-model="v2" color="success" placeholder="Success" />
    <px-input v-model="v3" color="warning" placeholder="Warning" />
    <px-input v-model="v4" color="danger" placeholder="Danger" />
    <px-input v-model="v5" color="info" placeholder="Info" />
  </div>
</template>

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

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

自定义颜色 ​

向 color 属性传入任意十六进制颜色字符串来创建自定义颜色的输入框。搭配 ghost 可实现静止时透明的变体。

<template>
  <div class="demo-input">
    <h4>Default</h4>
    <px-input v-model="v1" color="#626aef" placeholder="Indigo #626aef" />
    <px-input v-model="v2" color="#ff6b9d" placeholder="Pink #ff6b9d" />
    <px-input v-model="v3" color="#36cfc9" placeholder="Teal #36cfc9" />

    <h4>Ghost</h4>
    <px-input v-model="v4" color="#626aef" ghost placeholder="Indigo ghost" />
    <px-input v-model="v5" color="#ff6b9d" ghost placeholder="Pink ghost" />
    <px-input v-model="v6" color="#36cfc9" ghost placeholder="Teal ghost" />
  </div>
</template>

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

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
const v6 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
.demo-input h4 {
  margin: 8px 0 0;
}
</style>

幽灵输入框 ​

使用 ghost 属性来创建无边框的输入框，悬浮/聚焦时显示边框和阴影。可与预设颜色和自定义颜色搭配使用。

<template>
  <div class="demo-input">
    <px-input v-model="v1" ghost placeholder="Ghost default" />
    <px-input v-model="v2" ghost color="primary" placeholder="Ghost primary" />
    <px-input v-model="v3" ghost color="success" placeholder="Ghost success" />
    <px-input v-model="v4" ghost color="danger" placeholder="Ghost danger" />
  </div>
</template>

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

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

不同尺寸 ​

使用 size 属性来设置输入框的大小。

<template>
  <div class="demo-input">
    <px-input v-model="input1" size="large" placeholder="大尺寸" />
    <px-input v-model="input2" placeholder="默认尺寸" />
    <px-input v-model="input3" size="small" placeholder="小尺寸" />
  </div>
</template>

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

const input1 = ref('');
const input2 = ref('');
const input3 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

禁用与只读 ​

使用 disabled 和 readonly 属性来控制输入框状态。

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="Disabled input" disabled />
    <px-input v-model="input2" placeholder="Readonly input" readonly />
  </div>
</template>

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

const input1 = ref('');
const input2 = ref('Readonly value');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

可清空 ​

使用 clearable 属性来启用清空按钮。

<template>
  <div class="demo-input">
    <px-input v-model="input" placeholder="可清空" clearable />
  </div>
</template>

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

const input = ref('Hello World');
</script>

<style scoped>
.demo-input {
  max-width: 300px;
}
</style>

密码框 ​

使用 type="password" 和 show-password 属性来创建密码输入框。

<template>
  <form class="demo-input" @submit.prevent>
    <px-input v-model="password" type="password" placeholder="请输入密码" show-password />
  </form>
</template>

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

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

<style scoped>
.demo-input {
  max-width: 300px;
}
</style>

前缀和后缀 ​

使用 prefix-icon / suffix-icon 属性或 prefix / suffix 插槽来在输入框前后添加内容。

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="Prefix icon" prefix-icon="search" />
    <px-input v-model="input2" placeholder="Suffix icon" suffix-icon="edit" />
    <px-input v-model="input3" placeholder="With slot prefix">
      <template #prefix>
        <px-icon icon="coin" />
      </template>
    </px-input>
    <px-input v-model="input4" placeholder="With slot suffix">
      <template #suffix>
        <px-icon icon="mail" />
      </template>
    </px-input>
  </div>
</template>

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

const input1 = ref('');
const input2 = ref('');
const input3 = ref('');
const input4 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

原生类型 ​

type 属性支持所有原生 HTML input 类型。以下是 date、time 和 url 类型的示例。

<template>
  <div class="demo-input">
    <px-input v-model="date" type="date" placeholder="Select date">
      <template #prefix>
        <px-icon icon="calendar" />
      </template>
    </px-input>
    <px-input v-model="time" type="time" placeholder="Select time">
      <template #prefix>
        <px-icon icon="clock" />
      </template>
    </px-input>
    <px-input v-model="url" type="url" placeholder="https://example.com">
      <template #prefix>
        <px-icon icon="link" />
      </template>
    </px-input>
  </div>
</template>

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

const date = ref('');
const time = ref('');
const url = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>