@fengsi/vue-lazy-img NPM

@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`