|
@@ -13,8 +13,17 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
<p class="tip-text" v-if="tips">{{ tips }}</p>
|
|
|
+ <a v-if="cover" herf="javavscript:;" class="pre-view" @click.stop="onPreView">预览</a>
|
|
|
</div>
|
|
|
</a-upload>
|
|
|
+ <a-modal
|
|
|
+ title="预览"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="onPreView"
|
|
|
+ footer=""
|
|
|
+ >
|
|
|
+ <img v-if="cover" :src="cover" alt="预览图" class="pre-view-pic"/>
|
|
|
+ </a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
@@ -54,7 +63,8 @@ const ImageUpload = defineComponent({
|
|
|
console.log(props.value);
|
|
|
const state = reactive({
|
|
|
uploading: false,
|
|
|
- cover: props.value ?? ""
|
|
|
+ cover: props.value ?? "",
|
|
|
+ visible: false,
|
|
|
});
|
|
|
watch(
|
|
|
() => props.value,
|
|
@@ -63,6 +73,7 @@ const ImageUpload = defineComponent({
|
|
|
}
|
|
|
);
|
|
|
const onFileChange = async (file: { file: File }) => {
|
|
|
+ if(file.file.size / 1024 > 600) return message.error("图片大小超过600KB,请重新选择");
|
|
|
try {
|
|
|
state.uploading = true;
|
|
|
let tempFile = file.file;
|
|
@@ -75,8 +86,11 @@ const ImageUpload = defineComponent({
|
|
|
state.uploading = false;
|
|
|
}
|
|
|
};
|
|
|
+ const onPreView = () => {
|
|
|
+ state.visible = state.visible ? false : true;
|
|
|
+ };
|
|
|
|
|
|
- return { ...toRefs(state), onFileChange };
|
|
|
+ return { ...toRefs(state), onFileChange, onPreView };
|
|
|
}
|
|
|
});
|
|
|
|
|
@@ -107,6 +121,14 @@ export default ImageUpload;
|
|
|
width: 250px;
|
|
|
}
|
|
|
|
|
|
+ .pre-view {
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ bottom: 0%;
|
|
|
+ transform: translate(105%, 0%);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
.cover-edit-wrap {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
@@ -129,4 +151,8 @@ export default ImageUpload;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
+.pre-view-pic {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
</style>
|