github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 14:49:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(hooks): introduce vueuse, delete duplicate hooks

Browse Source
This commit is contained in:
vben
2020-11-12 22:40:16 +08:00
parent ecfb702b09
commit d9b1960030
48 changed files with 135 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Breadcrumb/BreadcrumbItem.vue
View File

@@ -11,7 +11,7 @@
<script lang="ts">
import { defineComponent, inject, ref, onMounted, unref } from 'vue';
import { useRouter } from 'vue-router';
import { useEvent } from '/@/hooks/event/useEvent';
import { useEventListener } from '/@/hooks/event/useEventListener';
export default defineComponent({
name: 'BreadcrumbItem',
@@ -42,7 +42,7 @@
onMounted(() => {
const link = unref(linkRef);
if (!link) return;
useEvent({
useEventListener({
el: link,
listener: () => {
const { to } = props;

7
src/components/Container/src/LazyContainer.vue
View File

@@ -22,8 +22,7 @@
import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
import { Skeleton } from 'ant-design-vue';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
import { useTimeoutFn, useIntersectionObserver } from '@vueuse/core';
interface State {
isInit: boolean;
loading: boolean;
@@ -93,7 +92,7 @@
function immediateInit() {
const { timeout } = props;
timeout &&
useTimeout(() => {
useTimeoutFn(() => {
init();
}, timeout);
}
@@ -101,7 +100,7 @@
function init() {
state.loading = true;
useTimeout(() => {
useTimeoutFn(() => {
if (state.isInit) return;
state.isInit = true;
emit('init');

5
src/components/Container/src/collapse/CollapseContainer.vue
View File

@@ -32,7 +32,8 @@
import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
// hook
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useTimeoutFn } from '@vueuse/core';
export default defineComponent({
components: {
Skeleton,
@@ -89,7 +90,7 @@
if (props.triggerWindowResize) {
// 这里200毫秒是因为展开有动画,
useTimeout(triggerWindowResize, 200);
useTimeoutFn(triggerWindowResize, 200);
}
}
return {

4
src/components/CountTo/src/index.vue
View File

@@ -6,15 +6,13 @@
<script lang="ts">
import { defineComponent, reactive, computed, watch, onMounted, unref, toRef } from 'vue';
import { countToProps } from './props';
import { useRaf } from '/@/hooks/event/useRaf';
import { isNumber } from '/@/utils/is';
import { requestAnimationFrame, cancelAnimationFrame } from '/@/utils/animation';
export default defineComponent({
name: 'CountTo',
props: countToProps,
emits: ['mounted', 'callback'],
setup(props, { emit }) {
const { requestAnimationFrame, cancelAnimationFrame } = useRaf();
const state = reactive<{
localStartVal: number;
printVal: number | null;

4
src/components/Modal/src/Modal.tsx
View File

@@ -1,7 +1,7 @@
import { Modal } from 'ant-design-vue';
import { defineComponent, watchEffect } from 'vue';
import { basicProps } from './props';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useTimeoutFn } from '@vueuse/core';
import { extendSlots } from '/@/utils/helper/tsxHelper';
export default defineComponent({
@@ -99,7 +99,7 @@ export default defineComponent({
if (!props.visible) {
return;
}
useTimeout(() => {
useTimeoutFn(() => {
handleDrag();
}, 30);
});

14
src/components/Modal/src/ModalWrapper.tsx
View File

@@ -14,8 +14,7 @@ import {
} from 'vue';
import { Spin } from 'ant-design-vue';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
// import { useTimeout } from '/@/hooks/core/useTimeout';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { useElResize } from '/@/hooks/event/useElResize';
@@ -126,17 +125,6 @@ export default defineComponent({
}
await nextTick();
const spinEl = unref(spinRef);
// if (!spinEl) {
// useTimeout(() => {
// // retry
// if (tryCount < 3) {
// setModalHeight();
// }
// tryCount++;
// }, 10);
// return;
// }
// tryCount = 0;
const spinContainerEl = spinEl.$el.querySelector('.ant-spin-container') as HTMLElement;
if (!spinContainerEl) return;

4
src/components/Table/src/BasicTable.vue
View File

@@ -64,7 +64,7 @@
import { useTableScroll } from './hooks/useTableScroll';
import { provideTable } from './hooks/useProvinceTable';
import { useEvent } from '/@/hooks/event/useEvent';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { basicProps } from './props';
import { ROW_KEY } from './const';
import './style/index.less';
@@ -245,7 +245,7 @@
}
const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body') as HTMLDivElement[];
const bodyDom = bodyDomList[0];
useEvent({
useEventListener({
el: bodyDom,
name: 'scroll',
listener: () => {

4
src/components/Table/src/hooks/useDataSource.ts
View File

@@ -3,7 +3,7 @@ import type { PaginationProps } from '../types/pagination';
import { watch, ref, unref, ComputedRef, computed, onMounted, Ref } from 'vue';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useTimeoutFn } from '@vueuse/core';
import { buildUUID } from '/@/utils/uuid';
import { isFunction, isBoolean } from '/@/utils/is';
@@ -145,7 +145,7 @@ export function useDataSource(
}
onMounted(() => {
// 转异步任务
useTimeout(() => {
useTimeoutFn(() => {
unref(propsRef).immediate && fetch();
}, 0);
});

13
src/components/Table/src/hooks/useTableScroll.ts
View File

@@ -6,7 +6,7 @@ import { injectModal } from '/@/components/Modal/src/provideModal';
import { getViewportOffset } from '/@/utils/domUtils';
import { isBoolean } from '/@/utils/is';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import { useProps } from './useProps';
export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRef: Ref<any>) {
@@ -110,17 +110,6 @@ export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRe
nextTick(() => {
calcTableHeight();
});
// const hasFixedLeft = (unref(propsRef).columns || []).some((item) => item.fixed === 'left');
// // TODO antv table问题情况太多，只能先用下面方式定时器hack
// useTimeout(() => {
// calcTableHeight(() => {
// // 有左侧固定列的时候才有问题
// hasFixedLeft &&
// useTimeout(() => {
// triggerWindowResize();
// }, 300);
// });
// }, 200);
}
});
const getScrollRef = computed(() => {

8
src/components/Verify/src/DragVerify.tsx
View File

@@ -1,6 +1,6 @@
import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useEvent } from '/@/hooks/event/useEvent';
import { useTimeoutFn } from '@vueuse/core';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { basicProps } from './props';
import { getSlot } from '/@/utils/helper/tsxHelper';
import './DragVerify.less';
@@ -91,7 +91,7 @@ export default defineComponent({
return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
}
useEvent({
useEventListener({
el: document,
name: 'mouseup',
listener: () => {
@@ -201,7 +201,7 @@ export default defineComponent({
const contentEl = unref(contentElRef);
if (!actionEl || !barEl || !contentEl) return;
state.toLeft = true;
useTimeout(() => {
useTimeoutFn(() => {
state.toLeft = false;
actionEl.style.left = '0';
barEl.style.width = '0';

4
src/components/Verify/src/ImgRotate.tsx
View File

@@ -1,7 +1,7 @@
import type { MoveData, DragVerifyActionType } from './types';
import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useTimeoutFn } from '@vueuse/core';
import BasicDragVerify from './DragVerify';
@@ -86,7 +86,7 @@ export default defineComponent({
if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
state.imgStyle = hackCss('transform', `rotateZ(${randomRotate}deg)`);
state.toOrigin = true;
useTimeout(() => {
useTimeoutFn(() => {
state.toOrigin = false;
state.showTip = true;
// 时间与动画时间保持一致

4
src/components/Verify/src/VerifyModal.vue
View File

@@ -1,7 +1,7 @@
<script lang="tsx">
import { defineComponent, ref, unref } from 'vue';
import { BasicModal } from '/@/components/Modal/index';
import { useTimeout } from '/@/hooks/core/useTimeout';
import { useTimeoutFn } from '@vueuse/core';
import { RotateDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
export default defineComponent({
@@ -11,7 +11,7 @@
const dragRef = ref<DragVerifyActionType | null>(null);
function handleSuccess() {
useTimeout(() => {
useTimeoutFn(() => {
emit('success');
const dragEl = unref(dragRef);
if (dragEl) {

4
src/components/VirtualScroll/src/index.tsx
View File

@@ -1,5 +1,5 @@
import { defineComponent, computed, ref, unref, reactive, onMounted, watch, nextTick } from 'vue';
import { useEvent } from '/@/hooks/event/useEvent';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { convertToUnit } from '/@/components/util';
import { props as basicProps } from './props';
@@ -109,7 +109,7 @@ export default defineComponent({
if (!wrapEl) {
return;
}
useEvent({
useEventListener({
el: wrapEl,
name: 'scroll',
listener: onScroll,