组合式工具 API
usePopupInstanceId() 1.6.0+
获取当前组件所在弹出层的实例 ID。
类型
ts
function usePopupInstanceId(): InstanceId | undefined详细信息
如果当前组件并不是通过弹出层渲染,则返回 undefined。
示例
HelloPopup.vue
ts
// 弹出层渲染的组件
import { usePopup, usePopupInstanceId } from 'vue-popup-plus'
const popup = usePopup()
// 通过断言确保非空
const instanceId = usePopupInstanceId()!
function handleClose() {
popup.close(instanceId)
}相关参考
usePopupComputedStyle() 1.6.0+
获取当前弹出层的视图组件的计算样式。
类型
ts
function usePopupComputedStyle(): ComputedStyle | undefined
type ComputedStyle = ComputedRef<{
/**
* 弹出层的宽度
*/
width: number
/**
* 弹出层的高度
*/
height: number
/**
* 弹出层的 z-index
*/
zIndex: number
/**
* 弹出层的 translateX
*/
translateX: number
/**
* 弹出层的 translateY
*/
translateY: number
}>详细信息
返回的所有样式都是具有响应性的,方便开发者获取当前弹出层视图的实时计算样式。
如果当前组件并不是通过弹出层渲染,则返回 undefined。