From e81bb3f9a57cd52b41949c718834ff7bccdbd3ae Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sat, 21 Oct 2023 14:37:33 +0800 Subject: [PATCH] v4.2.4 --- CHANGELOG.md | 15 ++ package.json | 4 +- .../components/LockScreen/index.tsx | 5 + .../components/UnlockScreen/index.tsx | 5 + src/components/RChart/index.tsx | 204 +++--------------- src/components/RChart/props.ts | 170 +++++++++++++++ src/components/RChart/type.ts | 3 + src/components/RIcon/index.tsx | 10 +- src/components/RIframe/src/index.tsx | 14 +- src/components/RQRCode/src/index.tsx | 6 +- src/components/RTable/src/Table.tsx | 11 +- src/components/RTable/src/props.ts | 12 ++ src/components/RTransitionComponent/index.vue | 20 +- src/components/RTransitionComponent/type.ts | 7 + src/router/helper/helper.ts | 2 +- src/store/modules/setting/index.ts | 2 +- src/types/modules/element.ts | 8 - src/types/modules/utils.ts | 5 + src/types/modules/vue.ts | 24 ++- src/utils/element.ts | 80 ++++--- src/utils/vue/unrefElement.ts | 32 ++- vite.pliugin.config.ts | 17 +- 22 files changed, 369 insertions(+), 287 deletions(-) create mode 100644 src/components/RChart/props.ts create mode 100644 src/components/RTransitionComponent/type.ts delete mode 100644 src/types/modules/element.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 934b2e5d..96202187 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # CHANGE LOG +## 4.2.4 + +### Feats + +- 优化 utils/element 包下的方法 +- 更新 vue-hooks-plus 版本至 1.8.5 +- 移除不必要的 cdn +- 优化了类型包的一些基础类型，剔除了一些无意义的类型 +- 提取 RChart props 单独维护 +- RTable 组件新增 onContextmenu props 属性。用于在启用右键菜单时被组件强行代理右键点击事件的回调 + +### Fixes + +- 修复 RChart 组件不能被正常取消 watchOptions 问题 + ## 4.2.3 ### Fixes diff --git a/package.json b/package.json index abe51f55..50add615 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.2.3", + "version": "4.2.4", "type": "module", "engines": { "node": ">=16.0.0", @@ -39,7 +39,7 @@ "pinia-plugin-persistedstate": "^3.1.0", "print-js": "^1.6.0", "vue": "^3.3.4", - "vue-hooks-plus": "1.8.2", + "vue-hooks-plus": "1.8.5", "vue-i18n": "^9.2.2", "vue-router": "^4.2.4", "vuedraggable": "^4.1.0", diff --git a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx index 1b3a9c71..e015feb3 100644 --- a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx @@ -77,6 +77,11 @@ const LockScreen = defineComponent({ clearable minlength={6} maxlength={12} + onKeydown={(e: KeyboardEvent) => { + if (e.code === 'Enter') { + this.lockScreen() + } + }} /> diff --git a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx index 7d71f956..0baf0bdb 100644 --- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx @@ -115,6 +115,11 @@ const UnlockScreen = defineComponent({ clearable minlength={6} maxlength={12} + onKeydown={(e: KeyboardEvent) => { + if (e.code === 'Enter') { + this.unlockScreen() + } + }} /> diff --git a/src/components/RChart/index.tsx b/src/components/RChart/index.tsx index 0be9c03d..366775cc 100644 --- a/src/components/RChart/index.tsx +++ b/src/components/RChart/index.tsx @@ -38,188 +38,34 @@ import { import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 +import props from './props' import { useSetting } from '@/store' import { cloneDeep, throttle } from 'lodash-es' import { on, off, completeSize } from '@/utils/element' import { call } from '@/utils/vue/index' -import { setupChartTheme, loadingOptions } from './helper' +import { setupChartTheme } from './helper' import { APP_THEME } from '@/app-config/designConfig' import { useResizeObserver } from '@vueuse/core' -import type { PropType, WatchStopHandle } from 'vue' -import type { AnyFC, MaybeArray } from '@/types/modules/utils' +import type { WatchStopHandle } from 'vue' +import type { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' -import type { - LoadingOptions, - AutoResize, - ChartTheme, -} from '@/components/RChart/type' -import type { - UseResizeObserverReturn, - MaybeComputedElementRef, - MaybeElement, -} from '@vueuse/core' +import type { ChartTheme } from '@/components/RChart/type' +import type { UseResizeObserverReturn } from '@vueuse/core' import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core' -export type EChartsExtensionInstallRegisters = typeof CanvasRenderer -export type { RayChartInst } from './type' +export type { RayChartInst, EChartsExtensionInstallRegisters } from './type' + +const defaultChartOptions = { + notMerge: false, + lazyUpdate: true, + silent: false, + replaceMerge: [], +} export default defineComponent({ name: 'RChart', - props: { - width: { - /** - * - * chart 容器初始化宽度 - * - * 如果未能继承宽度, 则会以 200px 宽度填充 - */ - type: String, - default: '100%', - }, - height: { - /** - * - * chart 容器初始化高度 - * - * 如果未能继承高度, 则会以 200px 宽度填充 - */ - type: String, - default: '100%', - }, - autoResize: { - /** - * - * `chart` 是否跟随窗口尺寸变化自动变化 - * - * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果 - * 默认每秒触发一次的频率 - */ - type: [Boolean, Object] as PropType, - default: true, - }, - canvasRender: { - /** - * - * `chart` 渲染器, 默认使用 `canvas` - * - * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入 - */ - type: Boolean, - default: true, - }, - showAria: { - /** - * - * 是否开启 `chart` 无障碍访问 - * - * 此选项会覆盖 `options` 中的 `aria` 配置 - */ - type: Boolean, - default: false, - }, - options: { - type: Object as PropType, - default: () => ({}), - }, - onSuccess: { - /** - * - * 返回 chart 实例 - * - * 渲染成功回调函数 - * - * () => ECharts - */ - type: [Function, Array] as PropType void>>, - default: null, - }, - onError: { - /** - * - * 渲染失败回调函数 - * - * () => void - */ - type: [Function, Array] as PropType void>>, - default: null, - }, - theme: { - type: [String, Object] as PropType, - default: '', - }, - autoChangeTheme: { - /** - * - * 是否自动跟随模板主题切换 - * 如果开启此属性, 则会覆盖 `theme` 属性 - * - * 注意: 这个属性重度依赖此模板 - */ - type: Boolean, - default: true, - }, - use: { - /** - * - * 拓展 `echarts` 图表 - * 用于自己手动拓展相关的包 - */ - type: Array as PropType, - default: () => [], - }, - watchOptions: { - /** 主动监听 options 变化 */ - type: Boolean, - default: true, - }, - loading: { - /** 加载动画 */ - type: Boolean, - default: false, - }, - loadingOptions: { - /** 配置加载动画样式 */ - type: Object as PropType, - default: () => loadingOptions(), - }, - observer: { - /** - * - * 需要被监听尺寸的元素 - * 需要开启 autoResize 才能生效 - * 默认以父元素作为监听对象 - */ - type: Object as PropType>, - default: null, - }, - throttleWait: { - /** 节流等待时间 */ - type: Number, - default: 500, - }, - animation: { - /** 是否强制启用渲染动画 */ - type: Boolean, - default: true, - }, - setChartOptions: { - /** - * - * 当 options 配置项更改时候，setOptions 方法配置项 - * - * 默认值 - * notMerge: false, - * lazyUpdate: true, - * silent: false, - * replaceMerge: [], - * - * 会自动进行合并配置项 - */ - type: Object as PropType, - default: () => ({}), - }, - }, + props, setup(props, { expose }) { const settingStore = useSetting() const { themeValue } = storeToRefs(settingStore) @@ -229,7 +75,7 @@ export default defineComponent({ let resizeThrottleReturn: DebouncedFunc | null // resize 防抖方法实例 let resizeOvserverReturn: UseResizeObserverReturn | null const { echartTheme } = APP_THEME - let watchOptionsReturn: WatchStopHandle | null + let watchCallback: WatchStopHandle | null const cssVarsRef = computed(() => { const cssVars = { @@ -266,7 +112,7 @@ export default defineComponent({ CandlestickChart, ScatterChart, PictorialBarChart, - ]) // 注册类型 + ]) // 注册 chart series type echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果 @@ -487,17 +333,15 @@ export default defineComponent({ watchEffect(() => { /** 监听 options 变化 */ if (props.watchOptions) { - watchOptionsReturn = watch( + watchCallback = watch( () => props.options, (noptions) => { /** 重新组合 options */ const options = combineChartOptions(noptions) - const setOpt = Object.assign({}, props.setChartOptions, { - notMerge: false, - lazyUpdate: true, - silent: false, - replaceMerge: [], - }) + const setOpt = Object.assign( + props.setChartOptions, + defaultChartOptions, + ) /** 如果 options 发生变动更新 echarts */ echartInstanceRef.value?.setOption(options, setOpt) }, @@ -505,6 +349,8 @@ export default defineComponent({ deep: true, }, ) + } else { + watchCallback?.() } props.loading @@ -531,7 +377,7 @@ export default defineComponent({ onBeforeUnmount(() => { unmount() - watchOptionsReturn?.() + watchCallback?.() }) return { diff --git a/src/components/RChart/props.ts b/src/components/RChart/props.ts new file mode 100644 index 00000000..def980bb --- /dev/null +++ b/src/components/RChart/props.ts @@ -0,0 +1,170 @@ +import type * as echarts from 'echarts/core' // `echarts` 核心模块 +import type { PropType } from 'vue' +import type { MaybeArray } from '@/types/modules/utils' +import type { + LoadingOptions, + AutoResize, + ChartTheme, +} from '@/components/RChart/type' +import type { ECharts, SetOptionOpts } from 'echarts/core' +import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core' +import type { EChartsExtensionInstallRegisters } from './type' + +import { loadingOptions } from './helper' + +const props = { + width: { + /** + * + * chart 容器初始化宽度 + * + * 如果未能继承宽度, 则会以 200px 宽度填充 + */ + type: String, + default: '100%', + }, + height: { + /** + * + * chart 容器初始化高度 + * + * 如果未能继承高度, 则会以 200px 宽度填充 + */ + type: String, + default: '100%', + }, + autoResize: { + /** + * + * `chart` 是否跟随窗口尺寸变化自动变化 + * + * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果 + * 默认每秒触发一次的频率 + */ + type: [Boolean, Object] as PropType, + default: true, + }, + canvasRender: { + /** + * + * `chart` 渲染器, 默认使用 `canvas` + * + * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入 + */ + type: Boolean, + default: true, + }, + showAria: { + /** + * + * 是否开启 `chart` 无障碍访问 + * + * 此选项会覆盖 `options` 中的 `aria` 配置 + */ + type: Boolean, + default: false, + }, + options: { + type: Object as PropType, + default: () => ({}), + }, + onSuccess: { + /** + * + * 返回 chart 实例 + * + * 渲染成功回调函数 + * + * () => ECharts + */ + type: [Function, Array] as PropType void>>, + default: null, + }, + onError: { + /** + * + * 渲染失败回调函数 + * + * () => void + */ + type: [Function, Array] as PropType void>>, + default: null, + }, + theme: { + type: [String, Object] as PropType, + default: '', + }, + autoChangeTheme: { + /** + * + * 是否自动跟随模板主题切换 + * 如果开启此属性, 则会覆盖 `theme` 属性 + * + * 注意: 这个属性重度依赖此模板 + */ + type: Boolean, + default: true, + }, + use: { + /** + * + * 拓展 `echarts` 图表 + * 用于自己手动拓展相关的包 + */ + type: Array as PropType, + default: () => [], + }, + watchOptions: { + /** 主动监听 options 变化 */ + type: Boolean, + default: true, + }, + loading: { + /** 加载动画 */ + type: Boolean, + default: false, + }, + loadingOptions: { + /** 配置加载动画样式 */ + type: Object as PropType, + default: () => loadingOptions(), + }, + observer: { + /** + * + * 需要被监听尺寸的元素 + * 需要开启 autoResize 才能生效 + * 默认以父元素作为监听对象 + */ + type: Object as PropType>, + default: null, + }, + throttleWait: { + /** 节流等待时间 */ + type: Number, + default: 500, + }, + animation: { + /** 是否强制启用渲染动画 */ + type: Boolean, + default: true, + }, + setChartOptions: { + /** + * + * 当 options 配置项更改时候，setOptions 方法配置项 + * + * 默认值 + * notMerge: false, + * lazyUpdate: true, + * silent: false, + * replaceMerge: [], + * + * 会自动进行合并配置项 + */ + type: Object as PropType, + default: () => ({}), + }, +} + +export default props diff --git a/src/components/RChart/type.ts b/src/components/RChart/type.ts index 0750be61..f7866896 100644 --- a/src/components/RChart/type.ts +++ b/src/components/RChart/type.ts @@ -10,6 +10,7 @@ */ import type { ECharts, EChartsCoreOption } from 'echarts/core' +import type { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 export interface ChartThemeRawModules { default: Record @@ -66,3 +67,5 @@ export interface RayChartInst { */ render: () => void } + +export type EChartsExtensionInstallRegisters = typeof CanvasRenderer diff --git a/src/components/RIcon/index.tsx b/src/components/RIcon/index.tsx index 859b1d67..7c46694b 100644 --- a/src/components/RIcon/index.tsx +++ b/src/components/RIcon/index.tsx @@ -65,7 +65,6 @@ const RIcon = defineComponent({ }, }, setup(props) { - const modelColor = computed(() => props.color) const symbolId = computed(() => `#${props.prefix}-${props.name}`) const cssVars = computed(() => { const cssVar = { @@ -82,7 +81,7 @@ const RIcon = defineComponent({ return cssVar }) - const handleClick = (e: MouseEvent) => { + const iconClick = (e: MouseEvent) => { const { onClick } = props if (onClick) { @@ -91,10 +90,9 @@ const RIcon = defineComponent({ } return { - modelColor, symbolId, cssVars, - handleClick, + iconClick, } }, render() { @@ -102,12 +100,12 @@ const RIcon = defineComponent({ - + ) diff --git a/src/components/RIframe/src/index.tsx b/src/components/RIframe/src/index.tsx index 512cfc75..2c9a8f65 100644 --- a/src/components/RIframe/src/index.tsx +++ b/src/components/RIframe/src/index.tsx @@ -53,24 +53,18 @@ const RIframe = defineComponent({ } } - const getIframeRef = () => { - const iframeEl = iframeRef.value as HTMLElement - - return iframeEl - } - expose({ iframeInst: iframeRef, }) onMounted(() => { - on(getIframeRef(), 'load', iframeLoadSuccess.bind(this)) - on(getIframeRef(), 'error', iframeLoadError) + on(iframeRef.value, 'load', iframeLoadSuccess.bind(this)) + on(iframeRef.value, 'error', iframeLoadError) }) onBeforeUnmount(() => { - off(getIframeRef(), 'load', iframeLoadSuccess) - off(getIframeRef(), 'error', iframeLoadError) + off(iframeRef.value, 'load', iframeLoadSuccess) + off(iframeRef.value, 'error', iframeLoadError) }) return { diff --git a/src/components/RQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx index 8f44b989..532eee55 100644 --- a/src/components/RQRCode/src/index.tsx +++ b/src/components/RQRCode/src/index.tsx @@ -129,6 +129,8 @@ export default defineComponent({ () => props.text, () => renderQRCode(), ) + } else { + watchCallback?.() } }) @@ -141,7 +143,7 @@ export default defineComponent({ renderQRCode() }) onBeforeUnmount(() => { - watchCallback && watchCallback() + watchCallback?.() }) return { @@ -175,7 +177,7 @@ export default defineComponent({ this.$slots.errorAction() ) : ( <> - + {{ default: () => this.errorActionDescription, icon: () => ( diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 8edb2276..4ccd12c0 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -21,8 +21,13 @@ import props from './props' import { call } from '@/utils/vue/index' import { uuid } from '@use-utils/hook' import config from './config' +import { throttle } from 'lodash-es' -import type { DropdownOption, DataTableInst } from 'naive-ui' +import type { + DropdownOption, + DataTableInst, + DataTableCreateRowProps, +} from 'naive-ui' import type { ComponentSize } from '@/types/modules/component' import type { C as CType } from './type' @@ -69,8 +74,8 @@ export default defineComponent({ * 合并 RTable 的所有 rowProps * 如果开启了右键菜单功能，自动会拦截右键事件 */ - const combineRowProps = (arr: Record, idx: number) => { - const interceptRowProps = props.rowProps?.(arr, idx) + const combineRowProps = (row: Record, idx: number) => { + const interceptRowProps = props.rowProps?.(row, idx) return { ...interceptRowProps, diff --git a/src/components/RTable/src/props.ts b/src/components/RTable/src/props.ts index 733063a0..246efbcb 100644 --- a/src/components/RTable/src/props.ts +++ b/src/components/RTable/src/props.ts @@ -15,6 +15,7 @@ import type { PropType, VNode, VNodeChild } from 'vue' import type { MaybeArray } from '@/types/modules/utils' import type { DropdownOption, DataTableColumn } from 'naive-ui' import type { DownloadTableOptions, PrintTableOptions } from './type' +import type { Recordable } from '@/types/modules/helper' const props = { ...dataTableProps, @@ -107,6 +108,17 @@ const props = { >, default: null, }, + onContextmenu: { + /** + * + * 该属性用于启用右键菜单后被 Table 强行代理后的右键点击事件回调 + * 当右键菜单不启用时，不生效。只需要使用 rowProps 属性配置右键菜单事件即可 + */ + type: [Function, Array] as PropType< + MaybeArray<(row: Recordable, index: number, e: MouseEvent) => void> + >, + default: null, + }, } export default props diff --git a/src/components/RTransitionComponent/index.vue b/src/components/RTransitionComponent/index.vue index 24941a4f..5affd183 100644 --- a/src/components/RTransitionComponent/index.vue +++ b/src/components/RTransitionComponent/index.vue @@ -26,7 +26,7 @@ import { useKeepAlive } from '@/store' import { APP_KEEP_ALIVE } from '@/app-config/appConfig' -import type { PropType } from 'vue' +import type { TransitionProps } from './type' /** * @@ -36,20 +36,10 @@ import type { PropType } from 'vue' defineOptions({ name: 'RTransitionComponent', }) - -defineProps({ - transitionPropName: { - type: String, - default: 'fade', - }, - transitionMode: { - type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>, - default: 'out-in', - }, - transitionAppear: { - type: Boolean, - default: false, - }, +withDefaults(defineProps(), { + transitionPropName: 'fade', + transitionMode: 'out-in', + transitionAppear: true, }) const keepAliveStore = useKeepAlive() diff --git a/src/components/RTransitionComponent/type.ts b/src/components/RTransitionComponent/type.ts new file mode 100644 index 00000000..04e95cfa --- /dev/null +++ b/src/components/RTransitionComponent/type.ts @@ -0,0 +1,7 @@ +import type { BaseTransitionProps } from 'vue' + +export interface TransitionProps { + transitionPropName?: string + transitionMode?: BaseTransitionProps['mode'] + transitionAppear?: boolean +} diff --git a/src/router/helper/helper.ts b/src/router/helper/helper.ts index 1245c416..134d455a 100644 --- a/src/router/helper/helper.ts +++ b/src/router/helper/helper.ts @@ -75,7 +75,7 @@ export const orderRoutes = (routes: AppRouteRecordRaw[]) => { const nextOrder = next.meta?.order ?? 0 if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') { - throw new Error('orderRoutes error: order must be a number!') + throw new TypeError('orderRoutes error: order must be a number!') } if (currOrder === nextOrder) { diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 750cbaa2..7e820252 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -1,7 +1,7 @@ import { getAppDefaultLanguage } from '@/locales/helper' import { setStorage } from '@use-utils/cache' import { set } from 'lodash-es' -import { addClass, removeClass, colorToRgba } from '@/utils/element' +import { colorToRgba } from '@/utils/element' import { useI18n } from '@/hooks/web/index' import { APP_THEME } from '@/app-config/designConfig' import { useDayjs } from '@/hooks/web/index' diff --git a/src/types/modules/element.ts b/src/types/modules/element.ts deleted file mode 100644 index b7cd1b0c..00000000 --- a/src/types/modules/element.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { VueInstance } from './vue' - -export type MaybeElement = - | HTMLElement - | SVGElement - | VueInstance - | undefined - | null diff --git a/src/types/modules/utils.ts b/src/types/modules/utils.ts index adffec41..037a5671 100644 --- a/src/types/modules/utils.ts +++ b/src/types/modules/utils.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type CryptoJS from 'crypto-js' +import type { BasicTarget } from './vue' export type StorageLike = 'sessionStorage' | 'localStorage' @@ -56,3 +57,7 @@ export type ElementSelector = string | `attr:${string}` export type MaybeArray = T | T[] export type DownloadAnyFileDataType = Blob | File | string | ArrayBuffer + +export type EventListenerTarget = BasicTarget< + HTMLElement | Element | Window | Document +> diff --git a/src/types/modules/vue.ts b/src/types/modules/vue.ts index f17ebd32..45ac53e8 100644 --- a/src/types/modules/vue.ts +++ b/src/types/modules/vue.ts @@ -1,14 +1,16 @@ -import type { ComponentPublicInstance, MaybeRef } from 'vue' -import type { MaybeElement } from './element' +import type { ComponentPublicInstance } from 'vue' -export type MaybeElementRef = MaybeRef +export type TargetValue = T | undefined | null -export type VueInstance = ComponentPublicInstance +export type TargetType = + | HTMLElement + | Element + | SVGElement + | Window + | Document + | ComponentPublicInstance -export type MaybeRefOrGetter = MaybeRef | (() => T) - -export type MaybeComputedElementRef = - MaybeRefOrGetter - -export type UnRefElementReturn = - T extends VueInstance ? Exclude : T | undefined +export type BasicTarget = + | (() => TargetValue) + | TargetValue + | Ref> diff --git a/src/utils/element.ts b/src/utils/element.ts index d43ccba5..4816611a 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -1,15 +1,18 @@ import { isValueType } from '@use-utils/hook' import { APP_REGEX } from '@/app-config/regexConfig' +import { unrefElement } from '@/utils/vue/index' import type { EventListenerOrEventListenerObject, PartialCSSStyleDeclaration, ElementSelector, } from '@/types/modules/utils' +import type { EventListenerTarget } from '@/types/modules/utils' +import type { BasicTarget } from '@/types/modules/vue' /** * - * @param element Target element dom + * @param target Target element dom * @param event 绑定事件类型 * @param handler 事件触发方法 * @param useCapture 是否冒泡 @@ -17,19 +20,21 @@ import type { * @remark 给元素绑定某个事件柄方法 */ export const on = ( - element: HTMLElement | Document | Window, + target: EventListenerTarget, event: string, handler: EventListenerOrEventListenerObject, useCapture: boolean | AddEventListenerOptions = false, ) => { - if (element && event && handler) { - element.addEventListener(event, handler, useCapture) + const targetElement = unrefElement(target, window) + + if (targetElement && event && handler) { + targetElement.addEventListener(event, handler, useCapture) } } /** * - * @param element Target element dom + * @param target Target element dom * @param event 卸载事件类型 * @param handler 所需卸载方法 * @param useCapture 是否冒泡 @@ -37,30 +42,37 @@ export const on = ( * @remark 卸载元素上某个事件柄方法 */ export const off = ( - element: HTMLElement | Document | Window, + target: EventListenerTarget, event: string, handler: EventListenerOrEventListenerObject, useCapture: boolean | AddEventListenerOptions = false, ) => { - if (element && event && handler) { - element.removeEventListener(event, handler, useCapture) + const targetElement = unrefElement(target, window) + + if (targetElement && event && handler) { + targetElement.removeEventListener(event, handler, useCapture) } } /** * - * @param element Target element dom + * @param target Target element dom * @param className 所需添加className，可: 'xxx xxx' | 'xxx' 格式添加(参考向元素绑定 css 语法) * * @remark 添加元素className(可: 'xxx xxx' | 'xxx'格式添加) */ -export const addClass = (element: HTMLElement, className: string) => { - if (element) { +export const addClass = ( + target: BasicTarget, + className: string, +) => { + const targetElement = unrefElement(target) + + if (targetElement) { const classes = className.trim().split(' ') classes.forEach((item) => { if (item) { - element.classList.add(item) + targetElement.classList.add(item) } }) } @@ -68,19 +80,21 @@ export const addClass = (element: HTMLElement, className: string) => { /** * - * @param element Target element dom + * @param target Target element dom * @param className 所需删除className，可: 'xxx xxx' | 'xxx' 格式删除(参考向元素绑定 css 语法) * * @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除) * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name */ export const removeClass = ( - element: HTMLElement, + target: BasicTarget, className: string | 'removeAllClass', ) => { - if (element) { + const targetElement = unrefElement(target) + + if (targetElement) { if (className === 'removeAllClass') { - const classList = element.classList + const classList = targetElement.classList classList.forEach((curr) => classList.remove(curr)) } else { @@ -88,7 +102,7 @@ export const removeClass = ( classes.forEach((item) => { if (item) { - element.classList.remove(item) + targetElement.classList.remove(item) } }) } @@ -97,15 +111,21 @@ export const removeClass = ( /** * - * @param element Target element dom + * @param target Target element dom * @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx' 格式查询(参考向元素绑定 css 语法) * * @returns 返回boolean * * @remark 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询) */ -export const hasClass = (element: HTMLElement, className: string) => { - const elementClassName = element.className +export const hasClass = (target: BasicTarget, className: string) => { + const targetElement = unrefElement(target) + + if (!targetElement) { + return false + } + + const elementClassName = targetElement.className const classes = className .trim() @@ -117,7 +137,7 @@ export const hasClass = (element: HTMLElement, className: string) => { /** * - * @param el Target element dom + * @param target Target element dom * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述) * * @@ -139,10 +159,12 @@ export const hasClass = (element: HTMLElement, className: string) => { * ``` */ export const addStyle = ( - el: HTMLElement, + target: BasicTarget, styles: PartialCSSStyleDeclaration | string, ) => { - if (!el) { + const targetElement = unrefElement(target) + + if (!targetElement) { return } @@ -165,8 +187,8 @@ export const addStyle = ( Object.keys(styleObj).forEach((key) => { const value = styleObj[key] - if (key in el.style) { - el.style[key] = value + if (key in targetElement.style) { + targetElement.style[key] = value } }) } @@ -177,15 +199,17 @@ export const addStyle = ( * @param styles 所需卸载样式 */ export const removeStyle = ( - el: HTMLElement, + target: BasicTarget, styles: (keyof CSSStyleDeclaration & string)[], ) => { - if (!el) { + const targetElement = unrefElement(target) + + if (!targetElement) { return } styles.forEach((curr) => { - el.style.removeProperty(curr) + targetElement.style.removeProperty(curr) }) } diff --git a/src/utils/vue/unrefElement.ts b/src/utils/vue/unrefElement.ts index 78583201..45a74839 100644 --- a/src/utils/vue/unrefElement.ts +++ b/src/utils/vue/unrefElement.ts @@ -9,17 +9,27 @@ * @remark 今天也是元气满满撸代码的一天 */ -import type { - MaybeComputedElementRef, - UnRefElementReturn, - VueInstance, -} from '@/types/modules/vue' -import type { MaybeElement } from '@/types/modules/element' +import type { BasicTarget, TargetType, TargetValue } from '@/types/modules/vue' +import type { ComponentPublicInstance } from 'vue' -export function unrefElement( - elRef: MaybeComputedElementRef, -): UnRefElementReturn { - const plain = toValue(elRef) +export function unrefElement( + target: BasicTarget, + defaultTarget?: T, +) { + if (!target) { + return defaultTarget + } - return (plain as VueInstance)?.$el ?? plain + let targetElement: TargetValue + + if (typeof target === 'function') { + targetElement = target() + } else if (isRef(target)) { + targetElement = + (target.value as ComponentPublicInstance)?.$el ?? target.value + } else { + targetElement = target + } + + return targetElement } diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts index 33506165..2beab4df 100644 --- a/vite.pliugin.config.ts +++ b/vite.pliugin.config.ts @@ -23,7 +23,6 @@ import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs' import viteAutoImport from 'unplugin-auto-import/vite' import viteEslint from 'vite-plugin-eslint' import mockDevServerPlugin from 'vite-plugin-mock-dev-server' -import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import unpluginViteComponents from 'unplugin-vue-components/vite' import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2' @@ -41,7 +40,13 @@ export default function (mode: string): PluginOption[] { vue(), viteVueJSX(), title, - viteVeI18nPlugin({}), + viteVeI18nPlugin({ + runtimeOnly: true, + compositionOnly: true, + forceStringify: true, + defaultSFCLang: 'json', + include: [path.resolve(__dirname, '../locales/**')], + }), viteAutoImport({ eslintrc: { enabled: true, @@ -149,13 +154,6 @@ export default function (mode: string): PluginOption[] { reload: true, build: true, }), - vueI18nPlugin({ - runtimeOnly: true, - compositionOnly: true, - forceStringify: true, - defaultSFCLang: 'json', - include: [path.resolve(__dirname, '../locales/**')], - }), createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/icons')], symbolId: 'icon-[dir]-[name]', @@ -165,7 +163,6 @@ export default function (mode: string): PluginOption[] { viteCDNPlugin({ modules: [ 'vue', - 'vue-demi', 'pinia', 'naive-ui', 'vue-router',