93 lines
1.7 KiB
JavaScript
93 lines
1.7 KiB
JavaScript
/**
|
|
* {图片组件}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/03/06 15:17:25
|
|
*/
|
|
|
|
import { css, html, Component, styleMap } from 'wkit'
|
|
import '../icon/index.js'
|
|
|
|
class Image extends Component {
|
|
static props = {
|
|
src: '',
|
|
fit: 'fill',
|
|
lazy: false,
|
|
referrerPolicy: null,
|
|
alt: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.wc-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.error {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #666;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
`
|
|
|
|
status = 'loading'
|
|
|
|
onError() {
|
|
this.status = 'error'
|
|
this.$refs.wrapper.removeChild(this.$refs.img)
|
|
this.$requestUpdate()
|
|
}
|
|
onload() {
|
|
this.status = 'loaded'
|
|
this.$requestUpdate()
|
|
}
|
|
|
|
render() {
|
|
let { lazy, src, status, fit, alt, referrerPolicy } = this
|
|
let styles = styleMap({
|
|
'object-fit': fit
|
|
})
|
|
|
|
let $slot = ''
|
|
|
|
if (status === 'loading') {
|
|
$slot = html`<slot name="placeholder"></slot>`
|
|
} else if (status === 'error') {
|
|
$slot = html`<slot name="error">
|
|
<div class="error">FAILED</div>
|
|
</slot>`
|
|
}
|
|
|
|
return html`
|
|
<div class="wc-image" ref="wrapper">
|
|
<img
|
|
style=${styles}
|
|
src=${src}
|
|
alt=${alt}
|
|
referrer-policy=${referrerPolicy}
|
|
:loading=${lazy ? 'lazy' : 'auto'}
|
|
@load=${this.onload}
|
|
@error=${this.onError}
|
|
ref="img"
|
|
/>
|
|
${$slot}
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
Image.reg('image')
|
JavaScript
98.9%
CSS
1.1%