diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue index 97bc35520..6a956a76c 100644 --- a/docs/demos/views/sku.vue +++ b/docs/demos/views/sku.vue @@ -20,6 +20,24 @@ + +
+ + {{ $t('title2') }} +
+
+
import data from '../mock/sku'; +import { LIMIT_TYPE } from '../../../packages/sku/constants'; export default { i18n: { 'zh-CN': { sku: data['zh-CN'], + title2: '自定义步进器相关配置', stepperTitle: '我要买', button1: '积分兑换', button2: '买买买' }, 'en-US': { sku: data['en-US'], + title2: 'Custom Stepper Related Config', stepperTitle: 'Stepper title', button1: 'Button', button2: 'Button' @@ -76,6 +97,22 @@ export default { initialSku: { s1: '30349', s2: '1193' + }, + customStepperConfig: { + quotaText: '单次限购100件', + handleOverLimit: (data) => { + const { action, limitType, quota } = data; + + if (action === 'minus') { + Toast('至少选择一件商品'); + } else if (action === 'plus') { + if (limitType === LIMIT_TYPE.QUOTA_LIMIT) { + Toast(`限购${quota}件`); + } else { + Toast('库存不够了~~'); + } + } + } } }; }, diff --git a/docs/demos/views/tab.vue b/docs/demos/views/tab.vue index 9585a7efc..63b120025 100644 --- a/docs/demos/views/tab.vue +++ b/docs/demos/views/tab.vue @@ -47,6 +47,17 @@ + + + + +
+ {{ $t('tab') }} +
+ {{ $t('content') }} {{ index }} +
+
+
@@ -59,7 +70,8 @@ export default { title3: '禁用标签', title4: '样式风格', title5: '点击事件', - title6: '粘性布局' + title6: '粘性布局', + title7: '自定义标签' }, 'en-US': { tab: 'Tab ', @@ -68,7 +80,8 @@ export default { title3: 'Disabled Tab', title4: 'Card Style', title5: 'Click Event', - title6: 'Sticky' + title6: 'Sticky', + title7: 'Custom Tab' } }, @@ -79,12 +92,6 @@ export default { }; }, - mounted() { - setTimeout(() => { - this.active = 3; - }, 1000); - }, - methods: { onClickDisabled() { Toast('Disabled!'); @@ -101,6 +108,11 @@ export default { .demo-tab { margin-bottom: 700px; + .van-tab .van-icon { + margin-right: 5px; + vertical-align: -2px; + } + .van-tab__pane { background-color: #fff; padding: 20px; diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md index bef63dc4d..3c35d5bf3 100644 --- a/docs/markdown/en-US/sku.md +++ b/docs/markdown/en-US/sku.md @@ -27,6 +27,23 @@ Vue.use(Sku); /> ``` +#### Custom Stepper Config + +```html + +``` + #### Advanced Usage ```html @@ -72,6 +89,7 @@ Vue.use(Sku); | reset-selected-sku-on-hide | Whether to reset selected sku when hide | `Boolean` | `false` | - | | disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - | | stepper-title | Quantity title | `String` | `Quantity` | - | +| custom-stepper-config | Custom stepper related config | `Object` | `{}` | - | ### Event @@ -156,6 +174,32 @@ goods: { } ``` + +#### customStepperConfig Data Structure +```javascript +customStepperConfig: { + // custom quota text + quotaText: 'only 5 can buy', + // custom callback when over limit + handleOverLimit: (data) => { + const { action, limitType, quota, quotaUsed } = data; + + if (action === 'minus') { + Toast('at least select one'); + } else if (action === 'plus') { + // const { LIMIT_TYPE } = Sku.skuConstants; + if (limitType === LIMIT_TYPE.QUOTA_LIMIT) { + let msg = `Buy up to ${quota}`; + if (quotaUsed > 0) msg += `,you already buy ${quotaUsed}`; + Toast(msg); + } else { + Toast('not enough stock'); + } + } + } +} +``` + #### Event Params Data Structure ```javascript diff --git a/docs/markdown/en-US/tab.md b/docs/markdown/en-US/tab.md index 0d49dda37..f7d2a4e21 100644 --- a/docs/markdown/en-US/tab.md +++ b/docs/markdown/en-US/tab.md @@ -104,8 +104,22 @@ In sticky mode, the tab will be fixed to top when scroll to top ```html - - 内容 {{ index }} + + content {{ index }} + + +``` + +#### Custom title +Use title slot to custom tab title + +```html + + +
+ tab +
+ content {{ index }}
``` @@ -126,6 +140,13 @@ In sticky mode, the tab will be fixed to top when scroll to top | title | Tab title | `String` | - | - | | disabled | Whether disabled current tab | `Boolean` | `false` | - | +### Tab Slot + +| name | Description | +|-----------|-----------| +| - | Content | +| title | Custom tab | + ### Tabs Event | Event | Description | Arguments | diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md index d8e555ec4..21b4f3a19 100644 --- a/docs/markdown/zh-CN/sku.md +++ b/docs/markdown/zh-CN/sku.md @@ -27,6 +27,23 @@ Vue.use(Sku); /> ``` +#### 自定义步进器相关配置 + +```html + +``` + #### 高级用法 ```html @@ -73,6 +90,7 @@ Vue.use(Sku); | reset-selected-sku-on-hide | 窗口隐藏时重置已选择的sku | `Boolean` | `false` | - | | disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - | | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - | +| custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - | ### Event @@ -163,6 +181,31 @@ goods: { } ``` +#### customStepperConfig 对象结构 +```javascript +customStepperConfig: { + // 自定义限购文案 + quotaText: '每次限购xxx件', + // 自定义步进器超过限制时的回调 + handleOverLimit: (data) => { + const { action, limitType, quota, quotaUsed } = data; + + if (action === 'minus') { + Toast('至少选择一件商品'); + } else if (action === 'plus') { + // const { LIMIT_TYPE } = Sku.skuConstants; + if (limitType === LIMIT_TYPE.QUOTA_LIMIT) { + let msg = `单次限购${quota}件`; + if (quotaUsed > 0) msg += `,您已购买${quotaUsed}`; + Toast(msg); + } else { + Toast('库存不够了~~'); + } + } + } +} +``` + #### 添加购物车和点击购买回调函数接收的 skuData 对象结构 ```javascript skuData: { diff --git a/docs/markdown/zh-CN/tab.md b/docs/markdown/zh-CN/tab.md index e3e3a94bb..3ac38def3 100644 --- a/docs/markdown/zh-CN/tab.md +++ b/docs/markdown/zh-CN/tab.md @@ -110,6 +110,20 @@ export default { ``` +#### 自定义标签 +通过 title slot 可以自定义标签内容 + +```html + + +
+ 选项 +
+ 内容 {{ index }} +
+
+``` + ### Tabs API | 参数 | 说明 | 类型 | 默认值 | 可选 | @@ -127,6 +141,13 @@ export default { | title | tab的标题 | `String` | - | - | | disabled | 是否禁用这个tab | `Boolean` | `false` | - | +### Tab Slot + +| 名称 | 说明 | +|-----------|-----------| +| - | 标签页内容 | +| title | 自定义标签 | + ### Tabs Event | 事件名 | 说明 | 参数 | diff --git a/package.json b/package.json index e4ac4560d..47304bcdd 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "karma-spec-reporter": "^0.0.32", "karma-webpack": "^2.0.9", "mocha": "^4.0.1", - "postcss": "^6.0.16", + "postcss": "^6.0.17", "postcss-calc": "^6.0.0", "postcss-easy-import": "^3.0.0", "postcss-loader": "^2.0.10", @@ -97,10 +97,10 @@ "url-loader": "^0.6.2", "vant-doc": "1.0.2", "vue": "^2.5.13", - "vue-loader": "^13.7.0", + "vue-loader": "^14.1.0", "vue-router": "^3.0.1", "vue-sfc-compiler": "^0.0.8", - "vue-style-loader": "^3.1.1", + "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.5.13", "vue-template-es2015-compiler": "^1.6.0", "webpack": "^3.10.0", diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue index 475c86de3..7d503a2ab 100644 --- a/packages/sku/Sku.vue +++ b/packages/sku/Sku.vue @@ -66,6 +66,7 @@ :quota-used="quotaUsed" :disable-stepper-input="disableStepperInput" :hide-stock="hideStock" + :custom-stepper-config="customStepperConfig" /> @@ -159,6 +160,10 @@ export default create({ messagePlaceholderMap: { type: Object, default: () => ({}) + }, + customStepperConfig: { + type: Object, + default: () => ({}) } }, @@ -328,7 +333,15 @@ export default create({ this.selectedNum = num; }, - onOverLimit({ action, limitType, quota, quotaUsed }) { + onOverLimit(data) { + const { action, limitType, quota, quotaUsed } = data; + const { handleOverLimit } = this.customStepperConfig; + + if (handleOverLimit) { + handleOverLimit(data); + return; + } + if (action === 'minus') { Toast(this.$t('least')); } else if (action === 'plus') { diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue index 08f8f197b..4c705a41d 100644 --- a/packages/sku/components/SkuStepper.vue +++ b/packages/sku/components/SkuStepper.vue @@ -12,7 +12,7 @@ />
{{ $t('remain', stock) }}
-
{{ $t('quota', quota) }}
+
{{ quotaText }}
@@ -40,7 +40,8 @@ export default create({ quota: Number, quotaUsed: Number, hideStock: Boolean, - disableStepperInput: Boolean + disableStepperInput: Boolean, + customStepperConfig: Object }, data() { @@ -69,6 +70,18 @@ export default create({ } return this.skuStockNum; }, + quotaText() { + const { quotaText } = this.customStepperConfig; + let text = ''; + + if (quotaText) { + text = quotaText; + } else if (this.quota > 0) { + text = this.$t('quota', this.quota); + } + + return text; + }, stepperLimit() { const quotaLimit = this.quota - this.quotaUsed; let limit; diff --git a/packages/sku/constants.js b/packages/sku/constants.js index 80b443ee6..0d83bd7ce 100644 --- a/packages/sku/constants.js +++ b/packages/sku/constants.js @@ -2,3 +2,7 @@ export const LIMIT_TYPE = { QUOTA_LIMIT: 0, STOCK_LIMIT: 1 }; + +export default { + LIMIT_TYPE +}; diff --git a/packages/sku/index.js b/packages/sku/index.js index 4c21c126c..76ad3e005 100644 --- a/packages/sku/index.js +++ b/packages/sku/index.js @@ -6,6 +6,7 @@ import SkuStepper from './components/SkuStepper'; import SkuRow from './components/SkuRow'; import SkuRowItem from './components/SkuRowItem'; import skuHelper from './utils/skuHelper'; +import constants from './constants'; Sku.SkuActions = SkuActions; Sku.SkuHeader = SkuHeader; @@ -14,5 +15,6 @@ Sku.SkuStepper = SkuStepper; Sku.SkuRow = SkuRow; Sku.SkuRowItem = SkuRowItem; Sku.skuHelper = skuHelper; +Sku.skuConstants = constants; export default Sku; diff --git a/packages/tab/index.vue b/packages/tab/index.vue index 92887be1a..0902398d7 100644 --- a/packages/tab/index.vue +++ b/packages/tab/index.vue @@ -14,10 +14,7 @@ export default create({ mixins: [findParent], props: { - title: { - type: String, - required: true - }, + title: String, disabled: Boolean }, diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue index ecf715702..11eb46034 100644 --- a/packages/tabs/index.vue +++ b/packages/tabs/index.vue @@ -1,5 +1,5 @@