Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大
首先先安裝依賴:
npm install v-viewer --save
然后全局引入,我這邊是在main.js里面操作寫的:
import Viewer from ’v-viewer’import ’viewerjs/dist/viewer.css’
然后注冊(cè)下:
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’ }})
使用的一個(gè)demo就是:
<viewer :images='tupians'> <i-col span='4' v-for='item in tupians'> <div class='detailed'> <img :src='http://www.hdgsjgj.cn/bcjs/item.img' alt=''> </div> </i-col></viewer>
其中item.img其實(shí)就是一個(gè)路徑。
在回到iview表格中,
需要以
h(’xxxx’, {props: { trigger: ’hover’, placement: ’top’, content: ’二維碼’} }, [ ])
這種格式渲染出來,第一個(gè)參數(shù)是標(biāo)簽,第二參數(shù)是標(biāo)簽里面可以含props(vue的v-bind),也可以包含屬性。第三個(gè)參數(shù)是數(shù)組,表示子標(biāo)簽。子標(biāo)簽也是這種格式的,以此遞歸下去。
所以改寫成這種格式的,在本人項(xiàng)目中的一個(gè)demo如下,就可以實(shí)現(xiàn)在表格中點(diǎn)擊圖片進(jìn)行放大展示:
{ 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); }}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Python+unittest+requests 接口自動(dòng)化測(cè)試框架搭建教程2. Python的文本常量與字符串模板之string庫3. 利用CSS制作3D動(dòng)畫4. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼5. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題6. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程9. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法10. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)
