FileInput 文件输入

像素风格的文件选择输入组件。

?

名称	分类	说明	类型	默认值
color	? 风格	文件输入框颜色，支持预设主题色或自定义十六进制色值	'primary' | 'success' | 'warning' | 'danger' | 'info' | string	—
ghost	? 风格	是否为幽灵样式（无边框/阴影，悬浮时显示）	boolean	false
size	? 尺寸	尺寸	'large' | 'default' | 'small'	'default'
disabled	? 状态	是否禁用	boolean	false
clearable	? 行为	是否可清空	boolean	false
accept	? 行为	原生 accept 属性，限制文件类型	string	—
multiple	? 行为	是否允许多选	boolean	false
form	? 行为	原生 form 属性，关联到指定表单	string	—
model-value / v-model	? 内容	绑定值	FileList | null	—
placeholder	? 内容	未选择文件时的占位文本	string	'No file chosen'
change	? 事件	文件选择变化时触发	(value: FileList | null) => void	—
clear	? 事件	清空时触发	() => void	—
trigger	? 插槽	自定义触发按钮内容		—
ref	? 暴露	原生文件输入框 HTML 元素	Ref<HTMLInputElement>	—
open	? 暴露	打开文件选择对话框	() => void	—
clear	? 暴露	清空已选择的文件	() => void	—

基础用法

基础的文件输入框用法。

<template>
  <div class="demo-file-input">
    <px-file-input placeholder="Select a file..." />
  </div>
</template>

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

文件输入颜色

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

<template>
  <div class="demo-file-input">
    <px-file-input color="primary" placeholder="Primary" />
    <px-file-input color="success" placeholder="Success" />
    <px-file-input color="warning" placeholder="Warning" />
    <px-file-input color="danger" placeholder="Danger" />
    <px-file-input color="info" placeholder="Info" />
  </div>
</template>

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

自定义颜色

向 color 属性传入任意十六进制颜色字符串来创建自定义颜色的文件输入框。

<template>
  <div class="demo-file-input">
    <px-file-input color="#626aef" placeholder="Indigo" />
    <px-file-input color="#f59e0b" placeholder="Amber" />
    <px-file-input color="#ec4899" placeholder="Pink" />
  </div>
</template>

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

幽灵文件输入

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

<template>
  <div class="demo-file-input">
    <px-file-input ghost placeholder="Ghost" />
    <px-file-input ghost color="primary" placeholder="Ghost Primary" />
    <px-file-input ghost color="danger" placeholder="Ghost Danger" />
    <px-file-input ghost color="#626aef" placeholder="Ghost Custom" />
  </div>
</template>

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

不同尺寸

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

<template>
  <div class="demo-file-input">
    <px-file-input size="large" placeholder="Large" />
    <px-file-input placeholder="Default" />
    <px-file-input size="small" placeholder="Small" />
  </div>
</template>

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

禁用状态

使用 disabled 属性来禁用文件输入框。

<template>
  <div class="demo-file-input">
    <px-file-input disabled placeholder="Disabled file input" />
  </div>
</template>

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

可清空

使用 clearable 属性来启用选择文件后的清空按钮。

<template>
  <div class="demo-file-input">
    <px-file-input clearable placeholder="Select and clear" />
  </div>
</template>

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

多选文件

使用 multiple 属性来允许选择多个文件。

<template>
  <div class="demo-file-input">
    <px-file-input multiple clearable placeholder="Select multiple files" />
  </div>
</template>

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

文件类型过滤

使用 accept 属性来限制可选择的文件类型。

<template>
  <div class="demo-file-input">
    <px-file-input accept="image/*" placeholder="Images only" />
    <px-file-input accept=".pdf" placeholder="PDF files only" />
    <px-file-input accept=".jpg,.png,.gif" placeholder=".jpg, .png, .gif" />
  </div>
</template>

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