vc-trigger
rc-trigger
for vue 3
Vue 3 Trigger Component
Install
Usage
Include the default styling and then:
<template>
<Trigger
:action="['click']"
:popup-align="{
points: ['tl', 'bl'],
offset: [0, 3]
}"
>
<template v-slot:popup>
<span>popup</span>
</template>
<a href="#">hover</a>
</Trigger>
</template>
<script>
import Trigger from '@ayase/vc-trigger';
export default {
components: { Trigger }
};
</script>
API
Prop | Description | Type | Default |
---|---|---|---|
alignPoint |
Popup will align with mouse position (support action of 'click', 'hover' and 'contextMenu') | boolean |
false |
popupClass |
additional className added to popup | string |
- |
forceRender |
whether render popup before first show | boolean |
false |
destroyPopupOnHide |
whether destroy popup when hide | boolean |
false |
getPopupClassFromAlign |
additional className added to popup according to align | (align: object) => string |
- |
action |
which actions cause popup shown. enum of "hover" , click , "focus" , "contextMenu"
|
string[] |
['hover'] |
mouseEnterDelay |
delay time to show when mouse enter. unit: s. | number |
0 |
mouseLeaveDelay |
delay time to hide when mouse leave. unit: s. | number |
0.1 |
popupStyle |
additional style of popup | Object |
- |
prefixCls |
prefix class name | string |
vc-trigger-popup |
popupTransitionName |
[vc-motion ][vc-motion] |
string/Object |
- |
maskTransitionName |
[vc-motion ][vc-motion] |
string/Object |
- |
mask |
whether to support mask | boolean |
false |
maskClosable |
whether to support click mask to hide | boolean |
true |
popupVisible |
whether popup is visible | boolean |
- |
zIndex |
popup's zIndex | number |
- |
defaultPopupVisible |
whether popup is visible initially | boolean |
- |
popupAlign |
popup 's align config, [dom-align ][dom-align] |
object |
- |
getPopupContainer |
function returning html node which will act as popup container | () => HTMLElement |
- |
getDocument |
function returning document node which will be attached click event to close trigger | () => HTMLElement |
- |
popupPlacement |
use preset popup align config from builtinPlacements, can be merged by popupAlign prop | string |
- |
builtinPlacements |
builtin placement align map. used by placement prop | object |
- |
stretch |
Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth') | string |
- |
Slots
Name | Params | Description |
---|---|---|
popup |
() => VNode | VNode[] |
popup content |
Emits
Name | Params | Description |
---|---|---|
onPopupVisibleChange |
() => void |
call when popup visible is changed |
onPopupAlign |
(popupDomNode, align) => void | callback when popup node is aligned |
Development
yarn install
yarn start
License
MIT