base abstract trigger component for vue 3

Usage no npm install needed!

<script type="module">
  import ayaseVcTrigger from 'https://cdn.skypack.dev/@ayase/vc-trigger';



NPM version David dm node version

rc-trigger for vue 3

Vue 3 Trigger Component




Include the default styling and then:

      points: ['tl', 'bl'],
      offset: [0, 3]
    <template v-slot:popup>

    <a href="#">hover</a>

import Trigger from '@ayase/vc-trigger';

export default {
  components: { Trigger }


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 -


Name Params Description
popup () => VNode \| VNode[] popup content


Name Params Description
onPopupVisibleChange () => void call when popup visible is changed
onPopupAlign (popupDomNode, align) => void callback when popup node is aligned


yarn install
yarn start