Skip to content

B
basic-vue-admin
提交 18ad1bcc 作者: vben
操作

fix: upload component not work #169

上级 c22de5c3
正在显示 包含 99 行增加 和 582 行删除
src/assets/svg/preview/p-rotate.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595306944988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1820" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M1464.3 279.7" p-id="1821" fill="#ffffff"></path><path d="M512 960c-60.5 0-119.1-11.9-174.4-35.2-53.4-22.6-101.3-54.9-142.4-96s-73.4-89-96-142.4C75.9 631.1 64 572.5 64 512s11.9-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4s89-73.4 142.4-96C392.9 75.9 451.5 64 512 64s119.1 11.9 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96s73.4 89 96 142.4C948.1 392.9 960 451.5 960 512c0 19.1-15.5 34.6-34.6 34.6s-34.6-15.5-34.6-34.6c0-51.2-10-100.8-29.8-147.4-19.1-45.1-46.4-85.6-81.2-120.4C745 209.4 704.5 182 659.4 163c-46.7-19.7-96.3-29.8-147.4-29.8-51.2 0-100.8 10-147.4 29.8-45.1 19.1-85.6 46.4-120.4 81.2S182 319.5 163 364.6c-19.7 46.7-29.8 96.3-29.8 147.4 0 51.2 10 100.8 29.8 147.4 19.1 45.1 46.4 85.6 81.2 120.4C279 814.6 319.5 842 364.6 861c46.7 19.7 96.3 29.8 147.4 29.8 64.6 0 128.4-16.5 184.4-47.8 54.4-30.4 100.9-74.1 134.6-126.6 10.3-16.1 31.7-20.8 47.8-10.4 16.1 10.3 20.8 31.7 10.4 47.8-39.8 62-94.8 113.7-159.1 149.6-66.2 37-141.7 56.6-218.1 56.6z" p-id="1822" fill="#ffffff"></path><path d="M924 552c-19.8 0-36-16.2-36-36V228c0-19.8 16.2-36 36-36s36 16.2 36 36v288c0 19.8-16.2 36-36 36zM275.4 575.5c9.5-2.5 19.1 2.9 22.3 12.2 3.5 10.2 9.9 17.7 19.1 22.6 7.1 3.9 15.1 5.8 24 5.8 16.6 0 30.8-6.9 42.5-20.8 11.7-13.8 20-32.7 24.9-75.1-7.7 12.2-17.3 20.8-28.7 25.8-11.4 5-23.7 7.4-36.8 7.4-26.7 0-47.7-8.3-63.3-24.9-15.5-16.6-23.3-37.9-23.3-64.1 0-25.1 7.7-47.1 23-66.2 15.3-19 37.9-28.6 67.8-28.6 40.3 0 68.1 18.1 83.4 54.4 8.5 19.9 12.7 44.9 12.7 74.9 0 33.8-5.1 63.8-15.3 89.9-16.9 43.5-45.5 65.2-85.8 65.2-27 0-47.6-7.1-61.6-21.2-10-10.1-16.4-22-19.3-35.8-2-9.6 4-19.1 13.5-21.6l0.9 0.1z m103-74.4c9.4-7.5 14.1-20.6 14.1-39.3 0-16.8-4.2-29.3-12.7-37.5S360.6 412 347.5 412c-14 0-25.2 4.7-33.4 14.1-8.2 9.4-12.4 22-12.4 37.7 0 14.9 3.6 26.7 10.9 35.5 7.2 8.8 18.8 13.1 34.6 13.1 11.4 0 21.8-3.8 31.2-11.3zM646.6 414.4c12.4 22.8 18.5 54 18.5 93.7 0 37.6-5.6 68.7-16.8 93.3-16.2 35.3-42.8 52.9-79.6 52.9-33.2 0-57.9-14.4-74.2-43.3-13.5-24.1-20.3-56.4-20.3-97 0-31.4 4.1-58.4 12.2-80.9 15.2-42 42.7-63 82.5-63 35.9 0 61.8 14.8 77.7 44.3z m-40.2 173.3c9.4-13.9 14-39.9 14-78 0-27.4-3.4-50-10.1-67.7-6.8-17.7-19.9-26.6-39.4-26.6-17.9 0-31 8.4-39.3 25.2-8.3 16.8-12.4 41.6-12.4 74.3 0 24.6 2.6 44.4 7.9 59.4 8.1 22.8 22 34.3 41.6 34.3 15.7 0 28.3-7 37.7-20.9zM803.3 387.2c11.2 11.3 16.8 25 16.8 41.2 0 16.7-5.8 30.7-17.5 41.8C791 481.4 777.4 487 762 487c-17.1 0-31.2-5.8-42.1-17.4-10.9-11.6-16.4-25.1-16.4-40.6 0-16.5 5.8-30.4 17.3-41.7 11.5-11.3 25.3-17 41.2-17 16.3 0 30.1 5.7 41.3 16.9zM739.5 451c6.2 6.2 13.7 9.3 22.5 9.3 8.4 0 15.8-3.1 22.1-9.3 6.3-6.2 9.4-13.7 9.4-22.6 0-8.5-3.1-15.9-9.3-22.1-6.2-6.2-13.6-9.3-22.2-9.3s-16.1 3.1-22.4 9.3c-6.3 6.2-9.4 13.7-9.4 22.6-0.1 8.4 3 15.8 9.3 22.1z" p-id="1823" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/svg/preview/resume.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307154239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7317" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z" p-id="7318" fill="#ffffff"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="7319" fill="#ffffff"></path><path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z" p-id="7320" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/svg/preview/scale.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307195033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8116" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M887.081 904.791a25.8 25.8 0 0 1-18.376-7.619L705.618 734.075l-4.163 3.369c-58.255 47.18-131.522 73.16-206.32 73.16-181.07 0-328.377-147.308-328.377-328.367 0-181.068 147.308-328.376 328.377-328.376 181.063 0 328.376 147.308 328.376 328.376 0 77.072-27.412 152.07-77.169 211.17l-3.522 4.173 162.719 162.744a25.846 25.846 0 0 1 7.639 18.432 26.081 26.081 0 0 1-26.051 26.045l-0.046-0.01zM495.13 205.957c-152.336 0-276.27 123.935-276.27 276.27 0 152.33 123.934 276.27 276.27 276.27 152.34 0 276.275-123.94 276.275-276.27 0-152.335-123.935-276.27-276.275-276.27z" fill="#ffffff" p-id="8117"></path><path d="M626.545 508.355h-262.83a26.127 26.127 0 0 1 0-52.255h262.83a26.127 26.127 0 0 1 0 52.255z" fill="#ffffff" p-id="8118"></path><path d="M495.13 639.77a26.127 26.127 0 0 1-26.128-26.128v-262.83a26.127 26.127 0 0 1 52.255 0v262.835a26.127 26.127 0 0 1-26.127 26.123z" fill="#ffffff" p-id="8119"></path></svg>
\ No newline at end of file
src/assets/svg/preview/unrotate.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595306911635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1352" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M924.8 337.6c-22.6-53.4-54.9-101.3-96-142.4s-89-73.4-142.4-96C631.1 75.9 572.5 64 512 64S392.9 75.9 337.6 99.2c-53.4 22.6-101.3 54.9-142.4 96-22.4 22.4-42.2 46.8-59.2 73.1V228c0-19.8-16.2-36-36-36s-36 16.2-36 36v288c0 19.8 16.2 36 36 36s36-16.2 36-36v-50.2c4.2-34.8 13.2-68.7 27-101.2 19.1-45.1 46.4-85.6 81.2-120.4C279 209.4 319.5 182 364.6 163c46.7-19.7 96.3-29.8 147.4-29.8 51.2 0 100.8 10 147.4 29.8 45.1 19.1 85.6 46.4 120.4 81.2C814.6 279 842 319.5 861 364.6c19.7 46.7 29.8 96.3 29.8 147.4 0 51.2-10 100.8-29.8 147.4-19.1 45.1-46.4 85.6-81.2 120.4C745 814.6 704.5 842 659.4 861c-46.7 19.7-96.3 29.8-147.4 29.8-64.6 0-128.4-16.5-184.4-47.8-54.4-30.4-100.9-74.1-134.6-126.6-10.3-16.1-31.7-20.8-47.8-10.4-16.1 10.3-20.8 31.7-10.4 47.8 39.8 62 94.8 113.7 159.1 149.6 66.2 37 141.7 56.6 218.1 56.6 60.5 0 119.1-11.9 174.4-35.2 53.4-22.6 101.3-54.9 142.4-96 41.1-41.1 73.4-89 96-142.4C948.1 631.1 960 572.5 960 512s-11.9-119.1-35.2-174.4z" p-id="1353" fill="#ffffff"></path><path d="M275.4 575.5c9.5-2.5 19.1 2.9 22.3 12.2 3.5 10.2 9.9 17.7 19.1 22.6 7.1 3.9 15.1 5.8 24 5.8 16.6 0 30.8-6.9 42.5-20.8 11.7-13.8 20-32.7 24.9-75.1-7.7 12.2-17.3 20.8-28.7 25.8-11.4 5-23.7 7.4-36.8 7.4-26.7 0-47.7-8.3-63.3-24.9-15.5-16.6-23.3-37.9-23.3-64.1 0-25.1 7.7-47.1 23-66.2 15.3-19 37.9-28.6 67.8-28.6 40.3 0 68.1 18.1 83.4 54.4 8.5 19.9 12.7 44.9 12.7 74.9 0 33.8-5.1 63.8-15.3 89.9-16.9 43.5-45.5 65.2-85.8 65.2-27 0-47.6-7.1-61.6-21.2-10-10.1-16.4-22-19.3-35.8-2-9.6 4-19.1 13.5-21.6l0.9 0.1z m103-74.4c9.4-7.5 14.1-20.6 14.1-39.3 0-16.8-4.2-29.3-12.7-37.5S360.6 412 347.5 412c-14 0-25.2 4.7-33.4 14.1-8.2 9.4-12.4 22-12.4 37.7 0 14.9 3.6 26.7 10.9 35.5 7.2 8.8 18.8 13.1 34.6 13.1 11.4 0 21.8-3.8 31.2-11.3zM646.6 414.4c12.4 22.8 18.5 54 18.5 93.7 0 37.6-5.6 68.7-16.8 93.3-16.2 35.3-42.8 52.9-79.6 52.9-33.2 0-57.9-14.4-74.2-43.3-13.5-24.1-20.3-56.4-20.3-97 0-31.4 4.1-58.4 12.2-80.9 15.2-42 42.7-63 82.5-63 35.9 0 61.8 14.8 77.7 44.3z m-40.2 173.3c9.4-13.9 14-39.9 14-78 0-27.4-3.4-50-10.1-67.7-6.8-17.7-19.9-26.6-39.4-26.6-17.9 0-31 8.4-39.3 25.2-8.3 16.8-12.4 41.6-12.4 74.3 0 24.6 2.6 44.4 7.9 59.4 8.1 22.8 22 34.3 41.6 34.3 15.7 0 28.3-7 37.7-20.9zM803.3 387.2c11.2 11.3 16.8 25 16.8 41.2 0 16.7-5.8 30.7-17.5 41.8C791 481.4 777.4 487 762 487c-17.1 0-31.2-5.8-42.1-17.4-10.9-11.6-16.4-25.1-16.4-40.6 0-16.5 5.8-30.4 17.3-41.7 11.5-11.3 25.3-17 41.2-17 16.3 0 30.1 5.7 41.3 16.9zM739.5 451c6.2 6.2 13.7 9.3 22.5 9.3 8.4 0 15.8-3.1 22.1-9.3 6.3-6.2 9.4-13.7 9.4-22.6 0-8.5-3.1-15.9-9.3-22.1-6.2-6.2-13.6-9.3-22.2-9.3s-16.1 3.1-22.4 9.3c-6.3 6.2-9.4 13.7-9.4 22.6-0.1 8.4 3 15.8 9.3 22.1z" p-id="1354" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/svg/preview/unscale.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595308005241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9878" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M750.3 198.7C598 46.4 351.1 46.4 198.7 198.7s-152.3 399.2 0 551.5C345.1 896.6 578.8 902.3 732 767.3l172.1 172.1 35.4-35.4-172.1-171.9c135-153.2 129.3-387-17.1-533.4z m39.3 403.8c-17.1 42.1-42.2 80-74.7 112.4-32.5 32.5-70.3 57.6-112.4 74.7-40.7 16.5-83.8 24.9-128 24.9s-87.2-8.4-128-24.9c-42.1-17.1-80-42.2-112.4-74.7s-57.6-70.3-74.7-112.4c-16.5-40.7-24.9-83.8-24.9-128s8.4-87.2 24.9-128c17.1-42.1 42.2-80 74.7-112.4s70.3-57.6 112.4-74.7c40.7-16.5 83.8-24.9 128-24.9s87.2 8.4 128 24.9c42.1 17.1 80 42.2 112.4 74.7 32.5 32.5 57.6 70.3 74.7 112.4 16.5 40.7 24.9 83.8 24.9 128s-8.4 87.3-24.9 128zM671 502H271v-50h400v50z" fill="#ffffff" p-id="9879"></path></svg>
\ No newline at end of file
src/components/Modal/src/BasicModal.vue
......@@ -14,7 +14,11 @@
</template>
<template #footer v-if="!$slots.footer">
<ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel" />
<ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel">
<template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data" />
</template>
</ModalFooter>
</template>
<ModalWrapper
......
src/components/Modal/src/components/ModalWrapper.vue
......@@ -67,7 +67,7 @@
return {
minHeight: `${props.minHeight}px`,
// padding 28
height: `${unref(realHeightRef) - 28}px`,
height: `${unref(realHeightRef)}px`,
};
}
);
......@@ -130,10 +130,11 @@
const spinEl = unref(spinRef);
if (!spinEl) return;
await nextTick();
// if (!realHeight) {
realHeight = spinEl.scrollHeight;
// }
if (!realHeight) {
realHeight = spinEl.scrollHeight;
}
if (props.fullScreen) {
realHeightRef.value =
window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
......@@ -142,7 +143,7 @@
? props.height
: realHeight > maxHeight
? maxHeight
: realHeight + 46;
: realHeight;
}
emit('height-change', unref(realHeightRef));
} catch (error) {
......
src/components/Preview/index.ts
// export { createImgPreview } from './src/functional';
export const createImgPreview = () => {};
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const ImagePreview = createAsyncComponent(() => import('./src/index.vue'));
......
src/components/Preview/src/functional.ts deleted 100644 → 0
import ImgPreview from './index';
import { isClient } from '/@/utils/is';
import type { Options, Props } from './types';
import { createVNode, render } from 'vue';
let instance: any = null;
export function createImgPreview(options: Options) {
if (!isClient) return;
const { imageList, show = true, index = 0 } = options;
const propsData: Partial<Props> = {};
const container = document.createElement('div');
propsData.imageList = imageList;
propsData.show = show;
propsData.index = index;
instance = createVNode(ImgPreview, propsData);
render(instance, container);
document.body.appendChild(container);
}
src/components/Preview/src/index.less deleted 100644 → 0
.img-preview {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @preview-comp-z-index;
background: rgba(0, 0, 0, 0.5);
user-select: none;
&-content {
display: flex;
width: 100%;
height: 100%;
color: @white;
justify-content: center;
align-items: center;
}
&-image {
cursor: pointer;
transition: transform 0.3s;
}
&__close {
position: absolute;
top: -40px;
right: -40px;
width: 80px;
height: 80px;
overflow: hidden;
color: @white;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: all 0.2s;
&-icon {
position: absolute;
top: 46px;
left: 16px;
font-size: 16px;
}
&:hover {
background-color: rgba(0, 0, 0, 0.8);
}
}
&__index {
position: absolute;
bottom: 5%;
left: 50%;
padding: 0 22px;
font-size: 16px;
background: rgba(109, 109, 109, 0.6);
border-radius: 15px;
transform: translateX(-50%);
}
&__controller {
position: absolute;
bottom: 10%;
left: 50%;
display: flex;
width: 260px;
height: 44px;
padding: 0 22px;
margin-left: -139px;
background: rgba(109, 109, 109, 0.6);
border-radius: 22px;
justify-content: center;
&-item {
display: flex;
height: 100%;
padding: 0 9px;
font-size: 24px;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: scale(1.2);
}
img {
width: 1em;
}
}
}
&__arrow {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 28px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: all 0.2s;
&:hover {
background-color: rgba(0, 0, 0, 0.8);
}
&.left {
left: 50px;
}
&.right {
right: 50px;
}
}
}
src/components/Preview/src/index.tsx deleted 100644 → 0
import './index.less';
import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
import { basicProps } from './props';
import { Props } from './types';
import { CloseOutlined, LeftOutlined, RightOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { Spin } from 'ant-design-vue';
import resumeSvg from '/@/assets/svg/preview/resume.svg';
import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
import scaleSvg from '/@/assets/svg/preview/scale.svg';
import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
enum StatueEnum {
LOADING,
DONE,
FAIL,
}
interface ImgState {
currentUrl: string;
imgScale: number;
imgRotate: number;
imgTop: number;
imgLeft: number;
currentIndex: number;
status: StatueEnum;
moveX: number;
moveY: number;
show: boolean;
}
const prefixCls = 'img-preview';
export default defineComponent({
name: 'ImagePreview',
props: basicProps,
setup(props: Props) {
const imgState = reactive<ImgState>({
currentUrl: '',
imgScale: 1,
imgRotate: 0,
imgTop: 0,
imgLeft: 0,
status: StatueEnum.LOADING,
currentIndex: 0,
moveX: 0,
moveY: 0,
show: props.show,
});
const wrapElRef = ref<HTMLDivElement | null>(null);
const imgElRef = ref<HTMLImageElement | null>(null);
// 初始化
function init() {
initMouseWheel();
const { index, imageList } = props;
if (!imageList || !imageList.length) {
throw new Error('imageList is undefined');
}
imgState.currentIndex = index;
handleIChangeImage(imageList[index]);
}
// 重置
function initState() {
imgState.imgScale = 1;
imgState.imgRotate = 0;
imgState.imgTop = 0;
imgState.imgLeft = 0;
}
// 初始化鼠标滚轮事件
function initMouseWheel() {
const wrapEl = unref(wrapElRef);
if (!wrapEl) {
return;
}
(wrapEl as any).onmousewheel = scrollFunc;
// 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替
document.body.addEventListener('DOMMouseScroll', scrollFunc);
// 禁止火狐浏览器下拖拽图片的默认事件
document.ondragstart = function () {
return false;
};
}
// 监听鼠标滚轮
function scrollFunc(e: any) {
e = e || window.event;
e.delta = e.wheelDelta || -e.detail;
e.preventDefault();
if (e.delta > 0) {
// 滑轮向上滚动
scaleFunc(0.015);
}
if (e.delta < 0) {
// 滑轮向下滚动
scaleFunc(-0.015);
}
}
// 缩放函数
function scaleFunc(num: number) {
if (imgState.imgScale <= 0.2 && num < 0) return;
imgState.imgScale += num;
}
// 旋转图片
function rotateFunc(deg: number) {
imgState.imgRotate += deg;
}
// 鼠标事件
function handleMouseUp() {
const imgEl = unref(imgElRef);
if (!imgEl) return;
imgEl.onmousemove = null;
}
// 更换图片
function handleIChangeImage(url: string) {
imgState.status = StatueEnum.LOADING;
const img = new Image();
img.src = url;
img.onload = () => {
imgState.currentUrl = url;
imgState.status = StatueEnum.DONE;
};
img.onerror = () => {
imgState.status = StatueEnum.FAIL;
};
}
// 关闭
function handleClose(e: MouseEvent) {
e && e.stopPropagation();
imgState.show = false;
// 移除火狐浏览器下的鼠标滚动事件
document.body.removeEventListener('DOMMouseScroll', scrollFunc);
// 恢复火狐及Safari浏览器下的图片拖拽
document.ondragstart = null;
}
// 图片复原
function resume() {
initState();
}
// 上一页下一页
function handleChange(direction: 'left' | 'right') {
const { currentIndex } = imgState;
const { imageList } = props;
if (direction === 'left') {
imgState.currentIndex--;
if (currentIndex <= 0) {
imgState.currentIndex = imageList.length - 1;
}
}
if (direction === 'right') {
imgState.currentIndex++;
if (currentIndex >= imageList.length - 1) {
imgState.currentIndex = 0;
}
}
handleIChangeImage(imageList[imgState.currentIndex]);
}
function handleAddMoveListener(e: MouseEvent) {
e = e || window.event;
imgState.moveX = e.clientX;
imgState.moveY = e.clientY;
const imgEl = unref(imgElRef);
if (imgEl) {
imgEl.onmousemove = moveFunc;
}
}
function moveFunc(e: MouseEvent) {
e = e || window.event;
e.preventDefault();
const movementX = e.clientX - imgState.moveX;
const movementY = e.clientY - imgState.moveY;
imgState.imgLeft += movementX;
imgState.imgTop += movementY;
imgState.moveX = e.clientX;
imgState.moveY = e.clientY;
}
// 获取图片样式
const getImageStyle = computed(() => {
const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
return {
transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
marginTop: `${imgTop}px`,
marginLeft: `${imgLeft}px`,
};
});
const getIsMultipleImage = computed(() => {
const { imageList } = props;
return imageList.length > 1;
});
watchEffect(() => {
if (props.show) {
init();
}
if (props.imageList) {
initState();
}
});
const renderClose = () => {
return (
<div class={`${prefixCls}__close`} onClick={handleClose}>
<CloseOutlined class={`${prefixCls}__close-icon`} />
</div>
);
};
const renderIndex = () => {
if (!unref(getIsMultipleImage)) {
return null;
}
const { currentIndex } = imgState;
const { imageList } = props;
return (
<div class={`${prefixCls}__index`}>
{currentIndex + 1} / {imageList.length}
</div>
);
};
const renderController = () => {
return (
<div class={`${prefixCls}__controller`}>
<div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-0.15)}>
<img src={unScaleSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(0.15)}>
<img src={scaleSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={resume}>
<img src={resumeSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
<img src={unRotateSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
<img src={rotateSvg} />
</div>
</div>
);
};
const renderArrow = (direction: 'left' | 'right') => {
if (!unref(getIsMultipleImage)) {
return null;
}
return (
<div class={[`${prefixCls}__arrow`, direction]} onClick={() => handleChange(direction)}>
{direction === 'left' ? <LeftOutlined /> : <RightOutlined />}
</div>
);
};
return () => {
return (
imgState.show && (
<div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
<div class={`${prefixCls}-content`}>
<Spin
indicator={<LoadingOutlined style="font-size: 24px" spin />}
spinning={true}
class={[
`${prefixCls}-image`,
{
hidden: imgState.status !== StatueEnum.LOADING,
},
]}
/>
<img
style={unref(getImageStyle)}
class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
ref={imgElRef}
src={imgState.currentUrl}
onMousedown={handleAddMoveListener}
/>
{renderClose()}
{renderIndex()}
{renderController()}
{renderArrow('left')}
{renderArrow('right')}
</div>
</div>
)
);
};
},
});
src/components/Preview/src/index.vue
<template>
<PreviewGroup :class="prefixCls">
<slot v-if="!imageList || $slots.default" />
<template v-else>
<template v-for="item in getImageList" :key="item.src">
<Image v-bind="item">
<template #placeholder v-if="item.placeholder">
<Image v-bind="item" :src="item.placeholder" :preview="false" />
</template>
</Image>
<div :class="prefixCls">
<PreviewGroup>
<slot v-if="!imageList || $slots.default" />
<template v-else>
<template v-for="item in getImageList" :key="item.src">
<Image v-bind="item">
<template #placeholder v-if="item.placeholder">
<Image v-bind="item" :src="item.placeholder" :preview="false" />
</template>
</Image>
</template>
</template>
</template>
</PreviewGroup>
</PreviewGroup>
</div>
</template>
<script lang="ts">
import type { PropType } from 'vue';
......@@ -53,7 +55,10 @@
});
});
return { prefixCls, getImageList };
return {
prefixCls,
getImageList,
};
},
});
</script>
......@@ -61,6 +66,10 @@
@prefix-cls: ~'@{namespace}-image-preview';
.@{prefix-cls} {
.ant-image {
margin-right: 10px;
}
.ant-image-preview-operations {
background: rgba(0, 0, 0, 0.4);
}
......
src/components/Preview/src/props.ts deleted 100644 → 0
import { PropType } from 'vue';
export const basicProps = {
show: {
type: Boolean as PropType<boolean>,
default: false,
},
imageList: {
type: [Array] as PropType<string[]>,
default: null,
},
index: {
type: Number as PropType<number>,
default: 0,
},
};
src/components/Preview/src/types.ts deleted 100644 → 0
export interface Options {
show?: boolean;
imageList: string[];
index?: number;
}
export interface Props {
show: boolean;
instance: Props;
imageList: string[];
index: number;
}
export interface ImageProps {
alt?: string;
fallback?: string;
src: string;
width: string | number;
height?: string | number;
placeholder?: string | boolean;
preview?:
| boolean
| {
visible?: boolean;
onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
getContainer: string | HTMLElement | (() => HTMLElement);
};
}
export type ImageItem = string | ImageProps;
src/components/Table/src/components/TableAction.vue
......@@ -18,7 +18,7 @@
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import Icon from '/@/components/Icon/index';
import { ActionItem } from '/@/components/Table';
import { ActionItem, TableActionType } from '/@/components/Table';
import { PopConfirmButton } from '/@/components/Button';
import { Divider } from 'ant-design-vue';
import { Dropdown } from '/@/components/Dropdown';
......@@ -40,10 +40,15 @@
default: null,
},
divider: propTypes.bool.def(true),
outside: propTypes.bool,
},
setup(props) {
const { prefixCls } = useDesign('basic-table-action');
const table = useTableContext();
let table = {};
if (!props.outside) {
table = useTableContext();
}
const getActions = computed(() => {
return (props.actions || []).map((action) => {
const { popConfirm } = action;
......@@ -71,7 +76,7 @@
});
const getAlign = computed(() => {
const columns = table.getColumns();
const columns = (table as TableActionType)?.getColumns?.() || [];
const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
return actionColumn?.align ?? 'left';
});
......
src/components/Upload/src/FileList.tsx
import { defineComponent, CSSProperties } from 'vue';
import { defineComponent, CSSProperties, watch, nextTick } from 'vue';
import { fileListProps } from './props';
import { isFunction } from '/@/utils/is';
import './FileList.less';
import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
export default defineComponent({
name: 'FileList',
props: fileListProps,
setup(props) {
const modalFn = useModalContext();
watch(
() => props.dataSource,
() => {
nextTick(() => {
modalFn?.redoModalHeight?.();
});
}
);
return () => {
const { columns, actionColumn, dataSource } = props;
const columnList = [...columns, actionColumn];
return (
<table class="file-table">
......
src/components/Upload/src/ThumbUrl.vue
<template>
<span class="thumb">
<img v-if="fileUrl" :src="fileUrl" />
<Image v-if="fileUrl" :src="fileUrl" :width="104" />
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { propTypes } from '/@/utils/propTypes';
import { Image } from 'ant-design-vue';
export default defineComponent({
components: { Image },
props: {
fileUrl: propTypes.string.def(''),
fileName: propTypes.string.def(''),
},
});
</script>
<style lang="less" scoped>
<style lang="less">
.thumb {
img {
position: static;
display: block;
width: 104px;
height: 104px;
cursor: zoom-in;
border-radius: 4px;
object-fit: cover;
}
}
......
src/components/Upload/src/UploadModal.vue
......@@ -13,7 +13,7 @@
:okButtonProps="getOkButtonProps"
:cancelButtonProps="{ disabled: isUploadingRef }"
>
<template #centerdFooter>
<template #centerFooter>
<a-button
@click="handleStartUpload"
color="success"
......@@ -54,7 +54,6 @@
// utils
import { checkFileType, checkImgType, getBase64WithFile } from './helper';
import { buildUUID } from '/@/utils/uuid';
import { createImgPreview } from '/@/components/Preview/index';
import { isFunction } from '/@/utils/is';
import { warn } from '/@/utils/log';
import FileList from './FileList';
......@@ -161,12 +160,12 @@
}
// 预览
function handlePreview(record: FileItem) {
const { thumbUrl = '' } = record;
createImgPreview({
imageList: [thumbUrl],
});
}
// function handlePreview(record: FileItem) {
// const { thumbUrl = '' } = record;
// createImgPreview({
// imageList: [thumbUrl],
// });
// }
async function uploadApiByItem(item: FileItem) {
const { api } = props;
......@@ -267,7 +266,7 @@
return {
columns: createTableColumns(),
actionColumn: createActionColumn(handleRemove, handlePreview),
actionColumn: createActionColumn(handleRemove),
register,
closeModal,
getHelpText,
......
src/components/Upload/src/UploadPreviewModal.vue
......@@ -19,7 +19,6 @@
import { BasicModal, useModalInner } from '/@/components/Modal';
import { previewProps } from './props';
import { PreviewFileItem } from './types';
import { createImgPreview } from '/@/components/Preview/index';
import { downloadByUrl } from '/@/utils/file/download';
import { createPreviewColumns, createPreviewActionColumn } from './data';
......@@ -63,13 +62,13 @@
}
}
// 预览
function handlePreview(record: PreviewFileItem) {
const { url = '' } = record;
createImgPreview({
imageList: [url],
});
}
// // 预览
// function handlePreview(record: PreviewFileItem) {
// const { url = '' } = record;
// createImgPreview({
// imageList: [url],
// });
// }
// 下载
function handleDownload(record: PreviewFileItem) {
......@@ -83,7 +82,7 @@
closeModal,
fileListRef,
columns: createPreviewColumns(),
actionColumn: createPreviewActionColumn({ handleRemove, handlePreview, handleDownload }),
actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }),
};
},
});
......
src/components/Upload/src/data.tsx
import type { BasicColumn, ActionItem } from '/@/components/Table';
import { FileItem, PreviewFileItem, UploadResultStatus } from './types';
import { checkImgType, isImgTypeByName } from './helper';
import {
// checkImgType,
isImgTypeByName,
} from './helper';
import { Progress, Tag } from 'ant-design-vue';
import TableAction from '/@/components/Table/src/components/TableAction.vue';
......@@ -76,7 +79,7 @@ export function createTableColumns(): BasicColumn[] {
},
];
}
export function createActionColumn(handleRemove: Function, handlePreview: Function): BasicColumn {
export function createActionColumn(handleRemove: Function): BasicColumn {
return {
width: 120,
title: t('component.upload.operating'),
......@@ -90,13 +93,13 @@ export function createActionColumn(handleRemove: Function, handlePreview: Functi
onClick: handleRemove.bind(null, record),
},
];
if (checkImgType(record)) {
actions.unshift({
label: t('component.upload.preview'),
onClick: handlePreview.bind(null, record),
});
}
return <TableAction actions={actions} />;
// if (checkImgType(record)) {
// actions.unshift({
// label: t('component.upload.preview'),
// onClick: handlePreview.bind(null, record),
// });
// }
return <TableAction actions={actions} outside={true} />;
},
};
}
......@@ -122,7 +125,6 @@ export function createPreviewColumns(): BasicColumn[] {
export function createPreviewActionColumn({
handleRemove,
handlePreview,
handleDownload,
}: {
handleRemove: Fn;
......@@ -135,7 +137,7 @@ export function createPreviewActionColumn({
dataIndex: 'action',
fixed: false,
customRender: ({ record }) => {
const { url } = (record || {}) as PreviewFileItem;
// const { url } = (record || {}) as PreviewFileItem;
const actions: ActionItem[] = [
{
......@@ -148,12 +150,12 @@ export function createPreviewActionColumn({
onClick: handleDownload.bind(null, record),
},
];
if (isImgTypeByName(url)) {
actions.unshift({
label: t('component.upload.preview'),
onClick: handlePreview.bind(null, record),
});
}
// if (isImgTypeByName(url)) {
// actions.unshift({
// label: t('component.upload.preview'),
// onClick: handlePreview.bind(null, record),
// });
// }
return <TableAction actions={actions} />;
},
};
......
src/views/demo/feat/img-preview/index.vue
<template>
<PageWrapper title="图片预览示例">
<ImagePreview :imageList="imgList" />
<Alert message="有预览图" type="info" />
<div class="flex justify-center mt-4">
<img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
</div>
<Alert message="无预览图" type="info" />
<a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Alert } from 'ant-design-vue';
import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
import { ImagePreview } from '/@/components/Preview/index';
import { PageWrapper } from '/@/components/Page';
const imgList: string[] = [
......@@ -21,16 +14,9 @@
'https://picsum.photos/id/68/346/216',
];
export default defineComponent({
components: { Alert, PageWrapper, ImagePreview },
components: { PageWrapper, ImagePreview },
setup() {
function handleClick(img: string) {
createImgPreview({ imageList: [img] });
}
function handlePreview() {
createImgPreview({ imageList: imgList });
}
return { imgList, handleClick, handlePreview };
return { imgList };
},
});
</script>
test/upload-server/README.md
......@@ -6,7 +6,10 @@ Simple file upload service for testing file upload components.
```js
cs ./test/upload-server
cd ./test/upload-server
// upload dir
mkdir static
yarn install
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论