Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
23ff799c
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
23ff799c
编写于
2月 22, 2024
作者:
H
HRK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增 uni-number-box 设置宽度属性(单位:px)
上级
31958e68
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
55 addition
and
54 deletion
+55
-54
docs/component/uniui/uni-number-box.md
docs/component/uniui/uni-number-box.md
+55
-54
未找到文件。
docs/component/uniui/uni-number-box.md
浏览文件 @
23ff799c
...
...
@@ -29,6 +29,7 @@
|max|Number |100|最大值|
|step|Number|1|每次点击改变的间隔大小|
|disabled|Boolean|false |是否为禁用状态|
|width|Number|40 |宽度(单位:px)|
### NumberBox Events
...
...
@@ -51,63 +52,63 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box
> Template
```
html
<template>
<view
class=
"page"
>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
数字输入框组件多用于购物车加减商品等场景
</text>
</uni-card>
<uni-section
title=
"基本用法"
type=
"line"
padding
>
<uni-number-box
@
change=
"changeValue"
/>
</uni-section>
<uni-section
:title=
"'使用v-model : '+ vModelValue"
subTitle=
"使用 v-model 显示默认值"
type=
"line"
padding
>
<uni-number-box
v-model=
"vModelValue"
@
blur=
"blur"
@
focus=
"focus"
@
change=
"changeValue"
/>
</uni-section>
<uni-section
title=
"设置最小值和最大值"
subTitle=
"使用 min \ max 属性设置最大最小值"
type=
"line"
padding
>
<uni-number-box
:min=
"2"
:max=
"9"
:value=
"555"
/>
</uni-section>
<uni-section
title=
"设置步长(步长0.1)"
subTitle=
"使用 step 属性设置步长"
type=
"line"
padding
>
<uni-number-box
:value=
"1.1"
:step=
"0.1"
/>
</uni-section>
<uni-section
title=
"自定义背景"
type=
"line"
subTitle=
"使用 background 属性设置自定义背景色"
padding
>
<uni-number-box
:value=
"50"
background=
"#2979FF"
color=
"#fff"
/>
</uni-section>
<uni-section
title=
"禁用状态"
subTitle=
"使用 disabled 属性设置组件禁用"
type=
"line"
padding
>
<uni-number-box
:disabled=
"true"
/>
</uni-section>
<uni-section
:title=
"'获取输入的值 : '+ numberValue"
type=
"line"
padding
>
<uni-number-box
:value=
"numberValue"
@
change=
"change"
/>
</uni-section>
</view>
<template>
<view
class=
"page"
>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
数字输入框组件多用于购物车加减商品等场景
</text>
</uni-card>
<uni-section
title=
"基本用法"
type=
"line"
padding
>
<uni-number-box
@
change=
"changeValue"
/>
</uni-section>
<uni-section
:title=
"'使用v-model : '+ vModelValue"
subTitle=
"使用 v-model 显示默认值"
type=
"line"
padding
>
<uni-number-box
v-model=
"vModelValue"
@
blur=
"blur"
@
focus=
"focus"
@
change=
"changeValue"
/>
</uni-section>
<uni-section
title=
"设置最小值和最大值"
subTitle=
"使用 min \ max 属性设置最大最小值"
type=
"line"
padding
>
<uni-number-box
:min=
"2"
:max=
"9"
:value=
"555"
/>
</uni-section>
<uni-section
title=
"设置步长(步长0.1)"
subTitle=
"使用 step 属性设置步长"
type=
"line"
padding
>
<uni-number-box
:value=
"1.1"
:step=
"0.1"
/>
</uni-section>
<uni-section
title=
"自定义背景"
type=
"line"
subTitle=
"使用 background 属性设置自定义背景色"
padding
>
<uni-number-box
:value=
"50"
background=
"#2979FF"
color=
"#fff"
/>
</uni-section>
<uni-section
title=
"禁用状态"
subTitle=
"使用 disabled 属性设置组件禁用"
type=
"line"
padding
>
<uni-number-box
:disabled=
"true"
/>
</uni-section>
<uni-section
:title=
"'获取输入的值 : '+ numberValue"
type=
"line"
padding
>
<uni-number-box
:value=
"numberValue"
@
change=
"change"
/>
</uni-section>
</view>
</template>
```
> Script
```
html
<script>
export
default
{
components
:
{},
data
()
{
return
{
numberValue
:
0
,
vModelValue
:
3
}
},
methods
:
{
change
(
value
)
{
this
.
numberValue
=
value
},
changeValue
(
value
)
{
console
.
log
(
'
返回数值:
'
,
value
);
},
blur
(
e
)
{
console
.
log
(
'
blur:
'
,
e
);
},
focus
(
e
)
{
console
.
log
(
'
focus:
'
,
e
);
}
}
}
</script>
```
html
<script>
export
default
{
components
:
{},
data
()
{
return
{
numberValue
:
0
,
vModelValue
:
3
}
},
methods
:
{
change
(
value
)
{
this
.
numberValue
=
value
},
changeValue
(
value
)
{
console
.
log
(
'
返回数值:
'
,
value
);
},
blur
(
e
)
{
console
.
log
(
'
blur:
'
,
e
);
},
focus
(
e
)
{
console
.
log
(
'
focus:
'
,
e
);
}
}
}
</script>
```
:::
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录