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] use bem mixin (#934)

Browse Source
This commit is contained in:
neverland 2018-04-25 11:50:10 +08:00 committed by GitHub
parent c012a65ba3
commit 8e911c75f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 107 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/demos/views/sku.vue
View File

@ -61,7 +61,7 @@
> >
<template slot="sku-header-price" slot-scope="props"> <template slot="sku-header-price" slot-scope="props">
<div class="van-sku__goods-price"> <div class="van-sku__goods-price">
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!! <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<template slot="sku-actions" slot-scope="props"> <template slot="sku-actions" slot-scope="props">

2
docs/markdown/en-US/sku.md
View File

@ -67,7 +67,7 @@ Vue.use(Sku);
<!-- custom sku-header-price --> <!-- custom sku-header-price -->
<template slot="sku-header-price" slot-scope="props"> <template slot="sku-header-price" slot-scope="props">
<div class="van-sku__goods-price"> <div class="van-sku__goods-price">
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!! <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- custom sku actions --> <!-- custom sku actions -->

2
docs/markdown/zh-CN/sku.md
View File

@ -67,7 +67,7 @@ Vue.use(Sku);
<!-- 自定义 sku-header-price --> <!-- 自定义 sku-header-price -->
<template slot="sku-header-price" slot-scope="props"> <template slot="sku-header-price" slot-scope="props">
<div class="van-sku__goods-price"> <div class="van-sku__goods-price">
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!! <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- 自定义 sku actions --> <!-- 自定义 sku actions -->

6
packages/checkbox/index.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="van-checkbox"> <div :class="b()">
<icon <icon
name="success" name="success"
class="van-checkbox__icon"
:class="[ :class="[
b('icon'),
`van-checkbox--${shape}`, { `van-checkbox--${shape}`, {
'van-checkbox--disabled': isDisabled, 'van-checkbox--disabled': isDisabled,
'van-checkbox--checked': isChecked 'van-checkbox--checked': isChecked
}]" }]"
@click="onClick" @click="onClick"
/> />
<span v-if="$slots.default" class="van-checkbox__label" @click="onClick('label')"> <span v-if="$slots.default" :class="b('label')" @click="onClick('label')">
<slot /> <slot />
</span> </span>
</div> </div>

2
packages/circle/index.vue
View File

@ -5,7 +5,7 @@
<path :class="b('layer')" :style="layerStyle" :d="path" /> <path :class="b('layer')" :style="layerStyle" :d="path" />
</svg> </svg>
<slot> <slot>
<div :class="b('text')" class="van-circle__text">{{ text }}</div> <div :class="b('text')">{{ text }}</div>
</slot> </slot>
</div> </div>
</template> </template>

16
packages/pagination/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<ul class="van-pagination" :class="{ 'van-pagination-simple': !isMultiMode }"> <ul :class="b({ simple: !isMultiMode })">
<li <li
class="van-pagination__item van-pagination__prev van-hairline" class="van-hairline"
:class="{ 'van-pagination--disabled': value === 1 }" :class="[b('item', { disabled: value === 1 }), b('prev')]"
@click="selectPage(value - 1)" @click="selectPage(value - 1)"
> >
{{ prevText || $t('prev') }} {{ prevText || $t('prev') }}
@ -10,18 +10,18 @@
<li <li
v-if="isMultiMode" v-if="isMultiMode"
v-for="(page, index) in pages" v-for="(page, index) in pages"
class="van-pagination__item van-pagination__page van-hairline" class="van-hairline"
:class="{ 'van-pagination--active': page.active }" :class="[b('item', { active: page.active }), b('page')]"
@click="selectPage(page.number)" @click="selectPage(page.number)"
> >
{{ page.text }} {{ page.text }}
</li> </li>
<li v-if="!isMultiMode" class="van-pagination__page-desc"> <li v-if="!isMultiMode" :class="b('page-desc')">
<slot name="pageDesc">{{ pageDesc }}</slot> <slot name="pageDesc">{{ pageDesc }}</slot>
</li> </li>
<li <li
class="van-pagination__item van-pagination__next van-hairline" class="van-hairline"
:class="{ 'van-pagination--disabled': value === computedPageCount }" :class="[b('item', { disabled: value === computedPageCount }), b('next')]"
@click="selectPage(value + 1)" @click="selectPage(value + 1)"
> >
{{ nextText || $t('next') }} {{ nextText || $t('next') }}

2
packages/radio/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="b({ disabled: isDisabled })" @click="$emit('click')"> <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
<span class="van-radio__input"> <span :class="b('input')">
<input <input
:value="name" :value="name"
v-model="currentValue" v-model="currentValue"

2
packages/sku/components/SkuActions.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-sku-actions"> <div :class="b()">
<van-button <van-button
v-if="showAddCartBtn" v-if="showAddCartBtn"
bottom-action bottom-action

6
packages/sku/components/SkuHeader.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="van-sku-header van-hairline--bottom"> <div :class="b()" class="van-hairline--bottom">
<div class="van-sku-header__img-wrap"> <div :class="b('img-wrap')">
<img :src="goodsImg" > <img :src="goodsImg" >
</div> </div>
<div class="van-sku-header__goods-info"> <div :class="b('goods-info')">
<div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div> <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
<!-- price display area --> <!-- price display area -->
<slot /> <slot />

13
packages/sku/components/SkuImgUploader.vue
View File

@ -1,14 +1,13 @@
<template> <template>
<div class="van-sku-img-uploader"> <div :class="b()">
<!-- 头部 --> <!-- 头部 -->
<van-uploader <van-uploader
:disabled="!!paddingImg" :disabled="!!paddingImg"
:after-read="afterReadFile" :after-read="afterReadFile"
:max-size="maxSize * 1024 * 1024" :max-size="maxSize * 1024 * 1024"
accept="image/*"
@oversize="$toast($t('maxSize', maxSize))" @oversize="$toast($t('maxSize', maxSize))"
> >
<div class="van-sku-img-uploader__header"> <div :class="b('header')">
<div v-if="paddingImg">{{ $t('uploading') }}</div> <div v-if="paddingImg">{{ $t('uploading') }}</div>
<template v-else> <template v-else>
<icon name="photograph" /> <icon name="photograph" />
@ -23,15 +22,15 @@
<!-- 已有的图片,图片右上角显示删除按钮 --> <!-- 已有的图片,图片右上角显示删除按钮 -->
<div <div
v-for="(img, index) in imgList" v-for="(img, index) in imgList"
class="van-sku-img-uploader__img" :class="b('img')"
> >
<img :src="img"> <img :src="img">
<icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" /> <icon name="clear" :class="b('delete')" @click="$emit('input', '')" />
</div> </div>
<!-- 正在上传的图片,有上传等待提示 --> <!-- 正在上传的图片,有上传等待提示 -->
<div v-if="paddingImg" class="van-sku-img-uploader__img"> <div v-if="paddingImg" :class="b('img')">
<img :src="paddingImg"> <img :src="paddingImg">
<loading class="van-sku-img-uploader__uploading" type="spinner" color="black" /> <loading :class="b('uploading')" type="spinner" color="black" />
</div> </div>
</div> </div>
</div> </div>

4
packages/sku/components/SkuMessages.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<cell-group class="van-sku-messages"> <cell-group :class="b()">
<template v-for="(message, index) in messages"> <template v-for="(message, index) in messages">
<cell <cell
v-if="message.type === 'image'" v-if="message.type === 'image'"
class="van-sku-messages__image-cell" :class="b('image-cell')"
:label="$t('onePic')" :label="$t('onePic')"
:key="`${goodsId}-${index}`" :key="`${goodsId}-${index}`"
:required="message.required == '1'" :required="message.required == '1'"

4
packages/sku/components/SkuRow.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-sku-row"> <div :class="b()">
<div class="van-sku-row__title">{{ skuRow.k }}：</div> <div :class="b('title')">{{ skuRow.k }}：</div>
<slot /> <slot />
</div> </div>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <template>
<cell center :title="title" :border="border" class="van-switch-cell"> <cell center :title="title" :border="border" :class="b()">
<van-switch v-bind="$props" @input="$emit('input', $event)" /> <van-switch v-bind="$props" @input="$emit('input', $event)" />
</cell> </cell>
</template> </template>

13
packages/switch/index.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div <div
class="van-switch" :class="b({
:class="[{ on: value,
'van-switch--on': value, disabled
'van-switch--disabled': disabled })"
}]"
:style="style" :style="style"
@click="onClick" @click="onClick"
> >
<div class="van-switch__node"> <div :class="b('node')">
<loading v-if="loading" class="van-switch__loading" /> <loading v-if="loading" :class="b('loading')" />
</div> </div>
</div> </div>
</template> </template>

