mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] remove waterfall component
This commit is contained in:
陈嘉涵
parent
da6fb85315
commit
a84d93869c
@ -42,6 +42,10 @@
|
||||
- [x] 移除`circle`类型
|
||||
- [x] 移除`gradient-circle`类型
|
||||
|
||||
### Waterfall
|
||||
|
||||
- [x] 彻底移除在 1.0 版本废弃的 Waterfall 组件，请使用`List`组件代替，或使用独立的[@vant/waterfall](https://github.com/chenjiahan/vant-waterfall)包。
|
||||
|
||||
## 新特性
|
||||
|
||||
TODO
|
||||
|
||||
@ -55,6 +55,5 @@ export default {
|
||||
'tag': () => wrapper(import('../../packages/tag/demo'), 'tag'),
|
||||
'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
|
||||
'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
|
||||
'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader'),
|
||||
'waterfall': () => wrapper(import('../../packages/waterfall/demo'), 'waterfall')
|
||||
'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader')
|
||||
};
|
||||
|
||||
@ -120,7 +120,5 @@ export default {
|
||||
'tree-select.en-US': () => import('../../packages/tree-select/en-US.md'),
|
||||
'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'),
|
||||
'uploader.en-US': () => import('../../packages/uploader/en-US.md'),
|
||||
'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md'),
|
||||
'waterfall.en-US': () => import('../../packages/waterfall/en-US.md'),
|
||||
'waterfall.zh-CN': () => import('../../packages/waterfall/zh-CN.md')
|
||||
'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md')
|
||||
};
|
||||
|
||||
@ -15,8 +15,7 @@ module.exports = {
|
||||
'!**/style/**',
|
||||
'!**/demo/**',
|
||||
'!**/locale/lang/**',
|
||||
'!**/sku/**',
|
||||
'!**/waterfall/**'
|
||||
'!**/sku/**'
|
||||
],
|
||||
collectCoverage: true,
|
||||
coverageReporters: ['html', 'lcov', 'text-summary'],
|
||||
|
||||
@ -72,7 +72,6 @@ import Tag from './tag';
|
||||
import Toast from './toast';
|
||||
import TreeSelect from './tree-select';
|
||||
import Uploader from './uploader';
|
||||
import Waterfall from './waterfall';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
@ -237,8 +236,7 @@ export {
|
||||
Tag,
|
||||
Toast,
|
||||
TreeSelect,
|
||||
Uploader,
|
||||
Waterfall
|
||||
Uploader
|
||||
};
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p class="page-desc">{{ $t('text') }}</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Waterfall } from '../..';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '当即将滚动到元素底部时，会自动加载更多',
|
||||
tips: '注意：Waterfall 已被废弃，请使用 List 组件代替'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.',
|
||||
tips: 'Waterfall is deprecated and no longer maintained, please use the List component instead.'
|
||||
}
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-waterfall {
|
||||
ul {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid @gray-light;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid @gray-light;
|
||||
background: @white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: @gray-darker;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,133 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { on, off } from '../utils/event';
|
||||
import {
|
||||
getScrollTop,
|
||||
getElementTop,
|
||||
getVisibleHeight,
|
||||
getScrollEventTarget
|
||||
} from '../utils/scroll';
|
||||
|
||||
const CONTEXT = '@@Waterfall';
|
||||
const OFFSET = 300;
|
||||
|
||||
// 处理滚动函数
|
||||
function handleScrollEvent() {
|
||||
const element = this.el;
|
||||
const { scrollEventTarget } = this;
|
||||
// 已被禁止的滚动处理
|
||||
if (this.disabled) return;
|
||||
|
||||
const targetScrollTop = getScrollTop(scrollEventTarget);
|
||||
const targetVisibleHeight = getVisibleHeight(scrollEventTarget);
|
||||
// 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
|
||||
const targetBottom = targetScrollTop + targetVisibleHeight;
|
||||
|
||||
// 如果无元素高度，考虑为元素隐藏，直接返回
|
||||
if (!targetVisibleHeight) return;
|
||||
|
||||
// 判断是否到了底
|
||||
let needLoadMoreToLower = false;
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
|
||||
} else {
|
||||
const elementBottom =
|
||||
getElementTop(element) - getElementTop(scrollEventTarget) + getVisibleHeight(element);
|
||||
needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
|
||||
}
|
||||
if (needLoadMoreToLower) {
|
||||
this.cb.lower && this.cb.lower({ target: scrollEventTarget, top: targetScrollTop });
|
||||
}
|
||||
|
||||
// 判断是否到了顶
|
||||
let needLoadMoreToUpper = false;
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToUpper = targetScrollTop < this.offset;
|
||||
} else {
|
||||
const elementTop = getElementTop(element) - getElementTop(scrollEventTarget);
|
||||
needLoadMoreToUpper = elementTop + this.offset > 0;
|
||||
}
|
||||
if (needLoadMoreToUpper) {
|
||||
this.cb.upper && this.cb.upper({ target: scrollEventTarget, top: targetScrollTop });
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定事件到元素上
|
||||
// 读取基本的控制变量
|
||||
function doBindEvent() {
|
||||
if (this.el[CONTEXT].binded) {
|
||||
return;
|
||||
}
|
||||
this.el[CONTEXT].binded = true;
|
||||
|
||||
this.scrollEventListener = handleScrollEvent.bind(this);
|
||||
this.scrollEventTarget = getScrollEventTarget(this.el);
|
||||
|
||||
const disabledExpr = this.el.getAttribute('waterfall-disabled');
|
||||
let disabled = false;
|
||||
if (disabledExpr) {
|
||||
this.vm.$watch(disabledExpr, value => {
|
||||
this.disabled = value;
|
||||
this.scrollEventListener();
|
||||
});
|
||||
disabled = Boolean(this.vm[disabledExpr]);
|
||||
}
|
||||
this.disabled = disabled;
|
||||
|
||||
const offset = this.el.getAttribute('waterfall-offset');
|
||||
this.offset = Number(offset) || OFFSET;
|
||||
|
||||
on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
|
||||
|
||||
this.scrollEventListener();
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
function startBind(el) {
|
||||
const context = el[CONTEXT];
|
||||
|
||||
context.vm.$nextTick(() => {
|
||||
doBindEvent.call(el[CONTEXT]);
|
||||
});
|
||||
}
|
||||
|
||||
// 确认何时绑事件监听函数
|
||||
function doCheckStartBind(el) {
|
||||
const context = el[CONTEXT];
|
||||
|
||||
if (context.vm._isMounted) {
|
||||
startBind(el);
|
||||
} else {
|
||||
context.vm.$on('hook:mounted', () => {
|
||||
startBind(el);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default function (type) {
|
||||
return {
|
||||
bind(el, binding, vnode) {
|
||||
if (!el[CONTEXT]) {
|
||||
el[CONTEXT] = {
|
||||
el,
|
||||
vm: vnode.context,
|
||||
cb: {}
|
||||
};
|
||||
}
|
||||
el[CONTEXT].cb[type] = binding.value;
|
||||
|
||||
doCheckStartBind(el);
|
||||
},
|
||||
|
||||
update(el) {
|
||||
const context = el[CONTEXT];
|
||||
context.scrollEventListener && context.scrollEventListener();
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
const context = el[CONTEXT];
|
||||
if (context.scrollEventTarget) {
|
||||
off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
## Waterfall
|
||||
Note: Waterfall is deprecated and no longer maintained, please use the [List](#/zh-CN/list) component instead.
|
||||
|
||||
### Install
|
||||
|
||||
#### Global registration
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
Vue.use(Waterfall);
|
||||
```
|
||||
|
||||
#### Local registration
|
||||
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
|
||||
|
||||
```js
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - |
|
||||
| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - |
|
||||
| waterfall-disabled | Key of the property to control disable status in instance | `String` | - |
|
||||
| waterfall-offset | Offset to trigger callback function | `Number` | `300` |
|
||||
@ -1,11 +0,0 @@
|
||||
import Waterfall from './directive';
|
||||
|
||||
Waterfall.install = function (Vue) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.warn('[Vant] Waterfall is deprecated, please use List component instread');
|
||||
}
|
||||
Vue.directive('WaterfallLower', Waterfall('lower'));
|
||||
Vue.directive('WaterfallUpper', Waterfall('upper'));
|
||||
};
|
||||
|
||||
export default Waterfall;
|
||||
@ -1,81 +0,0 @@
|
||||
## Waterfall 瀑布流
|
||||
注意：Waterfall 组件已被废弃且不再维护，请使用 [List](#/zh-CN/list) 组件代替
|
||||
|
||||
### 使用指南
|
||||
|
||||
#### 全局注册
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
Vue.use(Waterfall);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
||||
|
||||
```js
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
|
||||
|
||||
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
|
||||
|
||||
```html
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
|
||||
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |
|
||||
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
@ -5,7 +5,6 @@ import { Dialog } from './dialog';
|
||||
import { Notify } from './notify';
|
||||
import { Locale } from './locale';
|
||||
import { Lazyload } from './lazyload';
|
||||
import { Waterfall } from './waterfall';
|
||||
import { ImagePreview } from './image-preview';
|
||||
|
||||
export const version: string;
|
||||
@ -78,6 +77,5 @@ export {
|
||||
Notify,
|
||||
Locale,
|
||||
Lazyload,
|
||||
Waterfall,
|
||||
ImagePreview
|
||||
};
|
||||
|
||||
8
types/waterfall.d.ts
vendored
8
types/waterfall.d.ts
vendored
@ -1,8 +0,0 @@
|
||||
import { DirectiveFunction, PluginFunction } from 'vue';
|
||||
|
||||
export interface Waterfall {
|
||||
(type: string): DirectiveFunction;
|
||||
install: PluginFunction<void>;
|
||||
}
|
||||
|
||||
export const Waterfall: Waterfall;
|
||||
Loading…
x
Reference in New Issue
Block a user