81 lines
1.4 KiB
Vue
81 lines
1.4 KiB
Vue
<template>
|
|
<image
|
|
:src="src"
|
|
:mode="mode"
|
|
:lazy-load="lazyLoad"
|
|
:fade-show="fadeShow"
|
|
:webp="webp"
|
|
:show-menu-by-longpress="enableLongpress"
|
|
:class="imageClass"
|
|
:style="imageStyle"
|
|
@load="onLoad"
|
|
@error="onError"
|
|
@tap="onClick"
|
|
>
|
|
<slot></slot>
|
|
</image>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NsImage',
|
|
props: {
|
|
// 图片路径
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
// 图片裁剪模式
|
|
mode: {
|
|
type: String,
|
|
default: 'aspectFill'
|
|
},
|
|
// 是否开启长按识别二维码（默认开启）
|
|
enableLongpress: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否懒加载
|
|
lazyLoad: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 图片显示动画
|
|
fadeShow: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 支持webp
|
|
webp: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 自定义类名
|
|
imageClass: {
|
|
type: [String, Array, Object],
|
|
default: ''
|
|
},
|
|
// 自定义样式
|
|
imageStyle: {
|
|
type: [String, Object],
|
|
default: ''
|
|
}
|
|
},
|
|
methods: {
|
|
onLoad(e) {
|
|
this.$emit('load', e)
|
|
},
|
|
onError(e) {
|
|
this.$emit('error', e)
|
|
},
|
|
onClick(e) {
|
|
this.$emit('tap', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 可添加全局图片样式 */
|
|
</style>
|