Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
09a127dc
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
09a127dc
编写于
12月 18, 2020
作者:
Z
zongyue3
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'next' of
https://github.com/jdf2e/nutui
into next
上级
c6cf7711
ee104008
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
159 addition
and
340 deletion
+159
-340
src/config.js
src/config.js
+1
-1
src/config.ts
src/config.ts
+0
-281
src/packages/icon/index.vue
src/packages/icon/index.vue
+26
-17
src/packages/input/demo.vue
src/packages/input/demo.vue
+20
-7
src/packages/input/doc.md
src/packages/input/doc.md
+63
-5
src/packages/input/index.scss
src/packages/input/index.scss
+3
-1
src/packages/input/index.vue
src/packages/input/index.vue
+46
-28
未找到文件。
src/config.js
浏览文件 @
09a127dc
...
...
@@ -273,7 +273,7 @@ module.exports = {
},
{
name
:
'
Rate
'
,
sort
:
2
,
sort
:
4
,
cName
:
'
评分
'
,
type
:
'
component
'
,
show
:
true
,
...
...
src/config.ts
已删除
100644 → 0
浏览文件 @
c6cf7711
export
const
versions
=
[
{
name
:
'
1.x
'
,
link
:
'
/1x/
'
},
{
name
:
'
2.x
'
,
link
:
'
/
'
},
{
name
:
'
3.x
'
,
link
:
'
/3x/
'
}
];
export
const
header
=
[
{
name
:
'
guide
'
,
cName
:
'
指南
'
,
path
:
'
/
'
},
{
name
:
'
/
'
,
cName
:
'
组件
'
,
path
:
'
/
'
},
{
name
:
'
example
'
,
cName
:
'
示例
'
,
path
:
'
/
'
},
{
name
:
'
resource
'
,
cName
:
'
资源
'
,
path
:
'
/resource
'
}
];
export
const
docs
=
{
name
:
'
指南
'
,
packages
:
[
{
name
:
'
intro
'
,
cName
:
'
介绍
'
,
show
:
true
},
{
name
:
'
start
'
,
cName
:
'
快速上手
'
,
show
:
true
},
{
name
:
'
theme
'
,
cName
:
'
主题定制
'
,
show
:
true
},
{
name
:
'
international
'
,
cName
:
'
国际化
'
,
show
:
true
},
{
name
:
'
https://github.com/jdf2e/nutui/releases
'
,
cName
:
'
更新日志
'
,
show
:
true
,
isLink
:
true
}
]
};
export
const
nav
=
[
{
name
:
'
布局组件
'
,
packages
:
[
{
name
:
'
Button
'
,
sort
:
1
,
cName
:
'
按钮组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
按钮用于触发一个操作,如提交表单。
'
,
author
:
'
richard1015
'
},
{
name
:
'
collapse
'
,
sort
:
2
,
cName
:
'
折叠面板
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
折叠面板
'
,
author
:
'
Ymm0008
'
},
{
name
:
'
collapse
'
,
sort
:
3
,
cName
:
'
折叠面板-item
'
,
type
:
'
component
'
,
show
:
false
,
desc
:
'
折叠面板-item
'
,
author
:
'
Ymm0008
'
},
{
name
:
'
Layout
'
,
sort
:
4
,
cName
:
'
布局
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
简便地创建布局
'
,
author
:
'
undo
'
},
{
name
:
'
col
'
,
sort
:
5
,
cName
:
'
布局-Col
'
,
type
:
'
component
'
,
show
:
false
,
desc
:
'
布局组件Col
'
,
author
:
'
undo
'
},
{
name
:
'
row
'
,
sort
:
6
,
cName
:
'
布局-Row
'
,
type
:
'
component
'
,
show
:
false
,
desc
:
'
布局组件Row
'
,
author
:
'
undo
'
}
]
},
{
name
:
'
操作反馈
'
,
packages
:
[
{
name
:
'
BackTop
'
,
sort
:
'
1
'
,
cName
:
'
回到顶部
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
较长页面快捷回到顶部
'
,
author
:
'
liqiong43
'
}
]
},
{
name
:
'
基础组件
'
,
packages
:
[
{
name
:
'
Temp
'
,
sort
:
1
,
cName
:
'
模板组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
组件模板示例
'
,
author
:
'
richard1015
'
},
{
name
:
'
Cell
'
,
sort
:
1
,
cName
:
'
单元格组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
展示列表
'
,
author
:
'
richard1015
'
},
{
name
:
'
Uploader
'
,
sort
:
2
,
cName
:
'
上传组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
上传文件、图片
'
,
author
:
'
richard1015
'
},
{
name
:
'
Icon
'
,
sort
:
3
,
cName
:
'
图标组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
图标
'
,
author
:
'
richard1015
'
},
{
name
:
'
Price
'
,
sort
:
4
,
cName
:
'
价格组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
价格组件
'
,
author
:
'
ailululu
'
},
{
name
:
'
Checkbox
'
,
sort
:
5
,
cName
:
'
复选按钮
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
复选按钮
'
,
author
:
'
Ymm0008
'
},
{
name
:
'
Swiper
'
,
sort
:
6
,
cName
:
'
轮播
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
轮播
'
,
author
:
'
ailululu
'
},
{
name
:
'
Avatar
'
,
sort
:
7
,
cName
:
'
头像
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
头像
'
,
author
:
'
ailululu
'
},
{
name
:
'
Menu
'
,
sort
:
8
,
cName
:
'
菜单
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
菜单
'
,
author
:
'
vickyYE
'
}
]
},
{
name
:
'
导航组件
'
,
packages
:
[
{
name
:
'
Navbar
'
,
sort
:
3
,
cName
:
'
导航组件
'
,
type
:
'
componment
'
,
show
:
true
,
desc
:
'
导航组件
'
,
author
:
'
liqiong43
'
},
{
name
:
'
tab
'
,
sort
:
1
,
cName
:
'
标签组件
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
标签组件
'
,
author
:
'
zhenyulei
'
}
]
},
{
name
:
'
数据录入
'
,
packages
:
[
{
name
:
'
InputNumber
'
,
sort
:
1
,
cName
:
'
数字输入框
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
数字输入框组件
'
,
author
:
'
szg2008
'
},
{
name
:
'
Rate
'
,
sort
:
2
,
cName
:
'
评分
'
,
type
:
'
component
'
,
show
:
true
,
desc
:
'
评分组件
'
,
author
:
'
undo
'
},
{
name
:
'
Switch
'
,
type
:
'
component
'
,
cName
:
'
开关组件
'
,
desc
:
'
用来打开或关闭选项
'
,
sort
:
3
,
show
:
true
,
author
:
'
zongyue3
'
}
]
},
{
name
:
'
业务组件
'
,
packages
:
[]
}
];
src/packages/icon/index.vue
浏览文件 @
09a127dc
<
script
lang=
"ts"
>
import
{
h
,
PropType
}
from
'
vue
'
;
import
{
h
,
PropType
,
computed
,
toRefs
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
icon
'
);
...
...
@@ -14,25 +14,34 @@ export default create({
emits
:
[
'
click
'
],
setup
(
props
,
{
emit
,
slots
})
{
const
{
name
,
size
,
classPrefix
,
color
,
tag
}
=
toRefs
(
props
);
const
handleClick
=
(
event
:
Event
)
=>
{
emit
(
'
click
'
,
event
);
};
const
isImage
=
()
=>
{
return
props
.
name
?
props
.
name
.
indexOf
(
'
/
'
)
!==
-
1
:
false
;
};
const
styleOptions
=
{
class
:
`
${
props
.
classPrefix
}
${
componentName
}
-
${
props
.
name
}
`
,
style
:
{
color
:
props
.
color
,
fontSize
:
props
.
size
,
width
:
''
,
height
:
''
},
onClick
:
handleClick
,
src
:
''
};
if
(
isImage
())
{
styleOptions
.
class
=
`
${
componentName
}
__img`
;
styleOptions
.
src
=
props
.
name
;
styleOptions
.
style
[
'
width
'
]
=
props
.
size
;
styleOptions
.
style
[
'
height
'
]
=
props
.
size
;
}
return
()
=>
h
(
isImage
()
?
'
img
'
:
props
.
tag
,
styleOptions
,
slots
.
default
?.());
const
isImage
=
computed
(()
=>
{
return
name
.
value
?
name
.
value
.
indexOf
(
'
/
'
)
!==
-
1
:
false
;
}).
value
;
return
()
=>
h
(
isImage
?
'
img
'
:
tag
.
value
,
{
class
:
isImage
?
`
${
componentName
}
__img`
:
`
${
classPrefix
.
value
}
${
componentName
}
-
${
name
.
value
}
`
,
style
:
{
color
:
color
.
value
,
fontSize
:
size
.
value
,
width
:
isImage
?
size
.
value
:
''
,
height
:
isImage
?
size
.
value
:
''
},
onClick
:
handleClick
,
src
:
isImage
?
name
.
value
:
''
},
slots
.
default
?.()
);
}
});
</
script
>
...
...
src/packages/input/demo.vue
浏览文件 @
09a127dc
<
template
>
<div
class=
"demo-nopading"
>
<h2>
基础用法
</h2>
<nut-input
v-model:value=
"state.val1"
@
change=
"change"
label=
"标题:"
/>
<nut-input
v-model:value=
"state.val1"
@
change=
"change"
@
focus=
"focus"
@
blur=
"blur"
label=
"标题:"
/>
<nut-input
placeholder=
"请输入文本"
@
change=
"change"
v-model:value=
"state.val0"
requireShow=
"true"
:
requireShow=
"true"
label=
"标题:"
@
clear=
"clear"
/>
<h2>
禁用输入框
</h2>
<nut-input
v-model:value=
"state.val2"
@
change=
"change"
disabled=
"true"
:
disabled=
"true"
label=
"标题:"
/>
<nut-input
v-model:value=
"state.val3"
@
change=
"change"
readonly=
"true"
:
readonly=
"true"
label=
"标题:"
/>
<h2>
限制输入长度
</h2>
...
...
@@ -54,7 +55,7 @@
<nut-input
v-model:value=
"state.val7"
@
change=
"change"
autosize=
"true"
:
autosize=
"true"
type=
"textarea"
placeholder=
"文本域"
label=
"留言:"
...
...
@@ -72,7 +73,7 @@
v-model:value=
"state.val8"
@
change=
"change"
rows=
"5"
limitShow=
"true"
:
limitShow=
"true"
maxLength=
"20"
type=
"textarea"
placeholder=
"设置输入五行"
...
...
@@ -104,9 +105,21 @@ export default createDemo({
const
change
=
(
num
:
string
|
number
)
=>
{
console
.
log
(
'
change:
'
,
num
);
};
const
focus
=
(
num
:
string
|
number
)
=>
{
console
.
log
(
"
focus:
"
,
num
)
}
const
blur
=
(
num
:
string
|
number
)
=>
{
console
.
log
(
"
blur:
"
,
num
)
}
const
clear
=
(
num
:
string
|
number
)
=>
{
console
.
log
(
"
clear:
"
,
num
)
}
return
{
state
,
change
change
,
blur
,
clear
,
focus
};
}
});
...
...
src/packages/input/doc.md
浏览文件 @
09a127dc
# Input 输入框组件
### 介绍
### 安装
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
input
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
input
);
```
## 代码演示
### 基础用法
双向绑定
```
html
<nut-input
v-model:value=
"state.val1"
@
change=
"change"
label=
"标题:"
/>
```
### 禁用和只读
```
html
<nut-input
v-model:value=
"state.val2"
@
change=
"change"
disabled=
"true"
label=
"标题:"
/>
<nut-input
v-model:value=
"state.val3"
@
change=
"change"
readonly=
"true"
label=
"标题:"
/>
```
### 限制输入长度
```
html
<nut-input
v-model:value=
"state.val4"
@
change=
"change"
maxLength=
"7"
label=
"限制7:"
/>
```
### 其他类型
```
html
<nut-input
v-model:value=
"state.val0"
@
change=
"change"
type=
"password"
label=
"密码:"
/>
<nut-input
v-model:value=
"state.val5"
@
change=
"change"
type=
"digit"
label=
"整数:"
/>
<nut-input
v-model:value=
"state.val6"
@
change=
"change"
type=
"digit"
placeholder=
"支持小数点的输入"
label=
"数字:"
/>
```
### 文本域
```
html
<nut-input
v-model:value=
"state.val7"
@
change=
"change"
autosize=
"true"
type=
"textarea"
placeholder=
"文本域"
label=
"留言:"
/>
<nut-input
v-model:value=
"state.val7"
@
change=
"change"
rows=
"5"
type=
"textarea"
placeholder=
"设置输入五行"
label=
"留言:"
/>
```
### 文本域字数统计
```
html
<nut-input
v-model:value=
"state.val8"
@
change=
"change"
rows=
"5"
limitShow=
"true"
maxLength=
"20"
type=
"textarea"
placeholder=
"设置输入五行"
label=
"留言:"
/>
```
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| type | 类型,可选值为
`text`
`textarea`
`number`
等 | String |
`text`
|
...
...
@@ -5,22 +66,19 @@
| placeholder | 为空时占位符 | String | - |
| placeholder-style | placeholder 样式 | String | - |
| label | 左侧文案 | string | - |
| has-border | 是否有边框 | booleab | true |
| disabled | 是否禁用 | boolean |
`false`
|
| readonly | 是否只读 | boolean |
`false`
|
| clear-btn | 是否带清除按钮(icon) | boolean |
`true`
|
| required | 是否带必填的
*
号,且blur事件做非空校验 | boolean |
`false`
|
| maxlength | 限制最长输入字符 | string/number | - |
| rows | textarea时高度 | string/number | 2 |
| limit-show | textarea时是否展示输入字符。须设置maxlength | boolean |
`false`
|
事件
| input | 输入内容时触发 | function | - |
| change | 输入内容时触发 | function | - |
| focus | 聚焦时触发 | function | - |
| blur | 失焦时触发 | function | - |
| clear | 点击清空时触发 | function | - |
| error | 校验错误时触发 | function | - |
...
...
src/packages/input/index.scss
浏览文件 @
09a127dc
.nut-input
{
position
:
relative
;
width
:
100%
;
padding
:
10px
0px
10px
25px
;
display
:
flex
;
...
...
@@ -18,7 +19,8 @@
.nut-textinput-clear
{
width
:
16px
;
height
:
16px
;
margin-right
:
15px
;
position
:
absolute
;
right
:
15px
;
}
.nut-text
{
flex
:
1
;
...
...
src/packages/input/index.vue
浏览文件 @
09a127dc
...
...
@@ -34,23 +34,23 @@
:placeholder=
"placeholder"
:disabled=
"disabled"
:readonly=
"readonly"
v-model
=
"state.curretvalue"
:value
=
"state.curretvalue"
@
input=
"valueChange"
@
focus=
"
f
ocus"
@
blur=
"
b
lur"
@
focus=
"
valueF
ocus"
@
blur=
"
valueB
lur"
/>
<
!--
<
view
<view
@
click=
"handleClear"
class=
"nut-textinput-clear"
v-if=
"!disableClear && !readonly"
v-show=
"type !== 'textarea' && active"
v-show=
"type !== 'textarea'
&& active"
>
<svg
version=
"1"
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 16 16"
>
<path
d=
"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
/>
</svg>
</view>
-->
</view>
</view>
</
template
>
<
script
lang=
"ts"
>
...
...
@@ -102,11 +102,11 @@ export default create({
}
},
components
:
{},
emits
:
[
'
change
'
,
'
update:value
'
,
'
blur
'
,
'
focus
'
],
emits
:
[
'
change
'
,
'
update:value
'
,
'
blur
'
,
'
focus
'
,
'
clear
'
],
setup
(
props
,
{
emit
})
{
interface
Events
{
eventName
:
'
change
'
;
eventName
:
'
change
'
|
'
focus
'
|
'
blur
'
;
params
:
(
string
|
number
|
Event
)[];
}
...
...
@@ -159,9 +159,9 @@ export default create({
if
(
props
.
type
==
'
number
'
)
{
val
=
formatNumber
(
val
,
false
);
}
state
.
textNum
=
val
.
length
;
input
.
value
=
val
;
state
.
curretvalue
=
val
;
state
.
textNum
=
val
.
length
;
//
input.value = val;
//
state.curretvalue = val;
emitChange
([
{
eventName
:
'
update:value
'
,
...
...
@@ -173,7 +173,7 @@ export default create({
}
]);
};
const
f
ocus
=
(
e
:
Event
)
=>
{
const
valueF
ocus
=
(
e
:
Event
)
=>
{
active
.
value
=
true
;
const
input
=
e
.
target
as
HTMLInputElement
;
let
val
=
input
.
value
;
...
...
@@ -189,21 +189,38 @@ export default create({
}
]);
};
const
blur
=
()
=>
{
//active.value = false;
// const input = e.target as HTMLInputElement;
// let val = input.value;
// emitChange([
// {
// eventName: 'update:modelValue',
// params: [val]
// },
// {
// eventName: 'focus',
// params: [val]
// }
// ]);
const
valueBlur
=
(
e
:
Event
)
=>
{
setTimeout
(()
=>
{
active
.
value
=
false
;
},
400
)
const
input
=
e
.
target
as
HTMLInputElement
;
let
val
=
input
.
value
;
val
=
String
(
val
);
emitChange
([
{
eventName
:
'
update:value
'
,
params
:
[
val
]
},
{
eventName
:
'
blur
'
,
params
:
[
val
]
}
]);
};
const
handleClear
=
()
=>
{
const
val
=
""
;
emitChange
([
{
eventName
:
'
update:value
'
,
params
:
[
val
]
},
{
eventName
:
'
clear
'
,
params
:
[
val
]
}
]);
}
return
{
value
,
requireShow
,
...
...
@@ -217,8 +234,9 @@ export default create({
active
,
maxLength
,
valueChange
,
focus
,
blur
,
valueFocus
,
valueBlur
,
handleClear
,
emitChange
};
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录