提交 e6093aa4 作者: 陈文彬

feat(img-preview): add imgPreview componnt

上级 2f268ca8
......@@ -26,11 +26,11 @@
"lodash-es": "^4.17.15",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.1.0",
"path-to-regexp": "^6.2.0",
"qrcode": "^1.4.4",
"vue": "^3.0.0",
"vue-i18n": "^9.0.0-beta.3",
"vue-router": "^4.0.0-beta.12",
"vue-i18n": "^9.0.0-beta.4",
"vue-router": "^4.0.0-beta.13",
"vuex": "^4.0.0-beta.4",
"vuex-module-decorators": "^1.0.1",
"zxcvbn": "^4.4.2"
......@@ -51,8 +51,8 @@
"@types/rollup-plugin-visualizer": "^2.6.0",
"@types/shelljs": "^0.8.8",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
"@vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-plugin-import": "^1.13.0",
......@@ -63,7 +63,7 @@
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-beta.4",
"eslint-plugin-vue": "^7.0.1",
"fs-extra": "^9.0.1",
"husky": "^4.3.0",
"inquirer": "^7.3.3",
......
@import (reference) '../../../design/index.less';
@header-height: 50px;
@header-height: 40px;
@footer-height: 60px;
.basic-drawer {
......
import { defineComponent, ref, unref, computed, reactive, watch } from 'vue';
import { FadeTransition } from '/@/components/Transition/index';
import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
import { basicProps } from './props';
import { Props } from './types';
......@@ -11,9 +9,9 @@ import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vu
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 unScaleSvg from '/@/assets/svg/preview/unscale.svg';
import loadingSvg from '/@/assets/images/loading.svg';
import unrotateSvg from '/@/assets/svg/preview/unrotate.svg';
import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
enum StatueEnum {
LOADING,
DONE,
......@@ -29,6 +27,7 @@ interface ImgState {
status: StatueEnum;
moveX: number;
moveY: number;
show: boolean;
}
const prefixCls = 'img-preview';
......@@ -46,7 +45,9 @@ export default defineComponent({
currentIndex: 0,
moveX: 0,
moveY: 0,
show: props.show,
});
const wrapElRef = ref<HTMLDivElement | null>(null);
const imgElRef = ref<HTMLImageElement | null>(null);
......@@ -133,16 +134,15 @@ export default defineComponent({
}
// 关闭
function handleClose() {
const { instance } = props;
if (instance) {
instance.show = false;
}
function handleClose(e: MouseEvent) {
e && e.stopPropagation();
imgState.show = false;
// 移除火狐浏览器下的鼠标滚动事件
document.body.removeEventListener('DOMMouseScroll', scrollFunc);
// 恢复火狐及Safari浏览器下的图片拖拽
document.ondragstart = null;
}
// 图片复原
function resume() {
initState();
......@@ -202,26 +202,15 @@ export default defineComponent({
const { imageList } = props;
return imageList.length > 1;
});
watch(
() => props.show,
(show) => {
if (show) {
init();
}
},
{
immediate: true,
watchEffect(() => {
if (props.show) {
init();
}
);
watch(
() => props.imageList,
() => {
if (props.imageList) {
initState();
},
{
immediate: true,
}
);
});
const renderClose = () => {
return (
......@@ -247,7 +236,7 @@ export default defineComponent({
return (
<div class={`${prefixCls}__controller`}>
<div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-0.15)}>
<img src={unscaleSvg} />
<img src={unScaleSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(0.15)}>
<img src={scaleSvg} />
......@@ -256,7 +245,7 @@ export default defineComponent({
<img src={resumeSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
<img src={unrotateSvg} />
<img src={unRotateSvg} />
</div>
<div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
<img src={rotateSvg} />
......@@ -277,41 +266,32 @@ export default defineComponent({
};
return () => {
return (
<FadeTransition>
{() =>
props.show && (
<div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
<div class={`${prefixCls}-content`}>
<img
width="32"
src={loadingSvg}
v-show={imgState.status === StatueEnum.LOADING}
class={`${prefixCls}-image`}
/>
<img
v-show={imgState.status === StatueEnum.DONE}
style={unref(getImageStyle)}
class={`${prefixCls}-image`}
ref={imgElRef}
src={imgState.currentUrl}
onMousedown={handleAddMoveListener}
/>
<img
width="32"
src={loadingSvg}
v-show={imgState.status === StatueEnum.LOADING}
class={`${prefixCls}-image`}
/>
{renderClose()}
{renderIndex()}
{renderController()}
{renderArrow('left')}
{renderArrow('right')}
</div>
</div>
)
}
</FadeTransition>
imgState.show && (
<div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
<div class={`${prefixCls}-content`}>
<img
width="32"
src={loadingSvg}
class={[
`${prefixCls}-image`,
imgState.status === StatueEnum.LOADING ? '' : 'hidden',
]}
/>
<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>
)
);
};
},
......
import { PropType } from 'vue';
import { Props } from './types';
export const basicProps = {
show: {
type: Boolean as PropType<boolean>,
default: false,
},
instance: {
type: Object as PropType<Props>,
default: null,
},
imageList: {
type: [Array] as PropType<string[]>,
default: null,
......
......@@ -13,10 +13,10 @@ const menu: MenuModule = {
path: '/context-menu',
name: '右键菜单',
},
// {
// path: '/img-preview',
// name: '图片预览',
// },
{
path: '/img-preview',
name: '图片预览',
},
{
path: '/i18n',
name: '国际化',
......
......@@ -4,6 +4,8 @@
<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>
</div>
</template>
<script lang="ts">
......@@ -21,7 +23,11 @@
function handleClick(img: string) {
createImgPreview({ imageList: [img] });
}
return { imgList, handleClick };
function handlePreview() {
createImgPreview({ imageList: imgList });
}
return { imgList, handleClick, handlePreview };
},
});
</script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论