2
packages/tab/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parent.curActive }"> <div :class="b('pane', { select: index === parent.curActive })">
<slot /> <slot />
</div> </div>
</template> </template>

6
packages/tabbar-item/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick"> <div :class="b({ active })" @click="onClick">
<div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }"> <div :class="b('icon', { dot })">
<slot name="icon" :active="active"> <slot name="icon" :active="active">
<icon v-if="icon" :name="icon" /> <icon v-if="icon" :name="icon" />
</slot> </slot>
<div v-if="isDef(info)" class="van-icon__info">{{ info }}</div> <div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
</div> </div>
<div class="van-tabbar-item__text"> <div :class="b('text')">
<slot :active="active"/> <slot :active="active"/>
</div> </div>
</div> </div>

2
packages/tabbar/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-tabbar van-hairline--top-bottom" :class="{ 'van-tabbar--fixed': fixed }"> <div class="van-hairline--top-bottom" :class="b({ fixed })">
<slot /> <slot />
</div> </div>
</template> </template>

17
packages/tabs/index.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="van-tabs" :class="`van-tabs--${type}`"> <div :class="b([type])">
<div <div
ref="wrap" ref="wrap"
class="van-tabs__wrap" :class="[
:class="[`van-tabs__wrap--${position}`, { b('wrap', [position, { scrollable }]),
'van-tabs--scrollable': scrollable, { 'van-hairline--top-bottom': type === 'line' }
'van-hairline--top-bottom': type === 'line' ]"
}]"
> >
<div class="van-tabs__nav" :class="`van-tabs__nav--${type}`" ref="nav"> <div :class="b('nav', [type])" ref="nav">
<div v-if="type === 'line'" class="van-tabs__nav-bar" :style="navBarStyle" /> <div v-if="type === 'line'" :class="b('nav-bar')" :style="navBarStyle" />
<div <div
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
ref="tabs" ref="tabs"
@ -25,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="van-tabs__content" ref="content"> <div :class="b('content')" ref="content">
<slot /> <slot />
</div> </div>
</div> </div>

