Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in
Toggle navigation
V
vue-toolbox
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
common
vue-toolbox
Commits
c9ebec6d
Commit
c9ebec6d
authored
Dec 18, 2020
by
马雄伟
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Delete input.md
parent
bd36cdea
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
0 additions
and
164 deletions
+0
-164
input.md
doc/input.md
+0
-164
No files found.
doc/input.md
deleted
100644 → 0
View file @
bd36cdea
# 输入框组件
> 说明:UI订制输入框,满足UI需求,在Element-ui基础上增加宽度size
## 组件参数说明
> 额外新增参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| width-size | 宽度大小 | string | mini(140px) / small(280px) / medium(400px) | small |
> Element-UI原生参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 类型 | string | text,textarea 和其他
[
原生 input 的 type 值
](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types
)
| text |
| value / v-model | 绑定值 | string / number | — | — |
| maxlength | 原生属性,最大输入长度 | number | — | — |
| minlength | 原生属性,最小输入长度 | number | — | — |
| show-word-limit | 是否显示输入字数统计,只在
`type = "text"`
或
`type = "textarea"`
时有效 | boolean | — | false |
| placeholder | 输入框占位文本 | string | — | — |
| clearable | 是否可清空 | boolean | — | false |
| show-password | 是否显示切换密码图标| boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| size | 输入框尺寸,只在
`type!="textarea"`
时有效 | string | medium / small / mini | — |
| prefix-icon | 输入框头部图标 | string | — | — |
| suffix-icon | 输入框尾部图标 | string | — | — |
| rows | 输入框行数,只对
`type="textarea"`
有效 | number | — | 2 |
| autosize | 自适应内容高度,只对
`type="textarea"`
有效,可传入对象,如,{ minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | 原生属性,自动补全 | string | on, off | off |
| auto-complete | 下个主版本弃用 | string | on, off | off |
| name | 原生属性 | string | — | — |
| readonly | 原生属性,是否只读 | boolean | — | false |
| max | 原生属性,设置最大值 | — | — | — |
| min | 原生属性,设置最小值 | — | — | — |
| step | 原生属性,设置输入字段的合法数字间隔 | — | — | — |
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
| autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
| form | 原生属性 | string | — | — |
| label | 输入框关联的label文字 | string | — | — |
| tabindex | 输入框的tabindex | string | - | - |
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
## 组件插槽说明
| 插槽名称 | 说明 |
|------|--------|
| prefix | 输入框头部内容,只对
`type="text"`
有效 |
| suffix | 输入框尾部内容,只对
`type="text"`
有效 |
| prepend | 输入框前置内容,只对
`type="text"`
有效 |
| append | 输入框后置内容,只对
`type="text"`
有效 |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| @blur | 在 Input 失去焦点时触发 | (event: Event) |
| @focus | 在 Input 获得焦点时触发 | (event: Event) |
| @change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string
\|
number) |
| @input | 在 Input 值改变时触发 | (value: string
\|
number) |
| @clear | 在点击由
`clearable`
属性生成的清空按钮时触发 | — |
## 组件方法
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |
| select | 选中 input 中的文字 | — |
#### 效果图
<img
src=
"https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/input.png"
width=
"500px"
/>
#### 代码示例
```
html
<template>
<div
class=
"counter"
>
<div
class=
"template"
>
<cy-input
ref=
"inp"
placeholder=
"我是定宽为280px的input"
v-model=
"count"
size=
"medium"
></cy-input>
</div>
<div
class=
"template"
>
<cy-input
placeholder=
"一般用于表格中"
width-size=
"mini"
size=
"mini"
v-model=
"count"
></cy-input>
</div>
<div
class=
"template"
>
<cy-input
disabled
placeholder=
"我是定宽为280px被禁用的input"
v-model=
"count"
></cy-input>
</div>
<div
class=
"template"
>
<cy-input
width-size=
"medium"
placeholder=
"我是定宽为400px的input带有前后插槽"
v-model=
"count"
>
<template
slot=
"prepend"
>
http://
</template>
<template
slot=
"append"
>
.com
</template>
</cy-input>
</div>
<div
class=
"template"
>
<cy-input
width-size=
"medium"
placeholder=
"我是宽为400px文本区域"
v-model=
"text"
:rows=
"2"
type=
"textarea"
@
input=
"change"
>
</cy-input>
</div>
<div
class=
"template"
>
<cy-input
width-size=
"medium"
placeholder=
"我是带图标的input"
v-model=
"text"
prefix-icon=
"el-icon-search"
maxlength=
"50"
show-word-limit
>
</cy-input>
</div>
</div>
</template>
<script
lang=
"ts"
>
import
{
Vue
,
Component
}
from
"vue-property-decorator"
;
@
Component
export
default
class
extends
Vue
{
private
count
=
""
;
private
text
=
""
;
private
select
=
"1"
;
private
change
()
{
console
.
log
(
this
.
text
);
}
mounted
()
{
(
this
.
$refs
[
"inp"
]
as
any
).
focus
();
}
}
</script>
<style
lang=
"scss"
scoped
>
.template
{
padding
:
15px
30px
;
}
</style>
```
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment