vue-image-plugins

0.0.1 • Public • Published

getting started

vue-image-plugins

安装

npm install --save vue-image-plugins

使用

<img v-image="{
       url: item.url,
       lazy: true,
       styleConfig: {
         imageViewMode: 1,
         originWidth: item.width,
         originHeight: item.height,
         styleWidth: htmlFontSize * 1.5,
         styleHeight: htmlFontSize * 1.5
       },
       view: {
         imageViewMode: 1,
         format: 'jpg',
         imageViewWidth: htmlFontSize * 1.5 * 2,
         imageViewHeight: htmlFontSize * 1.5 * 2,
         interlace: true
       },
       preview: {
         list: moment.imgs,
         index: $index,
       },
       defaultImage: {
         type: normal
       },
       placeHolder: {
       }
     }"
     v-lazy="item.url"/>

与vue-lazyload的配合(初步验证未通过,应该是vue-lazyload的使用或版本问题)

在vue-lazyload的filter中获取处理过的url,并替换 参考:

https://github.com/hilongjw/vue-lazyload#image-url-filter

Vue.use(vueLazy, {
    filter: {
      imageUrl ({ el, src }) {
        let url = el.getAttribute('image-url')
        return (url ? url : src)
      }
    }
})

note

  • 对应属性不赋值,即不使用对应功能
  • view参数控制生成七牛的图片处理链接,见http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html
  • 默认的preview方法是微信jssdk提供的preview,需要以微信jssdk;需要保证在wx.ready后执行

params

properties

methods

others

Package Sidebar

Install

npm i vue-image-plugins

Weekly Downloads

2

Version

0.0.1

License

MIT

Last publish

Collaborators

  • wangnew2013