0.1.2 • Published 6 years ago

v-img-preview v0.1.2

Weekly downloads
7
License
LGPL-3.0
Repository
github
Last release
6 years ago

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地址集合
  • heightNumber, String, preview 高度,单位像素(px)
  • widthNumber, String, preview 宽度,单位像素(px)
  • indexNumber, 当前展示图片索引,支持.sync