三种图片预览插件viewer、vue-photo-preview、vue-picture-preview

本文主要是介绍三种图片预览插件viewer、vue-photo-preview、vue-picture-preview,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第一种:viewerjs使用介绍

1、先安装依赖
npm install v-viewer --save
2、main.js内引用并注册调用
//main.js
import Viewer from ‘v-viewer’
import ‘viewerjs/dist/viewer.css’

Vue.use(Viewer);
Viewer.setDefaults({
Options: { “inline”: true, “button”: true, “navbar”: true, “title”: true, “toolbar”: true, “tooltip”: true, “movable”: true, “zoomable”: true, “rotatable”: true, “scalable”: true, “transition”: true, “fullscreen”: true, “keyboard”: true, “url”: “data-source” }
});

<template><div class="content"><h1>Viewer图片预览插件</h1><viewer :images="imgs"><img v-for="src in imgs" :src="src.url" :key="src.title"></viewer></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2'}]}},
}
</script>

第二种:vue-photo-preview使用介绍

1、先安装依赖
npm install vue-photo-preview --save

2、main.js内引用并注册调用

//main.js
import preview from ‘vue-photo-preview’
import ‘vue-photo-preview/dist/skin.css’
Vue.use(preview)
3、代码中使用xxx.vue

<template><div class="content"><section><h1>preview图片预览插件</h1><img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"></section></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1',preview: '1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2',preview: '1'}]}},
}
</script>

第三种:vue-picture-preview使用介绍

1、先安装依赖
npm install vue-picture-preview --save

2、main.js内引用并注册调用

//main.js
iimport vuePicturePreview from ‘vue-picture-preview’
Vue.use(vuePicturePreview)

3、在根组件添加 lg-preview 组件的位置

<!-- APP.vue -->
<div id="app"><router-view></router-view><lg-preview></lg-preview>
</div>
4、代码中使用xxx.vue<template><div class="content"><h1>vuePicturePreview图片预览插件</h1><img v-for="(img,index) in imgs"v-preview="img.url":src="img.url":alt="img.title":key="index"preview-title-enable="true"preview-nav-enable="true"></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2'}]}},
}
</script>

这篇关于三种图片预览插件viewer、vue-photo-preview、vue-picture-preview的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766953

相关文章

SwiftUI 解决英雄(Hero)动画导致“图片墙”点击切换时卡顿唐突的问题

问题现象 从 SwiftUI 2.0 开始,苹果通过 matchedGeometryEffect 修改器方法新增了对英雄动画(Hero Animation)的支持,这立即使得 SwiftUI 动画表现力提升了一个新级别。“英雄”虽好,不过倘若使用不当也会造成“诡异”的效果: 如上图所示,我们利用 Hero 动画呈现的图片墙感觉极其卡顿而且在动画元素衔接上非常不协调。这是“肿”么回事?又

React【Day2】

React表单控制 受控绑定 概念:使用React组件的状态(useState)控制表单的状态 function App(){const [value, setValue] = useState('')return (<input type="text" value={value} onChange={e => setValue(e.target.value)}/>)} 非受

Java的maven项目导入本地jar包的三种方式

一、使用本地jar包 在项目中创建一个lib文件夹,将想要使用的本地jar包放进去 然后直接在pom.xml中添加下列依赖(项目协作推荐) <dependency><groupId>com.fpl</groupId><artifactId>spring</artifactId><version>1.0-SNAPSHOT</version><scope>system</scope><sys

2024年在Vim中开发vue2+java

neovim 0.5刚出来的时代,那时刚有lua插件我很狂热。每天沉迷于打造自己的IDE之中。写过一堆相关的博客,也录过一些视频教程。后来发现neovim的接口和插件更新的很快,导致配置文件要不定期的修改,才能保证新版本的插件的适配。我也一直在更新,直到工作上的事情越来越多,导致我在也没有时间研究neovim,没时间更新了。为了高效的完成工作上的任务,我被迫使用了不需要折腾的IDE,比如:IDEA

htmlAreas中文化

lang/gb.js 是中文语言文件,官方默认是ANSI编码的,如果你的web.config设置为utf-8(默认),则需要用记事本打开gb.js,另存为utf-8格式。 <script type="text/javascript"> _editor_url = "../HtmlArea/"; _editor_lang = "gb";</script> <script type="text/j

前端网络---http协议和https协议的区别

http协议和https的区别 1、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。 2、http和https使用的端口不一样,http是80,https是443。 3、http的连接很简单,是无状态的(可以通过cookie来解决); 4、HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。 http

【前端】常见问题汇总

1. 跳转界面传参值 ​ 当传的值中有特殊字符时,需进值加密解密处理 ​ 加密 encodeURIComponent() 解密 decodeURIComponent() 2. console.log(“” == 0) 结果为true 问题: var zt = “”; console.log(zt == 0) 结果为true,业务中zt字段值有两种含义(""跟0),会导致判断不准确。 解决

前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。

1、演示 2、实现代码 <!DOCTYPE html><html lang="ch-ZN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scal

【简单介绍下PostCSS】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🌈目录 🌈前言🌈核心功能🌈工作原理🌈常用插件 🌈前言 🔥PostCSS是一个由插件构成的工具,用于使用JavaScript转换CSS代码,它的

react 进阶必学 hook (四):自定义hook

系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook (三):useContext 面馆分店开张了 react 进阶必学 hook (四):自定义hook react 进阶必学 hook (五):额外的hook 什么是自定义hook 官网原话