mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge remote-tracking branch 'main/dev' into dev
This commit is contained in:
commit
3728c9b47d
@ -16,6 +16,8 @@ export default {
|
|||||||
goodsId: data.goods_id,
|
goodsId: data.goods_id,
|
||||||
quota: data.quota,
|
quota: data.quota,
|
||||||
quotaUsed: data.quota_used,
|
quotaUsed: data.quota_used,
|
||||||
|
disableStepperInput: true,
|
||||||
|
resetStepperOnHide: true,
|
||||||
initialSku: {
|
initialSku: {
|
||||||
s1: '30349',
|
s1: '30349',
|
||||||
s2: '1193'
|
s2: '1193'
|
||||||
@ -62,10 +64,10 @@ Vue.component(Sku.name, Sku);
|
|||||||
:goods="goods"
|
:goods="goods"
|
||||||
:goods-id="goodsId"
|
:goods-id="goodsId"
|
||||||
:hide-stock="sku.hide_stock"
|
:hide-stock="sku.hide_stock"
|
||||||
:show-add-cart-btn="true"
|
|
||||||
:quota="quota"
|
:quota="quota"
|
||||||
:quota-used="quotaUsed"
|
:quota-used="quotaUsed"
|
||||||
:reset-stepper-on-hide="true"
|
:reset-stepper-on-hide="resetStepperOnHide"
|
||||||
|
:disable-stepper-input="disableStepperInput"
|
||||||
@buy-clicked="handleBuyClicked"
|
@buy-clicked="handleBuyClicked"
|
||||||
@add-cart="handleAddCartClicked"
|
@add-cart="handleAddCartClicked"
|
||||||
>
|
>
|
||||||
@ -130,6 +132,7 @@ Vue.component(Sku.name, Sku);
|
|||||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||||
|
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
|
||||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||||
|
@ -69,7 +69,8 @@ Vue.component(Stepper.name, Stepper);
|
|||||||
| max | 最大值 | `String | Number` | - | - |
|
| max | 最大值 | `String | Number` | - | - |
|
||||||
| defaultValue | 默认值 | `String | Number` | `1` | - |
|
| defaultValue | 默认值 | `String | Number` | `1` | - |
|
||||||
| step | 步数 | `String | Number` | `1` | - |
|
| step | 步数 | `String | Number` | `1` | - |
|
||||||
| disabled | 是否禁用 | `Boolean` | `false` | - |
|
| disabled | 是否禁用 | `Boolean` | `false` | - |
|
||||||
|
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
|
||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ Waterfall.install(Vue);
|
|||||||
|
|
||||||
#### 局部注册
|
#### 局部注册
|
||||||
|
|
||||||
如果你只是想在某个组件中使用`Waterfall`,你可以在对应组件中注册`Waterfall`指令,这样只能在你注册的组件中使用`Waterfall`:
|
如果你只是想在某个组件中使用`Waterfall`,可以在对应组件中注册`Waterfall`指令,这样只能在你注册的组件中使用`Waterfall`:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Waterfall } from 'vant';
|
import { Waterfall } from 'vant';
|
||||||
@ -34,7 +34,7 @@ export default {
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [1, 2, 3, 4, 5],
|
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||||
loading: false,
|
loading: false,
|
||||||
finished: false
|
finished: false
|
||||||
};
|
};
|
||||||
@ -54,7 +54,7 @@ export default {
|
|||||||
this.list.push(lastNumber);
|
this.list.push(lastNumber);
|
||||||
}
|
}
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}, 2000);
|
}, 200);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -67,15 +67,16 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.demo-waterfall {
|
.demo-waterfall {
|
||||||
.waterfall {
|
ul {
|
||||||
max-height: 360px;
|
max-height: 360px;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
border-top: 1px solid #e5e5e5;
|
border-top: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
.waterfall-item {
|
li {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.page-desc {
|
.page-desc {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
@ -84,38 +85,20 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
.van-loading {
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
|
使用 `v-waterfall-lower` 监听滚动到达底部,并执行相应函数。若是函数执行中需要异步加载数据,可以将 `waterfall-disabled` 指定的值置为 false,禁止 `v-waterfall-lower` 监听滚动事件
|
||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
||||||
<div class="waterfall">
|
<ul
|
||||||
<div
|
v-waterfall-lower="loadMore"
|
||||||
v-waterfall-lower="loadMore"
|
waterfall-disabled="isWaterfallDisabled"
|
||||||
waterfall-disabled="isWaterfallDisabled"
|
waterfall-offset="400">
|
||||||
waterfall-offset="400"
|
<li v-for="(item, index) in list">{{ item }}</li>
|
||||||
>
|
</ul>
|
||||||
<div
|
|
||||||
class="waterfall-item"
|
|
||||||
v-for="(item, index) in list"
|
|
||||||
:key="index"
|
|
||||||
style="text-align: center;"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</div>
|
|
||||||
<van-loading
|
|
||||||
v-if="loading"
|
|
||||||
:type="'circle'"
|
|
||||||
:color="'black'"
|
|
||||||
></van-loading>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant",
|
"name": "vant",
|
||||||
"version": "0.9.8",
|
"version": "0.9.9",
|
||||||
"description": "有赞vue wap组件库",
|
"description": "有赞vue wap组件库",
|
||||||
"main": "lib/vant.js",
|
"main": "lib/vant.js",
|
||||||
"style": "lib/vant-css/index.css",
|
"style": "lib/vant-css/index.css",
|
||||||
|
@ -54,7 +54,7 @@ import TreeSelect from './tree-select';
|
|||||||
import Uploader from './uploader';
|
import Uploader from './uploader';
|
||||||
import Waterfall from './waterfall';
|
import Waterfall from './waterfall';
|
||||||
|
|
||||||
const version = '0.9.8';
|
const version = '0.9.9';
|
||||||
const components = [
|
const components = [
|
||||||
Actionsheet,
|
Actionsheet,
|
||||||
AddressEdit,
|
AddressEdit,
|
||||||
|
@ -2,7 +2,14 @@
|
|||||||
<div class="van-sku-stepper-stock">
|
<div class="van-sku-stepper-stock">
|
||||||
<div class="van-sku-stepper-container">
|
<div class="van-sku-stepper-container">
|
||||||
<div class="van-sku__stepper-title">{{ stepperTitle }}:</div>
|
<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>
|
<van-stepper
|
||||||
|
class="van-sku__stepper"
|
||||||
|
v-model="currentNum"
|
||||||
|
:min="1"
|
||||||
|
:max="stepperLimit"
|
||||||
|
:disableInput="disableStepperInput"
|
||||||
|
@overlimit="handleOverLimit">
|
||||||
|
</van-stepper>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
|
<div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
|
||||||
<div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
|
<div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
|
||||||
@ -34,6 +41,10 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
disableStepperInput: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
stepperTitle: {
|
stepperTitle: {
|
||||||
type: String,
|
type: String,
|
||||||
default: DEFAULT_BUY_TEXT
|
default: DEFAULT_BUY_TEXT
|
||||||
|
@ -45,6 +45,7 @@
|
|||||||
:skuStockNum="sku.stock_num"
|
:skuStockNum="sku.stock_num"
|
||||||
:quota="quota"
|
:quota="quota"
|
||||||
:quotaUsed="quotaUsed"
|
:quotaUsed="quotaUsed"
|
||||||
|
:disableStepperInput="disableStepperInput"
|
||||||
:hideStock="hideStock">
|
:hideStock="hideStock">
|
||||||
</van-sku-stepper>
|
</van-sku-stepper>
|
||||||
</slot>
|
</slot>
|
||||||
@ -133,6 +134,7 @@ export default {
|
|||||||
default: 200
|
default: 200
|
||||||
},
|
},
|
||||||
resetStepperOnHide: Boolean,
|
resetStepperOnHide: Boolean,
|
||||||
|
disableStepperInput: Boolean,
|
||||||
messagePlaceholderMap: {
|
messagePlaceholderMap: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
|
@ -8,11 +8,11 @@
|
|||||||
}">
|
}">
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="number"
|
||||||
class="van-stepper__input"
|
class="van-stepper__input"
|
||||||
:value="currentValue"
|
:value="currentValue"
|
||||||
@input="handleInputChange"
|
@input="handleInputChange"
|
||||||
:disabled="disabled">
|
:disabled="disabled || disableInput">
|
||||||
<button
|
<button
|
||||||
@click="handleChange('plus')"
|
@click="handleChange('plus')"
|
||||||
class="van-stepper__stepper van-stepper__plus"
|
class="van-stepper__stepper van-stepper__plus"
|
||||||
@ -42,6 +42,7 @@ export default {
|
|||||||
default: 1
|
default: 1
|
||||||
},
|
},
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
|
disableInput: Boolean,
|
||||||
defaultValue: {
|
defaultValue: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: 1
|
default: 1
|
||||||
@ -91,8 +92,13 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 纠正value值
|
// 纠正value值
|
||||||
correctValue(value) {
|
correctValue(value) {
|
||||||
value = Math.max(this.min, value);
|
if (Number.isNaN(value)) {
|
||||||
value = Math.min(this.max, value);
|
value = this.min;
|
||||||
|
} else {
|
||||||
|
value = Math.max(this.min, value);
|
||||||
|
value = Math.min(this.max, value);
|
||||||
|
}
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
handleInputChange(event) {
|
handleInputChange(event) {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant-css",
|
"name": "vant-css",
|
||||||
"version": "0.9.8",
|
"version": "0.9.9",
|
||||||
"description": "vant css.",
|
"description": "vant css.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
@ -42,7 +42,7 @@ function handleScrollEvent() {
|
|||||||
// 判断是否到了底
|
// 判断是否到了底
|
||||||
let needLoadMoreToLower = false;
|
let needLoadMoreToLower = false;
|
||||||
if (element === scrollEventTarget) {
|
if (element === scrollEventTarget) {
|
||||||
needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
|
needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
|
||||||
} else {
|
} else {
|
||||||
const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
||||||
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
||||||
|
@ -60,6 +60,17 @@ describe('Stepper', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('only disable stepper input', () => {
|
||||||
|
wrapper = mount(Stepper, {
|
||||||
|
propsData: {
|
||||||
|
disableInput: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const input = wrapper.find('.van-stepper__input')[0];
|
||||||
|
expect(input.hasAttribute('disabled', 'disabled')).to.be.true;
|
||||||
|
});
|
||||||
|
|
||||||
it('update stepper value use v-model', (done) => {
|
it('update stepper value use v-model', (done) => {
|
||||||
wrapper = mount(Stepper, {
|
wrapper = mount(Stepper, {
|
||||||
propsData: {
|
propsData: {
|
||||||
@ -96,7 +107,14 @@ describe('Stepper', () => {
|
|||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(wrapper.vm.currentValue).to.equal(30);
|
expect(wrapper.vm.currentValue).to.equal(30);
|
||||||
expect(eventStub.calledWith('input'));
|
expect(eventStub.calledWith('input'));
|
||||||
done();
|
|
||||||
|
// value设置非数字时,则使用设置的最小值(默认1)
|
||||||
|
wrapper.vm.value = 'abc';
|
||||||
|
wrapper.update();
|
||||||
|
wrapper.vm.$nextTick(() => {
|
||||||
|
expect(wrapper.vm.currentValue).to.equal(1);
|
||||||
|
done();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user