hechang27
/
noob-components
forked from mengyxu/noob-components
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: make tooltip reaction faster/snappier

hechang27-sprt 5 months ago
parent
a26dd7a949
commit
c4fc3163a8
5 changed files with 149 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      packages/base/item/buttonWithTooltip.vue
  2. 43
      packages/manage/head/fullscreen.vue
  3. 45
      packages/manage/head/lang-change.vue
  4. 49
      packages/manage/head/size-change.vue
  5. 100
      packages/manage/head/style-change.vue

9
packages/base/item/buttonWithTooltip.vue
Unescape View File

@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
:content="props.tooltip"
:disabled="props.disabled || !props.tooltip"
:show-after="0"
:hide-after="0"
:hide-after="10"
transition=""
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
popper-class="non-interactive-tooltip"
>
@ -40,11 +41,11 @@ const hasSlotContent = computed(() => { @@ -40,11 +41,11 @@ const hasSlotContent = computed(() => {
if (!slots.default) return false;
const content = slots.default();
// Filter out comments and empty text nodes
const meaningfulContent = content.filter(vnode => {
const meaningfulContent = content.filter((vnode) => {
// Comment nodes
if (vnode.type === Symbol.for('v-cmt')) return false;
if (vnode.type === Symbol.for("v-cmt")) return false;
// Text nodes that are empty or whitespace only
if (vnode.type === Symbol.for('v-txt') && (!vnode.children || String(vnode.children).trim() === '')) return false;
if (vnode.type === Symbol.for("v-txt") && (!vnode.children || String(vnode.children).trim() === "")) return false;
return true;
});
return meaningfulContent.length > 0;

43
packages/manage/head/fullscreen.vue
Unescape View File

@ -1,10 +1,19 @@ @@ -1,10 +1,19 @@
<template>
<el-tooltip effect="dark" :content="t('head.fullScreen')" placement="bottom">
<!-- <el-button class="head-icon" @click="fullscreen" icon="fullscreen" :size="state.size.size" circle></el-button> -->
<el-icon @click="fullscreen" class="head-icon">
<FullScreen />
</el-icon>
</el-tooltip>
<el-tooltip
effect="dark"
:content="t('head.fullScreen')"
placement="bottom"
:show-after="0"
:hide-after="10"
transition=""
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
popper-class="non-interactive-tooltip"
>
<!-- <el-button class="head-icon" @click="fullscreen" icon="fullscreen" :size="state.size.size" circle></el-button> -->
<el-icon @click="fullscreen" class="head-icon">
<FullScreen />
</el-icon>
</el-tooltip>
</template>
<script lang="ts" setup>
@ -16,15 +25,19 @@ const { t } = useI18n(); @@ -16,15 +25,19 @@ const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const fullscreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
};
onMounted(() => { });
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.non-interactive-tooltip {
pointer-events: none !important;
}
</style>

45
packages/manage/head/lang-change.vue
Unescape View File

@ -1,15 +1,24 @@ @@ -1,15 +1,24 @@
<template>
<el-tooltip effect="dark" :content="t('head.language')" placement="left">
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button icon="Flag" :size="state.size.size" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeLang('zh')">{{ t('head.zh') }}</el-dropdown-item>
<el-dropdown-item @click="changeLang('en')">{{ t('head.en') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-tooltip
effect="dark"
:content="t('head.language')"
placement="bottom"
:show-after="0"
:hide-after="10"
transition=""
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
popper-class="non-interactive-tooltip"
>
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button icon="Flag" :size="state.size.size" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeLang('zh')">{{ t("head.zh") }}</el-dropdown-item>
<el-dropdown-item @click="changeLang('en')">{{ t("head.en") }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</template>
<script lang="ts" setup>
@ -20,10 +29,14 @@ const { t, setLocale } = useI18n(); @@ -20,10 +29,14 @@ const { t, setLocale } = useI18n();
const { state, commit, dispatch } = useStore();
const changeLang = type => {
setLocale(type);
}
const changeLang = (type) => {
setLocale(type);
};
onMounted(() => { });
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.non-interactive-tooltip {
pointer-events: none !important;
}
</style>

49
packages/manage/head/size-change.vue
Unescape View File

@ -1,16 +1,25 @@ @@ -1,16 +1,25 @@
<template>
<el-tooltip effect="dark" :content="t('head.size')" placement="left">
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button icon="Switch" :size="state.size.size" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeSize('small')">{{ t('head.small') }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('normal')">{{ t('head.normal') }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('large')">{{ t('head.large') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-tooltip
effect="dark"
:content="t('head.size')"
placement="bottom"
:show-after="0"
:hide-after="10"
transition=""
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
popper-class="non-interactive-tooltip"
>
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button icon="Switch" :size="state.size.size" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeSize('small')">{{ t("head.small") }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('normal')">{{ t("head.normal") }}</el-dropdown-item>
<el-dropdown-item @click="changeSize('large')">{{ t("head.large") }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</template>
<script lang="ts" setup>
@ -22,11 +31,15 @@ const { t } = useI18n(); @@ -22,11 +31,15 @@ const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const changeSize = type => {
commit('updateState', ['size', Size[type]])
commit('initSize', [window.innerHeight, window.innerWidth]);
}
const changeSize = (type) => {
commit("updateState", ["size", Size[type]]);
commit("initSize", [window.innerHeight, window.innerWidth]);
};
onMounted(() => { });
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.non-interactive-tooltip {
pointer-events: none !important;
}
</style>

100
packages/manage/head/style-change.vue
Unescape View File

@ -1,48 +1,56 @@ @@ -1,48 +1,56 @@
<template>
<el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button :size="state.size.size" icon="Opportunity" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
<el-tooltip
effect="dark"
:content="t('head.changeStyle')"
placement="bottom"
:show-after="0"
:hide-after="10"
transition=""
:popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
popper-class="non-interactive-tooltip"
>
<el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
<el-button :size="state.size.size" icon="Opportunity" circle></el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
<el-tooltip effect="dark" :content="t(item.i18n)" placement="left">
<component class="icon" :is="item.icon"></component>
</el-tooltip>
</el-dropdown-item> -->
<el-dropdown-item @click="changeStyle('plainb')">
<el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
<el-icon class="dropdown-icon">
<Sunset />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('plain')">
<el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
<el-icon class="dropdown-icon">
<Sunset />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('light')">
<el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
<el-icon class="dropdown-icon">
<Sunny />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('dark')">
<el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
<el-icon class="dropdown-icon">
<MoonNight />
</el-icon>
</el-tooltip>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-dropdown-item @click="changeStyle('plainb')">
<el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
<el-icon class="dropdown-icon">
<Sunset />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('plain')">
<el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
<el-icon class="dropdown-icon">
<Sunset />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('light')">
<el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
<el-icon class="dropdown-icon">
<Sunny />
</el-icon>
</el-tooltip>
</el-dropdown-item>
<el-dropdown-item @click="changeStyle('dark')">
<el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
<el-icon class="dropdown-icon">
<MoonNight />
</el-icon>
</el-tooltip>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
</template>
<script lang="ts" setup>
@ -54,10 +62,14 @@ const { t } = useI18n(); @@ -54,10 +62,14 @@ const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const changeStyle = type => {
commit('updateState', ['style', Styles[type]]);
}
const changeStyle = (type) => {
commit("updateState", ["style", Styles[type]]);
};
onMounted(() => { });
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.non-interactive-tooltip {
pointer-events: none !important;
}
</style>

Write Preview
Loading…
Cancel
Save