溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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, '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 table展示圖片實現點擊放大的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
