更新wc-number文档
parent
51445579f6
commit
fff73bce8d
|
|
@ -223,4 +223,18 @@ const list = [
|
|||
| minlength | Number | 无 | value最小输入长度, 不足最小长度时，不触发`submit`事件 |
|
||||
| placeholder| String | 无 | 输入框占位文本 |
|
||||
| clearable | Boolean | false | 是否可清空内容 |
|
||||
| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`input`，`submit`，`fetch-suggest`事件 |
|
||||
| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`input`，`submit`，`fetch-suggest`事件 |
|
||||
|
||||
|
||||
### 事件
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| :-: | :-: | :-: | - |
|
||||
| input | 输入值时触发 | (event: Event) |
|
||||
| submit | 按回车时触发 | (event: Event) |
|
||||
| fetch-suggest | 按回车时触发 | (event: Event) |
|
||||
|
||||
### 插槽
|
||||
| 事件名 | 说明 |
|
||||
| :-: | :-: | - |
|
||||
| prepend | 渲染在input框前面的插槽 |
|
||||
| append | 渲染在input框后面的插槽 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
## WC-NUMBER
|
||||
> 通过鼠标或键盘输入数字。
|
||||
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/number.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-number type="primary" ></wc-number>
|
||||
<wc-number type="info" ></wc-number>
|
||||
<wc-number type="success" ></wc-number>
|
||||
<wc-number type="warning" ></wc-number>
|
||||
</wc-space>
|
||||
<wc-space>
|
||||
<wc-number ></wc-number>
|
||||
<wc-number type="help" ></wc-number>
|
||||
<wc-number type="secondary" ></wc-number>
|
||||
<wc-number type="danger"></wc-number>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
<wc-lang slot="css">
|
||||
wc-number{ width:200px; }
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
### 尺寸大小
|
||||
|
||||
5种尺寸规则的输入框, 如果不满足自己的需求, 可以自行设置`width`和`height`。
|
||||
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/number.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-number size="xxxl" placeholder="xxxl Size"></wc-number>
|
||||
<wc-number size="xxl" placeholder="xxl Size"></wc-number>
|
||||
<wc-number size="xl" placeholder="xl Size">xl Size</wc-number>
|
||||
<wc-number placeholder="Deault Size"></wc-number>
|
||||
<wc-number size="m" placeholder="Medium Size"></wc-number>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
|
||||
|
||||
### 状态
|
||||
文本框有2种状态, `readonly` 和 `disabled`, 这2种状态下, value值都无法被修改。
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/number.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-number ></wc-number>
|
||||
<wc-number readonly></wc-number>
|
||||
<wc-number disabled></wc-number>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
<wc-lang slot="css">
|
||||
wc-number{ width:250px; }
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
### 圆角
|
||||
`round`属性, 可以让数字文本框变成圆角。
|
||||
<br/><br/>
|
||||
|
||||
|
||||
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
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'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-number round ></wc-number>
|
||||
<wc-number class="slot-number" round>
|
||||
<div slot="prepend">
|
||||
<wc-icon name="user" style="--size:18px;" />
|
||||
</div>
|
||||
</wc-number>
|
||||
</wc-space>
|
||||
<wc-space>
|
||||
<wc-number class="slot-number" >
|
||||
<div slot="append">@163.com</div>
|
||||
</wc-number>
|
||||
<wc-number class="slot-number" >
|
||||
<div slot="prepend">
|
||||
<wc-icon name="user" style="--size:18px;" />
|
||||
</div>
|
||||
<div slot="append">@163.com</div>
|
||||
</wc-number>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
|
||||
<wc-lang slot="css">
|
||||
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);
|
||||
}
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
### 设置步数
|
||||
`step`属性接受一个`Number`,设置此值后，鼠标和方向键只能输入步数的倍数
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/number.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-number step="2"></wc-number>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
<wc-lang slot="css">
|
||||
wc-number{ width:250px; }
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 完整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) |
|
||||
Loading…
Reference in New Issue