@fengsi/vue-lazy-img

Installation

$ npm i @fengsi/vue-lazy-img

Usage

  import Vue from 'vue'
  import lazyImage from '@fengsi/vue-lazy-img'
  import '@fengsi/vue-lazy-img/lib/lazy-image.css'
  Vue.component('lazyImage', lazyImage)

  // or component
  import lazyImage from '@fengsi/vue-lazy-img'
  import '@fengsi/vue-lazy-img/lib/lazy-image.css'
  export default {
    components: {
      lazyImage,
    },
  }

props

key	description	default	options
sources	赋值给元素指定多个媒体资源,适用响应式加载不同尺寸的图片，列如：sources="[{ srcset: 'src/example.jpg', media: '(min-width: 800px)' }]"	[]	Array
src	图片路径	null	String
lazySrc	懒加载图片路径	null	String
alt	图片alt属性	null	String
title	图片title属性	null	String
asBackground	是否作为背景图模式	false	Boolean
gradient	只有asBackground为true时起作用；图片遮罩层,应用linear-gradient值, 列如：gradient="to top,rgba(0,0,0,1),rgba(0,0,0,0)"	null	String
imgAttributeWidth	元素自身的width属性	null	Number,String
imgAttributeHeight	元素自身的height属性	null	Number,String
height	图片高度	null	Number,String
maxHeight	图片最大高度	null	Number,String
minHeight	图片最小高度	null	Number,String
width	图片宽度	null	Number,String
maxWidth	图片最大宽度	null	Number,String
minWidth	图片最小宽度	null	Number,String

example

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

git commit -m

提交的时候遵守约定式提交 Conventional Commits规范

Customize configuration

See Configuration Reference.