2018-02-01 02:20:30 +00:00
|
|
|
{{#if staticSrc === src}}
|
|
|
|
<img class="{{className || ''}}"
|
|
|
|
aria-hidden="{{ariaHidden}}"
|
2018-04-11 03:02:42 +00:00
|
|
|
alt="{{alt || ''}}"
|
|
|
|
title="{{alt || ''}}"
|
2018-02-01 02:20:30 +00:00
|
|
|
src="{{src}}"
|
2018-04-29 23:57:12 +00:00
|
|
|
on:imgLoad
|
2018-02-01 02:20:30 +00:00
|
|
|
on:imgLoadError />
|
|
|
|
{{else}}
|
2018-03-17 01:48:24 +00:00
|
|
|
<img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
|
2018-02-01 02:20:30 +00:00
|
|
|
aria-hidden="{{ariaHidden}}"
|
2018-04-11 03:02:42 +00:00
|
|
|
alt="{{alt || ''}}"
|
|
|
|
title="{{alt || ''}}"
|
2018-02-01 02:20:30 +00:00
|
|
|
src="{{staticSrc}}"
|
2018-04-29 23:57:12 +00:00
|
|
|
on:imgLoad
|
2018-02-01 02:20:30 +00:00
|
|
|
on:imgLoadError
|
|
|
|
on:mouseover="onMouseOver(event)"
|
|
|
|
ref:node />
|
|
|
|
{{/if}}
|
|
|
|
<style>
|
|
|
|
.non-autoplay-zoom-in {
|
|
|
|
cursor: zoom-in;
|
|
|
|
}
|
2018-03-17 01:48:24 +00:00
|
|
|
.non-autoplay-zoom-in.is-link {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-02-01 02:20:30 +00:00
|
|
|
</style>
|
|
|
|
<script>
|
2018-04-29 23:57:12 +00:00
|
|
|
import { imgLoad, imgLoadError, mouseover } from '../_utils/events'
|
2018-02-01 02:20:30 +00:00
|
|
|
export default {
|
|
|
|
methods: {
|
2018-04-20 04:38:01 +00:00
|
|
|
onMouseOver (mouseOver) {
|
2018-04-19 16:37:05 +00:00
|
|
|
let { src, staticSrc } = this.get()
|
|
|
|
this.refs.node.src = mouseOver ? src : staticSrc
|
2018-02-01 02:20:30 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
events: {
|
2018-04-29 23:57:12 +00:00
|
|
|
imgLoad,
|
2018-02-01 02:20:30 +00:00
|
|
|
imgLoadError,
|
|
|
|
mouseover
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|