Использование плагина просмотра изображений Vue v-viewer

Vue.js
Использование плагина просмотра изображений Vue v-viewer

Будьте всегда полны надежды в жизни и встречайте трудности и невзгоды с улыбкой.

предисловие

Щелкните маленькое изображение в проекте, чтобы просмотреть большое изображение. Очень часто требуется вращать, увеличивать и уменьшать большое изображение. Сегодня я поделюсь с вами тем, как плагин v-viewer используется в vue. проект. Давайте посмотрим на окончательный эффект (картинка крупнее, нажмите на ссылку, чтобы посмотреть)

GIF-рендеринг

Установить плагин

  • терминальное исполнение
yarn add v-viewer

Используйте плагины

  • Добавьте следующий код в main.js
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// 图片加载插件
Vue.use(Viewer,{name: 'viewer'});
  • Добавьте следующий код к необходимым компонентам

дом часть

<template>
 <!--图片查看插件-->
 <div class="images" v-viewer="{movable: false}" style="display: none">
   <img v-for="src in images" :src="src" :key="src">
 </div>
</template>

js-часть

export default {
   data() {
      return {
        images:[],
   },
   mounted: function () {
     // 图片查看插件
     show () {
       // 找到.images的div挂载到$viewer上
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     }
   }
 }
  • метод вызова

Сколько изображений нужно отобразить, просто поместите столько изображений в массив изображений.

viewLargerImage: function(event){
  const imgSrc = event.target.src;
  if(typeof imgSrc !=="undefined"){
    // 清空图片数组
    this.images = [];
    this.images.push(imgSrc);
    this.show();
  }
}

Адрес онлайн-опыта:chat-system| Пример кода адреса:chat-system

Дополнительные сведения об использовании см. в репозитории плагинов npm:v-viewer

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌
Категории