vue popup
1.0.0
VUE 2.X 마우스 오른쪽 버튼 클릭 메뉴 구성 요소
특성:
< script src =" //cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js " > </ script >npm install @xunlei/vue-popup --save먼저 플러그인을 등록해야합니다.
import Vue from 'vue'
import VuePopup from '@xunlei/vue-popup'
Vue . use ( VuePopup ) .vue 파일에서 popup 구성 요소를 사용하십시오.
< template >
< div >
< popup ref =" popup1 " :display.sync =" showPop " >
< h3 >标题</ h3 >
< p >这是一段内容。 </ p >
</ popup >
< a v-popup:popup1 href =" javascript:; " >展示弹出框</ a >
</ div >
</ template >
< script >
export default {
data ( ) {
return {
showPop : false
}
}
}
</ script > popup 구성 요소에 ref Reference를 추가하고 v-popup 지시문을 사용하여 버튼을 팝업 상자에 매핑하십시오. display 기능은 팝업 박스가 표시되는지 여부를 구성하는 데 사용됩니다.
다음은 간단한 온라인 예입니다.
| 속성 이름 | 설명하다 | 유형 | 선택적 값 | 기본값 |
|---|---|---|---|---|
| 바디에 대한 부속 | 몸 아래에 두십시오 | 부울 | - | 진실 |
| 화살표 클래스 | 애로우의 수업 | 끈 | - | - |
| 방향 | 팝업 박스 방향 | 끈 | Top/TopStart/Topend/RightStart/RightStart/BottomStart/BottomEnd/Left/LeftStend/Leftend | 맨 아래 |
| 디스플레이 (.sync) | 눈에 보이나요? | 부울 | - | 거짓 |
| 심 | 팝업 박스와 트리거 요소 사이의 간격 | 숫자 | - | 0 |
| 방아쇠 | 팝업 상자를 트리거하는 이벤트 유형 | 끈 | 호버 / 초점 / 클릭 | 호버 |
| 스크롤 쇼 | 페이지가 스크롤 할 때 팝업 상자가 보입니다. | 부울 | - | 진실 |
| 이벤트 이름 | 설명하다 | 콜백 매개 변수 |
|---|---|---|
| 보여주다 | 팝업 박스 디스플레이 이벤트 | 값 |
| 숨다 | 팝업 박스는 이벤트를 숨 깁니다 | 값 |
v-popup설명 : 팝업 상자를 트리거하는 요소에 지시문을 추가해야합니다.
매개 변수 :
popupRef (required) - 특정 팝업 상자와 일치하는 데 사용됩니다.유형:
any (optional) - 이벤트가 트리거 될 때 통과 된 콜백 매개 변수.예:
< popup
ref =" popup1 "
:display.sync =" showPop "
@show =" handleShow "
@hide =" handleHide " >
</ popup >
< a v-popup:popup1 =" val " > </ a >
< scirpt >
export default {
...
methods: {
handleShow (val) { },
handleHide (val) { }
}
}
</ script >팝업 구성 요소는 상단, 왼쪽과 같은 필요한 스타일과 클래스 만 추가합니다. 특정 스타일은 사용자가 제공해야합니다.
팝업 박스가 방향이 변경되면 다음 4 개의 클래스가 팝업 박스의 루트 요소에 추가되어 스타일을 다른 방향으로 일치시킵니다.
# clone the project repo
git clone https://github.com/beyoursun/vue-popup.git
# install dependencies
cd vue-popup && npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildMIT
