mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-30 10:18:02 +08:00
docs(components): [popover] use new display tag (#15387)
This commit is contained in:
wzc520pyfm
GitHub
parent
033867f919
commit
3ec8580bc0
@ -68,45 +68,53 @@ popover/directive-usage
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Attributes
|
## API
|
||||||
|
|
||||||
| Name | Description | Type | Accepted Values | Default |
|
### Attributes
|
||||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
|
||||||
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | hover |
|
|
||||||
| title | popover title | string | — | — |
|
|
||||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
|
||||||
| content | popover content, can be replaced with a default `slot` | string | — | — |
|
|
||||||
| width | popover width | string / number | — | Min width 150px |
|
|
||||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
|
||||||
| disabled | whether Popover is disabled | boolean | — | false |
|
|
||||||
| visible / v-model:visible | whether popover is visible | Boolean | — | false |
|
|
||||||
| offset | popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12 | number | — | 12 |
|
|
||||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
|
||||||
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean | — | true |
|
|
||||||
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | object | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
|
||||||
| popper-class | custom class name for popover | string | — | — |
|
|
||||||
| popper-style | custom style for popover | string / object | — | — |
|
|
||||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
|
||||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
|
||||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
|
||||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | — |
|
|
||||||
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
|
|
||||||
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | boolean | — | true |
|
|
||||||
|
|
||||||
## Slots
|
| Name | Description | Type | Default |
|
||||||
|
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||||
|
| trigger | how the popover is triggered | ^[enum]`'click' \| 'focus' \| 'hover' \| 'contextmenu'` | hover |
|
||||||
|
| title | popover title | ^[string] | — |
|
||||||
|
| effect | Tooltip theme, built-in theme: `dark` / `light` | ^[enum]`'dark' \| 'light'` | light |
|
||||||
|
| content | popover content, can be replaced with a default `slot` | ^[string] | '' |
|
||||||
|
| width | popover width | ^[string] / ^[number] | 150 |
|
||||||
|
| placement | popover placement | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom |
|
||||||
|
| disabled | whether Popover is disabled | ^[boolean] | false |
|
||||||
|
| visible / v-model:visible | whether popover is visible | ^[boolean] / ^[null] | null |
|
||||||
|
| offset | popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12 | ^[number] | undefined |
|
||||||
|
| transition | popover transition animation, the default is el-fade-in-linear | ^[string] | — |
|
||||||
|
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) | ^[boolean] | true |
|
||||||
|
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | ^[object] | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||||
|
| popper-class | custom class name for popover | ^[string] | — |
|
||||||
|
| popper-style | custom style for popover | ^[string] / ^[object] | — |
|
||||||
|
| show-after | delay of appearance, in millisecond | ^[number] | 0 |
|
||||||
|
| hide-after | delay of disappear, in millisecond | ^[number] | 200 |
|
||||||
|
| auto-close | timeout in milliseconds to hide tooltip | ^[number] | 0 |
|
||||||
|
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | ^[number] / ^[string] | 0 |
|
||||||
|
| teleported | whether popover dropdown is teleported to the body | ^[boolean] | true |
|
||||||
|
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | ^[boolean] | true |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --------- | ---------------------------------- |
|
| --------- | ---------------------------------- |
|
||||||
| — | text content of popover |
|
| default | text content of popover |
|
||||||
| reference | HTML element that triggers popover |
|
| reference | HTML element that triggers popover |
|
||||||
|
|
||||||
## Events
|
### Events
|
||||||
|
|
||||||
| Name | Description | Parameters |
|
| Name | Description | Type |
|
||||||
| ------------ | -------------------------------------------- | ---------- |
|
| ------------ | -------------------------------------------- | ----------------------- |
|
||||||
| show | triggers when popover shows | — |
|
| show | triggers when popover shows | ^[Function]`() => void` |
|
||||||
| before-enter | triggers when the entering transition before | — |
|
| before-enter | triggers when the entering transition before | ^[Function]`() => void` |
|
||||||
| after-enter | triggers when the entering transition ends | — |
|
| after-enter | triggers when the entering transition ends | ^[Function]`() => void` |
|
||||||
| hide | triggers when popover hides | — |
|
| hide | triggers when popover hides | ^[Function]`() => void` |
|
||||||
| before-leave | triggers when the leaving transition before | — |
|
| before-leave | triggers when the leaving transition before | ^[Function]`() => void` |
|
||||||
| after-leave | triggers when the leaving transition ends | — |
|
| after-leave | triggers when the leaving transition ends | ^[Function]`() => void` |
|
||||||
|
|
||||||
|
### Exposes
|
||||||
|
|
||||||
|
| Name | Description | Type |
|
||||||
|
| ------------ | ------------ | ----------------------- |
|
||||||
|
| hide | hide popover | ^[Function]`() => void` |
|
||||||
|
|||||||
@ -8,51 +8,110 @@ import type { ExtractPropTypes, PropType } from 'vue'
|
|||||||
import type Popover from './popover.vue'
|
import type Popover from './popover.vue'
|
||||||
|
|
||||||
export const popoverProps = buildProps({
|
export const popoverProps = buildProps({
|
||||||
|
/**
|
||||||
|
* @description how the popover is triggered
|
||||||
|
*/
|
||||||
trigger: useTooltipTriggerProps.trigger,
|
trigger: useTooltipTriggerProps.trigger,
|
||||||
|
/**
|
||||||
|
* @description popover placement
|
||||||
|
*/
|
||||||
placement: dropdownProps.placement,
|
placement: dropdownProps.placement,
|
||||||
|
/**
|
||||||
|
* @description whether Popover is disabled
|
||||||
|
*/
|
||||||
disabled: useTooltipTriggerProps.disabled,
|
disabled: useTooltipTriggerProps.disabled,
|
||||||
|
/**
|
||||||
|
* @description whether popover is visible
|
||||||
|
*/
|
||||||
visible: useTooltipContentProps.visible,
|
visible: useTooltipContentProps.visible,
|
||||||
|
/**
|
||||||
|
* @description popover transition animation
|
||||||
|
*/
|
||||||
transition: useTooltipContentProps.transition,
|
transition: useTooltipContentProps.transition,
|
||||||
|
/**
|
||||||
|
* @description parameters for [popper.js](https://popper.js.org/docs/v2/)
|
||||||
|
*/
|
||||||
popperOptions: dropdownProps.popperOptions,
|
popperOptions: dropdownProps.popperOptions,
|
||||||
|
/**
|
||||||
|
* @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover
|
||||||
|
*/
|
||||||
tabindex: dropdownProps.tabindex,
|
tabindex: dropdownProps.tabindex,
|
||||||
|
/**
|
||||||
|
* @description popover content, can be replaced with a default `slot`
|
||||||
|
*/
|
||||||
content: useTooltipContentProps.content,
|
content: useTooltipContentProps.content,
|
||||||
|
/**
|
||||||
|
* @description custom style for popover
|
||||||
|
*/
|
||||||
popperStyle: useTooltipContentProps.popperStyle,
|
popperStyle: useTooltipContentProps.popperStyle,
|
||||||
|
/**
|
||||||
|
* @description custom class name for popover
|
||||||
|
*/
|
||||||
popperClass: useTooltipContentProps.popperClass,
|
popperClass: useTooltipContentProps.popperClass,
|
||||||
enterable: {
|
enterable: {
|
||||||
...useTooltipContentProps.enterable,
|
...useTooltipContentProps.enterable,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description Tooltip theme, built-in theme: `dark` / `light`
|
||||||
|
*/
|
||||||
effect: {
|
effect: {
|
||||||
...useTooltipContentProps.effect,
|
...useTooltipContentProps.effect,
|
||||||
default: 'light',
|
default: 'light',
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description whether popover dropdown is teleported to the body
|
||||||
|
*/
|
||||||
teleported: useTooltipContentProps.teleported,
|
teleported: useTooltipContentProps.teleported,
|
||||||
|
/**
|
||||||
|
* @description popover title
|
||||||
|
*/
|
||||||
title: String,
|
title: String,
|
||||||
|
/**
|
||||||
|
* @description popover width
|
||||||
|
*/
|
||||||
width: {
|
width: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: 150,
|
default: 150,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description popover offset
|
||||||
|
*/
|
||||||
offset: {
|
offset: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: undefined,
|
default: undefined,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description delay of appearance, in millisecond
|
||||||
|
*/
|
||||||
showAfter: {
|
showAfter: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description delay of disappear, in millisecond
|
||||||
|
*/
|
||||||
hideAfter: {
|
hideAfter: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 200,
|
default: 200,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description timeout in milliseconds to hide tooltip
|
||||||
|
*/
|
||||||
autoClose: {
|
autoClose: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper)
|
||||||
|
*/
|
||||||
showArrow: {
|
showArrow: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* @description when popover inactive and `persistent` is `false` , popover will be destroyed
|
||||||
|
*/
|
||||||
persistent: {
|
persistent: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user