ホームページ >ウェブフロントエンド >jsチュートリアル >Vue は iview テーブルに基づいて画像を表示し、クリックして拡大する機能を実装します
最初に依存関係をインストールします:
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' } })
使用されるデモは次のとおりです:
<viewer :images="tupians"> <i-col span="4" v-for="item in tupians"> <p class="detailed"> <img :src="item.img" alt=""> </p> </i-col> </viewer>
アイテム。 img は実際にはパスです。
iview フォームに戻るとき、
は
h('xxxx', { props: { trigger: 'hover', placement: 'top', content: '二维码' } }, [ ])
の形式でレンダリングされる必要があります。最初のパラメータはラベルで、2 番目のパラメータはそのラベルです小道具 (Vue の v-bind) を含めることができ、属性も含めることができます。 3 番目のパラメーターは、サブタグを表す配列です。サブタグもこの形式であり、再帰が続きます。
したがって、この形式に書き換えられます。私のプロジェクトのデモは次のとおりです。表内の画像をクリックすると、表示が拡大されます:
{ 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); } }
推奨される関連学習: プログラミング ビデオ
以上がVue は iview テーブルに基づいて画像を表示し、クリックして拡大する機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。