Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
球球不吃虾
vue-vben-admin
提交
e23bd269
V
vue-vben-admin
项目概览
球球不吃虾
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
e23bd269
编写于
7月 26, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(preview): add more features
为Preview组件添加新的属性及事件
上级
98749ec6
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
149 addition
and
14 deletion
+149
-14
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
src/components/Preview/src/Functional.vue
src/components/Preview/src/Functional.vue
+118
-8
src/components/Preview/src/functional.ts
src/components/Preview/src/functional.ts
+2
-5
src/components/Preview/src/typing.ts
src/components/Preview/src/typing.ts
+19
-0
src/views/demo/feat/img-preview/index.vue
src/views/demo/feat/img-preview/index.vue
+6
-1
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
e23bd269
### ✨ Features
-
**Preview**
添加新的属性及事件
### 🐛 Bug Fixes
-
**ApiTreeSelect**
修复未能正确监听
`params`
变化的问题
...
...
src/components/Preview/src/Functional.vue
浏览文件 @
e23bd269
...
...
@@ -38,13 +38,33 @@
type
:
Number
as
PropType
<
number
>
,
default
:
0
,
},
scaleStep
:
{
type
:
Number
as
PropType
<
number
>
,
},
defaultWidth
:
{
type
:
Number
as
PropType
<
number
>
,
},
maskClosable
:
{
type
:
Boolean
as
PropType
<
boolean
>
,
},
rememberState
:
{
type
:
Boolean
as
PropType
<
boolean
>
,
},
};
const
prefixCls
=
'
img-preview
'
;
export
default
defineComponent
({
name
:
'
ImagePreview
'
,
props
,
setup
(
props
:
Props
)
{
emits
:
[
'
img-load
'
,
'
img-error
'
],
setup
(
props
:
Props
,
{
expose
,
emit
})
{
interface
stateInfo
{
scale
:
number
;
rotate
:
number
;
top
:
number
;
left
:
number
;
}
const
stateMap
=
new
Map
<
string
,
stateInfo
>
();
const
imgState
=
reactive
<
ImgState
>
({
currentUrl
:
''
,
imgScale
:
1
,
...
...
@@ -96,6 +116,14 @@
};
}
const
getScaleStep
=
computed
(()
=>
{
if
(
props
.
scaleStep
>
0
&&
props
.
scaleStep
<
100
)
{
return
props
.
scaleStep
/
100
;
}
else
{
return
imgState
.
imgScale
/
10
;
}
});
// 监听鼠标滚轮
function
scrollFunc
(
e
:
any
)
{
e
=
e
||
window
.
event
;
...
...
@@ -104,11 +132,11 @@
e
.
preventDefault
();
if
(
e
.
delta
>
0
)
{
// 滑轮向上滚动
scaleFunc
(
0.015
);
scaleFunc
(
getScaleStep
.
value
);
}
if
(
e
.
delta
<
0
)
{
// 滑轮向下滚动
scaleFunc
(
-
0.015
);
scaleFunc
(
-
getScaleStep
.
value
);
}
}
// 缩放函数
...
...
@@ -134,11 +162,54 @@
imgState
.
status
=
StatueEnum
.
LOADING
;
const
img
=
new
Image
();
img
.
src
=
url
;
img
.
onload
=
()
=>
{
img
.
onload
=
(
e
:
Event
)
=>
{
if
(
imgState
.
currentUrl
!==
url
)
{
const
ele
:
HTMLElement
[]
=
e
.
composedPath
();
if
(
props
.
rememberState
)
{
// 保存当前图片的缩放信息
stateMap
.
set
(
imgState
.
currentUrl
,
{
scale
:
imgState
.
imgScale
,
top
:
imgState
.
imgTop
,
left
:
imgState
.
imgLeft
,
rotate
:
imgState
.
imgRotate
,
});
// 如果之前已存储缩放信息,就应用
const
stateInfo
=
stateMap
.
get
(
url
);
if
(
stateInfo
)
{
imgState
.
imgScale
=
stateInfo
.
scale
;
imgState
.
imgTop
=
stateInfo
.
top
;
imgState
.
imgRotate
=
stateInfo
.
rotate
;
imgState
.
imgLeft
=
stateInfo
.
left
;
}
else
{
initState
();
if
(
props
.
defaultWidth
)
{
imgState
.
imgScale
=
props
.
defaultWidth
/
ele
[
0
].
naturalWidth
;
}
}
}
else
{
if
(
props
.
defaultWidth
)
{
imgState
.
imgScale
=
props
.
defaultWidth
/
ele
[
0
].
naturalWidth
;
}
}
ele
&&
emit
(
'
img-load
'
,
{
index
:
imgState
.
currentIndex
,
dom
:
ele
[
0
]
as
HTMLImageElement
,
url
,
});
}
imgState
.
currentUrl
=
url
;
imgState
.
status
=
StatueEnum
.
DONE
;
};
img
.
onerror
=
()
=>
{
img
.
onerror
=
(
e
:
Event
)
=>
{
const
ele
:
EventTarget
[]
=
e
.
composedPath
();
ele
&&
emit
(
'
img-error
'
,
{
index
:
imgState
.
currentIndex
,
dom
:
ele
[
0
]
as
HTMLImageElement
,
url
,
});
imgState
.
status
=
StatueEnum
.
FAIL
;
};
}
...
...
@@ -146,6 +217,10 @@
// 关闭
function
handleClose
(
e
:
MouseEvent
)
{
e
&&
e
.
stopPropagation
();
close
();
}
function
close
()
{
imgState
.
show
=
false
;
// 移除火狐浏览器下的鼠标滚动事件
document
.
body
.
removeEventListener
(
'
DOMMouseScroll
'
,
scrollFunc
);
...
...
@@ -158,6 +233,19 @@
initState
();
}
expose
({
resume
,
close
,
prev
:
handleChange
.
bind
(
null
,
'
left
'
),
next
:
handleChange
.
bind
(
null
,
'
right
'
),
setScale
:
(
scale
:
number
)
=>
{
if
(
scale
>
0
&&
scale
<=
10
)
imgState
.
imgScale
=
scale
;
},
setRotate
:
(
rotate
:
number
)
=>
{
imgState
.
imgRotate
=
rotate
;
},
}
as
PreviewActions
);
// 上一页下一页
function
handleChange
(
direction
:
'
left
'
|
'
right
'
)
{
const
{
currentIndex
}
=
imgState
;
...
...
@@ -205,6 +293,7 @@
transform
:
`scale(
${
imgScale
}
) rotate(
${
imgRotate
}
deg)`
,
marginTop
:
`
${
imgTop
}
px`
,
marginLeft
:
`
${
imgLeft
}
px`
,
maxWidth
:
props
.
defaultWidth
?
'
unset
'
:
'
100%
'
,
};
});
...
...
@@ -222,6 +311,16 @@
}
});
const
handleMaskClick
=
(
e
:
MouseEvent
)
=>
{
if
(
props
.
maskClosable
&&
e
.
target
&&
(
e
.
target
as
HTMLDivElement
).
classList
.
contains
(
`
${
prefixCls
}
-content`
)
)
{
handleClose
(
e
);
}
};
const
renderClose
=
()
=>
{
return
(
<
div
class
=
{
`
${
prefixCls
}
__close`
}
onClick
=
{
handleClose
}
>
...
...
@@ -246,10 +345,16 @@
const
renderController
=
()
=>
{
return
(
<
div
class
=
{
`
${
prefixCls
}
__controller`
}
>
<
div
class
=
{
`
${
prefixCls
}
__controller-item`
}
onClick
=
{()
=>
scaleFunc
(
-
0.15
)}
>
<
div
class
=
{
`
${
prefixCls
}
__controller-item`
}
onClick
=
{()
=>
scaleFunc
(
-
getScaleStep
.
value
)}
>
<
img
src
=
{
unScaleSvg
}
/
>
<
/div
>
<
div
class
=
{
`
${
prefixCls
}
__controller-item`
}
onClick
=
{()
=>
scaleFunc
(
0.15
)}
>
<
div
class
=
{
`
${
prefixCls
}
__controller-item`
}
onClick
=
{()
=>
scaleFunc
(
getScaleStep
.
value
)}
>
<
img
src
=
{
scaleSvg
}
/
>
<
/div
>
<
div
class
=
{
`
${
prefixCls
}
__controller-item`
}
onClick
=
{
resume
}
>
...
...
@@ -279,7 +384,12 @@
return
()
=>
{
return
(
imgState
.
show
&&
(
<
div
class
=
{
prefixCls
}
ref
=
{
wrapElRef
}
onMouseup
=
{
handleMouseUp
}
>
<
div
class
=
{
prefixCls
}
ref
=
{
wrapElRef
}
onMouseup
=
{
handleMouseUp
}
onClick
=
{
handleMaskClick
}
>
<
div
class
=
{
`
${
prefixCls
}
-content`
}
>
{
/*<Spin*/
}
{
/* indicator={<LoadingOutlined style="font-size: 24px" spin />}*/
}
...
...
src/components/Preview/src/functional.ts
浏览文件 @
e23bd269
...
...
@@ -6,15 +6,12 @@ import { createVNode, render } from 'vue';
let
instance
:
ReturnType
<
typeof
createVNode
>
|
null
=
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
;
Object
.
assign
(
propsData
,
{
show
:
true
,
index
:
0
,
scaleStep
:
100
},
options
);
instance
=
createVNode
(
ImgPreview
,
propsData
);
render
(
instance
,
container
);
document
.
body
.
appendChild
(
container
);
return
instance
.
component
?.
exposed
;
}
src/components/Preview/src/typing.ts
浏览文件 @
e23bd269
...
...
@@ -2,6 +2,12 @@ export interface Options {
show
?:
boolean
;
imageList
:
string
[];
index
?:
number
;
scaleStep
?:
number
;
defaultWidth
?:
number
;
maskClosable
?:
boolean
;
rememberState
?:
boolean
;
onImgLoad
?:
(
img
:
HTMLImageElement
)
=>
void
;
onImgError
?:
(
img
:
HTMLImageElement
)
=>
void
;
}
export
interface
Props
{
...
...
@@ -9,6 +15,19 @@ export interface Props {
instance
:
Props
;
imageList
:
string
[];
index
:
number
;
scaleStep
:
number
;
defaultWidth
:
number
;
maskClosable
:
boolean
;
rememberState
:
boolean
;
}
export
interface
PreviewActions
{
resume
:
()
=>
void
;
close
:
()
=>
void
;
prev
:
()
=>
void
;
next
:
()
=>
void
;
setScale
:
(
scale
:
number
)
=>
void
;
setRotate
:
(
rotate
:
number
)
=>
void
;
}
export
interface
ImageProps
{
...
...
src/views/demo/feat/img-preview/index.vue
浏览文件 @
e23bd269
...
...
@@ -8,6 +8,7 @@
import
{
defineComponent
}
from
'
vue
'
;
import
{
createImgPreview
,
ImagePreview
}
from
'
/@/components/Preview/index
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
// import { PreviewActions } from '/@/components/Preview/src/typing';
const
imgList
:
string
[]
=
[
'
https://picsum.photos/id/66/346/216
'
,
...
...
@@ -18,7 +19,11 @@
components
:
{
PageWrapper
,
ImagePreview
},
setup
()
{
function
openImg
()
{
createImgPreview
({
imageList
:
imgList
});
const
onImgLoad
=
({
index
,
url
,
dom
})
=>
{
console
.
log
(
`第
${
index
+
1
}
张图片已加载,URL为:
${
url
}
`
,
dom
);
};
// 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑,实现类似幻灯片、自动旋转之类的骚操作
createImgPreview
({
imageList
:
imgList
,
defaultWidth
:
700
,
rememberState
:
true
,
onImgLoad
});
}
return
{
imgList
,
openImg
};
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录