allowtransparency:基于Electron+Vue3.0聊天界面|图片/视

 2021-07-14 0:12    77  

今天给大家分享一些vue3和electron实现聊天程序界面功能allowtransparency。

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

支持发送图片/视频allowtransparency、拖拽发送图片、截图、链接/视频新开窗口等功能。

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

图片预览功能使用到了ant-design-vue组件库中的Image组件allowtransparency。

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

<a-image-preview-group> <a-image class="img__pic" :src="item.imgsrc" /> ...</<a-image-preview-group>

allowtransparency:基于Electron+Vue3.0聊天界面|图片/视频预览

链接预览采用新开窗口的模式。并且给data传入链接地址。

const handleMsgClicked = (e) => { let target = e.target if(target.tagName === 'A') { e.preventDefault() createWin({ title: '网址预览', route: '/link', data: {url: target.href}, width: 640, height: 728 }) }}在link.vue页面,获取data参数。使用iframe显示即可。

<template> <div> <NavBar> <template #title></template> </NavBar> <!-- 内容区 --> <div class="ntMain__cont flex1 flexbox flex-col"> <div class="vChat__lkview"> <iframe scrolling="auto" allowtransparency="true" frameborder="0" :src="data.url"></iframe> </div> </div> </div></template><script>import { winCfg } from '@module/actions'export default { components: {}, setup() { return { data: winCfg.window.data, } }}</script>

视频预览同样采用新窗口的模式。给data传入视频缩略图及链接。

const handleVideoPlayed = (item) => { createWin({ title: '视频预览', route: '/video', data: { imgsrc: item.imgsrc, videosrc: item.videosrc, }, width: 420, height: 600, })}在video.vue页面获取data参数,使用video显示并播放视频。

<template> <div> <NavBar> <template #title></template> <template #wbtn> <a class="wbtn" title="另存为"><i class="iconfont icon-download"></i></a> </template> </NavBar> <!-- 内容区 --> <div class="ntMain__cont flex1 flexbox flex-col"> <div class="vChat__lkview"> <video class="vplayer" ref="playerRef" :src="data.videosrc" :poster="data.imgsrc" autoplay preload="auto" controls x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline style="height:100%;width:100%;object-fit:contain;outline:none;" /> </div> </div> </div></template><script>import { onMounted, ref } from 'vue'import { winCfg } from '@module/actions'export default { components: {}, setup() { const playerRef = ref(null) onMounted(() => { playerRef.value.play() }) return { playerRef, data: winCfg.window.data, } }}</script>

截图功能使用nodejs执行execFile方法来调用第三方exe文件来实现。

ipcMain.on('win-capture', () => { let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe')) printScr.on('exit', (code) => { if(code) { console.log(code) } })})行了,今天的分享就到这里。欢迎大家一起交流讨论哈!

本文标签:界面预览

原文链接:https://www.xgfox.com/jsyd/870.html

本文版权:如无特别标注,本站文章均为原创。