diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 4fd4a295c..ab05d4df0 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -42,6 +42,10 @@ - [x] 移除`circle`类型 - [x] 移除`gradient-circle`类型 +### Waterfall + +- [x] 彻底移除在 1.0 版本废弃的 Waterfall 组件，请使用`List`组件代替，或使用独立的[@vant/waterfall](https://github.com/chenjiahan/vant-waterfall)包。 + ## 新特性 TODO diff --git a/docs/src/demo-entry.js b/docs/src/demo-entry.js index 52cb85d30..d8ba6c5ab 100644 --- a/docs/src/demo-entry.js +++ b/docs/src/demo-entry.js @@ -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') }; diff --git a/docs/src/docs-entry.js b/docs/src/docs-entry.js index 138178248..da7cb205a 100644 --- a/docs/src/docs-entry.js +++ b/docs/src/docs-entry.js @@ -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') }; diff --git a/jest.config.js b/jest.config.js index 631346088..573d0c82d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,8 +15,7 @@ module.exports = { '!**/style/**', '!**/demo/**', '!**/locale/lang/**', - '!**/sku/**', - '!**/waterfall/**' + '!**/sku/**' ], collectCoverage: true, coverageReporters: ['html', 'lcov', 'text-summary'], diff --git a/packages/index.ts b/packages/index.ts index cb9e5c116..ed36c208e 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -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 { diff --git a/packages/waterfall/demo/index.vue b/packages/waterfall/demo/index.vue deleted file mode 100644 index b584a4d5f..000000000 --- a/packages/waterfall/demo/index.vue +++ /dev/null @@ -1,82 +0,0 @@ - - - - - diff --git a/packages/waterfall/directive.js b/packages/waterfall/directive.js deleted file mode 100644 index 0e3716e46..000000000 --- a/packages/waterfall/directive.js +++ /dev/null @@ -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); - } - } - }; -} diff --git a/packages/waterfall/en-US.md b/packages/waterfall/en-US.md deleted file mode 100644 index 7cff793bc..000000000 --- a/packages/waterfall/en-US.md +++ /dev/null @@ -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 - -``` - -```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` | diff --git a/packages/waterfall/index.js b/packages/waterfall/index.js deleted file mode 100644 index a2b120669..000000000 --- a/packages/waterfall/index.js +++ /dev/null @@ -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; diff --git a/packages/waterfall/zh-CN.md b/packages/waterfall/zh-CN.md deleted file mode 100644 index fe783340a..000000000 --- a/packages/waterfall/zh-CN.md +++ /dev/null @@ -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 - -``` - -```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` | - | diff --git a/types/index.d.ts b/types/index.d.ts index 56ad1de66..997eab2da 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -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 }; diff --git a/types/waterfall.d.ts b/types/waterfall.d.ts deleted file mode 100644 index 8beab86ba..000000000 --- a/types/waterfall.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { DirectiveFunction, PluginFunction } from 'vue'; - -export interface Waterfall { - (type: string): DirectiveFunction; - install: PluginFunction; -} - -export const Waterfall: Waterfall;