12
packages/tag/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<span <span
class="van-tag van-hairline--surround" class="van-hairline--surround"
:class="{ :class="b({
[`van-tag--${type}`]: type, mark,
'van-tag--plain': plain, plain,
'van-tag--mark': mark [type]: type
}" })"
> >
<slot /> <slot />
</span> </span>

6
packages/toast/toast.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="van-fade"> <transition name="van-fade">
<div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]" v-show="value"> <div v-show="value" :class="b([displayStyle, position])">
<!-- text only --> <!-- text only -->
<div v-if="displayStyle === 'text'">{{ message }}</div> <div v-if="displayStyle === 'text'">{{ message }}</div>
<div v-if="displayStyle === 'html'" v-html="message" /> <div v-if="displayStyle === 'html'" v-html="message" />
@ -8,8 +8,8 @@
<!-- with icon --> <!-- with icon -->
<template v-if="displayStyle === 'default'"> <template v-if="displayStyle === 'default'">
<loading v-if="type === 'loading'" color="white" /> <loading v-if="type === 'loading'" color="white" />
<icon v-else class="van-toast__icon" :name="type" /> <icon v-else :class="b('icon')" :name="type" />
<div v-if="hasMessage" class="van-toast__text">{{ message }}</div> <div v-if="hasMessage" :class="b('text')">{{ message }}</div>
</template> </template>
</div> </div>
</transition> </transition>

