Appearance
- default
- chenghua
- shijingshan
- sybz
- gulou
无数据
Appearance
<s-input v-model="name" />用示例顶部的选项切换主题,查看普通输入框、带标题输入框、搜索框和多行输入框的外观。基础写法:<s-input v-model="input" :theme="theme" width="320" placeholder="请输入服务名称" />。
使用 clearable 属性即可得到一个可一键清空的输入框,s-input 默认值为 true。textarea 始终隐藏 Element Plus 原生清除按钮,只显示 s-input 自定义清除按钮;设置 clearable="false" 后自定义按钮也会隐藏。
search(默认值 false) 设置 search 后,搜索按钮显示在输入框内、清空图标右侧。按钮会随输入框的 size 或 height 调整,默认输入框高度仍为 32px。点击搜索按钮或在输入框按 Enter 都会触发 search 事件,参数依次为当前输入值和原始事件。基础写法:<s-input v-model="keyword" search placeholder="搜索工作小组..." @search="handleSearch" />。
top-title(默认值:空字符串) 使用 top-title 将标题嵌入输入框上边框,由边框为文字留出缺口,无须额外背景色;原有 title 仍显示在左侧前缀。基础写法:<s-input v-model="maxValue" top-title="X 最大值" width="300" />。
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 绑定值 | any | - |
compTitleStyle | 标题前缀组件样式;默认内边距为 0 8px,可覆盖 | object | {} |
topTitle | 嵌在输入框上边框的标题,模板中写作 top-title | string | '' |
width | 输入框宽度 | string / number | 100% |
height | 输入框高度 | string / number | '' |
maxlength | 最大输入长度,超出后截断输入并触发 $toast 提示 | string / number | 10 |
hideMaxLengthError | 是否隐藏超出最大长度时的 $toast 提示 | boolean | false |
maxLengthErrorText | 自定义超出最大长度时的 $toast 提示文案 | string | '' |
size | 输入框尺寸 | string | '' |
theme | 输入框主题 | string | default |
showWordLimit | 是否显示字数统计 | boolean / string | false |
block | 是否按块级宽度展示 | boolean | false |
disPlaceholder | 禁用态下显示的占位文案 | string | '' |
subAttrs | 外层容器额外属性 | object | {} |
tooltipAttrs | tooltip 额外属性 | object | {} |
iconAttrs | 右侧提示图标属性 | object | {} |
hideTooltip | 是否关闭溢出提示 | boolean | false |
options | 自动补全候选项,存在时渲染为 el-autocomplete | array | - |
content | 右侧说明提示文案 | string | '' |
search | 是否在清空图标右侧显示搜索按钮,支持点击或 Enter 搜索 | boolean | false |
dangerouslyUseHTMLString | 是否将右侧说明提示的 content 按 HTML 字符串渲染 | boolean | false |
| 事件名 | 说明 | 参数 |
|---|---|---|
search | 点击搜索按钮或在输入框按 Enter 时 | (value, event: MouseEvent / KeyboardEvent) |
el-input 二次封装,并透传绝大多数 el-input 属性。options 时会切换为 el-autocomplete 模式。