TangSengDaoDao/TangSengDaoDaoManager
1
0
Fork 0
mirror of https://github.com/TangSengDaoDao/TangSengDaoDaoManager synced 2025-06-02 07:12:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨新增图片视频，预览

Browse Source
This commit is contained in:
wanglihui 2023-09-11 23:07:58 +08:00
parent 5ec2b5c95d
commit 503240e5dc
1 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/BdMsg/index.vue
View File

@ -5,13 +5,31 @@
{{ msg['content'] }}
</span>
<!-- 图片 -->
<img v-else-if="msg.type == 2" class="w-120px" :src="`${url}${msg['url']}`" />
<img
v-else-if="msg.type == 2"
class="w-120px cursor-pointer"
:src="`${url}${msg['url']}`"
@click="previewPicture(`${url}${msg['url']}`, 'image')"
/>
<!-- GIF -->
<img v-else-if="msg.type == 3" class="w-120px" :src="`${url}${msg['url']}`" />
<img
v-else-if="msg.type == 3"
class="w-120px cursor-pointer"
:src="`${url}${msg['url']}`"
@click="previewPicture(`${url}${msg['url']}`, 'image')"
/>
<!-- 语音 -->
<audio v-else-if="msg.type == 4" :src="`${url}${msg['url']}`"></audio>
<!-- 视频 -->
<video v-else-if="msg.type == 5" controls :src="`${url}${msg['url']}`" class="w-220px h-100px"></video>
<video
v-else-if="msg.type == 5"
controls
controlsList="nofullscreen nodownload noplaybackrate noremote footbar"
disablePictureInPicture
:src="`${url}${msg['url']}`"
class="w-220px h-100px cursor-pointer"
@click="previewPicture(`${url}${msg['url']}`, 'image')"
></video>
<!-- 位置 -->
<div v-else-if="msg.type == 6">
<div>位置标题：{{ msg['title'] }}</div>
@ -73,6 +91,7 @@
</template>
<script lang="tsx" name="BdMsg" setup>
import { Fancybox } from '@fancyapps/ui';
import '@lottiefiles/lottie-player/dist/tgs-player';
import { BU_DOU_CONFIG } from '@/config';
interface IProps {
@ -80,4 +99,37 @@ interface IProps {
}
defineProps<IProps>();
const url = BU_DOU_CONFIG.APP_URL;
// 图片预览
const previewPicture = (url: string, type: string) => {
const imgList = [];
imgList.push({ src: url, defaultType: type });
Fancybox.show(imgList, {
Toolbar: {
display: {
left: ['infobar'],
middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
right: ['slideshow', 'thumbs', 'close']
}
}
});
};
</script>
<style scoped>
video::-webkit-media-controls-timeline {
display: none;
}
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-volume-slider {
display: none;
}
video::-webkit-media-controls-fullscreen-button {
display: none;
}
</style>