Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
b49fd381
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,发现更多精彩内容 >>
提交
b49fd381
编写于
3月 17, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'next' of
https://github.com/jdf2e/nutui
into next
上级
f416319b
fd16e642
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
114 addition
and
63 deletion
+114
-63
src/packages/inputnumber/demo.vue
src/packages/inputnumber/demo.vue
+18
-7
src/packages/inputnumber/doc.md
src/packages/inputnumber/doc.md
+23
-12
src/packages/inputnumber/index.vue
src/packages/inputnumber/index.vue
+73
-44
未找到文件。
src/packages/inputnumber/demo.vue
浏览文件 @
b49fd381
...
...
@@ -38,12 +38,12 @@
@
blur=
"blur"
/>
</nut-cell>
<h2>
支持异步修改
(点击+/-,手动改成了3)
</h2>
<h2>
支持异步修改
</h2>
<nut-cell>
<nut-inputnumber
:async=
"state.async"
@
change=
"handleChangeAsync
"
v-model:modelValue=
"state.val5
"
v-model=
"state.val5
"
:before-change=
"beforeChange
"
/>
</nut-cell>
</div>
...
...
@@ -65,7 +65,8 @@ export default createDemo({
step
:
1.1
,
min
:
3
,
max
:
100
,
async
:
true
async
:
true
,
timer
:
undefined
as
undefined
|
number
});
onMounted
(()
=>
{
state
.
max
=
5
;
...
...
@@ -85,9 +86,18 @@ export default createDemo({
const
reduceNoAllow
=
()
=>
{
alert
(
'
超出最小限制数
'
);
};
const
beforeChange
=
()
=>
{
// return true;
return
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
(
true
);
},
500
);
});
};
const
handleChangeAsync
=
(
num
:
number
)
=>
{
setTimeout
(()
=>
{
state
.
val5
=
3
;
clearTimeout
(
state
.
timer
);
state
.
timer
=
setTimeout
(()
=>
{
state
.
val5
=
state
.
val5
+
1
;
},
1000
);
};
return
{
...
...
@@ -97,7 +107,8 @@ export default createDemo({
focus
,
reduceNoAllow
,
addNoAllow
,
handleChangeAsync
handleChangeAsync
,
beforeChange
};
}
});
...
...
src/packages/inputnumber/doc.md
浏览文件 @
b49fd381
...
...
@@ -2,7 +2,7 @@
### 介绍
基于
由加、减按钮以及输入框组成,用于输入一定范围的数字。
### 安装
...
...
@@ -59,10 +59,21 @@ app.use(inputnumber);
### 高级用法
`
async`
支持异步修改数量,设置了此属性为true,必须同时在
`change`
事件中手动设置input值才能生效
`
before-change`
支持异步修改数量
```
html
<nut-inputnumber
v-model:modelValue=
"1"
:async=
"true"
@
change=
"change"
/>
<nut-inputnumber
v-model:modelValue=
"1"
:before-change=
"true"
/>
```
```
js
const
beforeChange
=
()
=>
{
// return true;
return
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
(
true
);
},
500
);
});
};
```
...
...
@@ -72,16 +83,16 @@ app.use(inputnumber);
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| size | 操作符+、-尺寸 | String |
20px
|
| color | 操作符+、-颜色 | String |
#1a1a1a
|
| dis-color | 操作符+、-禁用时颜色 | String |
#ccc
|
| min | 最小值 | String、Number |
1
|
| max | 最大值 | String、Number |
Infinity
|
| step | 步长 | String、Number |
1
|
| size | 操作符+、-尺寸 | String |
`20px`
|
| color | 操作符+、-颜色 | String |
`#1a1a1a `
|
| dis-color | 操作符+、-禁用时颜色 | String |
`#ccc`
|
| min | 最小值 | String、Number |
`1`
|
| max | 最大值 | String、Number |
`Infinity`
|
| step | 步长 | String、Number |
`1`
|
| readonly | 只读 | Boolean | false |
| modelValue | 初始值 | String、Number |
''
|
| decimal-places| 设置保留的小数位 | String、Number |
1
|
|
async | 支持异步 | Boolean | false
|
| modelValue | 初始值 | String、Number |
`''`
|
| decimal-places| 设置保留的小数位 | String、Number |
`1`
|
|
before-change | 支持异步 | Function | -
|
### Events
...
...
src/packages/inputnumber/index.vue
浏览文件 @
b49fd381
...
...
@@ -76,9 +76,8 @@ export default create({
type
:
[
String
,
Number
],
default
:
0
},
async
:
{
type
:
Boolean
,
default
:
false
beforeChange
:
{
type
:
Function
}
},
emits
:
[
...
...
@@ -100,6 +99,47 @@ export default create({
tempVal
:
''
,
focusing
:
false
});
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
};
});
const
isPromise
=
(
obj
:
any
)
=>
{
return
(
!!
obj
&&
(
typeof
obj
===
'
object
'
||
typeof
obj
===
'
function
'
)
&&
typeof
obj
.
then
===
'
function
'
);
};
const
callInterceptor
=
(
interceptor
:
Function
,
done
:
Function
,
fail
?:
Function
)
=>
{
const
res
=
interceptor
.
apply
(
null
,
arguments
||
[]);
if
(
interceptor
)
{
if
(
isPromise
(
res
))
{
res
.
then
((
value
:
boolean
)
=>
{
if
(
value
)
{
done
();
}
else
{
fail
&&
fail
();
}
});
}
else
if
(
res
)
{
done
();
}
else
if
(
fail
)
{
fail
();
}
}
else
{
done
();
}
};
const
format
=
(
v
:
string
|
number
):
string
|
number
=>
{
if
(
v
>
max
.
value
)
{
v
=
max
.
value
;
...
...
@@ -137,19 +177,19 @@ export default create({
});
};
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
};
});
const
numChange
=
(
e
:
Event
)
=>
{
const
input
=
e
.
target
as
HTMLInputElement
;
let
val
=
input
.
value
;
val
=
String
(
format
(
val
));
input
.
value
=
val
;
state
.
num
=
val
;
if
(
props
.
beforeChange
)
{
callInterceptor
(
props
.
beforeChange
,
()
=>
{
state
.
num
=
val
;
});
}
else
{
state
.
num
=
val
;
}
emitChange
([
{
eventName
:
'
update:modelValue
'
,
...
...
@@ -177,18 +217,15 @@ export default create({
};
const
blur
=
(
e
:
Event
)
=>
{
if
(
props
.
async
)
{
emitChange
([
{
eventName
:
'
change
'
,
params
:
[
''
]
}
]);
return
;
}
const
val
=
(
e
.
target
as
HTMLInputElement
).
value
;
state
.
minVal
=
String
(
min
.
value
);
state
.
num
=
val
?
format
(
val
)
:
state
.
tempVal
;
if
(
props
.
beforeChange
)
{
callInterceptor
(
props
.
beforeChange
,
()
=>
{
state
.
num
=
val
?
format
(
val
)
:
state
.
tempVal
;
});
}
else
{
state
.
num
=
val
?
format
(
val
)
:
state
.
tempVal
;
}
state
.
focusing
=
false
;
emitChange
([
{
...
...
@@ -203,21 +240,19 @@ export default create({
};
const
reduce
=
()
=>
{
if
(
props
.
async
)
{
emitChange
([
{
eventName
:
'
change
'
,
params
:
[
state
.
num
]
}
]);
return
;
}
if
(
getIconColor
(
'
minus
'
)
===
props
.
color
)
{
const
[
n1
,
n2
]
=
fixedDecimalPlaces
(
Number
(
state
.
num
)
-
Number
(
props
.
step
)
).
split
(
'
.
'
);
const
fixedLen
=
n2
?
n2
.
length
:
0
;
state
.
num
=
parseFloat
(
n1
+
(
n2
?
`.
${
n2
}
`
:
''
)).
toFixed
(
fixedLen
);
if
(
props
.
beforeChange
)
{
callInterceptor
(
props
.
beforeChange
,
()
=>
{
state
.
num
=
parseFloat
(
n1
+
(
n2
?
`.
${
n2
}
`
:
''
)).
toFixed
(
fixedLen
);
});
}
else
{
state
.
num
=
parseFloat
(
n1
+
(
n2
?
`.
${
n2
}
`
:
''
)).
toFixed
(
fixedLen
);
}
emitChange
([
{
eventName
:
'
update:modelValue
'
,
...
...
@@ -239,21 +274,18 @@ export default create({
};
const
add
=
()
=>
{
if
(
props
.
async
)
{
emitChange
([
{
eventName
:
'
change
'
,
params
:
[
state
.
num
]
}
]);
return
;
}
if
(
getIconColor
(
'
plus
'
)
===
props
.
color
)
{
const
[
n1
,
n2
]
=
fixedDecimalPlaces
(
Number
(
state
.
num
)
+
Number
(
props
.
step
)
).
split
(
'
.
'
);
const
fixedLen
=
n2
?
n2
.
length
:
0
;
state
.
num
=
parseFloat
(
n1
+
(
n2
?
'
.
'
+
n2
:
''
)).
toFixed
(
fixedLen
);
if
(
props
.
beforeChange
)
{
callInterceptor
(
props
.
beforeChange
,
()
=>
{
state
.
num
=
parseFloat
(
n1
+
(
n2
?
'
.
'
+
n2
:
''
)).
toFixed
(
fixedLen
);
});
}
else
{
state
.
num
=
parseFloat
(
n1
+
(
n2
?
'
.
'
+
n2
:
''
)).
toFixed
(
fixedLen
);
}
emitChange
([
{
eventName
:
'
update:modelValue
'
,
...
...
@@ -302,10 +334,7 @@ export default create({
return
{
state
,
classes
,
format
,
getIconColor
,
fixedDecimalPlaces
,
emitChange
,
numChange
,
blur
,
focus
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录