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,