85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<template>
|
|
<up-overlay :show="show" @click="show = false">
|
|
<view class="warp">
|
|
<image :src="imgInfo" ref="img1" :style="imgStyle" class="img1"></image>
|
|
</view>
|
|
</up-overlay>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, getCurrentInstance, defineEmits, watch, computed } from 'vue';
|
|
|
|
const fileList1 = ref([]);
|
|
const emit = defineEmits();
|
|
const { proxy } = getCurrentInstance();
|
|
const imgInfo = ref(null);
|
|
const imageWidth = ref(0);
|
|
const imageHeight = ref(0);
|
|
|
|
const props = defineProps({
|
|
modelValue: [String, Object, Array],
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
imgsrc: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
fileSize: {
|
|
type: Number,
|
|
default: 100 * 1024 * 1024,
|
|
},
|
|
typeImgInfo: {
|
|
type: String,
|
|
default: '1'
|
|
}
|
|
});
|
|
|
|
const initInfo = () => {
|
|
console.log("ceshi1");
|
|
|
|
if (props.imgsrc && props.imgsrc.tempFilePaths) {
|
|
imgInfo.value = props.imgsrc.tempFilePaths[0];
|
|
uni.getImageInfo({
|
|
src: props.imgsrc.tempFilePaths[0],
|
|
success: function (image) {
|
|
imageWidth.value = image.width;
|
|
imageHeight.value = image.height;
|
|
console.log(image.width);
|
|
console.log(image.height);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 监听 show 和 imgsrc 的变化
|
|
watch([() => props.show, () => props.imgsrc], ([newShow, newImgsrc]) => {
|
|
if (newShow || newImgsrc) {
|
|
initInfo();
|
|
}
|
|
});
|
|
|
|
// 动态计算样式
|
|
const warpStyle = reactive({
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh', // 使容器高度为视口高度
|
|
});
|
|
|
|
const imgStyle = computed(() => ({
|
|
width: `${imageWidth.value/2}rpx`,
|
|
height: `${imageHeight.value/2}rpx`,
|
|
}));
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warp {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh; // 使容器高度为视口高度
|
|
}
|
|
</style> |