From fff73bce8df9aab4573c74ac5e894f5eee46eb94 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Tue, 25 Apr 2023 14:48:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0wc-number=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docset/ui/wc-input.md | 16 +++- public/docset/ui/wc-number.md | 165 ++++++++++++++++++++++++++++++++++ 2 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 public/docset/ui/wc-number.md diff --git a/public/docset/ui/wc-input.md b/public/docset/ui/wc-input.md index b091e89..e950efd 100644 --- a/public/docset/ui/wc-input.md +++ b/public/docset/ui/wc-input.md @@ -223,4 +223,18 @@ const list = [ | minlength | Number | 无 | value最小输入长度, 不足最小长度时,不触发`submit`事件 | | placeholder| String | 无 | 输入框占位文本 | | clearable | Boolean | false | 是否可清空内容 | -| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`input`,`submit`,`fetch-suggest`事件 | \ No newline at end of file +| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`input`,`submit`,`fetch-suggest`事件 | + + +### 事件 +| 事件名 | 说明 | 回调参数 | +| :-: | :-: | :-: | - | +| input | 输入值时触发 | (event: Event) | +| submit | 按回车时触发 | (event: Event) | +| fetch-suggest | 按回车时触发 | (event: Event) | + +### 插槽 +| 事件名 | 说明 | +| :-: | :-: | - | +| prepend | 渲染在input框前面的插槽 | +| append | 渲染在input框后面的插槽 | diff --git a/public/docset/ui/wc-number.md b/public/docset/ui/wc-number.md new file mode 100644 index 0000000..b43828c --- /dev/null +++ b/public/docset/ui/wc-number.md @@ -0,0 +1,165 @@ +## WC-NUMBER +> 通过鼠标或键盘输入数字。 + + + +### 基础用法 + + + +import '//jscdn.ink/@bd/ui/latest/space/index.js' +import '//jscdn.ink/@bd/ui/latest/form/number.js' + + + + + + + + + + + + + + + + + wc-number{ width:200px; } + + + + +### 尺寸大小 + +5种尺寸规则的输入框, 如果不满足自己的需求, 可以自行设置`width`和`height`。 + + + +import '//jscdn.ink/@bd/ui/latest/space/index.js' +import '//jscdn.ink/@bd/ui/latest/form/number.js' + + + + + + xl Size + + + + + + + + + +### 状态 +文本框有2种状态, `readonly` 和 `disabled`, 这2种状态下, value值都无法被修改。 + + +import '//jscdn.ink/@bd/ui/latest/space/index.js' +import '//jscdn.ink/@bd/ui/latest/form/number.js' + + + + + + + + + + wc-number{ width:250px; } + + + + +### 圆角 +`round`属性, 可以让数字文本框变成圆角。 +

+ + + + + +import '//jscdn.ink/@bd/ui/latest/space/index.js' +import '//jscdn.ink/@bd/ui/latest/form/number.js' +import '//jscdn.ink/@bd/ui/latest/icon/index.js' + + + + + +
+ +
+
+
+ + +
@163.com
+
+ +
+ +
+
@163.com
+
+
+
+ + + wc-number{ width:300px; } + div[slot='prepend']{ + padding:0 10px; + border-right:1px solid var(--color-grey-a); + } + div[slot='append']{ + padding:0 10px; + border-left:1px solid var(--color-grey-a); + } + +
+ +### 设置步数 +`step`属性接受一个`Number`,设置此值后,鼠标和方向键只能输入步数的倍数 + + +import '//jscdn.ink/@bd/ui/latest/space/index.js' +import '//jscdn.ink/@bd/ui/latest/form/number.js' + + + + + + + + wc-number{ width:250px; } + + + + + + + + +### 完整APIs + +| 属性 | 值类型 | 默认值 | 描述 | +| :-: | :-: | :-: | - | +| value | String | 无 | 输入框绑定值 | +| type | String | 无 | 输入框类型, 仅能决定输入框的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger` | +| size | String | default | 输入框尺寸, 可选值有: `xxxl、xxl、xl、l、m` | +| autofocus | Boolean | false | 输入框的加载状态, 为`true`时, 输入框会自动获得焦点 | +| disbaled | Boolean | false | 输入框的禁用状态, 为`true`时, value不可更改 | +| readonly | Boolean | false | 输入框的只读状态, 为`true`时value不可更改。| +| round | 无 | 无 | 为输入框设置大圆角半径。 不需要赋值 | +| max | Number | 无 | value最大值 | +| min | Number | 无 | value最小值 | +| step| Number | 无 | 输入框步长 | +| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`submit`,`input`事件 | + +### 事件 +| 事件名 | 说明 | 回调参数 | +| :-: | :-: | :-: | - | +| input | 输入值时触发 | (event: Event) | +| submit | 按回车时触发 | (event: Event) |