Merge pull request #128 from chenjiahan/dev

Fix: component style should not depend on reset.css
This commit is contained in:
neverland 2017-09-13 02:14:20 -05:00 committed by GitHub
commit d548e28dfb
19 changed files with 128 additions and 124 deletions

View File

@ -1,9 +1,8 @@
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const docConfig = require('../docs/src/doc.config');
@ -127,7 +126,6 @@ module.exports = {
minChunks: 2,
filename: isProduction ? 'vendor.[hash:8].js' : 'vendor.js'
}),
new OptimizeCssAssetsPlugin(),
new ExtractTextPlugin({
filename: isProduction ? '[name].[hash:8].css' : '[name].css',
allChunks: true

View File

@ -1,5 +1,3 @@
## Coupon 优惠券选择器
<script>
import { Toast } from 'packages';
@ -49,6 +47,7 @@ export default {
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
@ -59,6 +58,16 @@ export default {
}
</script>
<style>
.demo-coupon {
.van-popup {
height: 100%;
}
}
</style>
## Coupon 优惠券选择器
### 使用指南
``` javascript
import { CouponCell, CouponList } from 'vant';
@ -81,14 +90,15 @@ Vue.component(CouponList.name, CouponList);
></van-coupon-cell>
<!-- 优惠券列表 -->
<van-coupon-list
v-model="showList"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
></van-coupon-list>
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
></van-coupon-list>
</van-popup>
```
```javascript
@ -116,6 +126,7 @@ export default {
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {

View File

@ -12,6 +12,13 @@
.van-steps__message + p {
margin-bottom: 10px;
}
p,
h3 {
margin: 0;
font-size: inherit;
font-weight: normal;
}
}
</style>

View File

@ -29,33 +29,33 @@ export default {
</script>
<style>
.side-nav {
width: 100%;
box-sizing: border-box;
padding: 90px 15px 20px;
position: relative;
z-index: 1;
.side-nav {
width: 100%;
box-sizing: border-box;
padding: 40px 15px 20px;
position: relative;
z-index: 1;
.zanui-title,
.zanui-desc {
text-align: center;
font-weight: normal;
user-select: none;
}
.zanui-title {
padding-top: 40px;
height: 0;
overflow: hidden;
background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
background-size: 156px 40px;
margin-bottom: 10px;
}
.zanui-desc {
font-size: 14px;
color: #666;
margin-bottom: 50px;
}
.zanui-title,
.zanui-desc {
text-align: center;
font-weight: normal;
user-select: none;
}
.zanui-title {
padding-top: 40px;
height: 0;
overflow: hidden;
background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
background-size: 156px 40px;
margin-bottom: 10px;
}
.zanui-desc {
font-size: 14px;
color: #666;
margin-bottom: 50px;
}
}
</style>

View File

@ -8,11 +8,11 @@ module.exports = {
'微信小程序': 'https://github.com/youzan/zanui-weapp'
},
footer: {
copyright: `2012-${(new Date()).getFullYear()} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证浙B2-20140331 - 浙ICP备13037466号`,
github: 'https://github.com/youzan/vant',
nav: {
'有赞官网': 'https://www.youzan.com/',
'有赞云': 'http://www.youzanyun.com/zanui',
'加入我们': 'https://job.youzan.com/'
'加入我们': 'https://job.youzan.com/',
'意见反馈': 'https://github.com/youzan/vant/issues'
}
},
nav: [

View File

@ -95,7 +95,6 @@
"markdown-it": "^8.4.0",
"markdown-it-container": "^2.0.0",
"mocha": "^3.4.2",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"postcss": "^6.0.10",
"postcss-easy-import": "^2.1.0",
"postcss-loader": "^2.0.6",

View File

@ -2,7 +2,7 @@
<transition name="van-actionsheet-float">
<div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
<div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
<h3 v-text="title" />
<div v-text="title" />
<van-icon name="close" @click.stop="$emit('input', false)" />
</div>
<ul v-if="!title" class="van-actionsheet__list">

View File

@ -8,14 +8,14 @@
<div class="van-card__content">
<slot name="title">
<div class="van-card__row" v-if="title || price !== undefined">
<h4 v-if="title" class="van-card__title">{{ title }}</h4>
<p v-if="price !== undefined" class="van-card__price">¥ {{ price }}</p>
<div v-if="title" class="van-card__title">{{ title }}</div>
<div v-if="price !== undefined" class="van-card__price">¥ {{ price }}</div>
</div>
</slot>
<slot name="desc">
<div class="van-card__row" v-if="desc || num !== undefined">
<p v-if="desc" class="van-card__desc">{{ desc }}</p>
<p v-if="num !== undefined" class="van-card__num">x {{ num }}</p>
<div v-if="desc" class="van-card__desc">{{ desc }}</div>
<div v-if="num !== undefined" class="van-card__num">x {{ num }}</div>
</div>
</slot>
<slot name="tags"></slot>

View File

@ -1,5 +1,5 @@
<template>
<van-popup v-model="showPopup" position="bottom" class="van-coupon-list">
<div class="van-coupon-list">
<van-cell-group class="van-coupon-list__top">
<van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
<van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
@ -22,7 +22,7 @@
/>
</div>
<div class="van-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
</van-popup>
</div>
</template>
<script>
@ -45,15 +45,7 @@ export default {
[Item.name]: Item
},
model: {
prop: 'show'
},
props: {
show: {
type: Boolean,
default: false
},
chosenCoupon: {
type: Number,
default: -1
@ -93,13 +85,6 @@ export default {
},
watch: {
show(val) {
this.showPopup = val;
},
showPopup(val) {
this.$emit('input', val);
this.scrollToTop();
},
displayedCouponIndex(val) {
this.scrollToShowCoupon(val);
}
@ -107,8 +92,7 @@ export default {
data() {
return {
exchangeCode: '',
showPopup: this.show
exchangeCode: ''
};
},
@ -118,11 +102,9 @@ export default {
methods: {
onClickNotUse() {
this.showPopup = false;
this.$emit('change', -1);
},
onClickCoupon(index) {
this.showPopup = false;
this.$emit('change', index);
},
onClickExchangeButton() {
@ -142,11 +124,6 @@ export default {
list.scrollTop = card[index].$el.offsetTop - 100;
}
});
},
scrollToTop() {
const { list } = this.$refs;
list.scrollTop = 0;
}
}
};

View File

@ -10,9 +10,9 @@
@touchcancel="blurKey"
@animationend="onAnimationEnd"
>
<h3 class="van-number-keyboard__title van-hairline--top">
<div class="van-number-keyboard__title van-hairline--top">
<span>{{ title }}</span>
</h3>
</div>
<i
v-for="(key, index) in keys"
v-text="key"

View File

@ -2,7 +2,7 @@
<div class="van-panel van-hairline--top-bottom">
<div class="van-panel__header van-hairline--bottom">
<slot name="header">
<h4 class="van-panel__title" v-text="title"></h4>
<div class="van-panel__title" v-text="title"></div>
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
<span class="van-panel__status" v-if="status" v-text="status"></span>
</slot>

View File

@ -4,7 +4,7 @@
<slot>
<a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
<a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
<p v-if="title" class="van-picker__title">{{ title }}</p>
<div v-if="title" class="van-picker__title">{{ title }}</div>
</slot>
</div>
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">

View File

@ -8,8 +8,8 @@
</div>
<div class="van-steps__message">
<div class="van-steps__message-wrapper">
<h4 class="van-steps__title" v-text="title"></h4>
<p class="van-steps__desc" v-text="description"></p>
<div class="van-steps__title" v-text="title"></div>
<div class="van-steps__desc" v-text="description"></div>
</div>
</div>
<slot name="message-extra">

View File

@ -6,4 +6,3 @@
@import "./common/normalize.css";
@import "./common/hairline.css";
@import "./common/animation.css";

View File

@ -6,6 +6,10 @@ html {
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
}
a {
text-decoration: none;
}

View File

@ -4,6 +4,7 @@
.van-coupon {
&-list {
height: 100%;
position: relative;
background-color: $background-color;
&__top {
@ -33,6 +34,7 @@
color: $gray-dark;
margin: 15px 0;
font-size: 14px;
font-weight: normal;
position: relative;
text-align: center;
@ -105,7 +107,8 @@
h2 {
font-size: 22px;
margin-bottom: 10px;
font-weight: normal;
margin: 0 0 10px;
span {
font-size: 16px;
@ -113,6 +116,7 @@
}
p {
margin: 0;
font-size: 14px;
font-weight: 300;
@mixin multi-ellipsis 1;
@ -132,8 +136,10 @@
border-radius: 0 4px 4px 0;
h2 {
margin: 0;
opacity: .8;
font-size: 16px;
font-weight: normal;
}
p,

View File

@ -17,6 +17,7 @@
height: 50px;
font-size: 10px;
min-width: 15%;
line-height: 1;
text-align: center;
background-color: $white;
flex-direction: column;

View File

@ -155,7 +155,6 @@ describe('CouponList', () => {
wrapper = mount(CouponList, {
attachToDocument: true,
propsData: {
show: true,
chosenCoupon: -1,
coupons: [coupon, discountCoupon],
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
@ -166,9 +165,7 @@ describe('CouponList', () => {
wrapper.vm.chosenCoupon = index;
});
// 弹出 popup
setTimeout(() => {
expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
wrapper.find('.van-coupon-item')[0].trigger('click');
setTimeout(() => {
@ -182,7 +179,6 @@ describe('CouponList', () => {
wrapper = mount(CouponList, {
attachToDocument: true,
propsData: {
show: false,
chosenCoupon: 0,
displayedCouponIndex: 0,
coupons: [coupon, discountCoupon],
@ -190,8 +186,6 @@ describe('CouponList', () => {
}
});
wrapper.vm.show = true;
wrapper.vm.$on('change', (index) => {
wrapper.vm.chosenCoupon = index;
wrapper.vm.displayedCouponIndex = index;
@ -201,7 +195,6 @@ describe('CouponList', () => {
wrapper.find('.van-coupon-list__close')[0].trigger('click');
setTimeout(() => {
expect(wrapper.vm.chosenCoupon).to.equal(-1);
expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(true);
done();
}, 500);
}, 500);
@ -257,7 +250,6 @@ describe('CouponList', () => {
wrapper = mount(CouponList, {
attachToDocument: true,
propsData: {
show: true,
chosenCoupon: 0,
coupons: [coupon, discountCoupon, emptyCoupon],
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
@ -307,7 +299,6 @@ describe('CouponList', () => {
it('displayedCouponIndex out of range', (done) => {
wrapper = mount(CouponList, {
propsData: {
show: true,
displayedCouponIndex: -100,
coupons: [coupon, discountCoupon, emptyCoupon]
}

View File

@ -323,14 +323,14 @@ autoprefixer@^6.3.1:
postcss-value-parser "^3.2.3"
autoprefixer@^7.1.3:
version "7.1.3"
resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.3.tgz#0e8d337976d6f13644db9f8813b4c42f3d1ccc34"
version "7.1.4"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.4.tgz#960847dbaa4016bc8e8e52ec891cbf8f1257a748"
dependencies:
browserslist "^2.4.0"
caniuse-lite "^1.0.30000718"
caniuse-lite "^1.0.30000726"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
postcss "^6.0.10"
postcss "^6.0.11"
postcss-value-parser "^3.2.3"
avoriaz@2.0.0:
@ -1195,6 +1195,10 @@ caniuse-lite@^1.0.30000718:
version "1.0.30000718"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz#0dd24290beb11310b2d80f6b70a823c2a65a6fad"
caniuse-lite@^1.0.30000726:
version "1.0.30000727"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000727.tgz#20c895768398ded5f98a4beab4a76c285def41d2"
caseless@~0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@ -1713,7 +1717,7 @@ cssesc@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
"cssnano@>=2.6.1 <4", cssnano@^3.4.0:
"cssnano@>=2.6.1 <4":
version "3.10.0"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
dependencies:
@ -3343,7 +3347,7 @@ hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
he@1.1.x, he@^1.1.0:
he@1.1.1, he@1.1.x, he@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@ -4132,13 +4136,6 @@ klaw@^1.0.0:
optionalDependencies:
graceful-fs "^4.1.9"
last-call-webpack-plugin@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-2.1.1.tgz#bd7af41186b80e6cc3968eee5d65b250eaf791f1"
dependencies:
lodash "^4.17.4"
webpack-sources "^1.0.1"
lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@ -4758,8 +4755,8 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
minimist "0.0.8"
mocha@^3.4.2:
version "3.5.0"
resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.5.0.tgz#1328567d2717f997030f8006234bce9b8cd72465"
version "3.5.3"
resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.5.3.tgz#1e0480fe36d2da5858d1eb6acc38418b26eaa20d"
dependencies:
browser-stdout "1.3.0"
commander "2.9.0"
@ -4768,6 +4765,7 @@ mocha@^3.4.2:
escape-string-regexp "1.0.5"
glob "7.1.1"
growl "1.9.2"
he "1.1.1"
json3 "3.3.2"
lodash.create "3.1.1"
mkdirp "0.5.1"
@ -5075,13 +5073,6 @@ optimist@^0.6.1:
minimist "~0.0.1"
wordwrap "~0.0.2"
optimize-css-assets-webpack-plugin@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-3.1.1.tgz#b86f255a762d9143e3db41a64a136a6b76e8c8a7"
dependencies:
cssnano "^3.4.0"
last-call-webpack-plugin "^2.1.1"
optionator@^0.8.1, optionator@^0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
@ -5815,7 +5806,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
source-map "^0.5.6"
supports-color "^3.2.3"
postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9:
postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9:
version "6.0.10"
resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz#c311b89734483d87a91a56dc9e53f15f4e6e84e4"
dependencies:
@ -5823,6 +5814,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.2, postcss@^6.0.3,
source-map "^0.5.7"
supports-color "^4.2.1"
postcss@^6.0.10, postcss@^6.0.11:
version "6.0.11"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
dependencies:
chalk "^2.1.0"
source-map "^0.5.7"
supports-color "^4.4.0"
precss@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/precss/-/precss-2.0.0.tgz#7f567e3318e06d44c8fdbf9e58452e8358bf4b71"
@ -6310,12 +6309,18 @@ right-align@^0.1.1:
dependencies:
align-text "^0.1.1"
rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.0, rimraf@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
dependencies:
glob "^7.0.5"
rimraf@^2.5.4:
version "2.6.2"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
dependencies:
glob "^7.0.5"
ripemd160@^2.0.0, ripemd160@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
@ -6825,6 +6830,12 @@ supports-color@^4.0.0, supports-color@^4.2.1:
dependencies:
has-flag "^2.0.0"
supports-color@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
dependencies:
has-flag "^2.0.0"
svgo@^0.7.0:
version "0.7.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@ -7311,8 +7322,8 @@ vue-loader@^13.0.4:
vue-template-es2015-compiler "^1.5.3"
vue-markdown-loader@^2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
version "2.2.1"
resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.2.1.tgz#becf0c7455589eb27189fe78a9d5a283bb7acc00"
dependencies:
cheerio "^0.20.0"
highlight.js "^9.4.0"
@ -7331,8 +7342,8 @@ vue-sfc-compiler@^0.0.2:
vue-template-es2015-compiler "^1.5.3"
vue-style-loader@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"
version "3.0.2"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.2.tgz#eaeb299729fa3ee54717e907ce3c1e425ebae729"
dependencies:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
@ -7429,8 +7440,8 @@ webpack-sources@^1.0.1:
source-map "~0.5.3"
webpack@^3.5.5:
version "3.5.5"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.5.tgz#3226f09fc8b3e435ff781e7af34f82b68b26996c"
version "3.5.6"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36"
dependencies:
acorn "^5.0.0"
acorn-dynamic-import "^2.0.0"
@ -7641,8 +7652,8 @@ yeast@0.1.2:
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
zan-doc@^0.2.12:
version "0.2.12"
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.12.tgz#bfbf9a7ec5a4b77a7f53ca1ac030b305432a91c5"
version "0.2.14"
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.14.tgz#f5915e8e45fd10d2eae3e36d10949d22a7f9ac62"
dependencies:
cheerio "0.22.0"
decamelize "^1.2.0"