diff --git a/src/icon/README.md b/src/icon/README.md
index fcf3d291c..c25a1e656 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -22,12 +22,34 @@ Use `name` prop to set icon name or icon URL
### Show Info
+Use `dot` prop, a small red dot 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
```
+### Icon Color
+
+Use `color` prop to set icon color
+
+```html
+
+
+```
+
+### Icon Size
+
+Use `size` prop to set icon size
+
+```html
+
+
+```
+
### Use local font file
Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md
index 33e4e2071..168f0b41b 100644
--- a/src/icon/README.zh-CN.md
+++ b/src/icon/README.zh-CN.md
@@ -34,6 +34,25 @@ Vue.use(Icon);
```
+
+### 图标颜色
+
+`Icon`的`color`属性用来设置图标的颜色
+
+```html
+
+
+```
+
+### 图标大小
+
+`Icon`的`size`属性用来设置图标的尺寸大小
+
+```html
+
+
+```
+
### 使用本地字体文件
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 846d1d9c4..6e5086ea8 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -21,6 +21,49 @@
{{ icon }}
+
+
+
+
+
+ {{ demoIcon }}
+
+
+
+ {{ demoIcon }}
+
+
+
+
+
+ {{ demoIcon }}
+
+
+
+ {{ demoIcon }}
+
+
+
+
+
+ {{ demoIcon }}
+
+
+
+ {{ demoIcon }}
+
+
+
+
+
+ {{ demoIcon }}
+
+
+
+ {{ demoIcon }}
+
+
+
@@ -61,7 +104,12 @@ export default {
basic: '基础图标',
copied: '复制成功',
outline: '线框风格',
- filled: '实底风格'
+ filled: '实底风格',
+ demo: '用法示例',
+ dot: '图标右上角小红点',
+ message: '图标右上角徽标的内容',
+ color: '图标颜色',
+ size: '图标大小'
},
'en-US': {
title: 'Icon List',
@@ -69,7 +117,12 @@ export default {
basic: 'Basic',
copied: 'Copied',
outline: 'Outline',
- filled: 'Filled'
+ filled: 'Filled',
+ demo: 'Demo',
+ dot: 'Show Red Dot',
+ message: 'Show Info',
+ color: 'Icon Color',
+ size: 'Icon Size'
}
},
@@ -77,13 +130,27 @@ export default {
this.BLUE = BLUE;
this.icons = icons;
return {
- tab: 0
+ tab: 0,
+ demoIcon: 'location-o'
};
},
methods: {
- copy(icon) {
- const tag = `
`;
+ copy(icon, option = {}) {
+ let tag = `
`;
copyToClipboard(tag);
this.$notify({
diff --git a/src/locale/lang/en-US.ts b/src/locale/lang/en-US.ts
index fa0f096f7..9b9b4f1ec 100644
--- a/src/locale/lang/en-US.ts
+++ b/src/locale/lang/en-US.ts
@@ -29,7 +29,6 @@ export default {
label: 'Total：'
},
vanCoupon: {
- valid: 'Valid',
unlimited: 'Unlimited',
discount: (discount: number) => `${discount * 10}% off`,
condition: (condition: number) => `At least ${condition}`
diff --git a/src/locale/lang/es-ES.ts b/src/locale/lang/es-ES.ts
index 9f5bf0c8d..1f889836e 100644
--- a/src/locale/lang/es-ES.ts
+++ b/src/locale/lang/es-ES.ts
@@ -29,7 +29,6 @@ export default {
label: 'Total：'
},
vanCoupon: {
- valid: 'Valido',
unlimited: 'Ilimitado',
discount: (discount: number) => `${discount * 10}% de descuento`,
condition: (condition: number) => `Al menos ${condition}`
diff --git a/src/locale/lang/tr-TR.ts b/src/locale/lang/tr-TR.ts
index 09b29a7f1..815bc4660 100644
--- a/src/locale/lang/tr-TR.ts
+++ b/src/locale/lang/tr-TR.ts
@@ -29,7 +29,6 @@ export default {
label: 'Toplam:'
},
vanCoupon: {
- valid: 'Geçerli',
unlimited: 'Sınırsız',
discount: (discount: number) => `%${discount * 10} indirim`,
condition: (condition: number) => `En az ${condition}`
diff --git a/src/locale/lang/zh-CN.ts b/src/locale/lang/zh-CN.ts
index 08b4d5779..15b555f75 100644
--- a/src/locale/lang/zh-CN.ts
+++ b/src/locale/lang/zh-CN.ts
@@ -29,7 +29,6 @@ export default {
label: '合计：'
},
vanCoupon: {
- valid: '有效期',
unlimited: '无使用门槛',
discount: (discount: number) => `${discount}折`,
condition: (condition: number) => `满${condition}元可用`
@@ -42,9 +41,9 @@ export default {
vanCouponList: {
empty: '暂无优惠券',
exchange: '兑换',
- close: '不使用优惠',
- enable: '可使用优惠券',
- disabled: '不可使用优惠券',
+ close: '不使用优惠券',
+ enable: '可用',
+ disabled: '不可用',
placeholder: '请输入优惠码'
},
vanAddressEdit: {
diff --git a/src/locale/lang/zh-HK.ts b/src/locale/lang/zh-HK.ts
index 094ced3e5..8da5efd65 100644
--- a/src/locale/lang/zh-HK.ts
+++ b/src/locale/lang/zh-HK.ts
@@ -29,7 +29,6 @@ export default {
label: '合計：'
},
vanCoupon: {
- valid: '有效期',
unlimited: '無使用門檻',
discount: (discount: number) => `${discount}折`,
condition: (condition: number) => `滿${condition}元可用`
diff --git a/src/locale/lang/zh-TW.ts b/src/locale/lang/zh-TW.ts
index f33dacd8c..3efc98a0b 100644
--- a/src/locale/lang/zh-TW.ts
+++ b/src/locale/lang/zh-TW.ts
@@ -29,7 +29,6 @@ export default {
label: '合計：'
},
vanCoupon: {
- valid: '有效期限',
unlimited: '無使用門檻',
discount: (discount: number) => `${discount}折`,
condition: (condition: number) => `滿${condition}元可用`
diff --git a/src/picker/index.js b/src/picker/index.js
index 02bf60e97..b04d7fc7d 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -63,7 +63,12 @@ export default createComponent({
onChange(columnIndex) {
if (this.simple) {
- this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+ this.$emit(
+ 'change',
+ this,
+ this.getColumnValue(0),
+ this.getColumnIndex(0)
+ );
} else {
this.$emit('change', this, this.getValues(), columnIndex);
}
@@ -105,7 +110,10 @@ export default createComponent({
// set options of column by index
setColumnValues(index, options) {
const column = this.children[index];
- if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
+ if (
+ column &&
+ JSON.stringify(column.options) !== JSON.stringify(options)
+ ) {
column.options = options;
column.setIndex(0);
}
@@ -142,13 +150,70 @@ export default createComponent({
onCancel() {
this.emit('cancel');
+ },
+
+ genTitle() {
+ const titleSlot = this.slots('title');
+
+ if (titleSlot) {
+ return titleSlot;
+ }
+
+ if (this.title) {
+ return
{this.title}
;
+ }
+ },
+
+ genToolbar() {
+ if (this.showToolbar) {
+ return (
+
+ {this.slots() || [
+ ,
+ this.genTitle(),
+
+ ]}
+
+ );
+ }
+ },
+
+ genColumns() {
+ const columns = this.simple ? [this.columns] : this.columns;
+
+ return columns.map((item, index) => (
+
{
+ this.onChange(index);
+ }}
+ />
+ ));
}
},
render(h) {
const { itemHeight } = this;
const wrapHeight = itemHeight * this.visibleItemCount;
- const columns = this.simple ? [this.columns] : this.columns;
const frameStyle = {
height: `${itemHeight}px`
@@ -162,49 +227,25 @@ export default createComponent({
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
};
- const Toolbar = this.showToolbar && (
-
- {this.slots() || [
-
,
- this.slots('title') ||
- (this.title && (
-
{this.title}
- )),
-
- ]}
-
- {this.toolbarPosition === 'top' ? Toolbar : h()}
+ {this.toolbarPosition === 'top' ? this.genToolbar() : h()}
{this.loading ?
: h()}
{this.slots('columns-top')}
-
- {columns.map((item, index) => (
-
{
- this.onChange(index);
- }}
- />
- ))}
+
+ {this.genColumns()}
-
+
);
}
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index 5d427bec3..1464ed379 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -42,8 +42,8 @@ exports[`renders demo correctly 1`] = `
`;
diff --git a/src/stepper/README.md b/src/stepper/README.md
index c0ac195d7..b6467231f 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -107,7 +107,9 @@ export default {
| name | Stepper name | *string \| number* | - | 2.0.3 |
| integer | Whether to allow only integers | *boolean* | `false` | - |
| disabled | Disable value change | *boolean* | `false` | - |
-| disable-input | Disable input | *boolean* | `false` | - |
+| disable-plus | Whether to disable plus button | *boolean* | `false` | 2.2.16 |
+| disable-minus | Whether to disable minus button | *boolean* | `false` | 2.2.16 |
+| disable-input | Whether to disable input | *boolean* | `false` | - |
| async-change | Whether to enable async change | *boolean* | `false` | - | - |
| input-width | Input width | *string \| number* | `32px` | - |
| button-size | Button size | *string \| number* | `28px` | 2.0.5 |
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index fed358fa9..5f0aa4c94 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -129,6 +129,8 @@ export default {
| name | 标识符，可以在`change`事件回调参数中获取 | *string \| number* | - | 2.2.11 |
| integer | 是否只允许输入整数 | *boolean* | `false` | - |
| disabled | 是否禁用步进器 | *boolean* | `false` | - |
+| disable-plus | 是否禁用增加按钮 | *boolean* | `false` | 2.2.16 |
+| disable-minus | 是否禁用减少按钮 | *boolean* | `false` | 2.2.16 |
| disable-input | 是否禁用输入框 | *boolean* | `false` | - |
| async-change | 是否开启异步变更，开启后需要手动控制输入值 | *boolean* | `false` | - |
| input-width | 输入框宽度，默认单位为`px` | *string \| number* | `32px` | - |
diff --git a/src/stepper/index.js b/src/stepper/index.js
index 44a5a6655..21d2abc14 100644
--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@@ -25,6 +25,8 @@ export default createComponent({
inputWidth: [Number, String],
buttonSize: [Number, String],
asyncChange: Boolean,
+ disablePlus: Boolean,
+ disableMinus: Boolean,
disableInput: Boolean,
decimalLength: Number,
name: {
@@ -72,11 +74,11 @@ export default createComponent({
computed: {
minusDisabled() {
- return this.disabled || this.currentValue <= this.min;
+ return this.disabled || this.disableMinus || this.currentValue <= this.min;
},
plusDisabled() {
- return this.disabled || this.currentValue >= this.max;
+ return this.disabled || this.disablePlus || this.currentValue >= this.max;
},
inputStyle() {
@@ -253,6 +255,7 @@ export default createComponent({
diff --git a/src/stepper/test/__snapshots__/index.spec.js.snap b/src/stepper/test/__snapshots__/index.spec.js.snap
index 906faebe1..c9e506e91 100644
--- a/src/stepper/test/__snapshots__/index.spec.js.snap
+++ b/src/stepper/test/__snapshots__/index.spec.js.snap
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`disable stepper input 1`] = ``;
+exports[`disable stepper input 1`] = ``;
-exports[`disabled stepper 1`] = ``;
+exports[`disabled stepper 1`] = ``;
-exports[`input-width prop 1`] = ``;
+exports[`input-width prop 1`] = ``;
-exports[`show-plus & show-minus props 1`] = ``;
+exports[`show-plus & show-minus props 1`] = ``;
diff --git a/src/stepper/test/index.spec.js b/src/stepper/test/index.spec.js
index a5a2deff2..29748616e 100644
--- a/src/stepper/test/index.spec.js
+++ b/src/stepper/test/index.spec.js
@@ -19,6 +19,35 @@ test('disable stepper input', () => {
expect(wrapper).toMatchSnapshot();
});
+test('disable button', async () => {
+ const wrapper = mount(Stepper, {
+ propsData: {
+ value: 5
+ }
+ });
+
+ const plus = wrapper.find('.van-stepper__plus');
+ const minus = wrapper.find('.van-stepper__minus');
+
+ minus.trigger('click');
+
+ expect(wrapper.emitted('overlimit')).toBeFalsy();
+ expect(wrapper.emitted('minus')).toBeTruthy();
+ expect(wrapper.emitted('change')[0]).toEqual([4, { name: '' }]);
+
+ wrapper.setProps({
+ disablePlus: true,
+ disableMinus: true
+ });
+
+ await later();
+
+ minus.trigger('click');
+ expect(wrapper.emitted('overlimit')[0][0]).toBe('minus');
+ plus.trigger('click');
+ expect(wrapper.emitted('overlimit')[1][0]).toBe('plus');
+});
+
test('click button', () => {
const wrapper = mount(Stepper, {
propsData: {
diff --git a/src/style/var.less b/src/style/var.less
index 1172ad8aa..fc6ba8556 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -231,20 +231,20 @@
// Coupon
@coupon-margin: 0 @padding-md @padding-md;
-@coupon-content-height: 100px;
-@coupon-content-padding: @padding-lg 0 0 @padding-md;
+@coupon-content-height: 84px;
+@coupon-content-padding: 14px 0;
@coupon-background-color: @white;
@coupon-active-background-color: @active-color;
@coupon-border-radius: @border-radius-md;
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-@coupon-head-width: 85px;
+@coupon-head-width: 96px;
@coupon-amount-color: @red;
-@coupon-amount-font-size: 24px;
-@coupon-currency-font-size: 50%;
-@coupon-name-font-size: @font-size-lg;
+@coupon-amount-font-size: 30px;
+@coupon-currency-font-size: 40%;
+@coupon-name-font-size: @font-size-md;
@coupon-disabled-text-color: @gray-6;
@coupon-description-padding: @padding-xs @padding-md;
-@coupon-description-background-color: @background-color-light;
+@coupon-description-background-color: @white;
@coupon-description-border-color: @border-color;
// CouponCell
@@ -252,7 +252,7 @@
// CouponList
@coupon-list-background-color: @background-color;
-@coupon-list-field-padding: @padding-xs @padding-md;
+@coupon-list-field-padding: 5px 0 5px @padding-md;
@coupon-list-exchange-button-height: 32px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: @gray-6;
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index 27721b226..6e06c816c 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -181,3 +181,11 @@ export default {
|------|------|------|
| default | 轮播内容 | - |
| indicator | 自定义指示器 | - |
+
+## 常见问题
+
+### 滑动轮播时为什么触发了 click 事件？
+
+这种情况通常是由于项目中引入了`fastclick`库导致的。`fastclick`的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
+
+将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 51cc9faf0..681150a0e 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -112,6 +112,31 @@ export default {
```
+
+### Change Event
+
+```html
+
+ Tab1
+ Tab2
+ Tab3
+ Tab4
+
+```
+
+```js
+export default {
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
### Route Mode
```html
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index e2552ef9d..6df4dd309 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -118,6 +118,30 @@ export default {
```
+### Change 事件
+
+```html
+
+ 标签1
+ 标签2
+ 标签3
+ 标签4
+
+```
+
+```js
+export default {
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
### 路由模式
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index c30966a86..96a25d7ff 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -48,6 +48,15 @@
{{ $t('tab') }}
+
+
+
+ {{ $t('tab') + 1 }}
+ {{ $t('tab') + 2 }}
+ {{ $t('tab') + 3 }}
+ {{ $t('tab') + 4 }}
+
+
@@ -58,13 +67,17 @@ export default {
badge: '提示信息',
customIcon: '自定义图标',
customColor: '自定义颜色',
- matchByName: '通过名称匹配'
+ matchByName: '通过名称匹配',
+ switchEvent: '切换标签事件',
+ selectTip: '你切换到了'
},
'en-US': {
badge: 'Show Badge',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
- matchByName: 'Match by name'
+ matchByName: 'Match by name',
+ switchEvent: 'Change Event',
+ selectTip: 'You select '
}
},
@@ -74,12 +87,22 @@ export default {
active2: 0,
active3: 0,
active4: 0,
+ active5: 0,
activeName: 'home',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
};
+ },
+
+ methods: {
+ onChange(index) {
+ this.$notify({
+ type: 'primary',
+ message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`
+ });
+ }
}
};
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 08cf7c656..5412410e6 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `