自己做一个小项目玩时,后台用response输出流生成二维码,前端需要根据输出流直接显示图片。简单的方式是将接口地址赋给img的src属性,但是在这样写死的情况下如何做到刷新二维码的功能。
解决方案:加入时间戳
<img :src="`http://localhost:8080/api/team/share?teamId=${teamId}×tamp=${new Date().getTime()}`"
@click="refresh" />
通过加入时间戳,重新渲染时向接口重新发送请求。并通过点击事件,实现了二维码刷新功能。
问题:关闭窗口时二维码无效生成
img通常嵌套在dialog中,注意部分组件库如vant,控制dialog关闭的事件实际是控制dom元素的销毁与创建。在dialog关闭时会再次发起请求生成无效二维码。并且其组件貌似不支持v-show指令,不能向上图直接将请求置于src后。
解决方案:ref
<van-dialog v-model:show="showPicture" title="入队二维码">
<template #default>
<img :src="link" @click="refresh" />
<h4 style="text-align:center;color:coral ">点击图片刷新</h4>
</template>
</van-dialog>
...
const link = ref('')
const share = async (team) => {
teamId.value = team.id;
link.value = `http://localhost:8080/api/team/share?teamId=${teamId.value}×tamp=${new Date().getTime()}`
showPicture.value = !showPicture.value;
}