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
a83f055c
Commit
a83f055c
authored
Dec 18, 2020
by
马雄伟
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Delete select-input.md
parent
c9ebec6d
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
0 additions
and
83 deletions
+0
-83
select-input.md
doc/select-input.md
+0
-83
No files found.
doc/select-input.md
deleted
100644 → 0
View file @
c9ebec6d
# 附带下拉选择的输入框组件
> 说明:满足UI需求,二次封装的附带下拉选择的输入框组件
## 组件参数说明
| 参数 | 类型 | 说明 | 可选值 | 默认值 | 是否必填 |
|------------------- |-------------- |---------------|-------------------------------- |-------- | ------- |
| v-model / value | String | 绑定值 | - | - | 是 |
| list | Array(obj)> obj: {key: 绑定对应value值,name: 绑定的label值} | 下拉框的option数组 | - | - | 是 |
| placeholder | String | 占位符文案 | - | - | 否 |
| disabled | Boolean | 是否禁用 | - | false | 否 |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| @change | 仅在输入框失去焦点或用户按下回车时触发 | 输入框目前的内容 |
| @selectChange | 下拉框选中内容变化回调 | 目前选中值 |
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| input | 在 Input 值改变时触发 | (value: string
\|
number) |
## 组件方法说明
| 方法名称 | 说明 | 参数 |
| ---- | ---- | ---- |
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |
| select | 选中 input 中的文字 | — |
#### 效果图
<img
src=
"https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/select-input.png"
width=
"500px"
/>
#### 代码参考
```
html
<template>
<div
class=
"counter"
>
<div
class=
"template"
>
<!-- 需要单独引入 SelectInput -->
<select-input
v-model=
"text"
:list=
"list"
@
selectChange=
"changed"
@
change=
"changeText"
placeholder=
"请输入啊"
></select-input>
</div>
</div>
</template>
<script
lang=
"ts"
>
import
{
Vue
,
Component
}
from
"vue-property-decorator"
;
import
SelectInput
from
"@/components/business/select-input/index.vue"
;
@
Component
({
name
:
"Counter"
,
components
:
{
SelectInput
}
})
export
default
class
Counter
extends
Vue
{
private
text
=
""
;
private
list
=
[
{
key
:
1
,
name
:
"老坛胡说"
},
{
key
:
2
,
name
:
"徐大虾咯"
}
];
private
changed
(
val
:
any
)
{
console
.
log
(
val
);
}
private
changeText
()
{
console
.
log
(
this
.
text
);
}
}
</script>
<style
lang=
"scss"
scoped
>
.template
{
padding
:
15px
30px
;
}
</style>
```
\ No newline at end of file
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