feat(ui/lazy): add component lazy (#2)

* feat(ui/lazy): add component lazy * docs(ui/lazy): update docs
varletjs · Feb 18, 2022 · 707ad77 · 707ad77
1 parent f01a53f
commit 707ad77
Show file tree

Hide file tree

Showing 12 changed files with 613 additions and 0 deletions.
diff --git a/packages/varlet-vue2-ui/src/lazy/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/lazy/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test lazy background-image 1`] = `"<img style=\\"background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);\\">"`;
+
+exports[`test lazy background-image 2`] = `"<img style=\\"background-image: url(https://varlet.gitee.io/varlet-ui/cat.jpg);\\">"`;
+
+exports[`test lazy error with attempt 1`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">"`;
+
+exports[`test lazy error with attempt 2`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">"`;
+
+exports[`test lazy error with attempt 3`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">"`;
+
+exports[`test lazy error with attempt 4`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\">"`;
+
+exports[`test lazy example 1`] = `
+"<div class=\\"example\\">
+  <div class=\\"app-type\\"></div> <img class=\\"cat\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\"> <img class=\\"cat\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\"> <img class=\\"cat\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\"> <img class=\\"cat\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\"> <img class=\\"cat\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">
+  <div class=\\"app-type\\"></div>
+  <div class=\\"cat\\" style=\\"background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);\\"></div>
+</div>"
+`;
+
+exports[`test lazy load 1`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">"`;
+
+exports[`test lazy load 2`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">"`;
+
+exports[`test lazy updated 1`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\">"`;
+
+exports[`test lazy updated 2`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">"`;
+
+exports[`test lazy updated 3`] = `"<img lazy-error=\\"https://varlet.gitee.io/varlet-ui/error.jpg\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">"`;
diff --git a/packages/varlet-vue2-ui/src/lazy/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/lazy/__tests__/index.spec.js
@@ -0,0 +1,111 @@
+import example from '../example'
+import Lazy, { imageCache } from '..'
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
+import { delay, mockDoubleRaf, trigger } from '../../utils/jest'
+
+test('test lazy example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test lazy plugin', () => {
+  Vue.use(Lazy)
+  expect(Vue.directive('lazy')).toBeTruthy()
+})
+
+const Wrapper = {
+  directives: { Lazy },
+  data: () => ({
+    src: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+    error: 'https://varlet.gitee.io/varlet-ui/error.jpg',
+  }),
+  template: `
+    <img
+      :lazy-error="error"
+      v-lazy="src"
+    >
+  `,
+}
+
+test('test lazy load', async () => {
+  const { mockRestore } = mockDoubleRaf()
+  const wrapper = mount(Wrapper)
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await trigger(wrapper.element._lazy.preloadImage, 'load')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+  imageCache.clear()
+  mockRestore()
+})
+
+test('test lazy error with attempt', async () => {
+  const { mockRestore } = mockDoubleRaf()
+  const wrapper = mount(Wrapper)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await delay(80)
+
+  await trigger(wrapper.element._lazy.preloadImage, 'error')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await trigger(wrapper.element._lazy.preloadImage, 'error')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await trigger(wrapper.element._lazy.preloadImage, 'error')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+  imageCache.clear()
+  mockRestore()
+})
+
+test('test lazy updated', async () => {
+  const { mockRestore } = mockDoubleRaf()
+  const wrapper = mount(Wrapper)
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await trigger(wrapper.element._lazy.preloadImage, 'load')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setData({ src: 'https://varlet.gitee.io/varlet-ui/dog.jpg' })
+  await delay(80)
+
+  await trigger(wrapper.element._lazy.preloadImage, 'load')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+  imageCache.clear()
+  mockRestore()
+})
+
+test('test lazy background-image', async () => {
+  const { mockRestore } = mockDoubleRaf()
+  const wrapper = mount({
+    directives: { Lazy },
+    template: `
+      <img v-lazy:background-image="'https://varlet.gitee.io/varlet-ui/cat.jpg'">
+    `,
+  })
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await trigger(wrapper.element._lazy.preloadImage, 'load')
+  await delay(80)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+  imageCache.clear()
+  mockRestore()
+})
diff --git a/packages/varlet-vue2-ui/src/lazy/docs/en-US.md b/packages/varlet-vue2-ui/src/lazy/docs/en-US.md
@@ -0,0 +1,80 @@
+# Lazy
+
+### Intro
+
+Load when the image is visible
+
+### Install
+
+```js
+import Vue from 'vue'
+import { Lazy } from '@varlet-vue2/ui'
+
+Vue.use(Lazy)
+```
+
+### Basic Use
+
+```html
+<img v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'">
+```
+
+### Background Image Lazy Load
+```html
+<div v-lazy:background-image="'https://varlet.gitee.io/varlet-ui/cat.jpg'"></div>
+```
+
+### Inline Attributes
+You can modify the `loading`, `error` image, and `reload attempts` by using inline properties.
+
+```html
+<img 
+  v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'"
+  lazy-loading="https://xxx.cn/loading.png"
+  lazy-error="https://xxx.cn/error.png"
+  lazy-attempt="3"
+>
+```
+
+### Plugin
+
+The option to set the default `Lazy` load option is provided, which is passed in at plugin registration.
+
+```js
+import Vue from 'vue'
+import { Lazy } from '@varlet-vue2/ui'
+
+Vue.use(Lazy, {
+  loading: 'https://xxx.cn/loading.png',
+  error: 'https://xxx.cn/error.png',
+  attempt: 3,
+  throttleWait: 300,
+  events: [
+    'scroll', 
+    'wheel', 
+    'mousewheel', 
+    'resize',
+    'animationend',
+    'transitionend', 
+    'touchmove'
+  ],
+  filter(lazy) {
+    // All properties of the context can be accessed, and some property interceptions can be performed.
+    // Such as simply modifying all image addresses http-> https
+    lazy.src.replace('http://', 'https://')
+  }
+})
+```
+
+## API
+
+### Plugin Options
+
+| Option | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| `loading` | Loading images, if possible, select images that load quickly | _string_ | `Pixel transparent picture` |
+| `error` | Load failed to display the picture | _string_ | `Pixel transparent picture` |
+| `attempt` | The number of times a load failed to reload | _number_ | `3` |  
+| `throttleWait` | throttle wait time, The higher the value, the lower the trigger frequency | _number_ | `300` |
+| `events` | A list of events that trigger visibility detection registration | _string[]_ | `['scroll'...]` |
+| `filter` | Attribute interceptor function | _(lazy: Lazy) => void_ | `() => void` |
diff --git a/packages/varlet-vue2-ui/src/lazy/docs/zh-CN.md b/packages/varlet-vue2-ui/src/lazy/docs/zh-CN.md
@@ -0,0 +1,80 @@
+# 图片懒加载
+
+### 介绍
+
+在图片可见时进行加载
+
+### 引入
+
+```js
+import Vue from 'vue'
+import { Lazy } from '@varlet-vue2/ui'
+
+Vue.use(Lazy)
+```
+
+### 基本用法
+
+```html
+<img v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'">
+```
+
+### 背景图懒加载
+```html
+<div v-lazy:background-image="'https://varlet.gitee.io/varlet-ui/cat.jpg'"></div>
+```
+
+### 内联属性
+可以通过内联属性修改 `loading`、 `error` 图片和`加载失败时尝试重新加载的次数`。
+
+```html
+<img
+  v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'"
+  lazy-loading="https://xxx.cn/loading.png"
+  lazy-error="https://xxx.cn/error.png"
+  lazy-attempt="3"
+>
+```
+
+### 插件
+
+`Lazy` 提供了在插件注册时传入的选项，可以设置默认的懒加载选项。
+
+```js
+import Vue from 'vue'
+import { Lazy } from '@varlet-vue2/ui'
+
+Vue.use(Lazy, {
+  loading: 'https://xxx.cn/loading.png',
+  error: 'https://xxx.cn/error.png',
+  attempt: 3,
+  throttleWait: 300,
+  events: [
+    'scroll',
+    'wheel',
+    'mousewheel',
+    'resize',
+    'animationend',
+    'transitionend',
+    'touchmove'
+  ],
+  filter(lazy) {
+    // 可以访问 lazy 上下文的所有属性,执行一些属性拦截,
+    // 比如简单修改所有的图片地址 http -> https
+    lazy.src.replace('http://', 'https://')
+  }
+})
+```
+
+## API
+
+### 插件选项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `loading` | 加载中的图片，尽可能选择加载速度很快的图片 | _string_ | `1像素透明图片` |
+| `error` | 加载失败显示的图片 | _string_ | `1像素透明图片` |
+| `attempt` | 加载失败时尝试重新加载的次数 | _number_ | `3` |
+| `throttleWait` | 节流时间，数值越大事件触发频率越低 | _number_ | `300` |
+| `events` | 触发可见性检测注册的事件列表 | _string[]_ | `['scroll'...]` |
+| `filter` | 属性拦截函数 | _(lazy: Lazy) => void_ | `() => void` |
diff --git a/packages/varlet-vue2-ui/src/lazy/example/index.vue b/packages/varlet-vue2-ui/src/lazy/example/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="example">
+    <app-type>{{ pack.basicUsage }}</app-type>
+    <img class="cat" v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'" />
+    <img class="cat" v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'" />
+    <img class="cat" v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'" />
+    <img class="cat" v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'" />
+    <img class="cat" v-lazy="'https://varlet.gitee.io/varlet-ui/cat.jpg'" />
+
+    <app-type>{{ pack.backgroundImageLazyLoad }}</app-type>
+    <div class="cat" v-lazy:background-image="'https://varlet.gitee.io/varlet-ui/cat.jpg'"></div>
+  </div>
+</template>
+
+<script>
+import Lazy from '..'
+import AppType from '@varlet-vue2/cli/site/mobile/components/AppType'
+import { use, pack } from './locale'
+import { watchLang } from '@varlet-vue2/cli/site/utils'
+
+export default {
+  name: 'LazyExample',
+  directives: { Lazy },
+  components: { AppType },
+  data: () => ({
+    pack,
+  }),
+  created() {
+    watchLang(this, use)
+  },
+  // setup() {
+  //   watchLang(use)
+
+  //   return { pack }
+  // },
+}
+</script>
+
+<style scoped lang="less">
+.cat {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  background-size: cover;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/varlet-vue2-ui/src/lazy/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/lazy/example/locale/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  basicUsage: 'Basic Usage',
+  backgroundImageLazyLoad: 'Background Image Lazy Load',
+}
diff --git a/packages/varlet-vue2-ui/src/lazy/example/locale/index.ts b/packages/varlet-vue2-ui/src/lazy/example/locale/index.ts
@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)
diff --git a/packages/varlet-vue2-ui/src/lazy/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/lazy/example/locale/zh-CN.ts
@@ -0,0 +1,4 @@
+export default {
+  basicUsage: '基本使用',
+  backgroundImageLazyLoad: '背景图懒加载',
+}