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>
<div
v-clickoutside:touchstart="onClick"
class="van-cell-swipe"
:class="b()"
@click="onClick('cell')"
@touchstart="startDrag"
@touchmove="onDrag"
@touchend="endDrag"
@touchcancel="endDrag"
>
<div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
<div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth">
<div
:class="b('wrapper')"
:style="wrapperStyle"
@transitionend="swipe = false"
>
<div v-if="leftWidth" :class="b('left')" @click.stop="onClick('left')">
<slot name="left" />
</div>
<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" />
</div>
</div>

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

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

8
packages/circle/index.vue
View File

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

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

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

2
packages/collapse/index.vue
View File

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

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

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

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

@ -1,5 +1,5 @@
<template>
<div class="van-contact-edit">
<div :class="b()">
<cell-group>
<field
v-model="data.name"
@ -18,7 +18,7 @@
@focus="onFocus('tel')"
/>
</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="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
</div>

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

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

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

@ -1,5 +1,5 @@
<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-group>
</template>

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

@ -1,17 +1,17 @@
<template>
<div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
<div class="van-coupon-item__head">
<div class="van-coupon-item__lines" />
<div class="van-coupon-item__gradient">
<div :class="b({ disabled })">
<div :class="b('head')">
<div :class="b('lines')" />
<div :class="b('gradient')">
<h2 v-html="faceAmount" />
<p>{{ conditionMessage }}</p>
</div>
</div>
<div class="van-coupon-item__body">
<div :class="b('body')">
<h2>{{ data.name }}</h2>
<span>{{ validPeriod }}</span>
<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" />
</div>
</div>
@ -34,6 +34,7 @@ export default create({
validPeriod() {
return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
},
faceAmount() {
return this.data.denominations !== 0
? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
@ -41,6 +42,7 @@ export default create({
? this.formatDiscount(this.data.discount)
: '';
},
conditionMessage() {
let condition = this.data.origin_condition;
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);
return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
},
padZero(num) {
return (num < 10 ? '0' : '') + num;
},
formatDiscount(discount) {
return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`);
},
formatAmount(amount) {
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>
<div class="van-coupon-list">
<cell-group class="van-coupon-list__top" v-if="showExchangeBar">
<div :class="b()">
<cell-group v-if="showExchangeBar" :class="b('top')">
<field
class="van-coupon-list__filed van-hairline--surround"
:class="b('field')"
class="van-hairline--surround"
v-model="currentCode"
:placeholder="inputPlaceholder || $t('placeholder')"
:maxlength="20"
@ -10,14 +11,14 @@
<van-button
size="small"
type="danger"
class="van-coupon-list__exchange"
:class="b('exchange')"
:text="exchangeButtonText || $t('exchange')"
:loading="exchangeButtonLoading"
:disabled="buttonDisabled"
@click="onClickExchangeButton"
/>
</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
ref="card"
v-for="(item, index) in coupons"
@ -33,7 +34,7 @@
:key="item.id || item.name"
: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" >
<p>{{ $t('empty') }}</p>
</div>
@ -41,7 +42,8 @@
<div
v-show="showCloseButton"
v-text="closeButtonText || $t('close')"
class="van-coupon-list__close van-hairline--top"
:class="b('close')"
class="van-hairline--top"
@click="$emit('change', -1)"
/>
</div>

15
packages/dialog/dialog.vue
View File

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

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

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

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

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