Vue基于iview table展示图片实现点击放大

2024-08-10 07:45:34

首先先安装依赖：

npm install v-viewer --save

然后全局引入，我这边是在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' }
})

使用的一个demo就是：

<viewer :images="tupians">
   <i-col span="4" v-for="item in tupians">
     <div class="detailed">
      <img :src="item.img" alt="">
     </div>
   </i-col>
</viewer>

其中item.img其实就是一个路径。

在回到iview表格中，

需要以

      h('xxxx', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二维码'
        }
      }, [
      ])

这种格式渲染出来，第一个参数是标签，第二参数是标签里面可以含props(vue的v-bind)，也可以包含属性。第三个参数是数组，表示子标签。子标签也是这种格式的，以此递归下去。

所以改写成这种格式的，在本人项目中的一个demo如下，就可以实现在表格中点击图片进行放大展示：

{
  title: '二维码',
  align: 'center',
  render: (h, params) => {
    console.log('h, param', params);
    let devicesArr = [];
    let photo = [];
    photo.push('/erweima/'+params.row.pt_number+'.png');
    devicesArr.push(
      h('Tooltip', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二维码'
        }
      }, [
        h('viewer', {
          props:{
            images:photo
          }
        }, [
          h('img', {
            attrs: {
              src:photo[0],
              style: 'width: 22px;margin-right:5px'
            },
          })
        ])
      ])
    );
    return h('div', devicesArr);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue iview的菜单组件Mune 点击不高亮的解决方案

前言: 在项目中,我用到了vue +iview + vue-router 开发: 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示. 在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact. 为什么要使用router-link? 官网上说明了这几点好处: 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标
iview form清除校验状态的实现

有个需求,要求对输入框进行启用/禁用的切换,同时在禁用时要清除输入框的校验状态(那个红框). 方法一:修改 formItem 字段属性在iview 的官方api 中并没找到清除校验状态的方法,看了下源码,用一个粗糙的方法解决了. 源文件 form-item.vue 中的 resetField方法是通过修改这两个属性的值清空状态和提示的其实就是把 formItem 的两个属性值进行了修改, v.validateDisabled 是否校验 v.validateState 展示状态(校验错误
vue+iview框架实现左侧动态菜单功能的示例代码

最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下: 注意事项: [1]菜单高亮部分动态绑定路由跳转的页面 Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示.前提是需要将MenuItem绑定的name也设置成页面路由的name [2]动态获取菜单数据,需要更新菜单 this.$nex
iview实现图片上传功能

本文实例为大家分享了iview实现图片上传的具体代码,供大家参考,具体内容如下如下图片:这里结合iview里面表单验证做的完整代码如何 <template> <div> <div class="navigation"> <p> <span>管理首页 > 应用 > 抢单侠> 信贷管理> {{title}}</span> </p> </div> <div cla
vue和iview实现Scroll 数据无限滚动功能

在做项目的时候因为数据比较多,一次性全部渲染的话会花费较多的时间,所以,想到每一次渲染10条数据也想过每一次获取十条数据然后显示就行了,就目前自己所知最好的方法是修改接口,一次返回10条,可是这样子太麻烦了,所以决定一次性请求所有数据,然后每次渲染十条,需要再上拉加载更多使用的是iview中的组件Scroll 以下是获取数据和封装数据的方法: 原理是先定义两个全局的变量,一个存储全部的数据,一个存储渲染的数据在首次获得数据的时候,往渲染的变量中存入全部数据的前十条: 然后在数据最底时上拉加
vue iview实现动态新增和删除

本文实例为大家分享了vue iview动态新增和删除的具体代码,供大家参考,具体内容如下 <Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80%"> <ul> <li v-for="(item, index) in capsuleAttr.attrList" v-if=&
vue-iview动态新增和删除的方法

本文实例为大家分享了vue-iview动态新增和删除的具体代码,供大家参考,具体内容如下参考链接:vue iview动态新增和删除我根据上面的博客进行了test和小修改,效果如下: 源码如下: html代码 <template> <Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80%"> &l
Vue基于iview table展示图片实现点击放大

首先先安装依赖: npm install v-viewer --save 然后全局引入,我这边是在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, 'too
vue基于viewer实现的图片查看器功能

vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 [http://fengyuanchen.github.io...] 插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画,所以vue2-viewer主要实用场景是现代浏览器中. 使用文档安装 npm
Vue基于iview实现登录密码的显示与隐藏功能

目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果
layui表格内放置图片,并点击放大的实例

我就废话不多说了,直接上代码吧! cols: [[ //表头 { field: 'brand_img_url', title: '图片', sort: true, templet: function(d){ return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="
jQuery实现的图片点击放大缩小功能案例

本文实例讲述了jQuery实现的图片点击放大缩小功能.分享给大家供大家参考,具体如下: 我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕的高度). 来看css部分代码: <style> /*全屏显示大图*/ .opacityBottom{ width: 100%; height: 100%; posi
浅谈vue的iview列表table render函数设置DOM属性值的方法

如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
基于jquery的手风琴图片展示效果实现方法

本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码代码如下: <!DOCTYPE html> <html class=''> <head> <title>一款基于jquery的手风琴图片展示效果demo</title> <style class="cp-pen-styles">
vue+iview Table表格多选切换分页保持勾选状态

本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下第一种情况(配合后端做选中数据处理) 定义三个参数,是否为全选(isSelectAll).不是全选时选择的数据(selectObject: []).反选数据(unSelectObject:[]) HTML <Alert show-icon v-show="openTip"> 已选择
Vue基于NUXT的SSR详解

本文介绍了Vue基于NUXT的SSR,分享给大家,也给自己留个笔记. SSR 首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 <!DOCTYPE html> <ht
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

准备利用vue-cli脚手架创建项目进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置项目中安装axios模块(npm install axios)完成后,进行以下配置: main.js //引入axios import Axios from 'axios' //修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 Vue.prototype.$axios=Axios l

Vue基于iview table展示图片实现点击放大

相关推荐

随机推荐