@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
118 lines (117 loc) • 3.53 kB
TypeScript
/**
* Tooltip 组件用来实现鼠标移动至目标组件时，或者点击目标时，在其上显示提示丰富的信息。
*
* @example
* ```vue
* <script setup lang="ts">
* import { computed, ref } from 'vue'
*
* const popoverRef = ref<HTMLElement>()
* const hostRef = ref<HTMLElement>()
* const host = computed(() => hostRef)
* const popoverInstance = computed(() => popoverRef)
* const visible = false
* const zIndex = 9
* const offsetX = 0
* const minWidth = -1
* const fitContent = false
* const placement = 'bottom-left'
* const leftBoundary = {}
* const rightBoundary = {}
* function onShown() {
* console.log('shown')
* }
* function onHidden() {
* console.log('hidden')
* }
* </script>
* <template>
* <div>
* <div id="host" ref="hostRef"></div>
* <f-popover
* ref="popoverRef"
* id="basic"
* :host="hostRef"
* :reference="popoverInstance.value"
* :title="'This the title'"
* :visible="visible"
* :offset-x="offsetX"
* :z-index="zIndex"
* :fit-content="fitContent"
* :min-width="minWidth"
* :placement="placement"
* :keep-width-with-reference="true"
* :is-simple-tips="true"
* @shown="onShown"
* @hidden="onHidden"
* >
* This is popover content.
* </f-popover>
* <f-button v-popover:toggle="popoverInstance"> click to show popover </f-button>
* </div>
* </template>
* ```
*
* @public
*/
declare const _default: import("vue").DefineComponent<{
class: string;
visible: boolean;
fitContent: boolean;
minWidth: number;
arrowOffsetX: number;
customStyles: Record<string, any>;
isSimpleTips: boolean;
keepWidthWithReference: boolean;
offsetX: any;
offsetY: any;
placement: import("./popover.props").PopoverPlacement;
showArrow: boolean;
zIndex: number;
limitContentBySpace: boolean;
id?: string | undefined;
title?: string | undefined;
beforeClose?: (() => boolean | Promise<boolean>) | undefined;
host?: any;
leftBoundary?: any;
reference?: any;
rightBoundary?: any;
}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
class: string;
visible: boolean;
fitContent: boolean;
minWidth: number;
arrowOffsetX: number;
customStyles: Record<string, any>;
isSimpleTips: boolean;
keepWidthWithReference: boolean;
offsetX: any;
offsetY: any;
placement: import("./popover.props").PopoverPlacement;
showArrow: boolean;
zIndex: number;
limitContentBySpace: boolean;
id?: string | undefined;
title?: string | undefined;
beforeClose?: (() => boolean | Promise<boolean>) | undefined;
host?: any;
leftBoundary?: any;
reference?: any;
rightBoundary?: any;
}> & Readonly<{}>, {
class: string;
visible: boolean;
fitContent: boolean;
minWidth: number;
arrowOffsetX: number;
customStyles: Record<string, any>;
isSimpleTips: boolean;
keepWidthWithReference: boolean;
offsetX: any;
offsetY: any;
placement: import("./popover.props").PopoverPlacement;
showArrow: boolean;
zIndex: number;
limitContentBySpace: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;