Merge branch 'dev' into feature/vant_cli_2

This commit is contained in:
陈嘉涵 2019-12-09 15:01:12 +08:00
commit 7b922dbe2e
30 changed files with 202 additions and 127 deletions

View File

@ -1,5 +1,31 @@
# Changelog # Changelog
### [v2.3.0-beta.2](https://github.com/youzan/vant/tree/v2.3.0-beta.2)
`2019-12-06`
**Style**
Upgrading the style of business components:
- CouponList
**Features**
- CouponList: add show-count prop [\#5139](https://github.com/youzan/vant/pull/5139)
**Bug Fixes**
- fix Sku stepper value must be integer [\#5202](https://github.com/youzan/vant/pull/5202)
- fix Sku stepper should not emit invalid num [\#5210](https://github.com/youzan/vant/pull/5210)
- fix Card incorrect price font-family [\#5194](https://github.com/youzan/vant/pull/5194)
- fix AddressList incorrect horizontal padding [\#5204](https://github.com/youzan/vant/pull/5204)
- fix Picker should not submit form [\#5182](https://github.com/youzan/vant/pull/5182)
- fix Stepper should not submit form [\#5183](https://github.com/youzan/vant/pull/5183)
- fix ActionSheet should not submit form [\#5181](https://github.com/youzan/vant/pull/5181)
- fix Uploader not trigger oversize event when upload same file [\#5177](https://github.com/youzan/vant/pull/5177)
- fix less import issue [\#5157](https://github.com/youzan/vant/pull/5157)
### [v2.3.0-beta.1](https://github.com/youzan/vant/tree/v2.3.0-beta.1) ### [v2.3.0-beta.1](https://github.com/youzan/vant/tree/v2.3.0-beta.1)
`2019-11-30` `2019-11-30`
@ -19,11 +45,11 @@ Upgrading the style of business components:
- Card: add price-top slot [\#5134](https://github.com/youzan/vant/pull/5134) - Card: add price-top slot [\#5134](https://github.com/youzan/vant/pull/5134)
- Circle: add stroke-linecap prop [\#5087](https://github.com/youzan/vant/pull/5087) - Circle: add stroke-linecap prop [\#5087](https://github.com/youzan/vant/pull/5087)
- CountDown: support SS and S format [\#5154](https://github.com/youzan/vant/pull/5154) - CountDown: support SS and S format [\#5154](https://github.com/youzan/vant/pull/5154)
- Sku: add new startSaleNum prop [\#5105](https://github.com/youzan/vant/pull/5105) - Sku: add new start-sale-num prop [\#5105](https://github.com/youzan/vant/pull/5105)
- SubmitBar: add text-align prop [\#5130](https://github.com/youzan/vant/pull/5130) - SubmitBar: add text-align prop [\#5130](https://github.com/youzan/vant/pull/5130)
- AddressList: add default-tag-text prop [\#5106](https://github.com/youzan/vant/pull/5106) - AddressList: add default-tag-text prop [\#5106](https://github.com/youzan/vant/pull/5106)
- ContactList: add default-tag-text prop [\#5089](https://github.com/youzan/vant/pull/5089) - ContactList: add default-tag-text prop [\#5089](https://github.com/youzan/vant/pull/5089)
- ContactCard: add show-set-default prop [\#5083](https://github.com/youzan/vant/pull/5083) - ContactCard: add show-set-default、set-default-label prop [\#5083](https://github.com/youzan/vant/pull/5083)
- Toast: improve type definitions [\#5086](https://github.com/youzan/vant/pull/5086) - Toast: improve type definitions [\#5086](https://github.com/youzan/vant/pull/5086)
**Bug Fixes** **Bug Fixes**

View File

@ -11,6 +11,32 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- 主版本号:发布时间不定,包含不兼容更新,预计下一个主版本会与 Vue 3.0 同期发布。 - 主版本号:发布时间不定,包含不兼容更新,预计下一个主版本会与 Vue 3.0 同期发布。
### [v2.3.0-beta.2](https://github.com/youzan/vant/tree/v2.3.0-beta.2)
`2019-12-06`
**Style**
升级以下业务组件的样式:
- CouponList
**Features**
- CouponList: 新增 show-count 属性 [\#5139](https://github.com/youzan/vant/pull/5139)
**Bug Fixes**
- 修复 Sku 步进器可能输入小数的问题 [\#5202](https://github.com/youzan/vant/pull/5202)
- 修复 Sku 步进器事件可能抛出小数的问题 [\#5210](https://github.com/youzan/vant/pull/5210)
- 修复 Card 价格字体错误的问题 [\#5194](https://github.com/youzan/vant/pull/5194)
- 修复 AddressList 左右边距错误的问题 [\#5204](https://github.com/youzan/vant/pull/5204)
- 修复 Picker 按钮会提交表单的问题 [\#5182](https://github.com/youzan/vant/pull/5182)
- 修复 Stepper 按钮会提交表单的问题 [\#5183](https://github.com/youzan/vant/pull/5183)
- 修复 ActionSheet 按钮会提交表单的问题 [\#5181](https://github.com/youzan/vant/pull/5181)
- 修复 Uploader 重复上传同张图片时不会触发 oversize 事件的问题 [\#5177](https://github.com/youzan/vant/pull/5177)
- 修复主题定制时使用低版本 Less 会报错的问题 [\#5157](https://github.com/youzan/vant/pull/5157)
### [v2.3.0-beta.1](https://github.com/youzan/vant/tree/v2.3.0-beta.1) ### [v2.3.0-beta.1](https://github.com/youzan/vant/tree/v2.3.0-beta.1)
`2019-11-30` `2019-11-30`
@ -34,7 +60,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- SubmitBar: 新增 text-align 属性 [\#5130](https://github.com/youzan/vant/pull/5130) - SubmitBar: 新增 text-align 属性 [\#5130](https://github.com/youzan/vant/pull/5130)
- AddressList: 新增 default-tag-text 属性 [\#5106](https://github.com/youzan/vant/pull/5106) - AddressList: 新增 default-tag-text 属性 [\#5106](https://github.com/youzan/vant/pull/5106)
- ContactList: 新增 default-tag-text 属性 [\#5089](https://github.com/youzan/vant/pull/5089) - ContactList: 新增 default-tag-text 属性 [\#5089](https://github.com/youzan/vant/pull/5089)
- ContactCard: 新增 show-set-default 属性 [\#5083](https://github.com/youzan/vant/pull/5083) - ContactCard: 新增 show-set-default、set-default-label 属性 [\#5083](https://github.com/youzan/vant/pull/5083)
- Toast: 完善 TS 类型定义 [\#5086](https://github.com/youzan/vant/pull/5086) - Toast: 完善 TS 类型定义 [\#5086](https://github.com/youzan/vant/pull/5086)
**Bug Fixes** **Bug Fixes**

View File

@ -1,6 +1,6 @@
{ {
"name": "vant", "name": "vant",
"version": "2.3.0-beta.1", "version": "2.3.0-beta.2",
"description": "Mobile UI Components built on Vue", "description": "Mobile UI Components built on Vue",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",

View File

@ -77,7 +77,7 @@ export default {
| disabled-text | Disabled text | *string* | - | - | | disabled-text | Disabled text | *string* | - | - |
| switchable | Whether to allow switch address | *boolean* | `true` | - | | switchable | Whether to allow switch address | *boolean* | `true` | - |
| add-button-text | Add button text | *string* | `Add new address` | - | | add-button-text | Add button text | *string* | `Add new address` | - |
| default-tag-text | Default tag text | *string* | - | - | | default-tag-text | Default tag text | *string* | - | 2.3.0 |
### Events ### Events

View File

@ -78,7 +78,7 @@ export default {
| disabled-text | 不可配送提示文案 | *string* | - | - | | disabled-text | 不可配送提示文案 | *string* | - | - |
| switchable | 是否允许切换地址 | *boolean* | `true` | - | | switchable | 是否允许切换地址 | *boolean* | `true` | - |
| add-button-text | 底部按钮文字 | *string* | `新增地址` | - | | add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
| default-tag-text | 默认地址标签文字 | *string* | - | - | | default-tag-text | 默认地址标签文字 | *string* | - | 2.3.0 |
### Events ### Events

View File

@ -64,11 +64,16 @@
display: inline-block; display: inline-block;
color: @card-price-color; color: @card-price-color;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @card-price-font-size;
}
&--integer { &__price-integer {
font-size: @card-price-integer-font-size; font-size: @card-price-integer-font-size;
font-family: @card-price-font-family; font-family: @card-price-font-family;
} }
&__price-decimal {
font-family: @card-price-font-family;
} }
&__origin-price { &__origin-price {

View File

@ -101,7 +101,11 @@ function Card(
} }
if (props.title) { if (props.title) {
return <div class={[bem('title'), 'van-multi-ellipsis--l2']}>{props.title}</div>; return (
<div class={[bem('title'), 'van-multi-ellipsis--l2']}>
{props.title}
</div>
);
} }
} }
@ -118,11 +122,11 @@ function Card(
function PriceContent() { function PriceContent() {
const priceArr = props.price!.toString().split('.'); const priceArr = props.price!.toString().split('.');
return ( return (
<div> <div>
{props.currency} {props.currency}
<span class={bem('price', 'integer')}>{priceArr[0]}</span>. <span class={bem('price-integer')}>{priceArr[0]}</span>.
{priceArr[1]} <span class={bem('price-decimal')}>{priceArr[1]}</span>
</div> </div>
); );
} }
@ -149,7 +153,11 @@ function Card(
function Num() { function Num() {
if (showNum) { if (showNum) {
return <div class={bem('num')}>{slots.num ? slots.num() : `x${props.num}`}</div>; return (
<div class={bem('num')}>
{slots.num ? slots.num() : `x${props.num}`}
</div>
);
} }
} }

View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-card__bottom"> <div class="van-card__bottom">
<div class="van-card__price"> <div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div> <div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div> </div>
<div class="van-card__num">x2</div> <div class="van-card__num">x2</div>
</div> </div>
@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-card__bottom"> <div class="van-card__bottom">
<div class="van-card__price"> <div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div> <div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div> </div>
<div class="van-card__origin-price">¥ 10.00</div> <div class="van-card__origin-price">¥ 10.00</div>
<div class="van-card__num">x2</div> <div class="van-card__num">x2</div>
@ -70,7 +70,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-card__bottom"> <div class="van-card__bottom">
<div class="van-card__price"> <div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div> <div>¥<span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
</div> </div>
<div class="van-card__num">x2</div> <div class="van-card__num">x2</div>
</div> </div>

View File

@ -155,7 +155,7 @@ export default {
| v-model | Id of chosen contact | *string \| number* | - | - | | v-model | Id of chosen contact | *string \| number* | - | - |
| list | Contact list | *Contact[]* | `[]` | - | | list | Contact list | *Contact[]* | `[]` | - |
| add-text | Add button text | *string* | `Add new contact` | - | | add-text | Add button text | *string* | `Add new contact` | - |
| default-tag-text | Default tag text | *string* | - | - | | default-tag-text | Default tag text | *string* | - | 2.3.0 |
### ContactList Events ### ContactList Events
@ -175,8 +175,8 @@ export default {
| is-saving | Whether to show save button loading status | *boolean* | `false` | - | | is-saving | Whether to show save button loading status | *boolean* | `false` | - |
| is-deleting | Whether to show delete button loading status | *boolean* | `false` | - | | is-deleting | Whether to show delete button loading status | *boolean* | `false` | - |
| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - | | tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - |
| show-set-default | Whether to show default contact switch | *boolean* | `false` | - | | show-set-default | Whether to show default contact switch | *boolean* | `false` | 2.3.0 |
| set-default-label | default contact switch label | *string* | - | - | | set-default-label | default contact switch label | *string* | - | 2.3.0 |
### ContactEdit Events ### ContactEdit Events

View File

@ -159,7 +159,7 @@ export default {
| v-model | 当前选中联系人的 id | *string \| number* | - | - | | v-model | 当前选中联系人的 id | *string \| number* | - | - |
| list | 联系人列表 | *Contact[]* | `[]` | - | | list | 联系人列表 | *Contact[]* | `[]` | - |
| add-text | 新建按钮文案 | *string* | `新建联系人` | - | | add-text | 新建按钮文案 | *string* | `新建联系人` | - |
| default-tag-text | 默认联系人标签文案 | *string* | - | - | | default-tag-text | 默认联系人标签文案 | *string* | - | 2.3.0 |
### ContactList Events ### ContactList Events
@ -178,8 +178,8 @@ export default {
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - | | is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - | | is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - | | tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - | | show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | 2.3.0 |
| set-default-label | 默认联系人栏文案 | *string* | - | - | | set-default-label | 默认联系人栏文案 | *string* | - | 2.3.0 |
### ContactEdit Events ### ContactEdit Events

View File

@ -99,7 +99,7 @@ export default {
| input-placeholder | Input placeholder | *string* | `Coupon code` | - | | input-placeholder | Input placeholder | *string* | `Coupon code` | - |
| currency | Currency symbol | *string* | `¥` | - | | currency | Currency symbol | *string* | `¥` | - |
| empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | - | | empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | - |
| show-count | Whether to show coupon count in tab title | *boolean* | `true` | - | | show-count | Whether to show coupon count in tab title | *boolean* | `true` | 2.3.0 |
### CouponList Events ### CouponList Events

View File

@ -101,7 +101,7 @@ export default {
| show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - | | show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - |
| currency | 货币符号 | *string* | `¥` | - | | currency | 货币符号 | *string* | `¥` | - |
| empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 | | empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 |
| show-count | 是否展示可用 / 不可用数量 | *boolean* | `true` | - | | show-count | 是否展示可用 / 不可用数量 | *boolean* | `true` | 2.3.0 |
### CouponList Events ### CouponList Events

View File

@ -16,7 +16,7 @@ Vue.use(Icon);
Use `name` prop to set icon name or icon URL Use `name` prop to set icon name or icon URL
```html ```html
<van-icon name="close" /> <van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
``` ```
@ -27,9 +27,9 @@ Use `dot` prop, a small red dot will be displayed in the upper right corner of t
Use `info` prop, the info will be displayed in the upper right corner of the icon. Use `info` prop, the info will be displayed in the upper right corner of the icon.
```html ```html
<van-icon name="chat" dot /> <van-icon name="chat-o" dot />
<van-icon name="chat" info="9" /> <van-icon name="chat-o" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat-o" info="99+" />
``` ```
### Icon Color ### Icon Color
@ -37,8 +37,8 @@ Use `info` prop, the info will be displayed in the upper right corner of the ico
Use `color` prop to set icon color Use `color` prop to set icon color
```html ```html
<van-icon name="location-o" color="#ff0000" /> <van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat" color="#00ff00" /> <van-icon name="chat-o" color="#07c160" />
``` ```
### Icon Size ### Icon Size
@ -46,8 +46,8 @@ Use `color` prop to set icon color
Use `size` prop to set icon size Use `size` prop to set icon size
```html ```html
<van-icon name="location-o" size="40px" /> <van-icon name="chat-o" size="40" />
<van-icon name="chat" size="20px" /> <van-icon name="chat-o" size="3rem" />
``` ```
### Use local font file ### Use local font file

View File

@ -20,7 +20,7 @@ Vue.use(Icon);
`Icon``name`属性支持传入图标名称或图片链接,所有可用的图标名称见右侧示例 `Icon``name`属性支持传入图标名称或图片链接,所有可用的图标名称见右侧示例
```html ```html
<van-icon name="close" /> <van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
``` ```
@ -29,28 +29,27 @@ Vue.use(Icon);
设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标 设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标
```html ```html
<van-icon name="chat" dot /> <van-icon name="chat-o" dot />
<van-icon name="chat" info="9" /> <van-icon name="chat-o" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat-o" info="99+" />
``` ```
### 图标颜色 ### 图标颜色
`Icon``color`属性用来设置图标的颜色 `Icon``color`属性用来设置图标的颜色
```html ```html
<van-icon name="location-o" color="#ff0000" /> <van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat" color="#00ff00" /> <van-icon name="chat-o" color="#07c160" />
``` ```
### 图标大小 ### 图标大小
`Icon``size`属性用来设置图标的尺寸大小 `Icon``size`属性用来设置图标的尺寸大小,默认单位为`px`
```html ```html
<van-icon name="location-o" size="40px" /> <van-icon name="chat-o" size="40" />
<van-icon name="chat" size="20px" /> <van-icon name="chat-o" size="3rem" />
``` ```
### 使用本地字体文件 ### 使用本地字体文件

View File

@ -1,76 +1,89 @@
<template> <template>
<demo-section> <demo-section>
<van-tabs v-model="tab" sticky :color="BLUE"> <van-tabs v-model="tab" sticky :color="BLUE">
<van-tab :title="$t('demo')">
<demo-block :title="$t('basicUsage')">
<van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" />
</van-col>
<van-col span="6" @click="copy(demoImage)">
<van-icon :name="demoImage" />
</van-col>
</demo-block>
<demo-block :title="$t('info')">
<van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot />
</van-col>
<van-col span="6" @click="copy(demoIcon, { info: '9' })">
<van-icon :name="demoIcon" info="9" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { info: '99+' })">
<van-icon :name="demoIcon" info="99+" />
</van-col>
</demo-block>
<demo-block :title="$t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" />
</van-col>
</demo-block>
<demo-block :title="$t('size')">
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
<van-icon :name="demoIcon" size="3rem" />
</van-col>
</demo-block>
</van-tab>
<van-tab :title="$t('basic')"> <van-tab :title="$t('basic')">
<van-col v-for="icon in icons.basic" :key="icon" span="6" @click="copy(icon)"> <van-col
v-for="icon in icons.basic"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('outline')"> <van-tab :title="$t('outline')">
<van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)"> <van-col
v-for="icon in icons.outline"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('filled')"> <van-tab :title="$t('filled')">
<van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)"> <van-col
v-for="icon in icons.filled"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('demo')">
<demo-block :title="$t('dot')">
<van-col span="6">
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
<span>{{ demoIcon }}</span>
</van-col>
<van-col span="6">
<van-icon :name="demoIcon" dot @click="copy(demoIcon, { dot: true })" />
<span>{{ demoIcon }}</span>
</van-col>
</demo-block>
<demo-block :title="$t('message')">
<van-col span="6">
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
<span>{{ demoIcon }}</span>
</van-col>
<van-col span="6">
<van-icon :name="demoIcon" info="123" @click="copy(demoIcon, { info: '123' })" />
<span>{{ demoIcon }}</span>
</van-col>
</demo-block>
<demo-block :title="$t('color')">
<van-col span="6">
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
<span>{{ demoIcon }}</span>
</van-col>
<van-col span="6">
<van-icon :name="demoIcon" color="#ff0000" @click="copy(demoIcon, { color: '#ff0000' })" />
<span>{{ demoIcon }}</span>
</van-col>
</demo-block>
<demo-block :title="$t('size')">
<van-col span="6">
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
<span>{{ demoIcon }}</span>
</van-col>
<van-col span="6">
<van-icon :name="demoIcon" size="40px" @click="copy(demoIcon, { size: '40px' })" />
<span>{{ demoIcon }}</span>
</van-col>
</demo-block>
</van-tab>
</van-tabs> </van-tabs>
</demo-section> </demo-section>
</template> </template>
<script> <script>
import icons from '@vant/icons'; import icons from '@vant/icons';
import { BLUE } from '../../utils/constant'; import { BLUE, GREEN } from '../../utils/constant';
// from https://30secondsofcode.org // from https://30secondsofcode.org
function copyToClipboard(str) { function copyToClipboard(str) {
@ -106,8 +119,6 @@ export default {
outline: '线框风格', outline: '线框风格',
filled: '实底风格', filled: '实底风格',
demo: '用法示例', demo: '用法示例',
dot: '图标右上角小红点',
message: '图标右上角徽标的内容',
color: '图标颜色', color: '图标颜色',
size: '图标大小' size: '图标大小'
}, },
@ -119,8 +130,6 @@ export default {
outline: 'Outline', outline: 'Outline',
filled: 'Filled', filled: 'Filled',
demo: 'Demo', demo: 'Demo',
dot: 'Show Red Dot',
message: 'Show Info',
color: 'Icon Color', color: 'Icon Color',
size: 'Icon Size' size: 'Icon Size'
} }
@ -128,10 +137,12 @@ export default {
data() { data() {
this.BLUE = BLUE; this.BLUE = BLUE;
this.GREEN = GREEN;
this.icons = icons; this.icons = icons;
return { return {
tab: 0, tab: 0,
demoIcon: 'location-o' demoIcon: 'chat-o',
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png'
}; };
}, },
@ -183,12 +194,12 @@ export default {
.van-col { .van-col {
display: inline-block; display: inline-block;
float: none; float: none;
height: 100px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
span { span {
display: block; display: block;
margin: -4px 0 16px;
padding: 0 5px; padding: 0 5px;
color: @gray-7; color: @gray-7;
font-size: 12px; font-size: 12px;
@ -201,7 +212,7 @@ export default {
} }
.van-icon { .van-icon {
margin: 20px 0 10px; margin: 16px 0 16px;
color: @text-color; color: @text-color;
font-size: 32px; font-size: 32px;
} }

View File

@ -89,7 +89,7 @@ declare global {
} }
} }
const version = '2.3.0-beta.1'; const version = '2.3.0-beta.2';
const components = [ const components = [
ActionSheet, ActionSheet,
AddressEdit, AddressEdit,

View File

@ -68,7 +68,7 @@ export default {
| Attribute | Description | Type | Default | Version | | Attribute | Description | Type | Default | Version |
|------|------|------|------|------| |------|------|------|------|------|
| type | Can be set to `primary` `info` `warning` | *string* | `danger` | 2.1.6 | | type | Can be set to `primary` `success` `warning` | *string* | `danger` | 2.1.6 |
| message | Message | *string* | - | - | | message | Message | *string* | - | - |
| duration | Duration(ms), won't disappear if value is 0 | *number* | `3000` | - | | duration | Duration(ms), won't disappear if value is 0 | *number* | `3000` | - |
| color | Message color | *string* | `#fff` | | - | | color | Message color | *string* | `#fff` | | - |

View File

@ -79,7 +79,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| type | 类型,可选值为 `primary` `info` `warning` | *string* | `danger` | 2.1.6 | | type | 类型,可选值为 `primary` `success` `warning` | *string* | `danger` | 2.1.6 |
| message | 展示文案,支持通过`\n`换行 | *string* | - | - | | message | 展示文案,支持通过`\n`换行 | *string* | - | - |
| duration | 展示时长(ms),值为 0 时notify 不会消失 | *number* | `3000` | - | | duration | 展示时长(ms),值为 0 时notify 不会消失 | *number* | `3000` | - |
| color | 字体颜色 | *string* | `#fff` | - | | color | 字体颜色 | *string* | `#fff` | - |

View File

@ -59,7 +59,7 @@ export default {
``` ```
### Change 事件 ### 监听切换事件
设置`change`方法来监听切换导航项时的事件 设置`change`方法来监听切换导航项时的事件

View File

@ -29,7 +29,7 @@
</van-grid-item> </van-grid-item>
<van-grid-item> <van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('eventChange') }}</h3> <h3 class="demo-sidebar-title">{{ $t('changeEvent') }}</h3>
<van-sidebar v-model="activeKey4" @change="onChange"> <van-sidebar v-model="activeKey4" @change="onChange">
<van-sidebar-item :title="$t('title') + 1" /> <van-sidebar-item :title="$t('title') + 1" />
<van-sidebar-item :title="$t('title') + 2" /> <van-sidebar-item :title="$t('title') + 2" />
@ -47,13 +47,13 @@ export default {
title: '标签名', title: '标签名',
showInfo: '提示信息', showInfo: '提示信息',
disabled: '禁用选项', disabled: '禁用选项',
eventChange: '切换事件', changeEvent: '监听切换事件',
selectTip: '你切换到了' selectTip: '你切换到了'
}, },
'en-US': { 'en-US': {
showInfo: 'Show Info', showInfo: 'Show Info',
disabled: 'Disabled', disabled: 'Disabled',
eventChange: 'Change Event', changeEvent: 'Change Event',
selectTip: 'You select ' selectTip: 'You select '
} }
}, },

View File

@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-grid-item" style="flex-basis: 50%;"> <div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center"> <div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">切换事件</h3> <h3 class="demo-sidebar-title">监听切换事件</h3>
<div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select"> <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
<div class="van-sidebar-item__text">标签名1 <div class="van-sidebar-item__text">标签名1
<!----> <!---->

View File

@ -141,7 +141,7 @@ export default {
| message-config | Message related config | *object* | `{}` | - | | message-config | Message related config | *object* | `{}` | - |
| get-container | Return the mount node for sku | *string \| () => Element* | - | - | | get-container | Return the mount node for sku | *string \| () => Element* | - | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
| start-sale-num | Minimum quantity | *number* | `1` | 2.2.15 | | start-sale-num | Minimum quantity | *number* | `1` | 2.3.0 |
### Events ### Events

View File

@ -145,7 +145,7 @@ export default {
| initial-sku | 默认选中的 sku具体参考高级用法 | *object* | `{}` | - | | initial-sku | 默认选中的 sku具体参考高级用法 | *object* | `{}` | - |
| show-soldout-sku | 是否展示售罄的 sku默认展示并置灰 | *boolean* | `true` | - | | show-soldout-sku | 是否展示售罄的 sku默认展示并置灰 | *boolean* | `true` | - |
| safe-area-inset-bottom | 是否开启底部安全区适配,[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 | | safe-area-inset-bottom | 是否开启底部安全区适配,[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
| start-sale-num | 起售数量 | *number* | `1` | 2.2.15 | | start-sale-num | 起售数量 | *number* | `1` | 2.3.0 |
### Events ### Events

View File

@ -41,7 +41,10 @@ export default createComponent({
watch: { watch: {
currentNum(num) { currentNum(num) {
this.skuEventBus.$emit('sku:numChange', num); const intValue = parseInt(num, 10);
if (intValue >= this.stepperMinLimit && intValue <= this.stepperLimit) {
this.skuEventBus.$emit('sku:numChange', intValue);
}
}, },
stepperLimit(limit) { stepperLimit(limit) {
@ -122,9 +125,10 @@ export default createComponent({
}, },
onChange(currentValue) { onChange(currentValue) {
const intValue = parseInt(currentValue, 10);
const { handleStepperChange } = this.customStepperConfig; const { handleStepperChange } = this.customStepperConfig;
handleStepperChange && handleStepperChange(currentValue); handleStepperChange && handleStepperChange(intValue);
this.$emit('change', currentValue); this.$emit('change', intValue);
}, },
checkState(min, max) { checkState(min, max) {
@ -159,6 +163,7 @@ export default createComponent({
min={this.stepperMinLimit} min={this.stepperMinLimit}
max={this.stepperLimit} max={this.stepperLimit}
disableInput={this.disableStepperInput} disableInput={this.disableStepperInput}
integer
onOverlimit={this.onOverLimit} onOverlimit={this.onOverLimit}
onChange={this.onChange} onChange={this.onChange}
/> />

View File

@ -42,7 +42,7 @@
@font-size-md: 14px; @font-size-md: 14px;
@font-size-lg: 16px; @font-size-lg: 16px;
@font-weight-bold: 500; @font-weight-bold: 500;
@price-integer-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif; @price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
// Animation // Animation
@animation-duration-base: .3s; @animation-duration-base: .3s;
@ -84,7 +84,7 @@
@address-edit-detail-finish-font-size: @font-size-sm; @address-edit-detail-finish-font-size: @font-size-sm;
// AddressList // AddressList
@address-list-padding: 12px 7px 100px 17px; @address-list-padding: 12px 12px 100px;
@address-list-disabled-text-color: @gray-6; @address-list-disabled-text-color: @gray-6;
@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md; @address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
@address-list-disabled-text-font-size: @font-size-md; @address-list-disabled-text-font-size: @font-size-md;
@ -148,6 +148,7 @@
@card-origin-price-color: @gray-6; @card-origin-price-color: @gray-6;
@card-num-color: @gray-6; @card-num-color: @gray-6;
@card-origin-price-font-size: @font-size-xs; @card-origin-price-font-size: @font-size-xs;
@card-price-font-size: @font-size-sm;
@card-price-integer-font-size: @font-size-lg; @card-price-integer-font-size: @font-size-lg;
@card-price-font-family: @price-integer-font-family; @card-price-font-family: @price-integer-font-family;

View File

@ -75,7 +75,7 @@ Use slot to add custom contents.
| price | Price | *number* | - | - | | price | Price | *number* | - | - |
| label | Price left label | *string* | `Total` | - | | label | Price left label | *string* | `Total` | - |
| suffix-label | Price right label | *string* | - | - | | suffix-label | Price right label | *string* | - | - |
| text-align | Price label text align can be set to `right` `left` | *string* | `right` | - | | text-align | Price label text align can be set to `right` `left` | *string* | `right` | 2.3.0 |
| button-text | Button text | *string* | - | - | | button-text | Button text | *string* | - | - |
| button-type | Button type | *string* | `danger` | - | | button-type | Button type | *string* | `danger` | - |
| tip | Tip | *string* | - | - | | tip | Tip | *string* | - | - |

View File

@ -75,7 +75,7 @@ Vue.use(SubmitBar);
| price | 价格(单位分) | *number* | - | - | | price | 价格(单位分) | *number* | - | - |
| label | 价格左侧文案 | *string* | `合计:` | - | | label | 价格左侧文案 | *string* | `合计:` | - |
| suffix-label | 价格右侧文案 | *string* | - | - | | suffix-label | 价格右侧文案 | *string* | - | - |
| text-align | 价格文案对齐方向,可选值为 `right` `left` | *string* | `right` | - | | text-align | 价格文案对齐方向,可选值为 `right` `left` | *string* | `right` | 2.3.0 |
| button-text | 按钮文字 | *string* | - | - | | button-text | 按钮文字 | *string* | - | - |
| button-type | 按钮类型 | *string* | `danger` | - | | button-type | 按钮类型 | *string* | `danger` | - |
| tip | 提示文案 | *string* | - | - | | tip | 提示文案 | *string* | - | - |

View File

@ -116,10 +116,7 @@ export default {
### Change Event ### Change Event
```html ```html
<van-tabbar <van-tabbar v-model="active" @change="onChange">
v-model="active"
@change="onChange"
>
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item> <van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
<van-tabbar-item icon="search">Tab2</van-tabbar-item> <van-tabbar-item icon="search">Tab2</van-tabbar-item>
<van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item> <van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>

View File

@ -118,13 +118,10 @@ export default {
</van-tabbar> </van-tabbar>
``` ```
### Change 事件 ### 监听切换事件
```html ```html
<van-tabbar <van-tabbar v-model="active" @change="onChange">
v-model="active"
@change="onChange"
>
<van-tabbar-item icon="home-o">标签1</van-tabbar-item> <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
<van-tabbar-item icon="search">标签2</van-tabbar-item> <van-tabbar-item icon="search">标签2</van-tabbar-item>
<van-tabbar-item icon="freinds-o">标签3</van-tabbar-item> <van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>

View File

@ -68,7 +68,7 @@ export default {
customIcon: '自定义图标', customIcon: '自定义图标',
customColor: '自定义颜色', customColor: '自定义颜色',
matchByName: '通过名称匹配', matchByName: '通过名称匹配',
switchEvent: '切换标签事件', switchEvent: '监听切换事件',
selectTip: '你切换到了' selectTip: '你切换到了'
}, },
'en-US': { 'en-US': {