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

fix: quantity -> stepper

Browse Source
This commit is contained in:
niunai 2017-09-08 16:56:14 +08:00
parent 6da45f69e6
commit 078cf05ceb
5 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/examples-docs/sku.md
View File

@ -60,7 +60,7 @@ Vue.component(Sku.name, Sku);
:show-add-cart-btn="true"
:quota="quota"
:quota-used="quotaUsed"
:reset-quantity-on-hide="true"
:reset-stepper-on-hide="true"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
@ -85,7 +85,7 @@ Vue.component(Sku.name, Sku);
:show-add-cart-btn="true"
:quota="quota"
:quota-used="quotaUsed"
:reset-quantity-on-hide="true"
:reset-stepper-on-hide="true"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>

20
packages/sku/components/SkuQuantity.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="van-sku-quantity-stock">
<div class="van-sku-quantity-container">
<div class="van-sku__quantity-title">{{ quantityTitle }}：</div>
<van-quantity v-model="currentNum" :min="1" :max="quantityLimit" class="van-sku__quantity" @overlimit="handleOverLimit"></van-quantity>
<div class="van-sku-stepper-stock">
<div class="van-sku-stepper-container">
<div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
<van-stepper v-model="currentNum" :min="1" :max="stepperLimit" class="van-sku__stepper" @overlimit="handleOverLimit"></van-stepper>
</div>
<div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
<div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
@ -10,16 +10,16 @@
</template>
<script>
import Quantity from 'packages/quantity';
import Stepper from 'packages/stepper';
import { LIMIT_TYPE } from '../constants';
const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
export default {
name: 'van-sku-quantity',
name: 'van-sku-stepper',
components: {
[Quantity.name]: Quantity
[Stepper.name]: Stepper
},
props: {
@ -34,7 +34,7 @@ export default {
type: Boolean,
default: false
},
quantityTitle: {
stepperTitle: {
type: String,
default: '购买数量'
}
@ -52,7 +52,7 @@ export default {
currentNum(num) {
this.skuEventBus.$emit('sku:numChange', num);
},
quantityLimit(limit) {
stepperLimit(limit) {
if (limit < this.currentNum) {
this.currentNum = limit;
}
@ -66,7 +66,7 @@ export default {
}
return this.sku.stock_num;
},
quantityLimit() {
stepperLimit() {
const quotaLimit = this.quota - this.quotaUsed;
let limit;

22
packages/sku/containers/SkuContainer.vue
View File

@ -28,19 +28,19 @@
</div>
</slot>
<slot name="extra-sku-group" :skuEventBus="skuEventBus"></slot>
<slot name="sku-quantity" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
<van-sku-quantity
ref="skuQuantity"
<slot name="sku-stepper" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
<van-sku-stepper
ref="skuStepper"
:skuEventBus="skuEventBus"
:selectedSku="selectedSku"
:selectedSkuComb="selectedSkuComb"
:selectedNum="selectedNum"
:quantityTitle="quantityTitle"
:stepperTitle="stepperTitle"
:sku="sku"
:quota="quota"
:quotaUsed="quotaUsed"
:hideStock="hideStock">
</van-sku-quantity>
</van-sku-stepper>
</slot>
<slot name="sku-messages">
<van-sku-messages
@ -67,7 +67,7 @@ import Popup from 'packages/popup';
import Toast from 'packages/toast';
import SkuHeader from '../components/SkuHeader';
import SkuRow from '../components/SkuRow';
import SkuQuantity from '../components/SkuQuantity';
import SkuStepper from '../components/SkuStepper';
import SkuMessages from '../components/SkuMessages';
import SkuActions from '../components/SkuActions';
import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
@ -82,7 +82,7 @@ export default {
[Popup.name]: Popup,
[SkuHeader.name]: SkuHeader,
[SkuRow.name]: SkuRow,
[SkuQuantity.name]: SkuQuantity,
[SkuStepper.name]: SkuStepper,
[SkuMessages.name]: SkuMessages,
[SkuActions.name]: SkuActions
},
@ -113,7 +113,7 @@ export default {
default: true
},
buyText: String,
quantityTitle: {
stepperTitle: {
type: String,
default: '购买数量'
},
@ -121,7 +121,7 @@ export default {
type: Number,
default: 150
},
resetQuantityOnHide: Boolean,
resetStepperOnHide: Boolean,
value: Boolean
},
@ -145,8 +145,8 @@ export default {
selectedSkuComb: this.selectedSkuComb
});
if (this.resetQuantityOnHide) {
this.$refs.skuQuantity && this.$refs.skuQuantity.setCurrentNum(1);
if (this.resetStepperOnHide) {
this.$refs.skuStepper && this.$refs.skuStepper.setCurrentNum(1);
}
}
},

4
packages/sku/index.js
View File

@ -1,7 +1,7 @@
import SkuActions from './components/SkuActions';
import SkuHeader from './components/SkuHeader';
import SkuMessages from './components/SkuMessages';
import SkuQuantity from './components/SkuQuantity';
import SkuStepper from './components/SkuStepper';
import SkuRow from './components/SkuRow';
import SkuRowItem from './components/SkuRowItem';
import skuHelper from './utils/skuHelper';
@ -10,7 +10,7 @@ import SkuContainer from './containers/SkuContainer';
SkuContainer.SkuActions = SkuActions;
SkuContainer.SkuHeader = SkuHeader;
SkuContainer.SkuMessages = SkuMessages;
SkuContainer.SkuQuantity = SkuQuantity;
SkuContainer.SkuStepper = SkuStepper;
SkuContainer.SkuRow = SkuRow;
SkuContainer.SkuRowItem = SkuRowItem;
SkuContainer.skuHelper = skuHelper;

10
packages/vant-css/src/sku.css
View File

@ -135,22 +135,22 @@
}
/*
sku quantity
sku stepper
*/
.van-sku-quantity-stock {
.van-sku-stepper-stock {
padding: 12px 0;
margin-left: 15px;
}
.van-sku-quantity-container {
.van-sku-stepper-container {
height: 30px;
margin-right: 20px;
}
.van-sku__quantity-title {
.van-sku__stepper-title {
float: left;
line-height: 30px;
font-size: 14px;
}
.van-sku__quantity {
.van-sku__stepper {
float: right;
top: 7px;
left: 4px;