mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-06-05 01:48:10 +08:00
Compare commits
4 Commits
4d27e8b969
...
721ecb6e76
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
721ecb6e76 | ||
|
|
819018ef68 | ||
|
|
e8b34dfb46 | ||
|
|
511b316074 |
@ -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) 协议,请自由地享受和参与开源。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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。
|
||||
|
||||
@ -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 = [];
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -1,12 +1,5 @@
|
||||
import { loadImageAsync, noop } from './util';
|
||||
|
||||
// el: {
|
||||
// state,
|
||||
// src,
|
||||
// error,
|
||||
// loading
|
||||
// }
|
||||
|
||||
export default class ReactiveListener {
|
||||
constructor({
|
||||
el,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 引入。
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
|
||||
|
||||
@ -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 内嵌入组件或其他自定义内容,可以使用组件调用的方式。
|
||||
|
||||
@ -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,可以参考下面的示例:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user