今天给小伙伴们分享一个优秀的vue.js图片预览组件VuePhotoPreview。
vue-photo-preview 基于 PhotoSwipe 的 Vue 图片预览组件。超流畅的预览效果、完美支持pc及移动端适配。
安装
$ npm i vue-photo-preview -S引入插件
// 在main.js中引入
import Vue from 'vue'
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(photoPreview)
// or
Vue.use(photoPreview, {
loop: false,
fullscreenEl: false, //是否全屏
arrowEl: false, //左右按钮
... //更多配置
})也支持单独的引入js
<link rel="stylesheet" type="text/css" href="路径/dist/skin.css"/>
<script src="路径/dist/vue-photo-preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var options= {
fullscreenEl: false, //是否全屏
arrowEl: false, //左右按钮
}
Vue.use(vuePhotoPreview,options)
new Vue({
el:'#app'
})
</script>使用
在img标签添加 preview 属性，preview值相同即表示为同一组。
<template>
<div>
<img src="xxx.jpg" preview="0" preview-text="描述文字">
<!-- 分组 -->
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">
</div>
</template>
<script>
export default {
data() {
return {}
},
}
</script>
# photoswipe插件文档
https://photoswipe.com/documentation/api.html
# demo地址
https://826327700.github.io/vue-photo-preview/demo/
# github地址
https://github.com/826327700/vue-photo-previewok，就分享到这里。
相关推荐
-
vite与webpack（vite和webpack）
前些天尤大在Vue 3.0 beta直播中提到了一个vite的工具，其描述是：针对Vue单页面组件的无打包开发服务器，可以直接在浏览器运行请求的vue文件，对其原理比较感兴趣，因此体验并写下了本文，主要包括vite实现原理分析...
-
vue开发可视化编辑器可拖拽（vue可视化拖拽组件模板）
推荐：Vue可视化拖拽编辑工具基于 vue 可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。安装部署npm install （安装 node_modules 模块）yarn upgrade (用...
-
vue实现数据绑定（vue绑定数据的两种方式）
一、实例与数据 Vue.js 应用的创建很简单，通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用： var app = new Vue ({ //选项 }) 变量 app 就代表了这个 Vue 实例。事实上，几乎所有的代码都是一个对...
-
vue实现动画效果展开与收起（vue折叠动画效果）
使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。 ...
-
Vue注册全局组件（Vue组件注册）
组件是 vue最强大的功能之一，在项目中我们经常会用到很多可复用的代码块，通过封装可重用的代码不仅提高了组件的可重用性，而且每个 Vue 组件都是Vue的实例，可接受相同的选项对象并提供相同的生命周期钩子。 这就...
-
vue.js快速入门（vue如何快速上手）
什么是Vue.js Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。 Vue.js的目标是通过尽可能简单的API实现响应的数据绑定...