diff --git a/src/app-components/app/RayLink/index.tsx b/src/app-components/app/RayLink/index.tsx
index 5ca52f8c..908e38ec 100644
--- a/src/app-components/app/RayLink/index.tsx
+++ b/src/app-components/app/RayLink/index.tsx
@@ -3,7 +3,7 @@
* 友情链接组件，无实际项目意义
*/
-import { NAvatar, NTooltip, NSpace } from 'naive-ui'
+import { NAvatar, NTooltip, NFlex } from 'naive-ui'
interface AvatarOptions {
key: string
@@ -65,7 +65,7 @@ export default defineComponent({
},
render() {
return (
-
+
{this.avatarOptions.map((curr) => (
{{
@@ -85,7 +85,7 @@ export default defineComponent({
}}
))}
-
+
)
},
})
diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx
index 9c4babe1..6b3f4244 100644
--- a/src/components/RCollapseGrid/src/index.tsx
+++ b/src/components/RCollapseGrid/src/index.tsx
@@ -21,7 +21,7 @@
import './index.scss'
-import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
+import { NCard, NGrid, NGridItem, NFlex } from 'naive-ui'
import { RIcon } from '@/components'
import { call } from '@/utils'
@@ -85,10 +85,10 @@ export default defineComponent({
>
{this.$slots.default?.()}
-
+
{this.$slots.action?.()}
{this.CollapseIcon()}
-
+
),
diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx
index aaad7d3c..6f947985 100644
--- a/src/components/RTable/src/Table.tsx
+++ b/src/components/RTable/src/Table.tsx
@@ -11,7 +11,7 @@
import './index.scss'
-import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui'
+import { NCard, NDataTable, NDropdown, NFlex } from 'naive-ui'
import Size from './components/Size'
import Fullscreen from './components/Fullscreen'
import C from './components/C'
@@ -238,10 +238,10 @@ export default defineComponent({
defaultElement:
,
}),
'header-extra': () => (
-
+
{/* eslint-disable @typescript-eslint/no-explicit-any */}
{tool(this.$props as any)}
-
+
),
footer: () => this.$slots.tableFooter?.(),
action: () => this.$slots.tableAction?.(),
diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx
index 636fabea..86d0237d 100644
--- a/src/components/RTable/src/components/C.tsx
+++ b/src/components/RTable/src/components/C.tsx
@@ -18,7 +18,7 @@
* 2. 大量数据的时候，可能会出现性能问题
*/
-import { NPopover, NSpace, NTree } from 'naive-ui'
+import { NPopover, NFlex, NTree } from 'naive-ui'
import { RIcon } from '@/components'
import config from '../config'
@@ -97,6 +97,8 @@ const findSiblingsAndIndex = (
return [null, null]
}
+const R_TABLE_C_TOOL_ICON_ACTIVE = 'r-table__c-tool-icon--active'
+
export default defineComponent({
name: 'TableC',
props: {
@@ -129,12 +131,12 @@ export default defineComponent({
return {
...attr,
suffix: () => (
-
+
@@ -146,7 +148,7 @@ export default defineComponent({
size={config.tableIconSize}
cursor="pointer"
customClassName={
- isResizable ? 'r-table__c-tool-icon--active' : ''
+ isResizable ? R_TABLE_C_TOOL_ICON_ACTIVE : ''
}
onClick={resizableClick.bind(this, attr, idx)}
/>
@@ -158,11 +160,11 @@ export default defineComponent({
icon="row_end"
title="固定在列尾"
customClassName={
- isRightFixedActivated ? 'r-table__c-tool-icon--active' : ''
+ isRightFixedActivated ? R_TABLE_C_TOOL_ICON_ACTIVE : ''
}
onClick={fixedClick.bind(this, 'right', attr, idx)}
/>
-
+
),
}
}) as C[]
diff --git a/src/components/RTable/src/components/Fullscreen.tsx b/src/components/RTable/src/components/Fullscreen.tsx
index 3c829cf9..653ab0f5 100644
--- a/src/components/RTable/src/components/Fullscreen.tsx
+++ b/src/components/RTable/src/components/Fullscreen.tsx
@@ -46,7 +46,9 @@ export default defineComponent({
cursor="pointer"
onClick={() => {
if (!isEnabled) {
- $t('globalMessage.isEnabledFullscreen')
+ window.$message.warning(
+ $t('globalMessage.isEnabledFullscreen'),
+ )
}
toggleFullscreen()
diff --git a/src/directives/README_DIR.md b/src/directives/README_DIR.md
index 382f1a0b..8e76c48e 100644
--- a/src/directives/README_DIR.md
+++ b/src/directives/README_DIR.md
@@ -8,7 +8,7 @@
#### 示例
```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
const Demo = defineComponent({
name: 'Demo',
@@ -46,7 +46,7 @@ const Demo = defineComponent({
#### 示例
```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
const Demo = defineComponent({
name: 'Demo',
@@ -64,7 +64,7 @@ const Demo = defineComponent({
},
render() {
return (
-
+
我执行了{this.demoValue}次
该方法将延迟 1s 执行
-
+
)
},
})
@@ -99,7 +99,7 @@ const Demo = defineComponent({
#### 示例
```tsx
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
const Demo = defineComponent({
name: 'Demo',
@@ -117,7 +117,7 @@ const Demo = defineComponent({
},
render() {
return (
-
+
我执行了{this.demoValue}次
该方法 1s 内仅会执行一次
-
+
)
},
})
@@ -149,7 +149,7 @@ const Demo = defineComponent({
```tsx
import {
- NSpace,
+ NFlex,
NCard,
NInput,
NInputGroup,
@@ -170,7 +170,7 @@ const Demo = defineComponent({
},
render() {
return (
-
+
{{
checked: () => '取消',
@@ -182,22 +182,22 @@ const Demo = defineComponent({
组件提供了完整的 disabled
属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可
-
+
-
+
-
+
-
+
我是可以被禁用的文本内容
-
+
-
+
按钮
@@ -205,10 +205,10 @@ const Demo = defineComponent({
-
+
-
-
+
+
)
},
})
diff --git a/src/hooks/components/useContextmenuCoordinate.ts b/src/hooks/components/useContextmenuCoordinate.ts
index 733a5d6e..7f8a1698 100644
--- a/src/hooks/components/useContextmenuCoordinate.ts
+++ b/src/hooks/components/useContextmenuCoordinate.ts
@@ -16,8 +16,20 @@ import type {
MaybeElementRef,
MaybeElement,
MaybeRefOrGetter,
+ OnClickOutsideHandler,
} from '@vueuse/core'
+export interface UseContextmenuCoordinateOptions {
+ /**
+ *
+ * 自定义点击元素外部时的回调函数。
+ * 但是值得注意的事，该方法的优先级很高，可能会优先于其他方法执行
+ *
+ * @default null
+ */
+ clickOutside?: OnClickOutsideHandler
+}
+
/**
*
* @param target 绑定元素
@@ -35,11 +47,17 @@ import type {
*/
export const useContextmenuCoordinate = (
target: BasicTarget,
- options?: MaybeRefOrGetter
,
+ options?: UseContextmenuCoordinateOptions &
+ MaybeRefOrGetter,
) => {
const x = ref(0) // 鼠标 x 坐标
const y = ref(0) // 鼠标 y 坐标
const show = ref(false) // 是否显示右键菜单
+ const { clickOutside } = options ?? {}
+
+ const updateShow = (value: boolean) => {
+ show.value = value
+ }
/**
*
@@ -51,24 +69,27 @@ export const useContextmenuCoordinate = (
const bindContextMenuEvent = (evt: Event) => {
evt.preventDefault()
- show.value = false
+ updateShow(false)
nextTick().then(() => {
const { clientX, clientY } = evt as MouseEvent
x.value = clientX
y.value = clientY
- show.value = true
+
+ updateShow(true)
})
}
- /**
- *
- * 点击元素外部时，隐藏右键菜单
- */
- onClickOutside(target as MaybeElementRef, () => {
- show.value = false
- })
+ if (clickOutside) {
+ /**
+ *
+ * 自定义点击元素外部时的回调函数
+ */
+ onClickOutside(target as MaybeElementRef, (detectIframe) => {
+ clickOutside(detectIframe)
+ })
+ }
/**
*
@@ -85,7 +106,7 @@ export const useContextmenuCoordinate = (
* 为传递 ref dom 绑定点击事件
*/
const cleanupClick = useEventListener(target, 'click', () => {
- show.value = false
+ updateShow(false)
})
/**
@@ -103,6 +124,7 @@ export const useContextmenuCoordinate = (
x: readonly(x),
y: readonly(y),
show: readonly(show),
+ updateShow,
}
}
diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx
index b239480a..65165439 100644
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@@ -33,7 +33,7 @@ import './index.scss'
import {
NScrollbar,
- NSpace,
+ NFlex,
NLayoutHeader,
NDropdown,
NButton,
@@ -456,13 +456,12 @@ export default defineComponent({
this.actionState.actionDropdownShow = false
}}
/>
-
-
+
+