vue图像识别_Vue的超级简单图像懒惰加载器

vue图像识别

多维数据集图像懒惰 (cube-vue-image-lazy)

A super simple image lazy loader for Vue.

Vue的超级简单图像懒惰加载器。

View Demo 查看演示 View Github 查看Github

安装 (Install)

yarn add cube-vue-image-lazy

Warning: You'll need to install the w3c Intersection Observer polyfill in case you're targeting a browser which doesn't support it.

警告 ：如果您要针对不支持它的浏览器，则需要安装w3c Intersection Observer polyfill 。

用法 (Usage)

You can register the component globally so it's available in all your apps:

您可以全局注册该组件，以便在所有应用程序中都可以使用它：

import Vue from 'vue'
import ImageLazy from 'cube-vue-image-lazy'

Vue.use(ImageLazy)

// Or you can override defaults
Vue.use(ImageLazy, {
  name: 'ImageLazyLoad',
  delay: 500,
  baseClass: 'image-lazy-load',
  deferredClass: 'image-lazy-load-deferred',
  loadingClass: 'image-lazy-load-loading',
  loadedClass: 'image-lazy-load-loaded'
})

Or use it locally in any of your components:

或在您的任何组件中本地使用它：

<template>
  <div id="App">
    <ImageLazy
      class="photo"
      src="https://source.unsplash.com/random/200x200"
      srcset="https://source.unsplash.com/random/400x400 2x"
      baseClass="image-lazy"
      deferredClass="image-lazy-deferred"
      loadingClass="image-lazy-loading"
      loadedClass="image-lazy-loaded"
      :delay="500"
      @loading="loading = true"
      @load="loaded = true"
    />
  </div>
</template>

<script>
import ImageLazy from 'cube-vue-image-lazy'

export default {
  components: {
    ImageLazy
  },
  data () {
    return {
      loading: false,
      loaded: false
    }
  }
}
</script>

<style>
.image-lazy {
  opacity: 0;
}
.image-lazy-loading {
  transform: translateX(100vh);
}
.image-lazy-loaded {
  transition: opacity 1s ease;
  opacity: 1;
}
</style>

道具 (Props)

Name	Required	Type	Default	Description
delay	false	Number	0	The delay before loading the image when it appears in the viewport.
baseClass	false	String	'image-lazy'	The name of the class always added to the image.
deferredClass	false	String	'image-lazy-deferred'	The name of the class added while the loading of the image is deferred.
loadingClass	false	String	'image-lazy-loading'	The name of the class added while the image is loading.
loadedClass	false	String	'image-lazy-loaded'	The name of the class added when the image is loaded.

名称	需要	类型	默认	描述
延迟	假	数	0	当图像出现在视口中时，加载图像之前的延迟。
baseClass	假	串	图像懒惰	类的名称总是添加到图像中。
deferredClass	假	串	“图像延迟延迟”	延迟图像加载时添加的类的名称。
loadingClass	假	串	“图像延迟加载”	加载图像时添加的类的名称。
loadClass	假	串	图像懒加载	加载图像时添加的类的名称。

大事记 (Events)

Name	Description
loading	The image is loading.
load	The image is loaded.

名称	描述
装货	图像正在加载。
加载	图像已加载。

开发设置 (Development Setup)

# Project setup
yarn install

# Compiles and hot-reloads for development – Run the demo
yarn serve

# Compiles and minifies for production
yarn build

# Builds the npm ready packages
yarn bundle

# Watches for file changes and builds the npm ready packages accordingly
yarn watch

# Lints and fixes files
yarn lint

# Run the unit tests
yarn test:unit

翻译自: https://vuejsexamples.com/a-super-simple-image-lazy-loader-for-vue/

vue图像识别