Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
genary
uni-app
提交
05c852dd
U
uni-app
项目概览
genary
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
05c852dd
编写于
11月 11, 2018
作者:
X
xiaoyucoding
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
modify: 优化 number-box 组件
上级
247e49cf
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
42 addition
and
35 deletion
+42
-35
examples/hello-uniapp/components/number-box.vue
examples/hello-uniapp/components/number-box.vue
+40
-33
examples/hello-uniapp/pages/template/number-box/number-box.vue
...les/hello-uniapp/pages/template/number-box/number-box.vue
+2
-2
未找到文件。
examples/hello-uniapp/components/number-box.vue
浏览文件 @
05c852dd
<
template
>
<view
class=
"uni-numbox"
>
<view
class=
"uni-numbox-minus"
:class=
"
{'uni-numbox-disabled': disableSubtract}" @click="
subtract
">-
</view>
<input
class=
"uni-numbox-value"
type=
"number"
:disabled=
"disabled"
v-model=
"value"
@
blur=
"handle
Blur"
>
<view
class=
"uni-numbox-plus"
:class=
"
{'uni-numbox-disabled': disableAdd}" @click="
add
">+
</view>
<view
class=
"uni-numbox-minus"
:class=
"
{'uni-numbox-disabled': disableSubtract}" @click="
_calcValue('subtract')
">-
</view>
<input
class=
"uni-numbox-value"
type=
"number"
:disabled=
"disabled"
:value=
"inputValue"
@
blur=
"_on
Blur"
>
<view
class=
"uni-numbox-plus"
:class=
"
{'uni-numbox-disabled': disableAdd}" @click="
_calcValue('add')
">+
</view>
</view>
</
template
>
<
script
>
...
...
@@ -30,6 +30,11 @@
default
:
false
}
},
data
()
{
return
{
inputValue
:
this
.
value
}
},
computed
:
{
disableSubtract
()
{
return
this
.
value
<=
this
.
min
...
...
@@ -38,35 +43,42 @@
return
this
.
value
>=
this
.
max
}
},
onUnload
()
{
this
.
value
=
0
,
this
.
step
=
1
,
this
.
max
=
Infinity
,
this
.
min
=
-
Infinity
;
watch
:
{
value
(
val
)
{
this
.
inputValue
=
val
;
},
inputValue
(
val
)
{
this
.
$emit
(
'
change
'
,
val
);
}
},
methods
:
{
subtract
(
evt
)
{
this
.
_handleStep
(
'
subtract
'
);
},
add
(
evt
)
{
this
.
_handleStep
(
'
add
'
);
},
_handleStep
(
type
)
{
let
value
=
this
.
value
;
_calcValue
(
type
)
{
const
scale
=
this
.
_getDecimalScale
();
let
value
=
this
.
inputValue
*
scale
;
let
step
=
this
.
step
*
scale
;
if
(
type
===
'
subtract
'
)
{
value
-=
this
.
step
value
-=
step
}
else
if
(
type
===
'
add
'
)
{
value
+=
this
.
step
value
+=
step
}
if
(
value
<
this
.
min
||
value
>
this
.
max
)
{
return
}
this
.
value
=
value
this
.
inputValue
=
value
/
scale
;
},
_getDecimalScale
()
{
let
scale
=
1
;
// 浮点型
if
(
~~
this
.
step
!==
this
.
step
)
{
scale
=
Math
.
pow
(
10
,
(
this
.
step
+
''
).
split
(
'
.
'
)[
1
].
length
);
}
return
scale
;
},
handleBlur
(
ev
t
)
{
let
value
=
evt
.
detail
.
value
;
_onBlur
(
even
t
)
{
let
value
=
ev
en
t
.
detail
.
value
;
if
(
!
value
)
{
this
.
v
alue
=
0
;
this
.
inputV
alue
=
0
;
return
}
value
=
+
value
;
...
...
@@ -75,12 +87,7 @@
}
else
if
(
value
<
this
.
min
)
{
value
=
this
.
min
}
this
.
value
=
value
}
},
watch
:
{
value
(
val
)
{
this
.
$emit
(
'
update
'
,
val
);
this
.
inputValue
=
value
}
}
}
...
...
@@ -90,16 +97,16 @@
display
:
flex
;
flex-direction
:
row
;
justify-content
:
flex-start
;
height
:
6
0
upx
;
height
:
7
0
upx
;
}
.uni-numbox-minus
,
.uni-numbox-plus
{
margin
:
0
;
background-color
:
#f9f9f9
;
width
:
6
0
upx
;
width
:
8
0
upx
;
height
:
100%
;
line-height
:
6
0
upx
;
line-height
:
7
0
upx
;
text-align
:
center
;
color
:
#555555
;
}
...
...
@@ -121,7 +128,7 @@
.uni-numbox-value
{
border
:
2
upx
solid
#cccccc
;
background-color
:
#ffffff
;
width
:
6
0
upx
;
width
:
8
0
upx
;
height
:
100%
;
text-align
:
center
;
}
...
...
@@ -129,4 +136,4 @@
.uni-numbox-disabled
{
color
:
#c0c0c0
;
}
</
style
>
</
style
>
examples/hello-uniapp/pages/template/number-box/number-box.vue
浏览文件 @
05c852dd
...
...
@@ -20,7 +20,7 @@
<view
class=
"uni-hello-text uni-common-mt"
>
获取输入框的值
</view>
<view
class=
"uni-hello-items"
>
<view
class=
"uni-inline-item"
>
<number-box
v-on:
update=
"numberUpdat
e"
></number-box>
<number-box
v-on:
change=
"onNumberChang
e"
></number-box>
<text
class=
"item-label-right"
>
当前的值为:
{{
numberValue
}}
</text>
</view>
</view>
...
...
@@ -67,7 +67,7 @@
numberBox
},
methods
:
{
numberUpdat
e
(
value
)
{
onNumberChang
e
(
value
)
{
this
.
numberValue
=
value
;
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录