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
d25c2e21ac
@ -34,6 +34,15 @@ Upgrading the style of business components:
|
||||
- fix NumberKeyboard should not trigger blur event when hidden [\#5110](https://github.com/youzan/vant/pull/5110)
|
||||
|
||||
|
||||
### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
|
||||
`2019-12-03`
|
||||
|
||||
**Features**
|
||||
|
||||
- Stepper: add disable-plus props [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
- Stepper: add disable-minus props [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
|
||||
|
||||
### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
|
||||
`2019-11-28`
|
||||
|
||||
|
||||
@ -45,6 +45,15 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 NumberKeyboard 在隐藏状态下也会触发 blur 事件的问题 [\#5110](https://github.com/youzan/vant/pull/5110)
|
||||
|
||||
|
||||
### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
|
||||
`2019-12-03`
|
||||
|
||||
**Features**
|
||||
|
||||
- Stepper: 新增 disable-plus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
- Stepper: 新增 disable-minus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
|
||||
|
||||
### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
|
||||
`2019-11-28`
|
||||
|
||||
|
||||
@ -53,7 +53,11 @@ function ActionSheet(
|
||||
return (
|
||||
<div class={[bem('header'), BORDER_BOTTOM]}>
|
||||
{title}
|
||||
<Icon name={props.closeIcon} class={bem('close')} onClick={onCancel} />
|
||||
<Icon
|
||||
name={props.closeIcon}
|
||||
class={bem('close')}
|
||||
onClick={onCancel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -99,6 +103,7 @@ function ActionSheet(
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={[bem('item', { disabled }), item.className, BORDER_TOP]}
|
||||
style={{ color: item.color }}
|
||||
onClick={onClickOption}
|
||||
@ -111,7 +116,7 @@ function ActionSheet(
|
||||
function CancelText() {
|
||||
if (cancelText) {
|
||||
return (
|
||||
<button class={bem('cancel')} onClick={onCancel}>
|
||||
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
||||
{cancelText}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button class="van-action-sheet__cancel">Cancel</button></div>
|
||||
</button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
|
||||
`;
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
@ -13,15 +13,15 @@ exports[`close-icon prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
exports[`description prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__description">This is a description</div><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
|
||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
|
||||
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>`;
|
||||
|
||||
exports[`render title and default slot 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
@ -31,4 +31,4 @@ exports[`render title and default slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -79,7 +79,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -159,8 +159,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -216,8 +216,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -32,7 +32,7 @@ exports[`change option 1`] = `
|
||||
|
||||
exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -62,7 +62,7 @@ exports[`change option 2`] = `
|
||||
|
||||
exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -92,7 +92,7 @@ exports[`change option 3`] = `
|
||||
|
||||
exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -116,7 +116,7 @@ exports[`columns-num prop 1`] = `
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -145,7 +145,7 @@ exports[`reset method 1`] = `
|
||||
|
||||
exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -175,7 +175,7 @@ exports[`reset method 2`] = `
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -205,7 +205,7 @@ exports[`watch areaList & code 1`] = `
|
||||
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -235,7 +235,7 @@ exports[`watch areaList & code 2`] = `
|
||||
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
|
||||
@ -99,6 +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` | - |
|
||||
|
||||
### CouponList Events
|
||||
|
||||
|
||||
@ -101,6 +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` | - |
|
||||
|
||||
### CouponList Events
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
:show-count="false"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
|
||||
@ -50,6 +50,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCount: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
default: '¥'
|
||||
@ -139,7 +143,7 @@ export default createComponent({
|
||||
genExchangeButton() {
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
plain
|
||||
type="danger"
|
||||
class={bem('exchange')}
|
||||
text={this.exchangeButtonText || t('exchange')}
|
||||
@ -153,10 +157,12 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
const { coupons, disabledCoupons } = this;
|
||||
const title = `${this.enabledTitle || t('enable')} (${coupons.length})`;
|
||||
const disabledTitle = `${this.disabledTitle || t('disabled')} (${
|
||||
disabledCoupons.length
|
||||
})`;
|
||||
|
||||
const count = this.showCount ? ` (${coupons.length})` : '';
|
||||
const title = (this.enabledTitle || t('enable')) + count;
|
||||
|
||||
const disabledCount = this.showCount ? ` (${disabledCoupons.length})` : '';
|
||||
const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
|
||||
|
||||
const ExchangeBar = this.showExchangeBar && (
|
||||
<Field
|
||||
@ -196,7 +202,12 @@ export default createComponent({
|
||||
<Tab title={disabledTitle}>
|
||||
<div class={bem('list')} style={this.listStyle}>
|
||||
{disabledCoupons.map(coupon => (
|
||||
<Coupon disabled key={coupon.id} coupon={coupon} currency={this.currency} />
|
||||
<Coupon
|
||||
disabled
|
||||
key={coupon.id}
|
||||
coupon={coupon}
|
||||
currency={this.currency}
|
||||
/>
|
||||
))}
|
||||
{!disabledCoupons.length && this.genEmpty()}
|
||||
</div>
|
||||
@ -206,7 +217,7 @@ export default createComponent({
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{ExchangeBar}
|
||||
<Tabs vModel={this.tab} class={bem('tab')} line-width={120}>
|
||||
<Tabs vModel={this.tab} class={bem('tab')} border={false}>
|
||||
{CouponTab}
|
||||
{DisabledCouponTab}
|
||||
</Tabs>
|
||||
|
||||
@ -7,11 +7,25 @@
|
||||
|
||||
&__field {
|
||||
padding: @coupon-list-field-padding;
|
||||
|
||||
.van-field__control {
|
||||
height: 34px;
|
||||
padding-left: @padding-sm;
|
||||
line-height: 34px;
|
||||
background: @gray-1;
|
||||
border-radius: 17px;
|
||||
|
||||
&::placeholder {
|
||||
color: @gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__exchange {
|
||||
height: @coupon-list-exchange-button-height;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @coupon-list-exchange-button-height - 2px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
||||
@ -5,15 +5,15 @@ exports[`empty-image prop 1`] = `
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,7 +29,7 @@ exports[`empty-image prop 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -54,15 +54,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (6)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (2)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,11 +73,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount"></h2>
|
||||
<p>无使用门槛</p>
|
||||
<p class="van-coupon__condition">无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name"></h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name"></p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,12 +89,12 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
|
||||
<p>无使用门槛</p>
|
||||
<p class="van-coupon__condition">无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner">
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
@ -102,11 +106,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount"><span>¥</span> 1</h2>
|
||||
<p>无使用门槛</p>
|
||||
<p class="van-coupon__condition">无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">description</p>
|
||||
@ -115,11 +123,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
|
||||
<p>无使用门槛</p>
|
||||
<p class="van-coupon__condition">无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">description</p>
|
||||
@ -128,11 +140,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount">8.8折</h2>
|
||||
<p>满0.5元可用</p>
|
||||
<p class="van-coupon__condition">满0.5元可用</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -140,11 +156,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount">9折</h2>
|
||||
<p>满0.5元可用</p>
|
||||
<p class="van-coupon__condition">满0.5元可用</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,7 +174,7 @@ exports[`render coupon list 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -163,11 +183,11 @@ exports[`render disabled coupon 1`] = `
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
|
||||
<p>无使用门槛</p>
|
||||
<p class="van-coupon__condition">无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2 class="van-coupon__name">name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
<p class="van-coupon__name">name</p>
|
||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">reason</p>
|
||||
@ -179,15 +199,15 @@ exports[`render empty coupon list 1`] = `
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,6 +227,6 @@ exports[`render empty coupon list 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
|
||||
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -34,7 +34,7 @@ export default createComponent({
|
||||
computed: {
|
||||
validPeriod() {
|
||||
const { startAt, endAt } = this.coupon;
|
||||
return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
|
||||
return `${getDate(startAt)} - ${getDate(endAt)}`;
|
||||
},
|
||||
|
||||
faceAmount() {
|
||||
@ -70,13 +70,13 @@ export default createComponent({
|
||||
<div class={bem('content')}>
|
||||
<div class={bem('head')}>
|
||||
<h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
|
||||
<p>{this.coupon.condition || this.conditionMessage}</p>
|
||||
<p class={bem('condition')}>{this.coupon.condition || this.conditionMessage}</p>
|
||||
</div>
|
||||
<div class={bem('body')}>
|
||||
<h2 class={bem('name')}>{coupon.name}</h2>
|
||||
<p>{this.validPeriod}</p>
|
||||
{this.chosen && (
|
||||
<Checkbox value={true} class={bem('corner')} checked-color={RED} />
|
||||
<p class={bem('name')}>{coupon.name}</p>
|
||||
<p class={bem('valid')}>{this.validPeriod}</p>
|
||||
{!this.disabled && (
|
||||
<Checkbox value={this.chosen} class={bem('corner')} size={18} checked-color={RED} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,45 +14,36 @@
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: @coupon-content-height;
|
||||
min-height: @coupon-content-height;
|
||||
padding: @coupon-content-padding;
|
||||
}
|
||||
|
||||
p,
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
h2 {
|
||||
height: 34px;
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @gray-6;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 16px;
|
||||
color: @gray-8;
|
||||
}
|
||||
|
||||
&__head {
|
||||
position: relative;
|
||||
min-width: @coupon-head-width;
|
||||
padding-right: @padding-xs;
|
||||
padding: 0 @padding-xs;
|
||||
color: @coupon-amount-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
&__amount,
|
||||
&__condition,
|
||||
&__name,
|
||||
&__valid {
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__amount {
|
||||
color: @coupon-amount-color;
|
||||
margin-bottom: 6px;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @coupon-amount-font-size;
|
||||
.ellipsis();
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: @coupon-currency-font-size;
|
||||
|
||||
&:not(:empty) {
|
||||
@ -61,6 +52,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__condition {
|
||||
font-size: @font-size-sm;
|
||||
line-height: 16px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
&__body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
@ -68,17 +65,26 @@
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
font-size: @coupon-name-font-size;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&__valid {
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&__corner {
|
||||
position: absolute;
|
||||
top: @padding-md;
|
||||
top: 0;
|
||||
right: @padding-md;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
padding: @coupon-description-padding;
|
||||
font-size: @font-size-sm;
|
||||
background-color: @coupon-description-background-color;
|
||||
border-top: 1px dashed @coupon-description-border-color;
|
||||
}
|
||||
@ -92,10 +98,8 @@
|
||||
height: @coupon-content-height - 10px;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
span {
|
||||
color: @coupon-disabled-text-color;
|
||||
.van-coupon__head {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -61,7 +61,7 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`time type 1`] = `
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -164,7 +164,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -242,7 +242,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -375,7 +375,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -33,7 +33,7 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`format initial value 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -57,7 +57,7 @@ exports[`format initial value 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
@ -88,7 +88,7 @@ exports[`formatter prop 1`] = `
|
||||
|
||||
exports[`max-hour & max-minute 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
|
||||
@ -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
|
||||
<van-icon name="chat" dot />
|
||||
<van-icon name="chat" info="9" />
|
||||
<van-icon name="chat" info="99+" />
|
||||
```
|
||||
|
||||
### Icon Color
|
||||
|
||||
Use `color` prop to set icon color
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
```
|
||||
|
||||
### Icon Size
|
||||
|
||||
Use `size` prop to set icon size
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
@ -34,6 +34,25 @@ Vue.use(Icon);
|
||||
<van-icon name="chat" info="99+" />
|
||||
```
|
||||
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon`的`color`属性用来设置图标的颜色
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
```
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
```
|
||||
|
||||
### 使用本地字体文件
|
||||
|
||||
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`
|
||||
|
||||
@ -21,6 +21,49 @@
|
||||
<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>
|
||||
@ -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 = `<van-icon name="${icon}" />`;
|
||||
copy(icon, option = {}) {
|
||||
let tag = `<van-icon name="${icon}"`;
|
||||
if ('dot' in option) {
|
||||
tag = `${tag} ${option.dot ? 'dot' : ''}`;
|
||||
}
|
||||
if ('info' in option) {
|
||||
tag = `${tag} info="${option.info}"`;
|
||||
}
|
||||
if ('color' in option) {
|
||||
tag = `${tag} color="${option.color}"`;
|
||||
}
|
||||
if ('size' in option) {
|
||||
tag = `${tag} size="${option.size}"`;
|
||||
}
|
||||
tag = `${tag} />`;
|
||||
copyToClipboard(tag);
|
||||
|
||||
this.$notify({
|
||||
|
||||
@ -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}`
|
||||
|
||||
@ -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}`
|
||||
|
||||
@ -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}`
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -29,7 +29,6 @@ export default {
|
||||
label: '合計：'
|
||||
},
|
||||
vanCoupon: {
|
||||
valid: '有效期',
|
||||
unlimited: '無使用門檻',
|
||||
discount: (discount: number) => `${discount}折`,
|
||||
condition: (condition: number) => `滿${condition}元可用`
|
||||
|
||||
@ -29,7 +29,6 @@ export default {
|
||||
label: '合計：'
|
||||
},
|
||||
vanCoupon: {
|
||||
valid: '有效期限',
|
||||
unlimited: '無使用門檻',
|
||||
discount: (discount: number) => `${discount}折`,
|
||||
condition: (condition: number) => `滿${condition}元可用`
|
||||
|
||||
@ -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 <div class={['van-ellipsis', bem('title')]}>{this.title}</div>;
|
||||
}
|
||||
},
|
||||
|
||||
genToolbar() {
|
||||
if (this.showToolbar) {
|
||||
return (
|
||||
<div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
|
||||
{this.slots() || [
|
||||
<button
|
||||
type="button"
|
||||
class={bem('cancel')}
|
||||
onClick={this.onCancel}
|
||||
>
|
||||
{this.cancelButtonText || t('cancel')}
|
||||
</button>,
|
||||
this.genTitle(),
|
||||
<button
|
||||
type="button"
|
||||
class={bem('confirm')}
|
||||
onClick={this.onConfirm}
|
||||
>
|
||||
{this.confirmButtonText || t('confirm')}
|
||||
</button>
|
||||
]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
genColumns() {
|
||||
const columns = this.simple ? [this.columns] : this.columns;
|
||||
|
||||
return columns.map((item, index) => (
|
||||
<PickerColumn
|
||||
valueKey={this.valueKey}
|
||||
allowHtml={this.allowHtml}
|
||||
className={item.className}
|
||||
itemHeight={this.itemHeight}
|
||||
defaultIndex={item.defaultIndex || this.defaultIndex}
|
||||
swipeDuration={this.swipeDuration}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
initialOptions={this.simple ? item : item.values}
|
||||
onChange={() => {
|
||||
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 && (
|
||||
<div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
|
||||
{this.slots() || [
|
||||
<button class={bem('cancel')} onClick={this.onCancel}>
|
||||
{this.cancelButtonText || t('cancel')}
|
||||
</button>,
|
||||
this.slots('title') ||
|
||||
(this.title && (
|
||||
<div class={['van-ellipsis', bem('title')]}>{this.title}</div>
|
||||
)),
|
||||
<button class={bem('confirm')} onClick={this.onConfirm}>
|
||||
{this.confirmButtonText || t('confirm')}
|
||||
</button>
|
||||
]}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{this.toolbarPosition === 'top' ? Toolbar : h()}
|
||||
{this.toolbarPosition === 'top' ? this.genToolbar() : h()}
|
||||
{this.loading ? <Loading class={bem('loading')} /> : h()}
|
||||
{this.slots('columns-top')}
|
||||
<div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
|
||||
{columns.map((item, index) => (
|
||||
<PickerColumn
|
||||
valueKey={this.valueKey}
|
||||
allowHtml={this.allowHtml}
|
||||
className={item.className}
|
||||
itemHeight={this.itemHeight}
|
||||
defaultIndex={item.defaultIndex || this.defaultIndex}
|
||||
swipeDuration={this.swipeDuration}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
initialOptions={this.simple ? item : item.values}
|
||||
onChange={() => {
|
||||
this.onChange(index);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
class={bem('columns')}
|
||||
style={columnsStyle}
|
||||
onTouchmove={preventDefault}
|
||||
>
|
||||
{this.genColumns()}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
|
||||
<div
|
||||
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
|
||||
style={frameStyle}
|
||||
/>
|
||||
</div>
|
||||
{this.slots('columns-bottom')}
|
||||
{this.toolbarPosition === 'bottom' ? Toolbar : h()}
|
||||
{this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -42,8 +42,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -30,7 +30,7 @@ exports[`column watch default index 2`] = `
|
||||
|
||||
exports[`columns-top、columns-bottom prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
@ -57,7 +57,7 @@ exports[`not allow html 1`] = `
|
||||
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>Custom title<button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -75,6 +75,6 @@ exports[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -52,6 +52,31 @@ export default {
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
### Change Event
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="Title1" />
|
||||
<van-sidebar-item title="Title2" />
|
||||
<van-sidebar-item title="Title3" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
@ -58,6 +58,34 @@ export default {
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
|
||||
### Change 事件
|
||||
|
||||
设置`change`方法来监听切换导航项时的事件
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="标签名1" />
|
||||
<van-sidebar-item title="标签名2" />
|
||||
<van-sidebar-item title="标签名3" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
@ -27,6 +27,15 @@
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ $t('eventChange') }}</h3>
|
||||
<van-sidebar v-model="activeKey4" @change="onChange">
|
||||
<van-sidebar-item :title="$t('title') + 1" />
|
||||
<van-sidebar-item :title="$t('title') + 2" />
|
||||
<van-sidebar-item :title="$t('title') + 3" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -37,11 +46,15 @@ export default {
|
||||
'zh-CN': {
|
||||
title: '标签名',
|
||||
showInfo: '提示信息',
|
||||
disabled: '禁用选项'
|
||||
disabled: '禁用选项',
|
||||
eventChange: '切换事件',
|
||||
selectTip: '你切换到了'
|
||||
},
|
||||
'en-US': {
|
||||
showInfo: 'Show Info',
|
||||
disabled: 'Disabled'
|
||||
disabled: 'Disabled',
|
||||
eventChange: 'Change Event',
|
||||
selectTip: 'You select '
|
||||
}
|
||||
},
|
||||
|
||||
@ -49,8 +62,18 @@ export default {
|
||||
return {
|
||||
activeKey1: 0,
|
||||
activeKey2: 0,
|
||||
activeKey3: 0
|
||||
activeKey3: 0,
|
||||
activeKey4: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$notify({
|
||||
type: 'primary',
|
||||
message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -54,6 +54,24 @@ exports[`renders demo correctly 1`] = `
|
||||
</a></div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
|
||||
<div class="van-sidebar-item__text">标签名1
|
||||
<!---->
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item">
|
||||
<div class="van-sidebar-item__text">标签名2
|
||||
<!---->
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item">
|
||||
<div class="van-sidebar-item__text">标签名3
|
||||
<!---->
|
||||
</div>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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({
|
||||
<div class={bem()}>
|
||||
<button
|
||||
vShow={this.showMinus}
|
||||
type="button"
|
||||
style={this.buttonStyle}
|
||||
class={bem('minus', { disabled: this.minusDisabled })}
|
||||
{...createListeners('minus')}
|
||||
@ -273,6 +276,7 @@ export default createComponent({
|
||||
/>
|
||||
<button
|
||||
vShow={this.showPlus}
|
||||
type="button"
|
||||
style={this.buttonStyle}
|
||||
class={bem('plus', { disabled: this.plusDisabled })}
|
||||
{...createListeners('plus')}
|
||||
|
||||
@ -5,49 +5,49 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>基础用法</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>步长设置</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>限制输入范围</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>限制输入整数</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>禁用状态</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>固定小数位数</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>自定义大小</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button type="button" class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title"><span>异步变更</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
|
||||
exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
|
||||
exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
|
||||
|
||||
exports[`input-width prop 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
|
||||
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus" style="display: none;"></button></div>`;
|
||||
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -181,3 +181,11 @@ export default {
|
||||
|------|------|------|
|
||||
| default | 轮播内容 | - |
|
||||
| indicator | 自定义指示器 | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 滑动轮播时为什么触发了 click 事件？
|
||||
|
||||
这种情况通常是由于项目中引入了`fastclick`库导致的。`fastclick`的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
|
||||
|
||||
将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。
|
||||
|
||||
@ -112,6 +112,31 @@ export default {
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
|
||||
### Change Event
|
||||
|
||||
```html
|
||||
<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>
|
||||
<van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Route Mode
|
||||
|
||||
```html
|
||||
|
||||
@ -118,6 +118,30 @@ export default {
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### Change 事件
|
||||
|
||||
```html
|
||||
<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>
|
||||
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 路由模式
|
||||
|
||||
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
|
||||
|
||||
@ -48,6 +48,15 @@
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('switchEvent')">
|
||||
<van-tabbar v-model="active5" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -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}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签1</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签2</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签3</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -144,12 +144,13 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onAfterRead(files, oversize) {
|
||||
this.resetInput();
|
||||
|
||||
if (oversize) {
|
||||
this.$emit('oversize', files, this.getDetail());
|
||||
return;
|
||||
}
|
||||
|
||||
this.resetInput();
|
||||
this.$emit('input', [...this.fileList, ...toArray(files)]);
|
||||
|
||||
if (this.afterRead) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user