16
packages/tree-select/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<div class="van-tree-select" :style="{ height: mainHeight + 'px' }"> <div :class="b()" :style="{ height: mainHeight + 'px' }">
<div class="van-tree-select__nav"> <div :class="b('nav')">
<div <div
v-for="(item, index) in items" v-for="(item, index) in items"
class="van-tree-select__nitem van-ellipsis" class="van-ellipsis"
:class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }" :class="b('nitem', { active: mainActiveIndex === index })"
@click="$emit('navclick', index)"> @click="$emit('navclick', index)">
{{ item.text }} {{ item.text }}
</div> </div>
</div> </div>
<div class="van-tree-select__content" :style="{ height: itemHeight + 'px' }"> <div :class="b('content')" :style="{ height: itemHeight + 'px' }">
<div <div
v-for="item in subItems" v-for="item in subItems"
:key="item.id" :key="item.id"
class="van-tree-select__item van-ellipsis" class="van-ellipsis"
:class="{ 'van-tree-select__item--active': activeId === item.id }" :class="b('item', { active: activeId === item.id })"
@click="onItemSelect(item)"> @click="onItemSelect(item)">
{{ item.text }} {{ item.text }}
<icon <icon
v-if="activeId === item.id" v-if="activeId === item.id"
name="success" name="success"
class="van-tree-select__selected" :class="b('selected')"
/> />
</div> </div>
</div> </div>

50
packages/vant-css/src/pagination.css
View File

@ -28,31 +28,27 @@
&:last-child::after { &:last-child::after {
border-right-width: 1px; border-right-width: 1px;
} }
}
&__prev, &--disabled,
&__next { &--disabled:active {
&.van-pagination__item {
padding: 0 5px;
}
}
&__page {
flex-grow: 0;
&.van-pagination--active {
background-color: $blue;
color: $white;
}
}
&--disabled {
&.van-pagination__item {
background-color: $background-color; background-color: $background-color;
color: $gray-darker; color: $gray-darker;
opacity: 0.6; opacity: 0.6;
} }
&--active {
color: $white;
background-color: $blue;
}
}
&__prev,
&__next {
padding: 0 5px;
}
&__page {
flex-grow: 0;
} }
&__page-desc { &__page-desc {
@ -60,15 +56,13 @@
height: 40px; height: 40px;
color: $gray-darker; color: $gray-darker;
} }
}
.van-pagination-simple { &--simple {
.van-pagination__prev,
.van-pagination__prev, .van-pagination__next {
.van-pagination__next { &::after {
border-width: 1px;
&.van-pagination__item::after { }
border-width: 1px;
} }
} }
} }

32
packages/vant-css/src/tab.css
View File

@ -22,6 +22,22 @@ $van-tabs-card-height: 30px;
top: auto; top: auto;
bottom: 0; bottom: 0;
} }
&--scrollable {
.van-tab {
flex: 0 0 22%;
}
.van-tabs__nav {
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
}
} }
&__nav { &__nav {
@ -69,22 +85,6 @@ $van-tabs-card-height: 30px;
background-color: $red; background-color: $red;
} }
&--scrollable {
.van-tab {
flex: 0 0 22%;
}
.van-tabs__nav {
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
}
&--line { &--line {
padding-top: $van-tabs-line-height; padding-top: $van-tabs-line-height;

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

@ -31,7 +31,7 @@
display: block; display: block;
} }
&-dot { &--dot {
&::after { &::after {
top: 0; top: 0;
right: -8px; right: -8px;

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

@ -38,7 +38,7 @@ describe('Pagination', () => {
expect( expect(
wrapper wrapper
.find('.van-pagination__next')[0] .find('.van-pagination__next')[0]
.hasClass('van-pagination--disabled') .hasClass('van-pagination__item--disabled')
).to.be.true; ).to.be.true;
done(); done();
}); });