You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

131 lines
2.7 KiB

<template>
<image
v-if="!state.isError"
class="su-img"
:style="customStyle"
:draggable="false"
:mode="mode"
:src="sheep.$url.cdn(src)"
@tap="onImgPreview"
@load="onImgLoad"
@error="onImgError"
></image>
</template>
<script setup>
/**
* 图片组件
*
* @property {String} src - 图片地址
* @property {Number} mode - 裁剪方式
* @property {String} isPreview - 是否开启预览
* @property {Number} previewList - 预览列表
* @property {String} current - 预览首张下标
*
* @event {Function} load - 图片加载完毕触发
* @event {Function} error - 图片加载错误触发
*
*/
import { reactive, computed } from 'vue';
import sheep from '@/sheep';
// 组件数据
const state = reactive({
isError: false,
imgHeight: 600,
});
// 接收参数
const props = defineProps({
src: {
type: String,
default: '',
},
errorSrc: {
type: String,
default: '/static/img/shop/empty_network.png',
},
mode: {
type: String,
default: 'widthFix',
},
isPreview: {
type: Boolean,
default: false,
},
previewList: {
type: Array,
default() {
return [];
},
},
current: {
type: Number,
default: -1,
},
height: {
type: Number,
default: 0,
},
width: {
type: Number,
default: 0,
},
radius: {
type: Number,
default: 0,
},
});
const emits = defineEmits(['load', 'error']);
const customStyle = computed(() => {
return {
height: (props.height || state.imgHeight) + 'rpx',
width: props.width ? props.width + 'rpx' : '100%',
borderRadius: props.radius ? props.radius + 'rpx' : '',
};
});
// 图片加载完成
function onImgLoad(e) {
if (props.height === 0) {
state.imgHeight = (e.detail.height / e.detail.width) * 750;
}
}
// 图片加载错误
function onImgError(e) {
state.isError = true;
emits('error', e);
}
// 预览图片
function onImgPreview() {
if (!props.isPreview) return;
uni.previewImage({
urls: props.previewList.length < 1 ? [props.src] : props.previewList,
current: props.current,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function (data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
}
</script>
<style lang="scss" scoped>
.su-img {
position: relative;
width: 100%;
height: 100%;
display: block;
}
</style>