testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(tooltip): support distroy tooltip when mouse leave tip's owner

This commit is contained in:
Sagi 2022-10-13 17:23:38 +08:00
parent e3984c08ec
commit 235bf21c37
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui-vue/components/tooltip/src/tooltip.component.tsx
View File

@ -7,7 +7,7 @@ import { useTooltipPosition } from './composition/use-tooltip-position';
export default defineComponent({
name: 'FTooltip',
props: tooltipProps,
emits: [],
emits: ['click'],
setup(props: TooltipProps, context: SetupContext) {
const isTextContext = ref(true);
const arrowRef = ref<HTMLElement>();
@ -57,9 +57,13 @@ export default defineComponent({
}
});
function onClick($event: MouseEvent) {
context.emit('click', $event);
}
return () => {
return (
<div ref={tooltipRef} class={tooltipClass.value} style={tooltipStyle.value}>
<div ref={tooltipRef} class={tooltipClass.value} style={tooltipStyle.value} onClick={onClick}>
<div class="arrow" ref={arrowRef}></div>
<div class="tooltip-inner">
<div class="tooltip-tmpl">

27
packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
View File

@ -9,7 +9,7 @@ function initInstance(props: TooltipProps, content?: string): App {
onUnmounted(() => {
document.body.removeChild(container);
});
return () => <Tooltip {...props}></Tooltip>;
return () => <Tooltip {...props} onClick={app.unmount}></Tooltip>;
}
});
document.body.appendChild(container);
@ -17,27 +17,34 @@ function initInstance(props: TooltipProps, content?: string): App {
return app;
}
function showTooltip(options: TooltipProps): void {
function showTooltip(options: TooltipProps): App {
const props: TooltipProps = reactive({
...options
});
initInstance(props);
return initInstance(props);
}
const tooltipDirective = {
mounted: (element: HTMLElement, binding: Record<string, any>, vnode: any) => {
let app: App | null;
element.addEventListener('mouseenter', ($event: MouseEvent) => {
$event.stopPropagation();
showTooltip({
content: 'This is a tooltip',
width: 100,
customClass: '',
placement: 'top',
reference: element
});
if (!app) {
app = showTooltip({
content: 'This is a tooltip',
width: 100,
customClass: '',
placement: 'top',
reference: element
});
}
});
element.addEventListener('mouseleave', ($event: MouseEvent) => {
$event.stopPropagation();
if (app) {
app.unmount();
app = null;
}
});
},
unMounted: (element: HTMLElement, binding: Record<string, any>, vnode: any) => { }