@ayase/vc-trigger NPM

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`	`string/Object`	-
`maskTransitionName`	`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`	`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

vue vue-component vue-trigger trigger

@ayase/ayase @ayase/vc-align @ayase/vc-motion @ayase/vc-util raf

@everything-registry/sub-chunk-105 @infinitebrahmanuniverse/nolb-_ay @zalastax/nolb-_ay

0.0.2

4 years ago

0.0.1

4 years ago