Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
梦里逆天
uni-app
提交
122c5612
U
uni-app
项目概览
梦里逆天
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
22
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
122c5612
编写于
11月 12, 2018
作者:
蓝色的小猫咪
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
统一 uni-number-box
上级
c2e5bb7a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
149 addition
and
10 deletion
+149
-10
examples/hello-uniapp/components/uni-number-box.vue
examples/hello-uniapp/components/uni-number-box.vue
+139
-0
examples/hello-uniapp/pages/template/number-box/number-box.vue
...les/hello-uniapp/pages/template/number-box/number-box.vue
+10
-10
未找到文件。
examples/hello-uniapp/components/uni-number-box.vue
0 → 100644
浏览文件 @
122c5612
<
template
>
<view
class=
"uni-numbox"
>
<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=
"_onBlur"
>
<view
class=
"uni-numbox-plus"
:class=
"
{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+
</view>
</view>
</
template
>
<
script
>
export
default
{
name
:
'
uni-number-box
'
,
props
:
{
value
:
{
type
:
Number
,
default
:
0
},
min
:
{
type
:
Number
,
default
:
-
Infinity
},
max
:
{
type
:
Number
,
default
:
Infinity
},
step
:
{
type
:
Number
,
default
:
1
},
disabled
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
inputValue
:
this
.
value
}
},
computed
:
{
disableSubtract
()
{
return
this
.
value
<=
this
.
min
},
disableAdd
()
{
return
this
.
value
>=
this
.
max
}
},
watch
:
{
value
(
val
)
{
this
.
inputValue
=
val
;
},
inputValue
(
val
)
{
this
.
$emit
(
'
change
'
,
val
);
}
},
methods
:
{
_calcValue
(
type
)
{
const
scale
=
this
.
_getDecimalScale
();
let
value
=
this
.
inputValue
*
scale
;
let
step
=
this
.
step
*
scale
;
if
(
type
===
'
subtract
'
)
{
value
-=
step
}
else
if
(
type
===
'
add
'
)
{
value
+=
step
}
if
(
value
<
this
.
min
||
value
>
this
.
max
)
{
return
}
this
.
inputValue
=
value
/
scale
;
},
_getDecimalScale
()
{
let
scale
=
1
;
// 浮点型
if
(
~~
this
.
step
!==
this
.
step
)
{
scale
=
Math
.
pow
(
10
,
(
this
.
step
+
''
).
split
(
'
.
'
)[
1
].
length
);
}
return
scale
;
},
_onBlur
(
event
)
{
let
value
=
event
.
detail
.
value
;
if
(
!
value
)
{
this
.
inputValue
=
0
;
return
}
value
=
+
value
;
if
(
value
>
this
.
max
)
{
value
=
this
.
max
;
}
else
if
(
value
<
this
.
min
)
{
value
=
this
.
min
}
this
.
inputValue
=
value
}
}
}
</
script
>
<
style
>
.uni-numbox
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
flex-start
;
height
:
70
upx
;
}
.uni-numbox-minus
,
.uni-numbox-plus
{
margin
:
0
;
background-color
:
#f9f9f9
;
width
:
80
upx
;
height
:
100%
;
line-height
:
70
upx
;
text-align
:
center
;
color
:
#555555
;
}
.uni-numbox-minus
{
border
:
2
upx
solid
#cccccc
;
border-right
:
none
;
border-top-left-radius
:
6
upx
;
border-bottom-left-radius
:
6
upx
;
}
.uni-numbox-plus
{
border
:
2
upx
solid
#cccccc
;
border-left
:
none
;
border-top-right-radius
:
6
upx
;
border-bottom-right-radius
:
6
upx
;
}
.uni-numbox-value
{
border
:
2
upx
solid
#cccccc
;
background-color
:
#ffffff
;
width
:
80
upx
;
height
:
100%
;
text-align
:
center
;
}
.uni-numbox-disabled
{
color
:
#c0c0c0
;
}
</
style
>
examples/hello-uniapp/pages/template/number-box/number-box.vue
浏览文件 @
122c5612
...
...
@@ -4,34 +4,34 @@
<view
class=
"uni-input-group uni-common-mt"
>
<view
class=
"uni-input-row"
>
<label>
默认
</label>
<
number-box></
number-box>
<
uni-number-box></uni-
number-box>
</view>
<view
class=
"uni-input-row"
>
<label>
限定最小值和最大值
</label>
<
number-box
:min=
"0"
:max=
"9"
></
number-box>
<
uni-number-box
:min=
"0"
:max=
"9"
></uni-
number-box>
</view>
<view
class=
"uni-input-row"
>
<label>
设定步长值(步长10)
</label>
<
number-box
:step=
"10"
></
number-box>
<
uni-number-box
:step=
"10"
></uni-
number-box>
</view>
<view
class=
"uni-input-row"
>
<label>
输入框只读
</label>
<
number-box
:disabled=
"true"
></
number-box>
<
uni-number-box
:disabled=
"true"
></uni-
number-box>
</view>
<view
class=
"uni-input-row"
>
<label>
获取输入的值 :
{{
numberValue
}}
</label>
<
number-box
v-on:change=
"onNumberChange"
></
number-box>
<
uni-number-box
v-on:change=
"onNumberChange"
></uni-
number-box>
</view>
<view
class=
"uni-input-row"
>
<label>
设置默认值
</label>
<
number-box
:value=
"numberValue2"
></
number-box>
<
uni-number-box
:value=
"numberValue2"
></uni-
number-box>
</view>
</view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"uni-title"
>
行内应用
</view>
<view
class=
"uni-inline-item"
>
<text>
购买数量 :
</text>
<
number-box
v-on:change=
"onNumberChange3"
></
number-box>
<
uni-number-box
v-on:change=
"onNumberChange3"
></uni-
number-box>
<text>
{{
numberValue3
}}
</text>
</view>
</view>
...
...
@@ -39,19 +39,19 @@
</view>
</
template
>
<
script
>
import
numberBox
from
'
../../../components/
number-box.vue
'
import
uniNumberBox
from
'
../../../components/uni-
number-box.vue
'
export
default
{
data
()
{
return
{
title
:
'
number-box
'
,
title
:
'
uni-
number-box
'
,
numberValue
:
0
,
numberValue2
:
5
,
numberValue3
:
0
}
},
components
:
{
n
umberBox
uniN
umberBox
},
methods
:
{
onNumberChange
(
value
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录