Vue affiche des images basées sur la table iview pour implémenter la fonction cliquer pour agrandir-js tutoriel-php.cn

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

coldplay.xixi

Libérer： 2020-08-08 16:21:00

avant

2396 Les gens l'ont consulté

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: { &#39;inline&#39;: true, &#39;button&#39;: true, &#39;navbar&#39;: true, &#39;title&#39;: true, &#39;toolbar&#39;: true, &#39;tooltip&#39;: true, &#39;movable&#39;: true, &#39;zoomable&#39;: true, &#39;rotatable&#39;: true, &#39;scalable&#39;: true, &#39;transition&#39;: true, &#39;fullscreen&#39;: true, &#39;keyboard&#39;: true, &#39;url&#39;: &#39;data-source&#39; }
})

Copier après la connexion

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>

Copier après la connexion

où item.img est en fait un chemin .

Lors du retour à la table iview,

doit être rendu au format

      h(&#39;xxxx&#39;, {
        props: {
          trigger: &#39;hover&#39;,
          placement: &#39;top&#39;,
          content: &#39;二维码&#39;
        }
      }, [
      ])

Copier après la connexion

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: &#39;二维码&#39;,
  align: &#39;center&#39;,
  render: (h, params) => {
    console.log(&#39;h, param&#39;, params);
    let devicesArr = [];
    let photo = [];
    photo.push(&#39;/erweima/&#39;+params.row.pt_number+&#39;.png&#39;);
    devicesArr.push(
      h(&#39;Tooltip&#39;, {
        props: {
          trigger: &#39;hover&#39;,
          placement: &#39;top&#39;,
          content: &#39;二维码&#39;
        }
      }, [
        h(&#39;viewer&#39;, {
          props:{
            images:photo
          }
        }, [
          h(&#39;img&#39;, {
            attrs: {
              src:photo[0],
              style: &#39;width: 22px;margin-right:5px&#39;
            },
          })
        ])
      ])
    );
    return h(&#39;p&#39;, devicesArr);
  }
}

Copier après la connexion