diff --git a/CHANGELOG.md b/CHANGELOG.md index cd051dee..ff063d60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ 剔除 `h` 函数渲染,因为该方法不会受到 `vue` 的编译优化。 +针对 `MenuTag` 的定位滚动效果做了优化,现在滚动效果更加平滑。 + 补充了一些代码的注释(慢慢还账-,-)。 ### Feats @@ -26,6 +28,8 @@ - `on` - `off` - 移除 `changeSwitcher` 方法,使用 `updateSettingState` 方法代替 +- `useContextmenuCoordinate` 方法支持配置项 +- `MenuTag` 的定位滚动现在支持过渡效果 ## Fixes diff --git a/src/hooks/components/useContextmenuCoordinate.ts b/src/hooks/components/useContextmenuCoordinate.ts index 9b64f571..d9ceba21 100644 --- a/src/hooks/components/useContextmenuCoordinate.ts +++ b/src/hooks/components/useContextmenuCoordinate.ts @@ -12,7 +12,12 @@ import { useEventListener, onClickOutside } from '@vueuse/core' import type { BasicTarget } from '@/types/modules/vue' -import type { MaybeElementRef, MaybeElement } from '@vueuse/core' +import type { + MaybeElementRef, + MaybeElement, + UseEventSourceOptions, + MaybeRefOrGetter, +} from '@vueuse/core' /** * @@ -29,7 +34,10 @@ import type { MaybeElementRef, MaybeElement } from '@vueuse/core' * * */ -export const useContextmenuCoordinate = (target: BasicTarget) => { +export const useContextmenuCoordinate = ( + target: BasicTarget, + options?: MaybeRefOrGetter, +) => { const x = ref(0) // 鼠标 x 坐标 const y = ref(0) // 鼠标 y 坐标 const show = ref(false) // 是否显示右键菜单 @@ -63,6 +71,7 @@ export const useContextmenuCoordinate = (target: BasicTarget) => { target, 'contextmenu', bindContextMenuEvent, + options, ) const cleanupClick = useEventListener(target, 'click', () => { show.value = false diff --git a/src/hooks/template/useWatermark.ts b/src/hooks/template/useWatermark.ts index a86f3510..db1f045a 100644 --- a/src/hooks/template/useWatermark.ts +++ b/src/hooks/template/useWatermark.ts @@ -10,8 +10,6 @@ */ import { useSettingActions, useSettingGetters } from '@/store' -import { setVariable, getVariableToRefs } from '@/global-variable' -import { cloneDeep } from 'lodash-es' export const useWatermark = () => { /** diff --git a/src/hooks/web/useDevice.ts b/src/hooks/web/useDevice.ts index 68de54c7..597baed8 100644 --- a/src/hooks/web/useDevice.ts +++ b/src/hooks/web/useDevice.ts @@ -17,6 +17,17 @@ import { useWindowSize } from '@vueuse/core' import { watchEffectWithTarget } from '@/utils/vue' +/** + * + * 检测当前尺寸是否为平板或者更小 + * 默认主流平板尺寸为 768px + * + * @example + * const { width, height, isTabletOrSmaller } = useDevice() + * + * isTabletOrSmaller.value => true // 当前尺寸为平板或者更小 + * isTabletOrSmaller.value => false // 当前尺寸为桌面或者更大 + */ export function useDevice() { const { width, height } = useWindowSize() const isTabletOrSmaller = ref(false) diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 80caf9a5..3f929c0d 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -353,7 +353,10 @@ export default defineComponent({ const [menuTag] = tags nextTick().then(() => { - menuTag.scrollIntoView?.(true) + scrollRef.value?.scrollTo({ + left: menuTag.offsetLeft, + behavior: 'smooth', + }) }) } }) diff --git a/src/utils/vue/renderNode.ts b/src/utils/vue/renderNode.ts index cf67e5b7..ee7339bb 100644 --- a/src/utils/vue/renderNode.ts +++ b/src/utils/vue/renderNode.ts @@ -33,6 +33,18 @@ export interface RenderNodeOptions { export type RenderNodeReturn = ReturnType +/** + * + * @param vnode 将 jsx element, slot, h, string 等渲染为 vnode + * @param options 配置项 + * + * 可以将常见的类型转换为 vnode + * + * @example + * renderNode('hello world') => () => 'hello world' + * renderNode(
hello world
) => () =>
hello world
+ * renderNode(() =>
hello world
) => () =>
hello world
+ */ export function renderNode( vnode: RenderVNodeType, options?: RenderNodeOptions, diff --git a/src/utils/vue/unrefElement.ts b/src/utils/vue/unrefElement.ts index 45a74839..88d8e51a 100644 --- a/src/utils/vue/unrefElement.ts +++ b/src/utils/vue/unrefElement.ts @@ -12,6 +12,22 @@ import type { BasicTarget, TargetType, TargetValue } from '@/types/modules/vue' import type { ComponentPublicInstance } from 'vue' +/** + * + * @param target 获取 ref dom, vue instance 的 dom + * @param defaultTarget 默认值 + * + * @example + * + * + * const refDom = ref(null) + * const computedDom = computed(() => refDom.value) + * + * unrefElement(refDom) => div + * unrefElement(computedDom) => div + */ export function unrefElement( target: BasicTarget, defaultTarget?: T,