vue滑动插件_一个无需设置图像大小即可进行照片滑动的Vue插件

vue滑动插件

Vue-Pswipe (vue-pswipe)

a Vue plugin for photoswipe without set image size.

一个无需设置图像大小即可进行照片滑动的Vue插件。

View demo 查看演示 Download Source 下载源

安装 (install)

npm install vue-pswipe

用法 (usage)

// main.js
import Photoswipe from 'vue-pswipe'
import Vue from 'vue'

Vue.use(Photoswipe, options)

complete options

完整的选项

you can use default slot, it will render img with src

您可以使用默认插槽，它将使用src渲染img

<!-- someComponent.vue -->
<Photoswipe>
    <PhotoswipeItem :src="imageSrc" />
</Photoswipe>

or you can use background-image instead of img, and image-item class is necessary for background-image, because its use for identified as thumbnail image element

或者您可以使用background-image而不是img，并且background-image需要image-item类 ，因为它用于标识为缩略图元素

<!-- someComponent.vue -->
<Photoswipe>
    <PhotoswipeItem :src="imageSrc">
        <div 
            class="image-item"
            :style="getBgImgStyle(src)"
        >
    </PhotoswipeItem>
</Photoswipe>

道具 (props)

Photoswipe

照片擦除

property	type	explain
options	Object	original photoswipe options

属性	类型	说明
选项	目的	原始的照片擦除选项

complete options

完整的选项

PhotoswipeItem

照片擦除项目

property	type	explain
src	String	image src

属性	类型	说明
src	串	图像src

例 (example)

npm run dev

翻译自: https://vuejsexamples.com/a-vue-plugin-for-photoswipe-without-set-image-size/

vue滑动插件