vue 手机预览图片功能

梦里梦外; 2022-05-25 22:50 388阅读 0赞

## ![20180420155824912][]    ##

## 安装 ##

### NPM ###

npm install --save vue-picture-preview

## 使用 ##

首先在项目的入口文件中引入, 调用 Vue.use 安装。

import vuePicturePreview from 'vue-picture-preview'
    Vue.use(vuePicturePreview)

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

<div id="app">
        <router-view></router-view>
        <lg-preview></lg-preview>
    </div>

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

<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">

export default {
        data () {
            return {
                imgs: [
                    {
                      url: 'http://covteam.u.qiniudn.com/ka2.jpg',
                      title: 'pic1'
                    },
                    {
                      url: 'http://covteam.u.qiniudn.com/poster.png',
                      title: 'pic2'
                    }
                ]
            }
        }
    }

<style scoped>
    img {
       width: 100%;
       height: 100%;
    }
    </style>

[20180420155824912]: /images/20220526/5e928af1003b4df084387d868622e69f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实现点击上传图片预览图片功能

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL...

曾经终败给现在/ 2024年04月18日 21:39/ 0 赞/ 5 阅读

相关 MUI实现图片预览功能

引言在电商类、阅读类、社交类等APP中经常会涉及到图片预览功能，只有用户愿意，只要点击图片便可单独的显示该图片，并且可以将图片进行放大预览，如何在APP中没有该小技...

Myth丶恋晨/ 2024年04月17日 15:45/ 0 赞/ 3 阅读

相关 vue图片缩略图及图片预览功能

前言上次有个需求，是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的，几句代码可以搞定，也不需要什么额外的插件。效果如下： vue显示图片缩略

ゞ浴缸里的玫瑰/ 2022年12月31日 03:22/ 0 赞/ 668 阅读

相关 vue项目elementUI预览图片

vue项目elementUI预览图片说明： 1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能 2，根据产品需求，要不展示图片，点击“图片预览

我不是女神ヾ/ 2022年12月28日 07:16/ 0 赞/ 667 阅读

相关 layui预览图片功能

`layer.photos`有两种用法 1. 获取`json`文件中的数据查看相册这种方法直接按文档中的提示来做就好了 [layer.photos文档

妖狐艹你老母/ 2022年12月05日 12:15/ 0 赞/ 608 阅读

相关 vue 手机预览图片功能

![20180420155824912][] 安装 NPM npm install --save vue-picture-preview 使

梦里梦外;/ 2022年05月25日 22:50/ 0 赞/ 389 阅读

相关 vue 图片预览组件

vue-photo-preview 转自 https://npm.taobao.org/package/vue-photo-preview 安

阳光穿透心脏的1/2处/ 2022年05月24日 13:45/ 0 赞/ 390 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 429 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 567 阅读

相关 vue element-ui 图片上传/预览/删除功能

element-ui 图片上传功能 element-ui中进行图片或者视频的上传是一个比较常见的功能。如下所示的页面中，点击上传按钮可以进行图片的上传。上传完

「爱情、让人受尽委屈。」/ 2021年07月26日 02:12/ 0 赞/ 2368 阅读