Element - Ui 구성 요소 (40) Popover 팝 업 상자
7803 단어 Vue.js
본 고 는 Element 공식 문서 에서 기원 되 었 습 니 다.
http://element-cn.eleme.io/#/zh-CN/component/popover
기초 용법
일반 팝 업 상자
<el-popover
ref="popover1"
placement="top-start"
title=" "
width="200"
trigger="hover"
content=" , , , 。">
</el-popover>
<el-popover
ref="popover2"
placement="bottom"
title=" "
width="200"
trigger="click"
content=" , , , 。">
</el-popover>
<el-button v-popover:popover1>hover </el-button>
<el-button v-popover:popover2>click </el-button>
<el-popover
placement="right"
title=" "
width="200"
trigger="focus"
content=" , , , 。">
<el-button slot="reference">focus </el-button>
</el-popover>
슬롯 이 있 는 팝 업 상자
<el-popover
ref="popover4"
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label=" "></el-table-column>
<el-table-column width="100" property="name" label=" "></el-table-column>
<el-table-column width="300" property="address" label=" "></el-table-column>
</el-table>
</el-popover>
<el-button v-popover:popover4>click </el-button>
Attributes:
매개 변수
유형
설명 하 다.
선택 값
기본 값
trigger
트리거 모드
String
click/focus/hover/manual
click
title
표제
String
—
—
content
표시 되 는 내용 은 slot 를 통 해 DOM 에 들 어 갈 수도 있 습 니 다.
String
—
—
width
너비.
String, Number
—
최소 너비 150 px
placement
출현 위치
String
top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
bottom
disabled
Popover 사용 가능 여부
Boolean
—
false
value(v-model)
상태 보 임 여부
Boolean
—
false
offset
위치 오프셋
Number
—
0
transition
그 라 데 이 션 애니메이션 정의
String
—
fade-in-linear
visible-arrow
Tooltip 화살 표를 표시 할 지 여부 입 니 다. 더 많은 매개 변 수 는 Vue - popper 를 볼 수 있 습 니 다.
Boolean
—
true
popper-options
popper. js 의 인자
Object
popper. js 문서 참조
{ boundariesElement: ‘body’, gpuAcceleration: false }
popper-class
popper 에 클래스 이름 추가
String
—
—
open-delay
트리거 방식 이 hover 일 때 디 스 플레이 지연, 단 위 는 밀리초 입 니 다.
Number
—
—
Slot
매개 변수
설명 하 다.
—
Popover 에 HTML 텍스트 삽입
reference
Popover 에 표 시 된 HTML 요 소 를 터치 합 니 다.
Events
이벤트 이름
설명 하 다.
리 턴 매개 변수
show
표시 시 터치
—
hide
숨 길 때 발동
—
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.