From bd2039accbc99cdfddbea62a63c3704e58034873 Mon Sep 17 00:00:00 2001 From: Vben Date: Fri, 11 Jun 2021 22:45:02 +0800 Subject: [PATCH] refactor: remove useExpose --- CHANGELOG.zh_CN.md | 4 + src/components/Table/src/BasicTable.vue | 5 +- src/components/Tree/src/Tree.vue | 5 +- src/components/Verify/index.ts | 11 +- src/components/Verify/src/DragVerify.less | 87 ---- src/components/Verify/src/DragVerify.tsx | 283 ------------- src/components/Verify/src/DragVerify.vue | 375 ++++++++++++++++++ src/components/Verify/src/ImgRotate.less | 51 --- src/components/Verify/src/ImgRotate.tsx | 172 -------- src/components/Verify/src/ImgRotate.vue | 221 +++++++++++ .../Verify/src/{types.ts => typing.ts} | 0 src/hooks/core/useExpose.ts | 9 - 12 files changed, 610 insertions(+), 613 deletions(-) delete mode 100644 src/components/Verify/src/DragVerify.less delete mode 100644 src/components/Verify/src/DragVerify.tsx create mode 100644 src/components/Verify/src/DragVerify.vue delete mode 100644 src/components/Verify/src/ImgRotate.less delete mode 100644 src/components/Verify/src/ImgRotate.tsx create mode 100644 src/components/Verify/src/ImgRotate.vue rename src/components/Verify/src/{types.ts => typing.ts} (100%) delete mode 100644 src/hooks/core/useExpose.ts diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 700cfb0f..48e42d89 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,5 +1,9 @@ ## Wip +### ✨ Refactor + +- 移除`useExpose`,使用组件自身提供的`expose`代替 + ### ✨ Features - **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能 diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 0ee35b22..57ac53ba 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -59,7 +59,6 @@ import { createTableContext } from './hooks/useTableContext'; import { useTableFooter } from './hooks/useTableFooter'; import { useTableForm } from './hooks/useTableForm'; - import { useExpose } from '/@/hooks/core/useExpose'; import { useDesign } from '/@/hooks/web/useDesign'; import { omit } from 'lodash-es'; @@ -91,7 +90,7 @@ 'change', 'columns-change', ], - setup(props, { attrs, emit, slots }) { + setup(props, { attrs, emit, slots, expose }) { const tableElRef = ref(null); const tableData = ref([]); @@ -290,7 +289,7 @@ }; createTableContext({ ...tableAction, wrapRef, getBindValues }); - useExpose(tableAction); + expose(tableAction); emit('register', tableAction, formActions); diff --git a/src/components/Tree/src/Tree.vue b/src/components/Tree/src/Tree.vue index fdacd823..a9af80ac 100644 --- a/src/components/Tree/src/Tree.vue +++ b/src/components/Tree/src/Tree.vue @@ -25,7 +25,6 @@ import { useTree } from './useTree'; import { useContextMenu } from '/@/hooks/web/useContextMenu'; - import { useExpose } from '/@/hooks/core/useExpose'; import { useDesign } from '/@/hooks/web/useDesign'; import { basicProps } from './props'; @@ -44,7 +43,7 @@ inheritAttrs: false, props: basicProps, emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check'], - setup(props, { attrs, slots, emit }) { + setup(props, { attrs, slots, emit, expose }) { const state = reactive({ checkStrictly: props.checkStrictly, expandedKeys: props.expandedKeys || [], @@ -277,7 +276,7 @@ }, }; - useExpose(instance); + expose(instance); function renderAction(node: TreeItem) { const { actionList } = props; diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts index 720d4058..7c67101b 100644 --- a/src/components/Verify/index.ts +++ b/src/components/Verify/index.ts @@ -1,6 +1,7 @@ -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; +import { withInstall } from '/@/utils/index'; +import basicDragVerify from './src/DragVerify.vue'; +import rotateDragVerify from './src/ImgRotate.vue'; -export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify')); -export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate')); - -export * from './src/types'; +export const BasicDragVerify = withInstall(basicDragVerify); +export const RotateDragVerify = withInstall(rotateDragVerify); +export * from './src/typing'; diff --git a/src/components/Verify/src/DragVerify.less b/src/components/Verify/src/DragVerify.less deleted file mode 100644 index 472f0a27..00000000 --- a/src/components/Verify/src/DragVerify.less +++ /dev/null @@ -1,87 +0,0 @@ -@radius: 4px; - -.darg-verify { - position: relative; - overflow: hidden; - text-align: center; - background-color: rgb(238, 238, 238); - border: 1px solid #ddd; - border-radius: @radius; - - &-bar { - position: absolute; - width: 0; - height: 36px; - background-color: @success-color; - border-radius: @radius; - - &.to-left { - width: 0 !important; - transition: width 0.3s; - } - } - - &-content { - position: absolute; - top: 0; - font-size: 12px; - -webkit-text-size-adjust: none; - background-color: -webkit-gradient( - linear, - left top, - right top, - color-stop(0, #333), - color-stop(0.4, #333), - color-stop(0.5, #fff), - color-stop(0.6, #333), - color-stop(1, #333) - ); - animation: slidetounlock 3s infinite; - -webkit-background-clip: text; - -moz-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-fill-color: transparent; - - &.success { - -webkit-text-fill-color: @white; - } - - & > * { - -webkit-text-fill-color: #333; - } - } - - &-action { - position: absolute; - top: 0; - left: 0; - display: flex; - cursor: move; - background-color: @white; - border-radius: @radius; - justify-content: center; - align-items: center; - - &__icon { - cursor: inherit; - } - - &.to-left { - left: 0 !important; - transition: left 0.3s; - } - } -} - -@-webkit-keyframes slidetounlock { - 0% { - background-position: -120px 0; - } - - 100% { - background-position: 120px 0; - } -} diff --git a/src/components/Verify/src/DragVerify.tsx b/src/components/Verify/src/DragVerify.tsx deleted file mode 100644 index 3ccc4d64..00000000 --- a/src/components/Verify/src/DragVerify.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue'; -import { useTimeoutFn } from '/@/hooks/core/useTimeout'; -import { useEventListener } from '/@/hooks/event/useEventListener'; -import { basicProps } from './props'; -import { getSlot } from '/@/utils/helper/tsxHelper'; -import './DragVerify.less'; -import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'; -import type { DragVerifyActionType } from './types'; -import { useExpose } from '/@/hooks/core/useExpose'; -export default defineComponent({ - name: 'BaseDargVerify', - props: basicProps, - emits: ['success', 'update:value', 'change', 'start', 'move', 'end'], - setup(props, { emit, slots }) { - const state = reactive({ - isMoving: false, - isPassing: false, - moveDistance: 0, - toLeft: false, - startTime: 0, - endTime: 0, - }); - - const wrapElRef = ref(null); - const barElRef = ref(null); - const contentElRef = ref(null); - const actionElRef = ref(null); - - watch( - () => state.isPassing, - (isPassing) => { - if (isPassing) { - const { startTime, endTime } = state; - const time = (endTime - startTime) / 1000; - emit('success', { isPassing, time: time.toFixed(1) }); - emit('update:value', isPassing); - emit('change', isPassing); - } - } - ); - - watchEffect(() => { - state.isPassing = !!props.value; - }); - - const getActionStyleRef = computed(() => { - const { height, actionStyle } = props; - const h = `${parseInt(height as string)}px`; - return { - left: 0, - width: h, - height: h, - ...actionStyle, - }; - }); - const getWrapStyleRef = computed(() => { - const { height, width, circle, wrapStyle } = props; - const h = parseInt(height as string); - const w = `${parseInt(width as string)}px`; - return { - width: w, - height: `${h}px`, - lineHeight: `${h}px`, - borderRadius: circle ? h / 2 + 'px' : 0, - ...wrapStyle, - }; - }); - - const getBarStyleRef = computed(() => { - const { height, circle, barStyle } = props; - const h = parseInt(height as string); - return { - height: `${h}px`, - borderRadius: circle ? h / 2 + 'px 0 0 ' + h / 2 + 'px' : 0, - ...barStyle, - }; - }); - - const getContentStyleRef = computed(() => { - const { height, width, contentStyle } = props; - const h = `${parseInt(height as string)}px`; - const w = `${parseInt(width as string)}px`; - - return { - height: h, - width: w, - ...contentStyle, - }; - }); - - function getEventPageX(e: MouseEvent | TouchEvent) { - return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX; - } - - useEventListener({ - el: document, - name: 'mouseup', - listener: () => { - if (state.isMoving) { - resume(); - } - }, - }); - function handleDragStart(e: MouseEvent | TouchEvent) { - if (state.isPassing) { - return; - } - - const actionEl = unref(actionElRef); - if (!actionEl) return; - emit('start', e); - state.moveDistance = getEventPageX(e) - parseInt(actionEl.style.left.replace('px', ''), 10); - state.startTime = new Date().getTime(); - state.isMoving = true; - } - function getOffset(el: HTMLDivElement) { - const actionWidth = parseInt(el.style.width); - const { width } = props; - const widthNum = parseInt(width as string); - const offset = widthNum - actionWidth - 6; - return { offset, widthNum, actionWidth }; - } - function handleDragMoving(e: MouseEvent | TouchEvent) { - const { isMoving, moveDistance } = state; - if (isMoving) { - const actionEl = unref(actionElRef); - const barEl = unref(barElRef); - if (!actionEl || !barEl) return; - const { offset, widthNum, actionWidth } = getOffset(actionEl); - const moveX = getEventPageX(e) - moveDistance; - - emit('move', { - event: e, - moveDistance, - moveX, - }); - if (moveX > 0 && moveX <= offset) { - actionEl.style.left = `${moveX}px`; - barEl.style.width = `${moveX + actionWidth / 2}px`; - } else if (moveX > offset) { - actionEl.style.left = `${widthNum - actionWidth}px`; - barEl.style.width = `${widthNum - actionWidth / 2}px`; - if (!props.isSlot) { - checkPass(); - } - } - } - } - - function handleDragOver(e: MouseEvent | TouchEvent) { - const { isMoving, isPassing, moveDistance } = state; - if (isMoving && !isPassing) { - emit('end', e); - const actionEl = unref(actionElRef); - const barEl = unref(barElRef); - if (!actionEl || !barEl) return; - const moveX = getEventPageX(e) - moveDistance; - const { offset, widthNum, actionWidth } = getOffset(actionEl); - if (moveX < offset) { - if (!props.isSlot) { - resume(); - } else { - setTimeout(() => { - if (!props.value) { - resume(); - } else { - const contentEl = unref(contentElRef); - if (contentEl) { - contentEl.style.width = `${parseInt(barEl.style.width)}px`; - } - } - }, 0); - } - } else { - actionEl.style.left = `${widthNum - actionWidth}px`; - barEl.style.width = `${widthNum - actionWidth / 2}px`; - checkPass(); - } - state.isMoving = false; - } - } - - function checkPass() { - if (props.isSlot) { - resume(); - return; - } - state.endTime = new Date().getTime(); - state.isPassing = true; - state.isMoving = false; - } - - function resume() { - state.isMoving = false; - state.isPassing = false; - state.moveDistance = 0; - state.toLeft = false; - state.startTime = 0; - state.endTime = 0; - const actionEl = unref(actionElRef); - const barEl = unref(barElRef); - const contentEl = unref(contentElRef); - if (!actionEl || !barEl || !contentEl) return; - state.toLeft = true; - useTimeoutFn(() => { - state.toLeft = false; - actionEl.style.left = '0'; - barEl.style.width = '0'; - // The time is consistent with the animation time - }, 300); - contentEl.style.width = unref(getContentStyleRef).width; - } - - useExpose({ - resume, - }); - - return () => { - const renderBar = () => { - const cls = [`darg-verify-bar`]; - if (state.toLeft) { - cls.push('to-left'); - } - return
; - }; - - const renderContent = () => { - const cls = [`darg-verify-content`]; - const { isPassing } = state; - const { text, successText } = props; - - isPassing && cls.push('success'); - - return ( -
- {getSlot(slots, 'text', isPassing) || (isPassing ? successText : text)} -
- ); - }; - - const renderAction = () => { - const cls = [`darg-verify-action`]; - const { toLeft, isPassing } = state; - if (toLeft) { - cls.push('to-left'); - } - return ( -
- {getSlot(slots, 'actionIcon', isPassing) || - (isPassing ? ( - - ) : ( - - ))} -
- ); - }; - - return ( -
- {renderBar()} - {renderContent()} - {renderAction()} -
- ); - }; - }, -}); diff --git a/src/components/Verify/src/DragVerify.vue b/src/components/Verify/src/DragVerify.vue new file mode 100644 index 00000000..e35b6dd5 --- /dev/null +++ b/src/components/Verify/src/DragVerify.vue @@ -0,0 +1,375 @@ + + diff --git a/src/components/Verify/src/ImgRotate.less b/src/components/Verify/src/ImgRotate.less deleted file mode 100644 index 10911b7c..00000000 --- a/src/components/Verify/src/ImgRotate.less +++ /dev/null @@ -1,51 +0,0 @@ -.ir-dv { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - - &-img__wrap { - position: relative; - overflow: hidden; - border-radius: 50%; - - img { - width: 100%; - border-radius: 50%; - - &.to-origin { - transition: transform 0.3s; - } - } - } - - &-img__tip { - position: absolute; - bottom: 10px; - left: 0; - z-index: 1; - display: block; - width: 100%; - height: 30px; - font-size: 12px; - line-height: 30px; - color: @white; - text-align: center; - - &.success { - background-color: fade(@success-color, 60%); - } - - &.error { - background-color: fade(@error-color, 60%); - } - - &.normal { - background-color: rgba(0, 0, 0, 0.3); - } - } - - &-drag__bar { - margin-top: 20px; - } -} diff --git a/src/components/Verify/src/ImgRotate.tsx b/src/components/Verify/src/ImgRotate.tsx deleted file mode 100644 index fea4dda6..00000000 --- a/src/components/Verify/src/ImgRotate.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import './ImgRotate.less'; - -import type { MoveData, DragVerifyActionType } from './types'; - -import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue'; -import { useTimeoutFn } from '/@/hooks/core/useTimeout'; - -import BasicDragVerify from './DragVerify'; - -import { hackCss } from '/@/utils/domUtils'; - -import { rotateProps } from './props'; -import { useI18n } from '/@/hooks/web/useI18n'; - -export default defineComponent({ - name: 'ImgRotateDargVerify', - inheritAttrs: false, - props: rotateProps, - emits: ['success', 'change', 'update:value'], - setup(props, { emit, attrs }) { - const basicRef = ref>(null); - const state = reactive({ - showTip: false, - isPassing: false, - imgStyle: {}, - randomRotate: 0, - currentRotate: 0, - toOrigin: false, - startTime: 0, - endTime: 0, - draged: false, - }); - const { t } = useI18n(); - - watch( - () => state.isPassing, - (isPassing) => { - if (isPassing) { - const { startTime, endTime } = state; - const time = (endTime - startTime) / 1000; - emit('success', { isPassing, time: time.toFixed(1) }); - emit('change', isPassing); - emit('update:value', isPassing); - } - } - ); - - const getImgWrapStyleRef = computed(() => { - const { imgWrapStyle, imgWidth } = props; - return { - width: `${imgWidth}px`, - height: `${imgWidth}px`, - ...imgWrapStyle, - }; - }); - - const getFactorRef = computed(() => { - const { minDegree, maxDegree } = props; - if (minDegree === maxDegree) { - return Math.floor(1 + Math.random() * 1) / 10 + 1; - } - return 1; - }); - function handleStart() { - state.startTime = new Date().getTime(); - } - - function handleDragBarMove(data: MoveData) { - state.draged = true; - const { imgWidth, height, maxDegree } = props; - const { moveX } = data; - const currentRotate = Math.ceil( - (moveX / (imgWidth! - parseInt(height as string))) * maxDegree! * unref(getFactorRef) - ); - state.currentRotate = currentRotate; - state.imgStyle = hackCss('transform', `rotateZ(${state.randomRotate - currentRotate}deg)`); - } - - function handleImgOnLoad() { - const { minDegree, maxDegree } = props; - const ranRotate = Math.floor(minDegree! + Math.random() * (maxDegree! - minDegree!)); // 生成随机角度 - state.randomRotate = ranRotate; - state.imgStyle = hackCss('transform', `rotateZ(${ranRotate}deg)`); - } - - function handleDragEnd() { - const { randomRotate, currentRotate } = state; - const { diffDegree } = props; - - if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) { - state.imgStyle = hackCss('transform', `rotateZ(${randomRotate}deg)`); - state.toOrigin = true; - useTimeoutFn(() => { - state.toOrigin = false; - state.showTip = true; - // 时间与动画时间保持一致 - }, 300); - } else { - checkPass(); - } - state.showTip = true; - } - function checkPass() { - state.isPassing = true; - state.endTime = new Date().getTime(); - } - - function resume() { - state.showTip = false; - const basicEl = unref(basicRef); - if (!basicEl) { - return; - } - state.isPassing = false; - - basicEl.resume(); - handleImgOnLoad(); - } - - const instance = getCurrentInstance() as any; - if (instance) { - instance.resume = resume; - } - // handleImgOnLoad(); - return () => { - const { src } = props; - const { toOrigin, isPassing, startTime, endTime } = state; - const imgCls: string[] = []; - if (toOrigin) { - imgCls.push('to-origin'); - } - const time = (endTime - startTime) / 1000; - - return ( -
-
- { - resume(); - }} - /> - {state.showTip && ( - - {state.isPassing - ? t('component.verify.time', { time: time.toFixed(1) }) - : t('component.verify.error')} - - )} - {!state.showTip && !state.draged && ( - {t('component.verify.redoTip')} - )} -
- -
- ); - }; - }, -}); diff --git a/src/components/Verify/src/ImgRotate.vue b/src/components/Verify/src/ImgRotate.vue new file mode 100644 index 00000000..a40d5f0f --- /dev/null +++ b/src/components/Verify/src/ImgRotate.vue @@ -0,0 +1,221 @@ + + diff --git a/src/components/Verify/src/types.ts b/src/components/Verify/src/typing.ts similarity index 100% rename from src/components/Verify/src/types.ts rename to src/components/Verify/src/typing.ts diff --git a/src/hooks/core/useExpose.ts b/src/hooks/core/useExpose.ts deleted file mode 100644 index 224b5aae..00000000 --- a/src/hooks/core/useExpose.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { getCurrentInstance } from 'vue'; - -// expose public api -export function useExpose(apis: T) { - const instance = getCurrentInstance(); - if (instance) { - Object.assign(instance.proxy, apis); - } -} -- GitLab