v-img-preview

0.1.2 • Public • Published

v-img-preview

npm 安装组件

npm install v-img-preview -S

全局引用

import imgPreview from 'v-img-preview'
Vue.use(imgPreview)

// vue 文件中使用
<template>
  <div>
    <image-preview :images="images" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      images: [
        "https://static.pexels.com/photos/860935/pexels-photo-860935.jpeg",
        "https://images.pexels.com/photos/589810/pexels-photo-589810.jpeg",
        "https://static.pexels.com/photos/126793/pexels-photo-126793.jpeg",
        "https://static.pexels.com/photos/74775/pexels-photo-74775.jpeg",
        "https://static.pexels.com/photos/545968/pexels-photo-545968.jpeg"
      ]
    }
  }
}
</script>

局部引用

<template>
  <div>
    <image-preview :images="images" />
  </div>
</template>
<script>
import { imagePreview } from 'v-img-preview'
export default {
  components: { imagePreview },
  data () {
    return {
      images: [
        "https://static.pexels.com/photos/860935/pexels-photo-860935.jpeg",
        "https://images.pexels.com/photos/589810/pexels-photo-589810.jpeg",
        "https://static.pexels.com/photos/126793/pexels-photo-126793.jpeg",
        "https://static.pexels.com/photos/74775/pexels-photo-74775.jpeg",
        "https://static.pexels.com/photos/545968/pexels-photo-545968.jpeg"
      ]
    }
  }
}
</script>

props

  • imagesArray,图片url地址集合
  • height:[Number, String], preview 高度,单位像素(px)
  • width:[Number, String], preview 宽度,单位像素(px)
  • indexNumber, 当前展示图片索引,支持.sync

Readme

Keywords

Package Sidebar

Install

npm i v-img-preview

Weekly Downloads

1

Version

0.1.2

License

LGPL-3.0

Unpacked Size

112 kB

Total Files

25

Last publish

Collaborators

  • rxj_2008