Vue affiche des images basées sur la table iview pour implémenter la fonction cliquer pour agrandir

Installez d'abord les dépendances :

npm install v-viewer --save

Puis importez-le globalement. Je l'écris dans main.js de : <.>

importer la visionneuse depuis 'v-viewer'

importer 'viewerjs/dist/viewer.css'

Recommandations d'apprentissage associées :

tutoriel javascript

Ensuite, inscrivez-vous :

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

Une démo utilisée est :

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

où item.img est en fait un chemin .

Lors du retour à la table iview,

doit être rendu au format

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

Le premier paramètre est l'étiquette, et le deuxième paramètre est l'étiquette. peut contenir des accessoires (le v-bind de vue), peut également contenir des attributs. Le troisième paramètre est un tableau représentant les sous-balises. Les sous-balises sont également dans ce format et la récursion continue.

Il est donc réécrit dans ce format. Une démo dans mon projet est la suivante. Vous pouvez cliquer sur l'image dans le tableau pour agrandir l'affichage :

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

. Apprentissage connexe recommandé :

Vidéo de programmation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!