vant/docs/examples-docs/quantity.md
2017-03-21 20:50:34 +08:00

66 lines
1.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
@component-namespace demo {
@b quantity {
.zan-quantity {
margin: 15px;
}
.curr-quantity {
margin: 15px;
}
}
}
</style>
<script>
export default {
data() {
return {
quantity1: 1,
quantity2: null,
};
}
};
</script>
## Quantity
### 基础用法
:::demo 基础用法
```html
<zan-quantity v-model="quantity1"></zan-quantity>
<p class="curr-quantity">当前值:{{ quantity1 }}</p>
```
:::
### 禁用Quantity
:::demo 禁用Quantity
```html
<zan-quantity v-model="quantity1" disabled></zan-quantity>
```
:::
### 高级用法
默认是每次加减为1可以对组件设置`step``min``max``defaultValue`属性。
:::demo 高级用法
```html
<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
<p class="curr-quantity">当前值:{{ quantity2 }}</p>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| min | 最小值 | `string`, `number` | `1` | |
| max | 最大值 | `string`, `number` | | |
| step | 步数 | `string`, `number` | `1` | |
| disabled | 是否被禁用了 | `boolean` | `false` | |
| defaultValue | 默认值 | `string`, `number` | `1` | |