blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] component use bem mixin (#921)

Browse Source
This commit is contained in:
neverland 2018-04-24 11:53:06 +08:00 committed by GitHub
parent 86184e090e
commit b0f4096e88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 66 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/cell-swipe/index.vue
View File

@ -1,19 +1,23 @@
<template> <template>
<div <div
v-clickoutside:touchstart="onClick" v-clickoutside:touchstart="onClick"
class="van-cell-swipe" :class="b()"
@click="onClick('cell')" @click="onClick('cell')"
@touchstart="startDrag" @touchstart="startDrag"
@touchmove="onDrag" @touchmove="onDrag"
@touchend="endDrag" @touchend="endDrag"
@touchcancel="endDrag" @touchcancel="endDrag"
> >
<div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false"> <div
<div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth"> :class="b('wrapper')"
:style="wrapperStyle"
@transitionend="swipe = false"
>
<div v-if="leftWidth" :class="b('left')" @click.stop="onClick('left')">
<slot name="left" /> <slot name="left" />
</div> </div>
<slot /> <slot />
<div class="van-cell-swipe__right" @click.stop="onClick('right')" v-if="rightWidth"> <div v-if="rightWidth" :class="b('right')" @click.stop="onClick('right')">
<slot name="right" /> <slot name="right" />
</div> </div>
</div> </div>

2
packages/checkbox-group/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-checkbox-group"> <div :class="b()">
<slot /> <slot />
</div> </div>
</template> </template>

8
packages/circle/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="van-circle" :style="style"> <div :class="b()" :style="style">
<svg viewBox="0 0 1060 1060"> <svg viewBox="0 0 1060 1060">
<path class="van-circle__hover" :style="hoverStyle" :d="path" /> <path :class="b('hover')" :style="hoverStyle" :d="path" />
<path class="van-circle__layer" :style="layerStyle" :d="path" /> <path :class="b('layer')" :style="layerStyle" :d="path" />
</svg> </svg>
<slot> <slot>
<div class="van-circle__text">{{ text }}</div> <div :class="b('text')" class="van-circle__text">{{ text }}</div>
</slot> </slot>
</div> </div>
</template> </template>

13
packages/collapse-item/index.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div <div
class="van-collapse-item" :class="[
:class="{ b({ expanded }),
'van-hairline--top': index, { 'van-hairline--top': index }
'van-collapse-item--expanded': expanded ]"
}"
> >
<cell class="van-collapse-item__title" is-link @click="onClick"> <cell :class="b('title')" is-link @click="onClick">
<slot name="title">{{ title }}</slot> <slot name="title">{{ title }}</slot>
</cell> </cell>
<div class="van-collapse-item__content" v-show="expanded"> <div v-show="expanded" :class="b('content')">
<slot /> <slot />
</div> </div>
</div> </div>

2
packages/collapse/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-collapse van-hairline--top-bottom"> <div :class="b()" class="van-hairline--top-bottom">
<slot /> <slot />
</div> </div>
</template> </template>

14
packages/contact-card/index.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div class="van-contact-card" :class="[`van-contact-card--${type}`, { 'van-contact-card--uneditable': !editable }]" @click="onClick"> <div :class="b([type, { uneditable: !editable }])" @click="onClick">
<div class="van-contact-card__content"> <div :class="b('content')">
<template v-if="type === 'add'"> <template v-if="type === 'add'">
<icon class="van-contact-card__icon" name="add2" /> <icon :class="b('icon')" name="add2" />
<div class="van-contact-card__text">{{ addText || $t('addText') }}</div> <div :class="b('text')">{{ addText || $t('addText') }}</div>
</template> </template>
<template v-else-if="type === 'edit'"> <template v-else-if="type === 'edit'">
<icon class="van-contact-card__icon" name="contact" /> <icon :class="b('icon')" name="contact" />
<div class="van-contact-card__text"> <div :class="b('text')">
<div>{{ $t('contact') }}：{{ name }}</div> <div>{{ $t('contact') }}：{{ name }}</div>
<div>{{ $t('tel') }}：{{ tel }}</div> <div>{{ $t('tel') }}：{{ tel }}</div>
</div> </div>
</template> </template>
</div> </div>
<icon v-if="editable" class="van-contact-card__arrow" name="arrow" /> <icon v-if="editable" :class="b('arrow')" name="arrow" />
</div> </div>
</template> </template>

