mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
docs(popover): exposed methods
This commit is contained in:
parent
7226568f80
commit
801576936c
@ -8,7 +8,7 @@ import {
|
||||
ExtractPropTypes
|
||||
} from 'vue'
|
||||
import type { PopoverProps } from '../../popover/src/Popover'
|
||||
import { TooltipRef } from '../../tooltip/src/Tooltip'
|
||||
import { TooltipInst } from '../../tooltip/src/Tooltip'
|
||||
import { NTooltip } from '../../tooltip'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
@ -45,7 +45,7 @@ export default defineComponent({
|
||||
props
|
||||
)
|
||||
const triggerRef = ref<HTMLElement | null>(null)
|
||||
const tooltipRef = ref<TooltipRef | null>(null)
|
||||
const tooltipRef = ref<TooltipInst | null>(null)
|
||||
const expandedRef = ref(false)
|
||||
const ellpisisStyleRef = computed(() => {
|
||||
const { lineClamp } = props
|
||||
|
@ -2,7 +2,7 @@ import { h, ref, defineComponent, provide, PropType, reactive } from 'vue'
|
||||
import {
|
||||
NPopover,
|
||||
popoverProps,
|
||||
PopoverRef,
|
||||
PopoverInst,
|
||||
PopoverTrigger
|
||||
} from '../../popover'
|
||||
import { omit, keep, call } from '../../_utils'
|
||||
@ -44,7 +44,7 @@ export default defineComponent({
|
||||
popconfirmLight,
|
||||
props
|
||||
)
|
||||
const popoverInstRef = ref<PopoverRef | null>(null)
|
||||
const popoverInstRef = ref<PopoverInst | null>(null)
|
||||
function handlePositiveClick (e: MouseEvent): void {
|
||||
const { onPositiveClick, 'onUpdate:show': onUpdateShow } = props
|
||||
void Promise.resolve(onPositiveClick ? onPositiveClick(e) : true).then(
|
||||
|
@ -47,3 +47,10 @@ manual-position
|
||||
| ------- | ---------- | ----------------------------------------------- |
|
||||
| trigger | `()` | The element or component that triggers popover. |
|
||||
| default | `()` | The content inside popover. |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------------ | ----------------- | ------------------------------------- |
|
||||
| setShow | `(show: boolean)` | Set show status in uncontrolled mode. |
|
||||
| syncPosition | `()` | Sync popover position. |
|
||||
|
@ -47,3 +47,10 @@ manual-position
|
||||
| ------- | ---- | ------------------------ |
|
||||
| trigger | `()` | 触发弹出信息的组件或元素 |
|
||||
| default | `()` | 弹出的内容 |
|
||||
|
||||
## Methods
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------------ | ----------------- | -------------------------------- |
|
||||
| setShow | `(show: boolean)` | 非受控模式下控制是否显示 popover |
|
||||
| syncPosition | `()` | 同步 popover 位置 |
|
||||
|
@ -1,2 +1,2 @@
|
||||
export { default as NPopover, popoverProps } from './src/Popover'
|
||||
export type { PopoverTrigger, PopoverRef } from './src/interface'
|
||||
export type { PopoverTrigger, PopoverInst } from './src/interface'
|
||||
|
@ -1,6 +1,6 @@
|
||||
export type PopoverTrigger = 'click' | 'hover' | 'manual'
|
||||
|
||||
export interface PopoverRef {
|
||||
export interface PopoverInst {
|
||||
syncPosition: () => void
|
||||
setShow: (value: boolean) => void
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { defineComponent, h, Fragment } from 'vue'
|
||||
import { defineComponent, h, Fragment, nextTick } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { NPopover } from '../index'
|
||||
import { NPopover, PopoverInst } from '../index'
|
||||
import { createId } from 'seemly'
|
||||
|
||||
async function sleep (ms: number): Promise<void> {
|
||||
@ -78,6 +78,21 @@ describe('n-popover', () => {
|
||||
expect(
|
||||
document.querySelector(`.star-kirby-${classNameHash}-content`)
|
||||
).toEqual(null)
|
||||
|
||||
const inst = wrapper.vm as PopoverInst
|
||||
|
||||
inst.setShow(true)
|
||||
await nextTick()
|
||||
expect(
|
||||
document.querySelector(`.star-kirby-${classNameHash}-content`)
|
||||
).not.toEqual(null)
|
||||
|
||||
inst.setShow(false)
|
||||
await nextTick()
|
||||
expect(
|
||||
document.querySelector(`.star-kirby-${classNameHash}-content`)
|
||||
).toEqual(null)
|
||||
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { h, ref, provide, defineComponent, reactive, PropType } from 'vue'
|
||||
import { NPopover, popoverProps } from '../../popover'
|
||||
import type { PopoverRef, PopoverTrigger } from '../../popover'
|
||||
import type { PopoverInst, PopoverTrigger } from '../../popover'
|
||||
import NPopselectPanel, { panelPropKeys, panelProps } from './PopselectPanel'
|
||||
import { omit, keep } from '../../_utils'
|
||||
import { useTheme } from '../../_mixins'
|
||||
@ -34,7 +34,7 @@ export default defineComponent({
|
||||
popselectLight,
|
||||
props
|
||||
)
|
||||
const popoverInstRef = ref<PopoverRef | null>(null)
|
||||
const popoverInstRef = ref<PopoverInst | null>(null)
|
||||
function syncPosition (): void {
|
||||
popoverInstRef.value?.syncPosition()
|
||||
}
|
||||
|
@ -1,13 +1,13 @@
|
||||
// Tooltip: popover wearing waistcoat
|
||||
import { h, defineComponent, ref, computed } from 'vue'
|
||||
import { NPopover, popoverProps } from '../../popover'
|
||||
import type { PopoverRef } from '../../popover'
|
||||
import type { PopoverInst } from '../../popover'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { tooltipLight } from '../styles'
|
||||
import type { TooltipTheme } from '../styles'
|
||||
|
||||
export type TooltipRef = PopoverRef
|
||||
export type TooltipInst = PopoverInst
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Tooltip',
|
||||
@ -23,8 +23,8 @@ export default defineComponent({
|
||||
tooltipLight,
|
||||
props
|
||||
)
|
||||
const popoverRef = ref<PopoverRef | null>(null)
|
||||
const tooltipExposedMethod: TooltipRef = {
|
||||
const popoverRef = ref<PopoverInst | null>(null)
|
||||
const tooltipExposedMethod: TooltipInst = {
|
||||
syncPosition () {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
popoverRef.value!.syncPosition()
|
||||
|
Loading…
Reference in New Issue
Block a user