vue 手机预览图片功能

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

" class="reference-link">20180420155824912

安装

NPM

  1. npm install --save vue-picture-preview

使用

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

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

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

  1. <!-- Vue root compoment template -->
  2. <div id="app">
  3.     <router-view></router-view>
  4.     <lg-preview></lg-preview>
  5. </div>

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

  1. <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">
  3. export default {
  4.     data () {
  5.         return {
  6.             imgs: [
  7.                 {
  8.                   url: 'http://covteam.u.qiniudn.com/ka2.jpg',
  9.                   title: 'pic1'
  10.                 },
  11.                 {
  12.                   url: 'http://covteam.u.qiniudn.com/poster.png',
  13.                   title: 'pic2'
  14.                 }
  15.             ]
  16.         }
  17.     }
  18. }
  22. <style scoped>
  23. img {
  24.    width: 100%;
  25.    height: 100%;
  26. }
  27. </style>

发表评论

表情：
评论列表 （有 0 条评论，603人围观）

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

相关阅读

    相关 MUI实现图片预览功能

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

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 169 阅读