4
packages/contact-edit/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-contact-edit"> <div :class="b()">
<cell-group> <cell-group>
<field <field
v-model="data.name" v-model="data.name"
@ -18,7 +18,7 @@
@focus="onFocus('tel')" @focus="onFocus('tel')"
/> />
</cell-group> </cell-group>
<div class="van-contact-edit__buttons"> <div :class="b('buttons')">
<van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button> <van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
<van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button> <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
</div> </div>

11
packages/contact-list/index.vue
View File

@ -1,20 +1,21 @@
<template> <template>
<div class="van-contact-list"> <div :class="b()">
<radio-group :value="value" @input="$emit('input', $event)"> <radio-group :value="value" @input="$emit('input', $event)">
<cell-group> <cell-group>
<cell v-for="(item, index) in list" :key="item.id" is-link> <cell v-for="(item, index) in list" :key="item.id" is-link>
<radio :name="item.id" @click="$emit('select', item, index)"> <radio :name="item.id" @click="$emit('select', item, index)">
<p class="van-contact-list__text">{{ $t('contact') }}：{{ item.name }}</p> <p :class="b('text')">{{ $t('contact') }}：{{ item.name }}</p>
<p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p> <p :class="b('text')">{{ $t('tel') }}：{{ item.tel }}</p>
</radio> </radio>
<icon slot="right-icon" name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" /> <icon slot="right-icon" name="edit" :class="b('edit')" @click="$emit('edit', item, index)" />
</cell> </cell>
</cell-group> </cell-group>
</radio-group> </radio-group>
<cell <cell
icon="add" icon="add"
is-link is-link
class="van-contact-list__add van-hairline--top" :class="b('add')"
class="van-hairline--top"
:title="addText || $t('addText')" :title="addText || $t('addText')"
@click="$emit('add')" @click="$emit('add')"
/> />

2
packages/coupon-cell/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<cell-group class="van-coupon-cell"> <cell-group :class="b()">
<cell :title="title || $t('title')" :value="value" :is-link="editable" @click="$emit('click')" /> <cell :title="title || $t('title')" :value="value" :is-link="editable" @click="$emit('click')" />
</cell-group> </cell-group>
</template> </template>

17
packages/coupon-list/Item.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }"> <div :class="b({ disabled })">
<div class="van-coupon-item__head"> <div :class="b('head')">
<div class="van-coupon-item__lines" /> <div :class="b('lines')" />
<div class="van-coupon-item__gradient"> <div :class="b('gradient')">
<h2 v-html="faceAmount" /> <h2 v-html="faceAmount" />
<p>{{ conditionMessage }}</p> <p>{{ conditionMessage }}</p>
</div> </div>
</div> </div>
<div class="van-coupon-item__body"> <div :class="b('body')">
<h2>{{ data.name }}</h2> <h2>{{ data.name }}</h2>
<span>{{ validPeriod }}</span> <span>{{ validPeriod }}</span>
<p v-if="disabled && data.reason">{{ data.reason }}</p> <p v-if="disabled && data.reason">{{ data.reason }}</p>
<div class="van-coupon-item__corner" v-if="chosen"> <div v-if="chosen" :class="b('corner')" >
<icon name="success" /> <icon name="success" />
</div> </div>
</div> </div>
@ -34,6 +34,7 @@ export default create({
validPeriod() { validPeriod() {
return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`; return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
}, },
faceAmount() { faceAmount() {
return this.data.denominations !== 0 return this.data.denominations !== 0
? `<span>¥</span> ${this.formatAmount(this.data.denominations)}` ? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
@ -41,6 +42,7 @@ export default create({
? this.formatDiscount(this.data.discount) ? this.formatDiscount(this.data.discount)
: ''; : '';
}, },
conditionMessage() { conditionMessage() {
let condition = this.data.origin_condition; let condition = this.data.origin_condition;
condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2); condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
@ -53,12 +55,15 @@ export default create({
const date = new Date(timeStamp * 1000); const date = new Date(timeStamp * 1000);
return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`; return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
}, },
padZero(num) { padZero(num) {
return (num < 10 ? '0' : '') + num; return (num < 10 ? '0' : '') + num;
}, },
formatDiscount(discount) { formatDiscount(discount) {
return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`); return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`);
}, },
formatAmount(amount) { formatAmount(amount) {
return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2); return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
} }

