blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] more component use bem mixin (#932)

Browse Source
This commit is contained in:
neverland 2018-04-24 23:33:51 +08:00 committed by GitHub
parent 91163b2f14
commit c012a65ba3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 110 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/password-input/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-password-input"> <div :class="b()">
<ul class="van-password-input__security van-hairline--surround" @touchstart.stop="$emit('focus')"> <ul :class="b('security')" class="van-hairline--surround" @touchstart.stop="$emit('focus')">
<li v-for="visibility in points" class="van-hairline"> <li v-for="visibility in points" class="van-hairline">
<i :style="`visibility: ${visibility}`" /> <i :style="`visibility: ${visibility}`" />
</li> </li>
@ -8,7 +8,7 @@
<div <div
v-if="errorInfo || info" v-if="errorInfo || info"
v-text="errorInfo || info" v-text="errorInfo || info"
:class="errorInfo ? 'van-password-input__error-info' : 'van-password-input__info'" :class="b(errorInfo ? 'error-info' : 'info')"
/> />
</div> </div>
</template> </template>

11
packages/picker/PickerColumn.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div <div
class="van-picker-column" :class="[b(), className]"
:class="className"
:style="columnStyle" :style="columnStyle"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove.prevent="onTouchMove" @touchmove.prevent="onTouchMove"
@ -14,10 +13,10 @@
v-for="(option, index) in options" v-for="(option, index) in options"
v-text="getOptionText(option)" v-text="getOptionText(option)"
class="van-ellipsis" class="van-ellipsis"
:class="{ :class="b('item', {
'van-picker-column--disabled': isDisabled(option), disabled: isDisabled(option),
'van-picker-column--selected': index === currentIndex selected: index === currentIndex
}" })"
@click="setIndex(index, true)" @click="setIndex(index, true)"
/> />
</ul> </ul>

16
packages/picker/index.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="van-picker"> <div :class="b()">
<div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar"> <div :class="b('toolbar')" class="van-hairline--top-bottom" v-if="showToolbar">
<slot> <slot>
<div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div> <div :class="b('cancel')" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
<div class="van-picker__title van-ellipsis" v-if="title" v-text="title" /> <div :class="b('title')" class="van-ellipsis" v-if="title" v-text="title" />
<div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div> <div :class="b('confirm')" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
</slot> </slot>
</div> </div>
<div v-if="loading" class="van-picker__loading"> <div v-if="loading" :class="b('loading')">
<loading /> <loading />
</div> </div>
<div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent> <div :class="b('columns')" :style="columnsStyle" @touchmove.prevent>
<picker-column <picker-column
v-for="(item, index) in currentColumns" v-for="(item, index) in currentColumns"
:key="index" :key="index"
@ -22,7 +22,7 @@
:visible-item-count="visibleItemCount" :visible-item-count="visibleItemCount"
@change="onChange(index)" @change="onChange(index)"
/> />
<div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" /> <div :class="b('frame')" class="van-hairline--top-bottom" :style="frameStyle" />
</div> </div>
</div> </div>
</template> </template>

12
packages/popup/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition :name="currentTransition"> <transition :name="currentTransition">
<div v-show="value" class="van-popup" :class="{ [`van-popup--${position}`]: position }"> <div v-show="value" :class="b({ [position]: position })">
<slot /> <slot />
</div> </div>
</transition> </transition>
@ -31,12 +31,10 @@ export default create({
} }
}, },
data() { computed: {
const transition = this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`); currentTransition() {
return { return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
currentValue: false, }
currentTransition: transition
};
} }
}); });
</script> </script>

6
packages/progress/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="van-progress"> <div :class="b()">
<span class="van-progress__portion" :style="portionStyle" /> <span :class="b('portion')" :style="portionStyle" />
<span class="van-progress__pivot" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span> <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
</div> </div>
</template> </template>

20
packages/pull-refresh/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<div class="van-pull-refresh"> <div :class="b()">
<div <div
class="van-pull-refresh__track" :class="b('track')"
:style="style" :style="style"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove="onTouchMove" @touchmove="onTouchMove"
@touchend="onTouchEnd" @touchend="onTouchEnd"
@touchcancel="onTouchEnd" @touchcancel="onTouchEnd"
> >
<div class="van-pull-refresh__head"> <div :class="b('head')">
<slot name="normal" v-if="status === 'normal'"/> <slot v-if="status === 'normal'" name="normal" />
<slot name="pulling" v-if="status === 'pulling'"> <slot v-if="status === 'pulling'" name="pulling">
<span class="van-pull-refresh__text">{{ pullingText || $t('pulling') }}</span> <span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
</slot> </slot>
<slot name="loosing" v-if="status === 'loosing'"> <slot v-if="status === 'loosing'" name="loosing">
<span class="van-pull-refresh__text">{{ loosingText || $t('loosing') }}</span> <span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
</slot> </slot>
<slot name="loading" v-if="status === 'loading'"> <slot v-if="status === 'loading'" name="loading">
<div class="van-pull-refresh__loading"> <div :class="b('loading')">
<loading /> <loading />
<span>{{ loadingText || $t('loadingTip') }}</span> <span>{{ loadingText || $t('loadingTip') }}</span>
</div> </div>

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

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

10
packages/radio/index.vue
View File

@ -1,20 +1,16 @@
<template> <template>
<div <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
class="van-radio"
:class="{ 'van-radio--disabled': isDisabled }"
@click="$emit('click')"
>
<span class="van-radio__input"> <span class="van-radio__input">
<input <input
:value="name" :value="name"
v-model="currentValue" v-model="currentValue"
type="radio" type="radio"
class="van-radio__control" :class="b('control')"
:disabled="isDisabled" :disabled="isDisabled"
> >
<icon :name="currentValue === name ? 'checked' : 'check'" /> <icon :name="currentValue === name ? 'checked' : 'check'" />
</span> </span>
<span v-if="$slots.default" class="van-radio__label" @click="onClickLabel"> <span v-if="$slots.default" :class="b('label')" @click="onClickLabel">
<slot /> <slot />
</span> </span>
</div> </div>

2
packages/row/index.vue
View File

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

14
packages/search/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<div <div
class="van-search" :class="b({ 'show-action': showAction })"
:class="{ 'van-search--show-action': showAction }" :style="{ 'background-color': background }"
:style="{ 'background-color': background }"> >
<div class="van-search__input-wrap" v-clickoutside="onClickoutside"> <div :class="b('wrap')" v-clickoutside="onClickoutside">
<icon name="search" /> <icon name="search" />
<input <input
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
v-refocus="focusStatus" v-refocus="focusStatus"
type="search" type="search"
class="van-search__input" :class="b('input')"
:value="value" :value="value"
> >
<icon name="clear" v-show="isFocus && value" @click="onClean" /> <icon name="clear" v-show="isFocus && value" @click="onClean" />
</div> </div>
<div class="van-search__action" v-if="showAction"> <div v-if="showAction" :class="b('action')" >
<slot name="action"> <slot name="action">
<div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div> <div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
</slot> </slot>
</div> </div>
</div> </div>

14
packages/step/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="van-step van-hairline" :class="[`van-step--${$parent.direction}`, { [`van-step--${status}`]: status }]"> <div class="van-hairline" :class="b([$parent.direction, { [status]: status }])">
<div class="van-step__circle-container"> <div :class="b('title')" :style="titleStyle">
<i class="van-step__circle" v-if="status !== 'process'" />
<icon v-else name="checked" :style="{ color: $parent.activeColor }" />
</div>
<div class="van-step__title" :style="titleStyle">
<slot /> <slot />
</div> </div>
<div class="van-step__line" /> <div :class="b('circle-container')">
<i :class="b('circle')" v-if="status !== 'process'" />
<icon v-else name="checked" :style="{ color: $parent.activeColor }" />
</div>
<div :class="b('line')" />
</div> </div>
</template> </template>

16
packages/stepper/index.vue
View File

@ -1,20 +1,18 @@
<template> <template>
<div class="van-stepper" :class="{ 'van-stepper--disabled': disabled }"> <div :class="b({ disabled })">
<button <button
class="van-stepper__stepper van-stepper__minus" :class="b('minus', { disabled: minusDisabled })"
:class="{ 'van-stepper__minus--disabled': isMinusDisabled }"
@click="onChange('minus')" @click="onChange('minus')"
/> />
<input <input
type="number" type="number"
class="van-stepper__input" :class="b('input')"
:value="currentValue" :value="currentValue"
:disabled="disabled || disableInput" :disabled="disabled || disableInput"
@input="onInput" @input="onInput"
> >
<button <button
class="van-stepper__stepper van-stepper__plus" :class="b('plus', { disabled: plusDisabled })"
:class="{ 'van-stepper__plus--disabled': isPlusDisabled }"
@click="onChange('plus')" @click="onChange('plus')"
/> />
</div> </div>
@ -62,14 +60,14 @@ export default create({
}, },
computed: { computed: {
isMinusDisabled() { minusDisabled() {
const min = +this.min; const min = +this.min;
const step = +this.step; const step = +this.step;
const currentValue = +this.currentValue; const currentValue = +this.currentValue;
return min === currentValue || (currentValue - step) < min || this.disabled; return min === currentValue || (currentValue - step) < min || this.disabled;
}, },
isPlusDisabled() { plusDisabled() {
const max = +this.max; const max = +this.max;
const step = +this.step; const step = +this.step;
const currentValue = +this.currentValue; const currentValue = +this.currentValue;
@ -108,7 +106,7 @@ export default create({
}, },
onChange(type) { onChange(type) {
if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) { if ((this.minusDisabled && type === 'minus') || (this.plusDisabled && type === 'plus')) {
this.$emit('overlimit', type); this.$emit('overlimit', type);
return; return;
} }

14
packages/steps/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="van-steps" :class="`van-steps--${direction}`"> <div :class="b([direction])">
<div class="van-steps__status" v-if="title || description"> <div v-if="title || description" :class="b('status')">
<div class="van-steps__icon" v-if="icon || $slots.icon"> <div v-if="icon || $slots.icon" :class="b('icon')">
<slot name="icon"> <slot name="icon">
<icon :name="icon" :class="iconClass" /> <icon :name="icon" :class="iconClass" />
</slot> </slot>
</div> </div>
<div class="van-steps__message"> <div :class="b('message')">
<div class="van-steps__title" v-text="title" /> <div :class="b('title')" v-text="title" />
<div class="van-steps__desc van-ellipsis" v-text="description" /> <div :class="b('desc')" class="van-ellipsis" v-text="description" />
</div> </div>
<slot name="message-extra" /> <slot name="message-extra" />
</div> </div>
<div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }"> <div :class="b('items', { alone: !title && !description })">
<slot /> <slot />
</div> </div>
</div> </div>

12
packages/submit-bar/index.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="van-submit-bar"> <div :class="b()">
<div class="van-submit-bar__tip" v-show="tip || $slots.tip"> <div :class="b('tip')" v-show="tip || $slots.tip">
{{ tip }}<slot name="tip" /> {{ tip }}<slot name="tip" />
</div> </div>
<div class="van-submit-bar__bar"> <div :class="b('bar')">
<slot /> <slot />
<div class="van-submit-bar__price"> <div :class="b('price')">
<template v-if="hasPrice"> <template v-if="hasPrice">
<span>{{ label || $t('label') }}</span> <span>{{ label || $t('label') }}</span>
<span class="van-submit-bar__price-interger">{{ currency }}{{ priceInterger }}.</span> <span :class="b('price-interger')">{{ currency }}{{ priceInterger }}.</span>
<span class="van-submit-bar__price-decimal">{{ priceDecimal }}</span> <span :class="b('price-decimal')">{{ priceDecimal }}</span>
</template> </template>
</div> </div>
<van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit"> <van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit">

2
packages/swipe-item/index.vue
View File

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

13
packages/swipe/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="van-swipe"> <div :class="b()">
<div <div
v-if="count > 1" v-if="count > 1"
:style="trackStyle" :style="trackStyle"
class="van-swipe__track" :class="b('track')"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove="onTouchMove" @touchmove="onTouchMove"
@touchend="onTouchEnd" @touchend="onTouchEnd"
@ -12,11 +12,14 @@
> >
<slot /> <slot />
</div> </div>
<div v-else class="van-swipe__track"> <div v-else :class="b('track')">
<slot /> <slot />
</div> </div>
<div class="van-swipe__indicators" v-if="showIndicators && count > 1"> <div
<i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" /> v-if="showIndicators && count > 1"
:class="b('indicators')"
>
<i v-for="index in count" :class="b('indicator', { active: index - 1 === activeIndicator })" />
</div> </div>
</div> </div>
</template> </template>

8
packages/vant-css/src/picker.css
View File

@ -65,17 +65,17 @@
font-size: 17px; font-size: 17px;
text-align: center; text-align: center;
li { &__item {
padding: 0 5px; padding: 0 5px;
color: $gray-darker; color: $gray-darker;
}
li&--selected { &--selected {
color: $black; color: $black;
} }
li&--disabled { &--disabled {
opacity: .3; opacity: .3;
} }
} }
} }
}

4
packages/vant-css/src/search.css
View File

@ -10,7 +10,7 @@
padding-right: 0; padding-right: 0;
} }
&__input-wrap { &__wrap {
position: relative; position: relative;
flex: 1; flex: 1;
height: 34px; height: 34px;
@ -49,7 +49,7 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
&__action-text { &__cancel {
padding: 0 10px; padding: 0 10px;
color: $green; color: $green;

6
packages/vant-css/src/stepper.css
View File

@ -11,7 +11,8 @@
} }
} }
&__stepper { &__minus,
&__plus {
width: 40px; width: 40px;
height: 30px; height: 30px;
box-sizing: border-box; box-sizing: border-box;
@ -42,10 +43,7 @@
bottom: 0; bottom: 0;
background-color: #6c6c6c; background-color: #6c6c6c;
} }
}
&__minus,
&__plus {
&:active { &:active {
background-color: $active-color; background-color: $active-color;
} }

7
packages/vant-css/src/swipe.css
View File

@ -22,23 +22,22 @@ $van-swipe-indicator: 6px;
position: absolute; position: absolute;
height: $van-swipe-indicator; height: $van-swipe-indicator;
transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
}
> i { &__indicator {
border-radius: 100%; border-radius: 100%;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
background-color: $gray-dark; background-color: $gray-dark;
width: $van-swipe-indicator; width: $van-swipe-indicator;
height: $van-swipe-indicator; height: $van-swipe-indicator;
&:not(:last-child) { &:not(:last-child) {
margin-right: $van-swipe-indicator; margin-right: $van-swipe-indicator;
} }
}
.van-swipe__indicator {
&--active { &--active {
background-color: $orange; background-color: $orange;
} }
} }
} }
}

2
test/specs/picker.spec.js
View File

@ -260,7 +260,7 @@ describe('PickerColumn', () => {
} }
}); });
expect(wrapper.find('.van-picker-column--disabled').length).to.equal(1); expect(wrapper.find('.van-picker-column__item--disabled').length).to.equal(1);
expect(wrapper.vm.currentIndex).to.equal(undefined); expect(wrapper.vm.currentIndex).to.equal(undefined);
}); });

2
test/specs/popup.spec.js
View File

@ -84,7 +84,7 @@ describe('Popup', () => {
modal.click(); modal.click();
setTimeout(() => { setTimeout(() => {
expect(wrapper.data().currentValue).to.be.false; expect(wrapper.vm.value).to.be.false;
done(); done();
}, 300); }, 300);
}, 300); }, 300);

2
test/specs/search.spec.js
View File

@ -87,7 +87,7 @@ describe('Search', () => {
const eventStub = sinon.stub(wrapper.vm, '$emit'); const eventStub = sinon.stub(wrapper.vm, '$emit');
const cancelBtn = wrapper.find('.van-search__action-text')[0]; const cancelBtn = wrapper.find('.van-search__cancel')[0];
cancelBtn.trigger('click'); cancelBtn.trigger('click');
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {