提交 bd2039ac 作者: Vben

refactor: remove useExpose

上级 3b2c40be
## Wip ## Wip
### ✨ Refactor
- 移除`useExpose`,使用组件自身提供的`expose`代替
### ✨ Features ### ✨ Features
- **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能 - **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能
......
...@@ -59,7 +59,6 @@ ...@@ -59,7 +59,6 @@
import { createTableContext } from './hooks/useTableContext'; import { createTableContext } from './hooks/useTableContext';
import { useTableFooter } from './hooks/useTableFooter'; import { useTableFooter } from './hooks/useTableFooter';
import { useTableForm } from './hooks/useTableForm'; import { useTableForm } from './hooks/useTableForm';
import { useExpose } from '/@/hooks/core/useExpose';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { omit } from 'lodash-es'; import { omit } from 'lodash-es';
...@@ -91,7 +90,7 @@ ...@@ -91,7 +90,7 @@
'change', 'change',
'columns-change', 'columns-change',
], ],
setup(props, { attrs, emit, slots }) { setup(props, { attrs, emit, slots, expose }) {
const tableElRef = ref<ComponentRef>(null); const tableElRef = ref<ComponentRef>(null);
const tableData = ref<Recordable[]>([]); const tableData = ref<Recordable[]>([]);
...@@ -290,7 +289,7 @@ ...@@ -290,7 +289,7 @@
}; };
createTableContext({ ...tableAction, wrapRef, getBindValues }); createTableContext({ ...tableAction, wrapRef, getBindValues });
useExpose<TableActionType>(tableAction); expose(tableAction);
emit('register', tableAction, formActions); emit('register', tableAction, formActions);
......
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
import { useTree } from './useTree'; import { useTree } from './useTree';
import { useContextMenu } from '/@/hooks/web/useContextMenu'; import { useContextMenu } from '/@/hooks/web/useContextMenu';
import { useExpose } from '/@/hooks/core/useExpose';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { basicProps } from './props'; import { basicProps } from './props';
...@@ -44,7 +43,7 @@ ...@@ -44,7 +43,7 @@
inheritAttrs: false, inheritAttrs: false,
props: basicProps, props: basicProps,
emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check'], emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check'],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit, expose }) {
const state = reactive<State>({ const state = reactive<State>({
checkStrictly: props.checkStrictly, checkStrictly: props.checkStrictly,
expandedKeys: props.expandedKeys || [], expandedKeys: props.expandedKeys || [],
...@@ -277,7 +276,7 @@ ...@@ -277,7 +276,7 @@
}, },
}; };
useExpose<TreeActionType>(instance); expose(instance);
function renderAction(node: TreeItem) { function renderAction(node: TreeItem) {
const { actionList } = props; const { actionList } = props;
......
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 BasicDragVerify = withInstall(basicDragVerify);
export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate')); export const RotateDragVerify = withInstall(rotateDragVerify);
export * from './src/typing';
export * from './src/types';
@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;
}
}
import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue'; <script lang="tsx">
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
import { useEventListener } from '/@/hooks/event/useEventListener'; import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { basicProps } from './props'; import { useEventListener } from '/@/hooks/event/useEventListener';
import { getSlot } from '/@/utils/helper/tsxHelper'; import { basicProps } from './props';
import './DragVerify.less'; import { getSlot } from '/@/utils/helper/tsxHelper';
import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'; import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
import type { DragVerifyActionType } from './types';
import { useExpose } from '/@/hooks/core/useExpose'; export default defineComponent({
export default defineComponent({
name: 'BaseDargVerify', name: 'BaseDargVerify',
props: basicProps, props: basicProps,
emits: ['success', 'update:value', 'change', 'start', 'move', 'end'], emits: ['success', 'update:value', 'change', 'start', 'move', 'end'],
setup(props, { emit, slots }) { setup(props, { emit, slots, expose }) {
const state = reactive({ const state = reactive({
isMoving: false, isMoving: false,
isPassing: false, isPassing: false,
...@@ -26,21 +25,14 @@ export default defineComponent({ ...@@ -26,21 +25,14 @@ export default defineComponent({
const contentElRef = ref<HTMLDivElement | null>(null); const contentElRef = ref<HTMLDivElement | null>(null);
const actionElRef = ref<HTMLDivElement | null>(null); const actionElRef = ref<HTMLDivElement | null>(null);
watch( useEventListener({
() => state.isPassing, el: document,
(isPassing) => { name: 'mouseup',
if (isPassing) { listener: () => {
const { startTime, endTime } = state; if (state.isMoving) {
const time = (endTime - startTime) / 1000; resume();
emit('success', { isPassing, time: time.toFixed(1) });
emit('update:value', isPassing);
emit('change', isPassing);
}
} }
); },
watchEffect(() => {
state.isPassing = !!props.value;
}); });
const getActionStyleRef = computed(() => { const getActionStyleRef = computed(() => {
...@@ -53,6 +45,7 @@ export default defineComponent({ ...@@ -53,6 +45,7 @@ export default defineComponent({
...actionStyle, ...actionStyle,
}; };
}); });
const getWrapStyleRef = computed(() => { const getWrapStyleRef = computed(() => {
const { height, width, circle, wrapStyle } = props; const { height, width, circle, wrapStyle } = props;
const h = parseInt(height as string); const h = parseInt(height as string);
...@@ -88,24 +81,31 @@ export default defineComponent({ ...@@ -88,24 +81,31 @@ export default defineComponent({
}; };
}); });
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;
});
function getEventPageX(e: MouseEvent | TouchEvent) { function getEventPageX(e: MouseEvent | TouchEvent) {
return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX; 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) { function handleDragStart(e: MouseEvent | TouchEvent) {
if (state.isPassing) { if (state.isPassing) {
return; return;
} }
const actionEl = unref(actionElRef); const actionEl = unref(actionElRef);
if (!actionEl) return; if (!actionEl) return;
emit('start', e); emit('start', e);
...@@ -113,6 +113,7 @@ export default defineComponent({ ...@@ -113,6 +113,7 @@ export default defineComponent({
state.startTime = new Date().getTime(); state.startTime = new Date().getTime();
state.isMoving = true; state.isMoving = true;
} }
function getOffset(el: HTMLDivElement) { function getOffset(el: HTMLDivElement) {
const actionWidth = parseInt(el.style.width); const actionWidth = parseInt(el.style.width);
const { width } = props; const { width } = props;
...@@ -120,6 +121,7 @@ export default defineComponent({ ...@@ -120,6 +121,7 @@ export default defineComponent({
const offset = widthNum - actionWidth - 6; const offset = widthNum - actionWidth - 6;
return { offset, widthNum, actionWidth }; return { offset, widthNum, actionWidth };
} }
function handleDragMoving(e: MouseEvent | TouchEvent) { function handleDragMoving(e: MouseEvent | TouchEvent) {
const { isMoving, moveDistance } = state; const { isMoving, moveDistance } = state;
if (isMoving) { if (isMoving) {
...@@ -211,7 +213,7 @@ export default defineComponent({ ...@@ -211,7 +213,7 @@ export default defineComponent({
contentEl.style.width = unref(getContentStyleRef).width; contentEl.style.width = unref(getContentStyleRef).width;
} }
useExpose<DragVerifyActionType>({ expose({
resume, resume,
}); });
...@@ -280,4 +282,94 @@ export default defineComponent({ ...@@ -280,4 +282,94 @@ export default defineComponent({
); );
}; };
}, },
}); });
</script>
<style lang="less">
@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;
}
}
</style>
.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;
}
}
import './ImgRotate.less'; <script lang="tsx">
import type { MoveData, DragVerifyActionType } from './typing';
import type { MoveData, DragVerifyActionType } from './types'; import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue'; import BasicDragVerify from './DragVerify.vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { hackCss } from '/@/utils/domUtils';
import { rotateProps } from './props';
import BasicDragVerify from './DragVerify'; import { useI18n } from '/@/hooks/web/useI18n';
import { hackCss } from '/@/utils/domUtils'; export default defineComponent({
import { rotateProps } from './props';
import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({
name: 'ImgRotateDargVerify', name: 'ImgRotateDargVerify',
inheritAttrs: false, inheritAttrs: false,
props: rotateProps, props: rotateProps,
...@@ -169,4 +164,58 @@ export default defineComponent({ ...@@ -169,4 +164,58 @@ export default defineComponent({
); );
}; };
}, },
}); });
</script>
<style lang="less">
.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;
}
}
</style>
import { getCurrentInstance } from 'vue';
// expose public api
export function useExpose<T>(apis: T) {
const instance = getCurrentInstance();
if (instance) {
Object.assign(instance.proxy, apis);
}
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论