16
packages/coupon-list/index.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div class="van-coupon-list"> <div :class="b()">
<cell-group class="van-coupon-list__top" v-if="showExchangeBar"> <cell-group v-if="showExchangeBar" :class="b('top')">
<field <field
class="van-coupon-list__filed van-hairline--surround" :class="b('field')"
class="van-hairline--surround"
v-model="currentCode" v-model="currentCode"
:placeholder="inputPlaceholder || $t('placeholder')" :placeholder="inputPlaceholder || $t('placeholder')"
:maxlength="20" :maxlength="20"
@ -10,14 +11,14 @@
<van-button <van-button
size="small" size="small"
type="danger" type="danger"
class="van-coupon-list__exchange" :class="b('exchange')"
:text="exchangeButtonText || $t('exchange')" :text="exchangeButtonText || $t('exchange')"
:loading="exchangeButtonLoading" :loading="exchangeButtonLoading"
:disabled="buttonDisabled" :disabled="buttonDisabled"
@click="onClickExchangeButton" @click="onClickExchangeButton"
/> />
</cell-group> </cell-group>
<div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list"> <div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
<coupon-item <coupon-item
ref="card" ref="card"
v-for="(item, index) in coupons" v-for="(item, index) in coupons"
@ -33,7 +34,7 @@
:key="item.id || item.name" :key="item.id || item.name"
:data="item" :data="item"
/> />
<div class="van-coupon-list__empty" v-if="!coupons.length && !disabledCoupons.length"> <div v-if="!coupons.length && !disabledCoupons.length" :class="b('empty')">
<img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" > <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
<p>{{ $t('empty') }}</p> <p>{{ $t('empty') }}</p>
</div> </div>
@ -41,7 +42,8 @@
<div <div
v-show="showCloseButton" v-show="showCloseButton"
v-text="closeButtonText || $t('close')" v-text="closeButtonText || $t('close')"
class="van-coupon-list__close van-hairline--top" :class="b('close')"
class="van-hairline--top"
@click="$emit('change', -1)" @click="$emit('change', -1)"
/> />
</div> </div>

15
packages/dialog/dialog.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<transition name="van-dialog-bounce"> <transition name="van-dialog-bounce">
<div class="van-dialog" v-show="value"> <div v-show="value" :class="b()">
<div class="van-dialog__header" v-if="title" v-text="title" /> <div v-if="title" v-text="title" :class="b('header')" />
<div class="van-dialog__content van-hairline"> <div :class="b('content')" class="van-hairline">
<slot> <slot>
<div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" /> <div v-if="message" v-html="message" :class="b('message', { withtitle: title })" />
</slot> </slot>
</div> </div>
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }"> <div :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
<van-button <van-button
v-show="showCancelButton" v-show="showCancelButton"
:loading="loading.cancel" :loading="loading.cancel"
size="large" size="large"
class="van-dialog__cancel" :class="b('cancel')"
@click="handleAction('cancel')" @click="handleAction('cancel')"
> >
{{ cancelButtonText || $t('cancel') }} {{ cancelButtonText || $t('cancel') }}
@ -21,8 +21,7 @@
v-show="showConfirmButton" v-show="showConfirmButton"
size="large" size="large"
:loading="loading.confirm" :loading="loading.confirm"
class="van-dialog__confirm" :class="[b('confirm'), { 'van-hairline--left': showCancelButton && showConfirmButton }]"
:class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
@click="handleAction('confirm')" @click="handleAction('confirm')"
> >
{{ confirmButtonText || $t('confirm') }} {{ confirmButtonText || $t('confirm') }}

4
packages/vant-css/src/coupon-list.css
View File

@ -17,7 +17,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
&__filed { &__field {
margin: 10px 0; margin: 10px 0;
padding: 4px 10px 4px 25px; padding: 4px 10px 4px 25px;
@ -77,7 +77,7 @@
} }
} }
&--with-exchange { &__list--with-exchange {
padding-top: 60px; padding-top: 60px;
} }

2
packages/vant-css/src/dialog.css
View File

@ -36,7 +36,7 @@
&__footer { &__footer {
overflow: hidden; overflow: hidden;
&.is-twobtn { &--buttons {
display: flex; display: flex;
.van-button { .van-button {