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