Vue.js 그림 미리 보기 플러그 인 사용 설명

Vue.js 가 뭐 예요?
Vue(독음/vju)ː/，view 와 유사)는 사용자 인터페이스 구축 에 사용 되 는 점진 적 인 프레임 워 크 입 니 다.다른 대형 프레임 워 크 와 달리 Vue 는 아래 에서 위로 응용 할 수 있 도록 설계 되 었 다.Vue 의 핵심 라 이브 러 리 는 그림 층 에 만 관심 을 가지 고 손 쉽게 사용 할 수 있 을 뿐만 아니 라 제3자 라 이브 러 리 나 기 존 프로젝트 와 통합 하기 도 편리 합 니 다.다른 한편,현대 화 된 도구 체인 과 각종 지원 라 이브 러 리 를 결합 하여 사용 할 때 Vue 도 복잡 한 단일 페이지 응용 에 구동 을 제공 할 수 있다.
만약 당신 이 Vue 를 깊이 공부 하기 전에 그것 에 대해 더 많이 알 고 싶다 면 우 리 는 동 영상 을 만들어 서 그 핵심 개념 과 예시 공 사 를 알 게 해 드 리 겠 습 니 다.
경험 이 있 는 전단 개발 자 라면 Vue 가 다른 라 이브 러 리/프레임 워 크 와 어떤 차이 가 있 는 지 알 고 싶 으 면 다른 프레임 워 크 를 비교 해 보 세 요.
미리 보기(원래 글 의 미리 보기,확장 되 지 않 음)
 
설치 하 다.

npm install --save vue-picture-preview-extend

쓰다
우선 프로젝트 의 입구 파일 에 Vue.use 를 호출 하여 설치 합 니 다.

import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

루트 구성 요소 에 lg-preview 구성 요소 의 위 치 를 추가 합 니 다.

<!-- Vue root compoment template -->
<div id="app">
  <router-view></router-view>
  <lg-preview></lg-preview>
</div>

모든 그림 에 대해 서 는 v-preview 명령 을 사용 하여 미리 보기 기능 을 연결 할 수 있 습 니 다.

<img v-for="(img,index) in imgs" 
   v-preview="img.url" 
   :src="img.url" 
   :alt="img.title" 
   :key="index"
   preview-title-enable="true"
   preview-nav-enable="true"
　　　preview-top-title-tnable="true"
　　　preview-title-extend="false"
　　　data-title="       "
>

이상 은 사용 방법 입 니 다.플러그 인의 api 를 말씀 드 리 겠 습 니 다.
원래 api:
1.isTitle 활성화:(boolean,optional)preview-title-enable="false"를 설정 하면 아래쪽 제목 을 사용 하지 않 습 니 다.기본 값:true.
2.isHorizontalNavEnable:(boolean,optional)preview-nav-enable="false"를 설정 하면 수평 탐색 을 사용 하지 않 습 니 다.기본 값:true
확장 버 전 api:
1.isCurrentAndAllTitle:(boolean,optional)preview-title-extend=false 를 설정 하여 아래쪽 제목(현재 페이지/전체 페이지)형식 을 닫 습 니 다(열 때 isTitle Enable).기본 값:true
2.isTopTitleShow:(boolean,optional)preview-top-title-table=false 를 설정 하여 상단 제목 을 비활성화 합 니 다.기본 값:true.
3.topTitle:(string,optional)data-title 설정 상단 제목 텍스트,기본 값 없 음
확장 판 추가 기능(수정 포함):
1.아래쪽 제목 형식 추가(기 존 형식 은 alt 속성 을 가 져 옵 니 다.alt 가 다른 용도 로 사 용 될 수 있 거나 index/total 과 같은 현재 페이지/전체 페이지 의 아래쪽 제목 을 직접 원 하 는 것 을 고려 하여 이러한 유형 을 설정 하면 alt 의 아래쪽 제목 형식 이 표시 되 지 않 습 니 다)
2.상단 제목 추가(img 에 설 정 된 data-title 로 생 성)
      3.좌우 슬라이딩 전환 그림 추가
4.첫 번 째 힌트,마지막 힌트 추가
기타 하고 싶 은 말:
1.그룹 을 만 들 려 고 했 는데(같은 페이지 에서 미리 보 려 고 하 는 그림 이 여러 그룹 일 수도 있 으 니 플러그 인 이 만족 하지 않 을 수도 있 습 니 다).그러나 회사 가 시간 이 촉박 해서 하지 않 았 습 니 다.생각 은 데이터-group 과 같은 필드 를 추가 한 다음 에 list 를 그룹 으로 나 누 어 구체 적 인 생각 을 하 는 것 입 니 다.만약 에 큰 사람 이 확장 하고 싶 으 면 저 는 기 존의 확장 코드 를 무조건 받 아들 일 수 있 습 니 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue.js 이미지 미리 보기 플러그 인 에 대한 상세 한 설명 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!