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

coldplay.xixi
Freigeben: 2020-08-08 16:21:00
nach vorne
2283 Leute haben es durchsucht

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

首先先安装依赖:

npm install v-viewer --save

然后全局引入,我这边是在main.js里面操作写的:

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

相关学习推荐:javascript教程

然后注册下:

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' } })
Nach dem Login kopieren

使用的一个demo就是:

  

Nach dem Login kopieren

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

在回到iview表格中,

需要以

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

这种格式渲染出来,第一个参数是标签,第二参数是标签里面可以含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('p', devicesArr); } }
Nach dem Login kopieren

相关学习推荐:编程视频

Das obige ist der detaillierte Inhalt vonVue基于iview table展示图片实现点击放大功能. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors