Недавно я работал над веб-сайтом электронной коммерции, и было требование, чтобы, как и на странице сведений о продукте Taobao, мышь помещалась на основное изображение для отображения эффекта увеличительного стекла изображения. подходящий плагин vue, поэтому я сделал один и поделился им один раз. Сяобай поделился этим впервые, и все великие боги не должны смеяться.

vue-piczoom

A picture magnifier component for Vue.js 2.x
Плагин для электронной коммерции с увеличительным стеклом на основе vue2.x

Шаги настройки сборки

# 安装 install
npm install vue-piczoom --save

# 使用 use
--script
import PicZoom from 'vue-piczoom'
export default {
  name: 'App',
  components: {
    PicZoom
  }
}

--html
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>

Конфигурация конфигурации

props	describe	default
url	Адрес карты	string required
big-url	Адрес с большой картинкой	string null
scale	Увеличение изображения	number 2.5
scroll	Можно ли прокручивать страницу при увеличении	boolean fasle

Предложить заметки

Компоненты по умолчанию имеют 100% высоту и ширину, поэтому рекомендуется включать компоненты в контейнер с фиксированной высотой и шириной. Такие как:

<div class="pic-box"> <!--pic-box:width:500px;height:500px-->
     <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
</div>

Анимированный GIF-скриншот

Демонстрационный пример

Онлайн-пример

Github

обновить запись обновления

Версия 1.0.4: (2018-01-22)

1. Измените алгоритм, чтобы устранить ошибку позиционирования, когда родительский элемент имеет позицию: относительная;
2. Оптимизируйте обнаружение края, чтобы решить проблему увеличения и перемещения к краю, когда увеличенный выбор перемещается к краю;
3. Оптимизировать алгоритм движения и более плавно перемещать область выделения;