bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化图片、图片预览组件

master
chenjiajian 2023-04-03 17:32:05 +08:00
parent 4107ef484c
commit 832e4250e6
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/image/index.js
View File

@ -6,6 +6,7 @@
import { css, html, Component, styleMap } from '@bd/core' import { css, html, Component, styleMap } from '@bd/core'
import '../icon/index.js' import '../icon/index.js'
import './preview.js'
class Image extends Component { class Image extends Component {
static props = { static props = {
src: '', src: '',
@ -55,6 +56,11 @@ class Image extends Component {
this.status = 'loaded' this.status = 'loaded'
this.$requestUpdate() this.$requestUpdate()
} }
onClick() {
if (this.previewSrcList.length) {
window.imagePreview(this.previewSrcList)
}
}
render() { render() {
let { let {
lazy, lazy,
@ -62,10 +68,12 @@ class Image extends Component {
status, status,
fit, fit,
alt, alt,
previewSrcList,
'referrer-policy': referrerPolicy 'referrer-policy': referrerPolicy
} = this } = this
let styles = styleMap({ let styles = styleMap({
'object-fit': fit 'object-fit': fit,
cursor: previewSrcList.length ? 'pointer' : 'default'
}) })
let $slot = '' let $slot = ''
if (status === 'loading') { if (status === 'loading') {
@ -76,7 +84,7 @@ class Image extends Component {
</slot>` </slot>`
} }
return html` return html`
<div class="wc-image" ref="wrapper"> <div class="wc-image" ref="wrapper" @click=${this.onClick}>
<img <img
style=${styles} style=${styles}
src=${src} src=${src}

15
src/image/preview.js
View File

@ -14,8 +14,8 @@ class ImagePreview extends Component {
attribute: false attribute: false
}, },
visible: false, visible: false,
maxZoom: 3, 'max-zoom': 3,
minZoom: 1 / 3 'min-zoom': 1 / 3
} }
active = 0 active = 0
static styles = css` static styles = css`
@ -129,7 +129,8 @@ class ImagePreview extends Component {
this.setZoom(this.#state.scale / 1.2) this.setZoom(this.#state.scale / 1.2)
} }
setZoom(val) { setZoom(val) {
const { maxZoom, minZoom } = this const maxZoom = this['max-zoom']
const minZoom = this['min-zoom']
val = Math.max(val, minZoom) val = Math.max(val, minZoom)
val = Math.min(val, maxZoom) val = Math.min(val, maxZoom)
val = val.toFixed(2) val = val.toFixed(2)
@ -259,8 +260,12 @@ ImagePreview.reg('image-preview')
const instance = new ImagePreview() const instance = new ImagePreview()
document.body.appendChild(instance) document.body.appendChild(instance)
window.imagePreview = function (list) { window.imagePreview = function (options) {
instance.list = list if (Array.isArray(options)) {
instance.list = options
} else {
Object.assign(instance, options)
}
instance.visible = true instance.visible = true
return instance return instance
} }