mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into feature/vant_cli_2
This commit is contained in:
陈嘉涵
commit
7b922dbe2e
@ -1,5 +1,31 @@
|
||||
# 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)
|
||||
`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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
@ -11,6 +11,32 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 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)
|
||||
`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)
|
||||
- AddressList: 新增 default-tag-text 属性 [\#5106](https://github.com/youzan/vant/pull/5106)
|
||||
- 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)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.3.0-beta.1",
|
||||
"version": "2.3.0-beta.2",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
| disabled-text | Disabled text | *string* | - | - |
|
||||
| switchable | Whether to allow switch address | *boolean* | `true` | - |
|
||||
| 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
|
||||
|
||||
|
||||
@ -78,7 +78,7 @@ export default {
|
||||
| disabled-text | 不可配送提示文案 | *string* | - | - |
|
||||
| switchable | 是否允许切换地址 | *boolean* | `true` | - |
|
||||
| add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
|
||||
| default-tag-text | 默认地址标签文字 | *string* | - | - |
|
||||
| default-tag-text | 默认地址标签文字 | *string* | - | 2.3.0 |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -64,11 +64,16 @@
|
||||
display: inline-block;
|
||||
color: @card-price-color;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @card-price-font-size;
|
||||
}
|
||||
|
||||
&--integer {
|
||||
font-size: @card-price-integer-font-size;
|
||||
font-family: @card-price-font-family;
|
||||
}
|
||||
&__price-integer {
|
||||
font-size: @card-price-integer-font-size;
|
||||
font-family: @card-price-font-family;
|
||||
}
|
||||
|
||||
&__price-decimal {
|
||||
font-family: @card-price-font-family;
|
||||
}
|
||||
|
||||
&__origin-price {
|
||||
|
||||
@ -101,7 +101,11 @@ function Card(
|
||||
}
|
||||
|
||||
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() {
|
||||
const priceArr = props.price!.toString().split('.');
|
||||
return (
|
||||
<div>
|
||||
{props.currency}
|
||||
<span class={bem('price', 'integer')}>{priceArr[0]}</span>.
|
||||
{priceArr[1]}
|
||||
</div>
|
||||
<div>
|
||||
{props.currency}
|
||||
<span class={bem('price-integer')}>{priceArr[0]}</span>.
|
||||
<span class={bem('price-decimal')}>{priceArr[1]}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -149,7 +153,11 @@ function Card(
|
||||
|
||||
function Num() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-card__bottom">
|
||||
<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 class="van-card__num">x2</div>
|
||||
</div>
|
||||
@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-card__bottom">
|
||||
<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 class="van-card__origin-price">¥ 10.00</div>
|
||||
<div class="van-card__num">x2</div>
|
||||
@ -70,7 +70,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-card__bottom">
|
||||
<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 class="van-card__num">x2</div>
|
||||
</div>
|
||||
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
| v-model | Id of chosen contact | *string \| number* | - | - |
|
||||
| list | Contact list | *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
|
||||
|
||||
@ -175,8 +175,8 @@ export default {
|
||||
| is-saving | Whether to show save 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* | - | - |
|
||||
| show-set-default | Whether to show default contact switch | *boolean* | `false` | - |
|
||||
| set-default-label | default contact switch label | *string* | - | - |
|
||||
| show-set-default | Whether to show default contact switch | *boolean* | `false` | 2.3.0 |
|
||||
| set-default-label | default contact switch label | *string* | - | 2.3.0 |
|
||||
|
||||
### ContactEdit Events
|
||||
|
||||
|
||||
@ -159,7 +159,7 @@ export default {
|
||||
| v-model | 当前选中联系人的 id | *string \| number* | - | - |
|
||||
| list | 联系人列表 | *Contact[]* | `[]` | - |
|
||||
| add-text | 新建按钮文案 | *string* | `新建联系人` | - |
|
||||
| default-tag-text | 默认联系人标签文案 | *string* | - | - |
|
||||
| default-tag-text | 默认联系人标签文案 | *string* | - | 2.3.0 |
|
||||
|
||||
### ContactList Events
|
||||
|
||||
@ -178,8 +178,8 @@ export default {
|
||||
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
|
||||
| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
|
||||
| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - |
|
||||
| set-default-label | 默认联系人栏文案 | *string* | - | - |
|
||||
| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | 2.3.0 |
|
||||
| set-default-label | 默认联系人栏文案 | *string* | - | 2.3.0 |
|
||||
|
||||
### ContactEdit Events
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
| input-placeholder | Input placeholder | *string* | `Coupon code` | - |
|
||||
| currency | Currency symbol | *string* | `¥` | - |
|
||||
| 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
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
| show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - |
|
||||
| currency | 货币符号 | *string* | `¥` | - |
|
||||
| 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
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Vue.use(Icon);
|
||||
Use `name` prop to set icon name or icon URL
|
||||
|
||||
```html
|
||||
<van-icon name="close" />
|
||||
<van-icon name="chat-o" />
|
||||
<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.
|
||||
|
||||
```html
|
||||
<van-icon name="chat" dot />
|
||||
<van-icon name="chat" info="9" />
|
||||
<van-icon name="chat" info="99+" />
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" info="9" />
|
||||
<van-icon name="chat-o" info="99+" />
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### Icon Size
|
||||
@ -46,8 +46,8 @@ Use `color` prop to set icon color
|
||||
Use `size` prop to set icon size
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
<van-icon name="chat-o" size="40" />
|
||||
<van-icon name="chat-o" size="3rem" />
|
||||
```
|
||||
|
||||
### Use local font file
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(Icon);
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
|
||||
|
||||
```html
|
||||
<van-icon name="close" />
|
||||
<van-icon name="chat-o" />
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
@ -29,28 +29,27 @@ Vue.use(Icon);
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-icon name="chat" dot />
|
||||
<van-icon name="chat" info="9" />
|
||||
<van-icon name="chat" info="99+" />
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" info="9" />
|
||||
<van-icon name="chat-o" info="99+" />
|
||||
```
|
||||
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon`的`color`属性用来设置图标的颜色
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
<van-icon name="chat-o" size="40" />
|
||||
<van-icon name="chat-o" size="3rem" />
|
||||
```
|
||||
|
||||
### 使用本地字体文件
|
||||
|
||||
@ -1,76 +1,89 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<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-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" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
|
||||
<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" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
|
||||
<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" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</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>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from '@vant/icons';
|
||||
import { BLUE } from '../../utils/constant';
|
||||
import { BLUE, GREEN } from '../../utils/constant';
|
||||
|
||||
// from https://30secondsofcode.org
|
||||
function copyToClipboard(str) {
|
||||
@ -106,8 +119,6 @@ export default {
|
||||
outline: '线框风格',
|
||||
filled: '实底风格',
|
||||
demo: '用法示例',
|
||||
dot: '图标右上角小红点',
|
||||
message: '图标右上角徽标的内容',
|
||||
color: '图标颜色',
|
||||
size: '图标大小'
|
||||
},
|
||||
@ -119,8 +130,6 @@ export default {
|
||||
outline: 'Outline',
|
||||
filled: 'Filled',
|
||||
demo: 'Demo',
|
||||
dot: 'Show Red Dot',
|
||||
message: 'Show Info',
|
||||
color: 'Icon Color',
|
||||
size: 'Icon Size'
|
||||
}
|
||||
@ -128,10 +137,12 @@ export default {
|
||||
|
||||
data() {
|
||||
this.BLUE = BLUE;
|
||||
this.GREEN = GREEN;
|
||||
this.icons = icons;
|
||||
return {
|
||||
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 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: -4px 0 16px;
|
||||
padding: 0 5px;
|
||||
color: @gray-7;
|
||||
font-size: 12px;
|
||||
@ -201,7 +212,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
margin: 20px 0 10px;
|
||||
margin: 16px 0 16px;
|
||||
color: @text-color;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
const version = '2.3.0-beta.1';
|
||||
const version = '2.3.0-beta.2';
|
||||
const components = [
|
||||
ActionSheet,
|
||||
AddressEdit,
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
| 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* | - | - |
|
||||
| duration | Duration(ms), won't disappear if value is 0 | *number* | `3000` | - |
|
||||
| color | Message color | *string* | `#fff` | | - |
|
||||
|
||||
@ -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* | - | - |
|
||||
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | *number* | `3000` | - |
|
||||
| color | 字体颜色 | *string* | `#fff` | - |
|
||||
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
```
|
||||
|
||||
|
||||
### Change 事件
|
||||
### 监听切换事件
|
||||
|
||||
设置`change`方法来监听切换导航项时的事件
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
</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-item :title="$t('title') + 1" />
|
||||
<van-sidebar-item :title="$t('title') + 2" />
|
||||
@ -47,13 +47,13 @@ export default {
|
||||
title: '标签名',
|
||||
showInfo: '提示信息',
|
||||
disabled: '禁用选项',
|
||||
eventChange: '切换事件',
|
||||
changeEvent: '监听切换事件',
|
||||
selectTip: '你切换到了'
|
||||
},
|
||||
'en-US': {
|
||||
showInfo: 'Show Info',
|
||||
disabled: 'Disabled',
|
||||
eventChange: 'Change Event',
|
||||
changeEvent: 'Change Event',
|
||||
selectTip: 'You select '
|
||||
}
|
||||
},
|
||||
|
||||
@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
||||
<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-item__text">标签名1
|
||||
<!---->
|
||||
|
||||
@ -141,7 +141,7 @@ export default {
|
||||
| message-config | Message related config | *object* | `{}` | - |
|
||||
| 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 |
|
||||
| start-sale-num | Minimum quantity | *number* | `1` | 2.2.15 |
|
||||
| start-sale-num | Minimum quantity | *number* | `1` | 2.3.0 |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
| initial-sku | 默认选中的 sku，具体参考高级用法 | *object* | `{}` | - |
|
||||
| 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 |
|
||||
| start-sale-num | 起售数量 | *number* | `1` | 2.2.15 |
|
||||
| start-sale-num | 起售数量 | *number* | `1` | 2.3.0 |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -41,7 +41,10 @@ export default createComponent({
|
||||
|
||||
watch: {
|
||||
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) {
|
||||
@ -122,9 +125,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onChange(currentValue) {
|
||||
const intValue = parseInt(currentValue, 10);
|
||||
const { handleStepperChange } = this.customStepperConfig;
|
||||
handleStepperChange && handleStepperChange(currentValue);
|
||||
this.$emit('change', currentValue);
|
||||
handleStepperChange && handleStepperChange(intValue);
|
||||
this.$emit('change', intValue);
|
||||
},
|
||||
|
||||
checkState(min, max) {
|
||||
@ -159,6 +163,7 @@ export default createComponent({
|
||||
min={this.stepperMinLimit}
|
||||
max={this.stepperLimit}
|
||||
disableInput={this.disableStepperInput}
|
||||
integer
|
||||
onOverlimit={this.onOverLimit}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@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-duration-base: .3s;
|
||||
@ -84,7 +84,7 @@
|
||||
@address-edit-detail-finish-font-size: @font-size-sm;
|
||||
|
||||
// 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-padding: @padding-base * 5 0 @padding-md;
|
||||
@address-list-disabled-text-font-size: @font-size-md;
|
||||
@ -148,6 +148,7 @@
|
||||
@card-origin-price-color: @gray-6;
|
||||
@card-num-color: @gray-6;
|
||||
@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-font-family: @price-integer-font-family;
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ Use slot to add custom contents.
|
||||
| price | Price | *number* | - | - |
|
||||
| label | Price left label | *string* | `Total：` | - |
|
||||
| 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-type | Button type | *string* | `danger` | - |
|
||||
| tip | Tip | *string* | - | - |
|
||||
|
||||
@ -75,7 +75,7 @@ Vue.use(SubmitBar);
|
||||
| price | 价格（单位分） | *number* | - | - |
|
||||
| label | 价格左侧文案 | *string* | `合计：` | - |
|
||||
| suffix-label | 价格右侧文案 | *string* | - | - |
|
||||
| text-align | 价格文案对齐方向，可选值为 `right` `left` | *string* | `right` | - |
|
||||
| text-align | 价格文案对齐方向，可选值为 `right` `left` | *string* | `right` | 2.3.0 |
|
||||
| button-text | 按钮文字 | *string* | - | - |
|
||||
| button-type | 按钮类型 | *string* | `danger` | - |
|
||||
| tip | 提示文案 | *string* | - | - |
|
||||
|
||||
@ -116,10 +116,7 @@ export default {
|
||||
### Change Event
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab2</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>
|
||||
|
||||
@ -118,13 +118,10 @@ export default {
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### Change 事件
|
||||
### 监听切换事件
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
matchByName: '通过名称匹配',
|
||||
switchEvent: '切换标签事件',
|
||||
switchEvent: '监听切换事件',
|
||||
selectTip: '你切换到了'
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user