首页 > 其他分享 >vue框架中:点击图片使得图片放大展示方法

vue框架中:点击图片使得图片放大展示方法

时间:2022-11-26 10:44:12浏览次数:40  
标签:use vue viewer Viewer 点击 test import 图片

安装插件

cnpm install v-viewer --save

使用npm方式安装可能会报错,安装不上

在main.js引用

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

在需要放大的图片位置使用

<!-- 图片循环展示 -->
<div class="screen-se">
   <viewer :imglist="imglist" class="screen-view">
      <img class="screen-img" :src="item" v-for="(item,index ) in imglist" :key="index">
   </viewer>
</div>

imglist在data里面定义数组

图片的数据很简单:
'/test/test.png'

标签:use,vue,viewer,Viewer,点击,test,import,图片
From: https://www.cnblogs.com/suncolor/p/16927036.html

相关文章

  • Vue组件命名规范之大小写
    定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name',{/*...*/})当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自......
  • Vue组件命名规范之大小写
    定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name',{/*...*/})当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自......
  • Vue组件命名规范之大小写
    定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name',{/*...*/})当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自......
  • Vue组件命名规范之大小写
    定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name',{/*...*/})当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自......
  • Vue组件命名规范之大小写
    定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name',{/*...*/})当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自......
  • 在Vue2项目(基于Vue Cli)中封装一个便捷的svg图标(SvgIcon)组件
    主要是介绍下SVG图标组件在Vue2.x中的配置流程首先,假设你有一个图标为:calculator.svg最后想要通过下图的这种方式来使用它: 遵循以下步骤便可以实现:1.先编写一个Sv......
  • vue跳转页面常用的几种方法
    vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。1:router-link跳转2:this.$router.push()3......
  • vuex-getters
    有时候,需要从store中获取一些state变化之后的数据,这是可以放入getters中     ......
  • canvas绘制背景图片,并控制图片大小;createPattern的使用;
    1.需求:用图片填充canvas画布,并且能控制图片的大小和重复次数,实现的效果如下:   2.HTML代码实现1<html>2<head>3<title></title>4<metachars......
  • VUE框架(案例_数据可视化)
    使用vue进行数据可视化常用的插件场景插件简介文档数据分析展示v-charts https://vue-echarts.github.io/guide/ highcharts https://www.highchart......