带有标签和验证状态的文本输入组件.
安装
bun add @duskmoon-dev/el-input
使用量
自动注册( 建议)
使用组件的最简单方式 - 只需导入即可:
<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-input/register"></script>
<!-- Now use the element -->
<el-dm-input label="Username" placeholder="Enter username"></el-dm-input>
<el-dm-input label="Email" type="email" required></el-dm-input>
<el-dm-input
label="Password"
type="password"
validation-state="invalid"
error-message="Password is required"
></el-dm-input>
或与一捆子:
import '@duskmoon-dev/el-input/register';
手工登记
<script type="module">
import { register } from '@duskmoon-dev/el-input';
register();
</script>
<el-dm-input label="Username" placeholder="Enter username"></el-dm-input>
| 类型 | 说明 |
|---|
text | 标准文本输入( 默认) |
password | 密码输入 |
email | 电子邮件输入 |
number | 数字输入 |
tel | 电话输入 |
url | URL 输入 |
search | 搜索输入 |
大小
审定国
| 状态 | 说明 |
|---|
valid | 输入有效( 绿色边框) |
invalid | 输入无效( 红色边框, 显示错误) |
pending | 正在验证( 显示旋转器) |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
type | 字符串 | text | 输入类型 |
value | 字符串 | '' | 现值 |
name | 字符串 | | 窗体字段名称 |
label | 字符串 | | 标签文本 |
placeholder | 字符串 | | 占位符文本 |
disabled | 布尔 | false | 禁用输入 |
readonly | 布尔 | false | 只读 |
required | 布尔 | false | 按要求标出 |
size | 字符串 | md | 输入大小 |
validation-state | 字符串 | | 验证状态 |
error-message | 字符串 | | 错误消息 |
helper-text | 字符串 | | 帮助文本 |
槽数
| 槽 | 说明 |
|---|
prefix | 输入前的内容 |
suffix | 输入后的内容 |
CSS 组件
| 编 | 说明 |
|---|
container | 外容器 |
label | 标签元素 |
input-wrapper | 环绕输入 |
input | 本地输入元素 |
prefix | 前缀插槽包装器 |
suffix | 后缀槽包装器 |
helper | 帮助文本元素 |
error | 错误消息元素 |
活动
| 活动 | 细节 | 说明 |
|---|
dm-input | { value: string } | 输入时开火 |
dm-change | { value: string } | 变换时解雇 |
dm-focus | | 点火了 |
dm-blur | | 被模糊的射击 |
CSS 自定义属性
| 财产 | 说明 |
|---|
--dm-input-height | 输入高度 |
--dm-input-padding-x | 水平粘贴 |
--dm-input-font-size | 字体大小 |
--dm-input-border-radius | 边界半径 |
--dm-input-border-color | 边框颜色 |
--dm-input-focus-border-color | 焦点边框颜色 |
实例
带有图标
<el-dm-input label="Search" type="search">
<span slot="prefix">🔍</span>
</el-dm-input>
有验证
<el-dm-input
label="Email"
type="email"
validation-state="invalid"
error-message="Please enter a valid email address"
></el-dm-input>
使用帮助文本
<el-dm-input
label="Password"
type="password"
helper-text="Must be at least 8 characters"
></el-dm-input>
许可证
麻省理工学院