Vue zeigt Bilder basierend auf der iview-Tabelle an, um die Funktion „Klicken zum Vergrößern' zu implementieren

Installieren Sie zuerst die Abhängigkeiten:

npm install v-viewer --save

Dann importieren Sie sie global. Ich habe sie in main.js geschrieben:

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

Verwandte Lernempfehlungen: Javascript-Tutorial

Dann registrieren Sie sich:

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' }
})

Eine verwendete Demo ist:

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

wobei item.img eigentlich ein Pfad ist.

Bei der Rückkehr zur iview-Tabelle muss

im Format

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

gerendert werden. Der erste Parameter ist die Beschriftung, und der zweite Parameter ist, dass die Beschriftung Requisiten (Vues V-Bind) oder Attribute enthalten kann. . Der dritte Parameter ist ein Array, das Untertags darstellt. Untertags liegen ebenfalls in diesem Format vor und die Rekursion geht weiter.

Eine Demo in meinem Projekt ist wie folgt. Sie können auf das Bild in der Tabelle klicken, um die Anzeige zu vergrößern:

{
  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);
  }
}

Verwandte Lernempfehlungen: Programmiervideo

Das obige ist der detaillierte Inhalt vonVue zeigt Bilder basierend auf der iview-Tabelle an, um die Funktion „Klicken zum Vergrößern' zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!