tsai
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(img-preview): add imgPreview componnt

pull/33/head
陈文彬 6 years ago
parent
2f268ca8f4
commit
e6093aa4f4
7 changed files with 119 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      package.json
  2. 2
      src/components/Drawer/src/index.less
  3. 108
      src/components/Preview/src/index.tsx
  4. 5
      src/components/Preview/src/props.ts
  5. 8
      src/router/menus/modules/demo/feat.ts
  6. 8
      src/views/demo/feat/img-preview/index.vue
  7. 114
      yarn.lock

12
package.json
View File

@ -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",

2
src/components/Drawer/src/index.less
View File

@ -1,5 +1,5 @@
@import (reference) '../../../design/index.less';
@header-height: 50px;
@header-height: 40px;
@footer-height: 60px;
.basic-drawer {

108
src/components/Preview/src/index.tsx
View File

@ -1,6 +1,4 @@
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>
)
);
};
},

5
src/components/Preview/src/props.ts
View File

@ -1,14 +1,9 @@
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,

8
src/router/menus/modules/demo/feat.ts
View File

@ -13,10 +13,10 @@ const menu: MenuModule = {
path: '/context-menu',
name: '右键菜单',
},
// {
// path: '/img-preview',
// name: '图片预览',
// },
{
path: '/img-preview',
name: '图片预览',
},
{
path: '/i18n',
name: '国际化',

8
src/views/demo/feat/img-preview/index.vue
View File

@ -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>

114
yarn.lock
View File

@ -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"

Write Preview
Loading…
Cancel
Save