Skip to content

V
vue-vben-admin

球球不吃虾 / vue-vben-admin
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vue-vben-admin

GitCode（gitcode.net）2024年7月9日维护升级公告

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 e6093aa4 编写于 作者: 陈 陈文彬
浏览文件
操作

feat(img-preview): add imgPreview componnt

上级 2f268ca8
隐藏空白更改
内联 并排
Showing with 119 addition and 138 deletion
src/components/Drawer/src/index.less
浏览文件 @ e6093aa4
@import (reference) '../../../design/index.less';
@header-height: 50px;
@header-height: 40px;
@footer-height: 60px;
.basic-drawer {
......
src/components/Preview/src/index.tsx
浏览文件 @ e6093aa4
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>
)
);
};
},
......
src/components/Preview/src/props.ts
浏览文件 @ e6093aa4
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,
......
src/router/menus/modules/demo/feat.ts
浏览文件 @ e6093aa4
......@@ -13,10 +13,10 @@ const menu: MenuModule = {
path: '/context-menu',
name: '右键菜单',
},
// {
// path: '/img-preview',
// name: '图片预览',
// },
{
path: '/img-preview',
name: '图片预览',
},
{
path: '/i18n',
name: '国际化',
......
src/views/demo/feat/img-preview/index.vue
浏览文件 @ e6093aa4
......@@ -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>
yarn.lock
浏览文件 @ e6093aa4
......@@ -803,61 +803,61 @@
resolved "https://registry.npm.taobao.org/@types/zxcvbn/download/@types/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
integrity sha1-+8HZQcxtnTfRhAXFE7prKU+Jtgk=
"@typescript-eslint/eslint-plugin@^4.2.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.3.0.tgz#1a23d904bf8ea248d09dc3761af530d90f39c8fa"
integrity sha1-GiPZBL+OokjQncN2GvUw2Q85yPo=
"@typescript-eslint/eslint-plugin@^4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.4.0.tgz?cache=0&sync_timestamp=1601919840869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.4.0.tgz#0321684dd2b902c89128405cf0385e9fe8561934"
integrity sha1-AyFoTdK5AsiRKEBc8Dhen+hWGTQ=
dependencies:
"@typescript-eslint/experimental-utils" "4.3.0"
"@typescript-eslint/scope-manager" "4.3.0"
"@typescript-eslint/experimental-utils" "4.4.0"
"@typescript-eslint/scope-manager" "4.4.0"
debug "^4.1.1"
functional-red-black-tree "^1.0.1"
regexpp "^3.0.0"
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/experimental-utils@4.3.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.3.0.tgz#3f3c6c508e01b8050d51b016e7f7da0e3aefcb87"
integrity sha1-PzxsUI4BuAUNUbAW5/faDjrvy4c=
"@typescript-eslint/experimental-utils@4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.4.0.tgz?cache=0&sync_timestamp=1601919839188&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.4.0.tgz#62a05d3f543b8fc5dec4982830618ea4d030e1a9"
integrity sha1-YqBdP1Q7j8XexJgoMGGOpNAw4ak=
dependencies:
"@types/json-schema" "^7.0.3"
"@typescript-eslint/scope-manager" "4.3.0"
"@typescript-eslint/types" "4.3.0"
"@typescript-eslint/typescript-estree" "4.3.0"
"@typescript-eslint/scope-manager" "4.4.0"
"@typescript-eslint/types" "4.4.0"
"@typescript-eslint/typescript-estree" "4.4.0"
eslint-scope "^5.0.0"
eslint-utils "^2.0.0"
"@typescript-eslint/parser@^4.2.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.3.0.tgz#684fc0be6551a2bfcb253991eec3c786a8c063a3"
integrity sha1-aE/AvmVRor/LJTmR7sPHhqjAY6M=
"@typescript-eslint/parser@^4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.4.0.tgz?cache=0&sync_timestamp=1601919839967&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fparser%2Fdownload%2F%40typescript-eslint%2Fparser-4.4.0.tgz#65974db9a75f23b036f17b37e959b5f99b659ec0"
integrity sha1-ZZdNuadfI7A28Xs36Vm1+ZtlnsA=
dependencies:
"@typescript-eslint/scope-manager" "4.3.0"
"@typescript-eslint/types" "4.3.0"
"@typescript-eslint/typescript-estree" "4.3.0"
"@typescript-eslint/scope-manager" "4.4.0"
"@typescript-eslint/types" "4.4.0"
"@typescript-eslint/typescript-estree" "4.4.0"
debug "^4.1.1"
"@typescript-eslint/scope-manager@4.3.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.3.0.tgz?cache=0&sync_timestamp=1601316727982&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fscope-manager%2Fdownload%2F%40typescript-eslint%2Fscope-manager-4.3.0.tgz#c743227e087545968080d2362cfb1273842cb6a7"
integrity sha1-x0Mifgh1RZaAgNI2LPsSc4Qstqc=
"@typescript-eslint/scope-manager@4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.4.0.tgz#2f3dd27692a12cc9a046a90ba6a9d8cb7731190a"
integrity sha1-Lz3SdpKhLMmgRqkLpqnYy3cxGQo=
dependencies:
"@typescript-eslint/types" "4.3.0"
"@typescript-eslint/visitor-keys" "4.3.0"
"@typescript-eslint/types" "4.4.0"
"@typescript-eslint/visitor-keys" "4.4.0"
"@typescript-eslint/types@4.3.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.3.0.tgz?cache=0&sync_timestamp=1601314224991&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.3.0.tgz#1f0b2d5e140543e2614f06d48fb3ae95193c6ddf"
integrity sha1-HwstXhQFQ+JhTwbUj7OulRk8bd8=
"@typescript-eslint/types@4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.4.0.tgz#63440ef87a54da7399a13bdd4b82060776e9e621"
integrity sha1-Y0QO+HpU2nOZoTvdS4IGB3bp5iE=
"@typescript-eslint/typescript-estree@4.3.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.3.0.tgz#0edc1068e6b2e4c7fdc54d61e329fce76241cee8"
integrity sha1-DtwQaOay5Mf9xU1h4yn852JBzug=
"@typescript-eslint/typescript-estree@4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.4.0.tgz?cache=0&sync_timestamp=1601919838540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.4.0.tgz#16a2df7c16710ddd5406b32b86b9c1124b1ca526"
integrity sha1-FqLffBZxDd1UBrMrhrnBEkscpSY=
dependencies:
"@typescript-eslint/types" "4.3.0"
"@typescript-eslint/visitor-keys" "4.3.0"
"@typescript-eslint/types" "4.4.0"
"@typescript-eslint/visitor-keys" "4.4.0"
debug "^4.1.1"
globby "^11.0.1"
is-glob "^4.0.1"
......@@ -865,12 +865,12 @@
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/visitor-keys@4.3.0":
version "4.3.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.3.0.tgz?cache=0&sync_timestamp=1601314225045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.3.0.tgz#0e5ab0a09552903edeae205982e8521e17635ae0"
integrity sha1-DlqwoJVSkD7eriBZguhSHhdjWuA=
"@typescript-eslint/visitor-keys@4.4.0":
version "4.4.0"
resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.4.0.tgz#0a9118344082f14c0f051342a74b42dfdb012640"
integrity sha1-CpEYNECC8UwPBRNCp0tC39sBJkA=
dependencies:
"@typescript-eslint/types" "4.3.0"
"@typescript-eslint/types" "4.4.0"
eslint-visitor-keys "^2.0.0"
"@vue/compiler-core@3.0.0":
......@@ -2476,10 +2476,10 @@ eslint-plugin-prettier@^3.1.4:
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-vue@^7.0.0-beta.4:
version "7.0.0-beta.4"
resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.0-beta.4.tgz?cache=0&sync_timestamp=1600834523329&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.0-beta.4.tgz#aa13b946702c4de1b8f7c3467698185775b11fdb"
integrity sha1-qhO5RnAsTeG498NGdpgYV3WxH9s=
eslint-plugin-vue@^7.0.1:
version "7.0.1"
resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.1.tgz?cache=0&sync_timestamp=1601862810095&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.1.tgz#8e69a9041bb9719c018f154fdcacbb17713e0240"
integrity sha1-jmmpBBu5cZwBjxVP3Ky7F3E+AkA=
dependencies:
eslint-utils "^2.1.0"
natural-compare "^1.4.0"
......@@ -5012,10 +5012,10 @@ path-to-regexp@^1.0.0:
dependencies:
isarray "0.0.1"
path-to-regexp@^6.1.0:
version "6.1.0"
resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.1.0.tgz#0b18f88b7a0ce0bfae6a25990c909ab86f512427"
integrity sha1-Cxj4i3oM4L+uaiWZDJCauG9RJCc=
path-to-regexp@^6.2.0:
version "6.2.0"
resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.2.0.tgz?cache=0&sync_timestamp=1601400247487&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
integrity sha1-97OAMzYQTDRoia3s5hRmkjBkXzg=
path-type@^1.0.0:
version "1.1.0"
......@@ -7028,15 +7028,15 @@ vue-eslint-parser@^7.1.0:
esquery "^1.0.1"
lodash "^4.17.15"
vue-i18n@^9.0.0-beta.3:
version "9.0.0-beta.3"
resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.3.tgz#8abb78f5d57fb240edfd955b098dc267e33499f3"
integrity sha1-irt49dV/skDt/ZVbCY3CZ+M0mfM=
vue-i18n@^9.0.0-beta.4:
version "9.0.0-beta.4"
resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.4.tgz#a6550f6be56fd617a8ab96e26aa305329f06da02"
integrity sha1-plUPa+Vv1heoq5biaqMFMp8G2gI=
vue-router@^4.0.0-beta.12:
version "4.0.0-beta.12"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.12.tgz?cache=0&sync_timestamp=1601131068569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.12.tgz#873d1bbd16882ab2ae35973e3e691412104f3914"
integrity sha1-hz0bvRaIKrKuNZc+PmkUEhBPORQ=
vue-router@^4.0.0-beta.13:
version "4.0.0-beta.13"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.13.tgz?cache=0&sync_timestamp=1601637432000&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.13.tgz#4611d09a9e44f231cc401ecc294a7f2dcb30e6a6"
integrity sha1-RhHQmp5E8jHMQB7MKUp/Lcsw5qY=
vue@^3.0.0, vue@^3.0.0-rc.5:
version "3.0.0"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或