vue2.x에서 그림 돋보기 플러그인을 사용하는 방법은 무엇입니까?

이 글에서는 주로 vue2.x 기반의 전자상거래 사진 돋보기 플러그인의 사용법을 소개하고 참고하겠습니다.

최근 전자상거래 사이트에서 작업을 하다가 타오바오 상품상세페이지처럼 사진 돋보기 효과를 표시하기 위해 메인 이미지에 마우스를 올려야 하는 현상이 발생하여 검색해보니 적합한 vue 플러그가 없는 것 같았습니다. -in, 그래서 제가 직접 만들어서 공유합니다. Xiaobai가 처음으로 공유하는 것이므로 모든 마스터는 웃어서는 안됩니다.

vue-piczoom

Vue.js 2.x용 그림 돋보기 구성 요소

vue2.x를 기반으로 하는 전자상거래 그림 돋보기 플러그인

GIF 애니메이션 스크린샷

빌드 설정 사용 단계

# 安装 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>

Config를 사용하여

을 구성하세요.

props	describe	default
url	이미지 주소	string 필수
big-url	큰 그림 주소	문자열 null
scale	이미지 배율	숫자 2.5
scroll	확대 시 페이지 스크롤 가능 여부	부울 fasle

제안사항

기본 컴포넌트 높이와 너비는 100%이므로 높이와 너비가 고정된 컨테이너에 컴포넌트를 담는 것을 권장합니다. 예:

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

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 정방향 새로 고침 및 역방향 새로 고침 없음 효과를 얻는 방법

Vue2.5의 Table 및 Pagination 구성 요소를 통해 페이징 기능을 구현하는 방법

Bootstrap을 통합하는 방법 라라벨에 4개?

jquery의 select 태그에서 옵션 값을 가져오는 방법

js를 사용하여 옵션을 동적으로 추가하여 선택하는 방법(자세한 튜토리얼)

nodejs에서 MySQL에 연결(자세한 튜토리얼)

vue 사용 .js에서 원활한 스크롤 효과를 얻는 방법

vue에서 라우팅을 사용하여 페이지 새로 고침을 달성합니다

jQuery를 통해 재귀 무한 레이어 기능 구현

위 내용은 vue2.x에서 그림 돋보기 플러그인을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!