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

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

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

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

链接预览采用新开窗口的模式。并且给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)        }    })})

行了，今天的分享就到这里。欢迎大家一起交流讨论哈！