mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(image-viewer): typescript error (#7938)

Browse Source
This commit is contained in:
三咲智子 2022-05-30 10:45:07 +08:00 committed by GitHub
parent 286786e348
commit 6e60279753
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
internal/build/src/type-unsafe-stricter.json
View File

@ -11,7 +11,6 @@
"packages/components/drawer/",
"packages/components/dropdown/",
"packages/components/focus-trap/",
"packages/components/image-viewer/",
"packages/components/infinite-scroll/",
"packages/components/input-number/",
"packages/components/input/",

7
packages/components/image-viewer/src/image-viewer.ts
View File

@ -1,5 +1,5 @@
import { buildProps, definePropType, mutable } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue'
import type { Component, ExtractPropTypes } from 'vue'
export type ImageViewerAction =
| 'zoomIn'
@ -43,3 +43,8 @@ export const imageViewerEmits = {
switch: (index: number) => typeof index === 'number',
}
export type ImageViewerEmits = typeof imageViewerEmits
export interface ImageViewerMode {
name: string
icon: Component
}

21
packages/components/image-viewer/src/image-viewer.vue
View File

@ -64,7 +64,7 @@
<img
v-for="(url, i) in urlList"
v-show="i === index"
:ref="(el) => (imgRefs[i] = el)"
:ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
:key="url"
:src="url"
:style="imgStyle"
@ -88,13 +88,14 @@ import {
nextTick,
onMounted,
ref,
shallowRef,
watch,
} from 'vue'
import { isNumber, useEventListener } from '@vueuse/core'
import { throttle } from 'lodash-unified'
import { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'
import { EVENT_CODE } from '@element-plus/constants'
import { isFirefox } from '@element-plus/utils'
import { isFirefox, keysOf } from '@element-plus/utils'
import ElIcon from '@element-plus/components/icon'
import {
ArrowLeft,
@ -110,9 +111,9 @@ import {
import { imageViewerEmits, imageViewerProps } from './image-viewer'
import type { CSSProperties } from 'vue'
import type { ImageViewerAction } from './image-viewer'
import type { ImageViewerAction, ImageViewerMode } from './image-viewer'
const Mode = {
const modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {
CONTAIN: {
name: 'contain',
icon: markRaw(FullScreen),
@ -136,13 +137,13 @@ const { t } = useLocale()
const ns = useNamespace('image-viewer')
const { nextZIndex } = useZIndex()
const wrapper = ref<HTMLDivElement>()
const imgRefs = ref<any[]>([])
const imgRefs = ref<HTMLImageElement[]>([])
const scopeEventListener = effectScope()
const loading = ref(true)
const index = ref(props.initialIndex)
const mode = ref(Mode.CONTAIN)
const mode = shallowRef<ImageViewerMode>(modes.CONTAIN)
const transform = ref({
scale: 1,
deg: 0,
@ -192,7 +193,7 @@ const imgStyle = computed(() => {
transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
transition: enableTransition ? 'transform .3s' : '',
}
if (mode.value.name === Mode.CONTAIN.name) {
if (mode.value.name === modes.CONTAIN.name) {
style.maxWidth = style.maxHeight = '100%'
}
return style
@ -308,12 +309,12 @@ function reset() {
function toggleMode() {
if (loading.value) return
const modeNames = Object.keys(Mode)
const modeValues = Object.values(Mode)
const modeNames = keysOf(modes)
const modeValues = Object.values(modes)
const currentMode = mode.value.name
const index = modeValues.findIndex((i) => i.name === currentMode)
const nextIndex = (index + 1) % modeNames.length
mode.value = Mode[modeNames[nextIndex]]
mode.value = modes[modeNames[nextIndex]]
reset()
}