remove
parent
c2678e744c
commit
ac286cbcba
|
|
@ -1,282 +0,0 @@
|
|||
/**
|
||||
* {图片预览组件}
|
||||
* @author chensbox<chensbox@foxmail.com>
|
||||
* @date 2023/03/06 15:17:25
|
||||
*/
|
||||
|
||||
import { css, html, Component, styleMap, bind, unbind } from '@bd/core'
|
||||
import '../icon/index.js'
|
||||
|
||||
class ImagePreview extends Component {
|
||||
static props = {
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
attribute: false
|
||||
},
|
||||
visible: false,
|
||||
'max-zoom': 3,
|
||||
'min-zoom': 1 / 3
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
:host([visible]) {
|
||||
display: block;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
user-select: none;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.toggle-btn {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.8;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background-color: #606266;
|
||||
border-color: #fff;
|
||||
border-radius: 50%;
|
||||
--size: 22px;
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.left {
|
||||
left: 5%;
|
||||
}
|
||||
.right {
|
||||
right: 5%;
|
||||
}
|
||||
.close {
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
.tools-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
width: 282px;
|
||||
height: 44px;
|
||||
padding: 0 23px;
|
||||
background-color: #606266;
|
||||
border-color: #fff;
|
||||
color: #e5e5e5;
|
||||
border-radius: 22px;
|
||||
transform: translateX(-50%);
|
||||
--size: 22px;
|
||||
wc-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`
|
||||
active = 0
|
||||
#state = {
|
||||
scale: 1,
|
||||
rotate: 0,
|
||||
duration: 0.2,
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
pre() {
|
||||
this.toggleImage(this.active - 1)
|
||||
}
|
||||
next() {
|
||||
this.toggleImage(this.active + 1)
|
||||
}
|
||||
toggleImage(index) {
|
||||
this.active = index
|
||||
if (this.active < 0) {
|
||||
this.active = this.list.length - 1
|
||||
}
|
||||
if (this.active > this.list.length - 1) {
|
||||
this.active = 0
|
||||
}
|
||||
this.resetState()
|
||||
}
|
||||
zoomIn() {
|
||||
this.#state.duration = 0.2
|
||||
this.setZoom(this.#state.scale * 1.2)
|
||||
}
|
||||
zoomOut() {
|
||||
this.#state.duration = 0.2
|
||||
this.setZoom(this.#state.scale / 1.2)
|
||||
}
|
||||
setZoom(val) {
|
||||
const maxZoom = this['max-zoom']
|
||||
const minZoom = this['min-zoom']
|
||||
val = Math.max(val, minZoom)
|
||||
val = Math.min(val, maxZoom)
|
||||
val = val.toFixed(2)
|
||||
this.#state.scale = val
|
||||
this.$requestUpdate()
|
||||
}
|
||||
resetState() {
|
||||
this.#setState({
|
||||
scale: 1,
|
||||
rotate: 0,
|
||||
duration: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
this.$refs.resetBtn.name =
|
||||
this.$refs.resetBtn.name === 'fullScreen'
|
||||
? 'scaleToOriginal'
|
||||
: 'fullScreen'
|
||||
this.$requestUpdate()
|
||||
}
|
||||
rotateLeft() {
|
||||
this.setRotate(this.#state.rotate - 90)
|
||||
}
|
||||
rotateRight() {
|
||||
this.setRotate(this.#state.rotate + 90)
|
||||
}
|
||||
setRotate(val) {
|
||||
this.#setState({
|
||||
duration: 0.2,
|
||||
rotate: val
|
||||
})
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visible = false
|
||||
}
|
||||
|
||||
#setState(data) {
|
||||
Object.assign(this.#state, data)
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.$on('wheel', e => {
|
||||
e.preventDefault()
|
||||
let { scale } = this.#state
|
||||
this.#setState({
|
||||
duration: 0
|
||||
})
|
||||
scale = e.wheelDelta > 0 ? +scale + 0.08 : scale - 0.08
|
||||
this.setZoom(scale)
|
||||
})
|
||||
|
||||
bind(this.$refs.images, 'mousedown', e => {
|
||||
let { clientX: startX, clientY: startY } = e
|
||||
let { x, y } = this.#state
|
||||
const onmousemove = bind(document, 'mousemove', e => {
|
||||
e.preventDefault()
|
||||
let { clientX, clientY } = e
|
||||
let deltaX = clientX - startX
|
||||
let deltaY = clientY - startY
|
||||
|
||||
this.#setState({
|
||||
x: deltaX + x,
|
||||
y: deltaY + y
|
||||
})
|
||||
})
|
||||
const onmouseup = bind(document, 'mouseup', _ => {
|
||||
unbind(document, 'mousemove', onmousemove)
|
||||
unbind(document, 'mouseup', onmouseup)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let { scale, rotate, duration, x, y } = this.#state
|
||||
let styles = styleMap({
|
||||
transform: `scale(${scale}) rotate(${rotate}deg) `,
|
||||
transition: `transform ${duration}s ease-in-out`
|
||||
})
|
||||
let translate = styleMap({
|
||||
transform: `translate(${x}px, ${y}px)`
|
||||
})
|
||||
return html`
|
||||
<div class="wrapper">
|
||||
<div class="images" ref="images" style=${translate}>
|
||||
${this.list.map(
|
||||
(url, index) =>
|
||||
html`<img
|
||||
class="img"
|
||||
loading="auto"
|
||||
style=${index === this.active ? styles : ''}
|
||||
class=${index === this.active ? 'show' : 'hide'}
|
||||
src=${url}
|
||||
/>`
|
||||
)}
|
||||
</div>
|
||||
<div class="left toggle-btn" @click=${this.pre}>
|
||||
<wc-icon name="left"></wc-icon>
|
||||
</div>
|
||||
<div class="right toggle-btn" @click=${this.next}>
|
||||
<wc-icon name="right"></wc-icon>
|
||||
</div>
|
||||
<div class="close toggle-btn" @click=${this.close}>
|
||||
<wc-icon name="close"></wc-icon>
|
||||
</div>
|
||||
<div class="tools-bar">
|
||||
<wc-icon name="zoomIn" @click=${this.zoomIn}></wc-icon>
|
||||
<wc-icon name="zoomOut" @click=${this.zoomOut}></wc-icon>
|
||||
<wc-icon
|
||||
name="fullScreen"
|
||||
ref="resetBtn"
|
||||
@click=${this.resetState}
|
||||
></wc-icon>
|
||||
<wc-icon name="refreshLeft" @click=${this.rotateLeft}></wc-icon>
|
||||
<wc-icon name="refreshRight" @click=${this.rotateRight}></wc-icon>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
ImagePreview.reg('image-preview')
|
||||
|
||||
let instance = null
|
||||
|
||||
window.imagePreview = function (options) {
|
||||
if (!instance) {
|
||||
instance = new ImagePreview()
|
||||
document.body.appendChild(instance)
|
||||
}
|
||||
|
||||
if (Array.isArray(options)) {
|
||||
instance.list = options
|
||||
} else {
|
||||
Object.assign(instance, options)
|
||||
}
|
||||
|
||||
instance.visible = true
|
||||
return instance
|
||||
}
|
||||
Loading…
Reference in New Issue