@ayase/vc-trigger

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';
</script>

README

vc-trigger

NPM version David dm node version

rc-trigger for vue 3

Vue 3 Trigger Component

Install

vc-trigger

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