Compare commits

...

4 Commits

Author SHA1 Message Date
neverland
721ecb6e76
chore(lazyload): remove some legecy code (#8650) 2021-05-02 11:49:32 +08:00
neverland
819018ef68
docs: remove wechat group qrcode (#8649) 2021-05-02 11:31:46 +08:00
neverland
e8b34dfb46
docs: add more CDN services link (#8648) 2021-05-02 11:26:18 +08:00
neverland
511b316074
docs: add tip for using global method in setup (#8647) 2021-05-02 11:16:14 +08:00
10 changed files with 25 additions and 45 deletions

View File

@ -102,12 +102,6 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致
<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >
## 微信讨论群
欢迎大家加入 Vant 交流群一起讨论,添加下方微信并注明『加入 Vant 交流群』即可
<img src="https://img.yzcdn.cn/vant/wechat_20180606.png" width="220" height="292" >
## 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源。

View File

@ -44,6 +44,12 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
</script>
```
You can use Vant through these free CDN services:
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
- [cdnjs](https://cdnjs.com/libraries/vant)
- [unpkg](https://unpkg.com/)
### CLI
We recommend to use [Vue Cli](https://cli.vuejs.org/) to create a new project.

View File

@ -51,6 +51,12 @@ npm i vant@next -S
</script>
```
你可以通过以下免费 CDN 服务来使用 Vant:
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
- [cdnjs](https://cdnjs.com/libraries/vant)
- [unpkg](https://unpkg.com/)
### 通过脚手架安装
在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。

View File

@ -1,5 +1,5 @@
/* eslint-disable max-classes-per-file */
import { find, remove, ArrayFrom } from './util';
import { find, remove } from './util';
const defaultOptions = {
selector: 'img',
@ -44,7 +44,7 @@ class LazyContainer {
}
getImgs() {
return ArrayFrom(this.el.querySelectorAll(this.options.selector));
return Array.from(this.el.querySelectorAll(this.options.selector));
}
clear() {
@ -57,10 +57,9 @@ class LazyContainer {
}
}
export default class LazyContainerMananger {
export default class LazyContainerManager {
constructor({ lazy }) {
this.lazy = lazy;
lazy.lazyContainerMananger = this;
this._queue = [];
}

View File

@ -3,7 +3,6 @@ import {
inBrowser,
CustomEvent,
remove,
some,
find,
_,
throttle,
@ -52,7 +51,6 @@ export default function () {
observer,
observerOptions,
}) {
this.version = '__VUE_LAZYLOAD_VERSION__';
this.mode = modeType.event;
this.ListenerQueue = [];
this.TargetIndex = 0;
@ -126,7 +124,7 @@ export default function () {
* @return
*/
add(el, binding, vnode) {
if (some(this.ListenerQueue, (item) => item.el === el)) {
if (this.ListenerQueue.some((item) => item.el === el)) {
this.update(el, binding);
return nextTick(this.lazyLoadHandler);
}

View File

@ -1,12 +1,5 @@
import { loadImageAsync, noop } from './util';
// el: {
// state,
// src,
// error,
// loading
// }
export default class ReactiveListener {
constructor({
el,

View File

@ -57,17 +57,6 @@ function remove(arr, item) {
if (index > -1) return arr.splice(index, 1);
}
function some(arr, fn) {
let has = false;
for (let i = 0, len = arr.length; i < len; i++) {
if (fn(arr[i])) {
has = true;
break;
}
}
return has;
}
function getBestSelectionFromSrcset(el, scale) {
if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return;
@ -290,15 +279,6 @@ function isObject(obj) {
return obj !== null && typeof obj === 'object';
}
function ArrayFrom(arrLike) {
const len = arrLike.length;
const list = [];
for (let i = 0; i < len; i++) {
list.push(arrLike[i]);
}
return list;
}
function noop() {}
class ImageCache {
@ -331,10 +311,8 @@ export {
inBrowser,
CustomEvent,
remove,
some,
find,
noop,
ArrayFrom,
_,
isObject,
throttle,

View File

@ -119,7 +119,7 @@ Dialog.confirm({
### 全局方法
通过 `app.use` 注册 Dialog 组件后,会自动在 app 的所有子组件上挂载 `$dialog` 方法,在所有组件内部都可以直接调用此方法。
通过 `app.use` 全局注册 Dialog 组件后,会自动在 app 的所有子组件上挂载 `$dialog` 方法,在所有组件内部都可以直接调用此方法。
```js
export default {
@ -131,6 +131,8 @@ export default {
};
```
> Tips: 由于 setup 选项中无法访问 this因此不能使用上述方式请通过 import 引入。
### 组件调用
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。

View File

@ -79,7 +79,7 @@ Notify({
### 全局方法
通过 `app.use` 注册 Notify 组件后,会自动在 app 的所有子组件上挂载 `$notify` 方法,便于在组件内调用。
通过 `app.use` 全局注册 Notify 组件后,会自动在 app 的所有子组件上挂载 `$notify` 方法,便于在组件内调用。
```js
export default {
@ -89,6 +89,8 @@ export default {
};
```
> Tips: 由于 setup 选项中无法访问 this因此不能使用上述方式请通过 import 引入。
### 组件调用
如果需要在 Notify 内嵌入组件或其他自定义内容,可以使用组件调用的方式。

View File

@ -107,7 +107,7 @@ const timer = setInterval(() => {
### 全局方法
通过 `app.use` 注册 Toast 组件后,会自动在 app 的所有子组件上挂载 `$toast` 方法,便于在组件内调用。
通过 `app.use` 全局注册 Toast 组件后,会自动在 app 的所有子组件上挂载 `$toast` 方法,便于在组件内调用。
```js
export default {
@ -117,6 +117,8 @@ export default {
};
```
> Tips: 由于 setup 选项中无法访问 this因此不能使用上述方式请通过 import 引入。
### 单例模式
Toast 默认采用单例模式,即同一时间只会存在一个 Toast如果需要在同一时间弹出多个 Toast可以参考下面的示例