56 lines
1.1 KiB
HTML
56 lines
1.1 KiB
HTML
<img
|
|
class={computedClass}
|
|
aria-hidden={ariaHidden}
|
|
{alt}
|
|
{title}
|
|
{width}
|
|
{height}
|
|
src={displaySrc}
|
|
on:mouseover="onMouseOver(event)"
|
|
ref:node
|
|
/>
|
|
<style>
|
|
.non-autoplay-zoom-in {
|
|
cursor: zoom-in;
|
|
}
|
|
.non-autoplay-zoom-in.is-link {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { mouseover } from '../_utils/events'
|
|
import { decodeImage } from '../_utils/decodeImage'
|
|
import { classname } from '../_utils/classname'
|
|
|
|
export default {
|
|
async oncreate () {
|
|
try {
|
|
await decodeImage(this.refs.node)
|
|
this.fire('imgLoad')
|
|
} catch (e) {
|
|
this.fire('imgLoadError', e)
|
|
}
|
|
},
|
|
methods: {
|
|
onMouseOver (mouseOver) {
|
|
this.set({ mouseOver })
|
|
}
|
|
},
|
|
events: {
|
|
mouseover
|
|
},
|
|
data: () => ({
|
|
alt: '',
|
|
title: '',
|
|
mouseOver: false
|
|
}),
|
|
computed: {
|
|
computedClass: ({ className, src, staticSrc, isLink }) => (classname(
|
|
className,
|
|
src !== staticSrc && 'non-autoplay-zoom-in',
|
|
isLink && 'is-link'
|
|
)),
|
|
displaySrc: ({ src, staticSrc, mouseOver }) => (mouseOver ? src : staticSrc)
|
|
}
|
|
}
|
|
</script> |