vue3+elementPlus仿QQ+微信网页版聊天

项目介绍

vue3.0-webchat 基于vue3.x全家桶技术+element-plus+v3layer+v3scroll建构实现的仿微信/QQ界面实战聊天室项目。支持编辑框粘贴发送图片、拖拽上传图片。

前段时间有分享一个vue3.0手机端仿微信app聊天实战案例。

如上图：分别是QQ和微信两种皮肤的实现效果。

实现技术

• 技术框架：vue3.0.5+vue-router@4+vuex4
• UI组件库：elementPlus (饿了么pc端vue3组件库)
• 弹窗组件：v3layer（基于vue3自定义弹窗组件）
• 滚动条组件：v3scroll（基于vue3自定义虚拟滚动条组件）
• 字体图标：阿里iconfont图标

项目结构

vue3.x美化滚动条组件

之前使用vue2开发过一版自定义滚动条组件，为了项目效果更加统一，就重新开发了一款vue3版自定义美化滚动条v3scroll组件。

vue3.0模拟滚动条组件|vue3自定义虚化滚动条v3scroll

vue3.x自定义全局对话框

v3layer 基于vue3多功能PC桌面端自定义弹窗组件。也是在之前vue2版本演变而来。 支持多达30+种参数，支持拖拽、缩放、最大化、全屏及自定义样式和置顶等功能。

vue3自定义全局对话框|vue3.0仿layer.js弹窗组件v3layer

main.js入口配置

/**
 * Vue3.0入口配置
 */
 
import { createApp } from 'vue'
import App from './App.vue'
 
// 引入vuex和地址路由
import store from './store'
import router from './router'
 
// 引入公共组件
import Plugins from './plugins'
 
/* 引入公共样式 */
import '@assets/fonts/iconfont.css'
import '@assets/css/reset.css'
import '@assets/css/layout.css'
 
const app = createApp(App)
 
app.use(store)
app.use(router)
app.use(Plugins)
 
app.mount('#app')

app.vue模板布局

<div :class="['vui__wrapper', store.state.isWinMaximize&&'maximize']">
  <div class="vui__board flexbox">
    <div class="flex1 flexbox">
      <!-- 右上角按钮 -->
      <WinBar v-if="!route.meta.hideWinBar" />
 
      <!-- 侧边栏 -->
      <SideBar v-if="!route.meta.hideSideBar" class="nt__sidebar flexbox flex-col" />
 
      <!-- 中间栏 -->
      <Middle v-show="!route.meta.hideMiddle" />
 
      <!-- 主内容区 -->
      <router-view class="nt__mainbox flex1 flexbox flex-col"></router-view>
    </div>
  </div>
</div>

vue3表单验证+60s倒计时

vue3.0中实现注册验证表单及60s倒计时控制。

<script>
import { reactive, toRefs, inject, getCurrentInstance } from 'vue'
export default {
    components: {},
    setup() {
        const { ctx } = getCurrentInstance()
        const v3layer = inject('v3layer')
        const utils = inject('utils')
 
        const formObj = reactive({})
        const data = reactive({
            vcodeText: '获取验证码',
            disabled: false,
            time: 0,
        })
 
        const VTips = (content) => {
            v3layer({
                content: content, layerStyle: 'background:#ff5151;color:#fff;', time: 2
            })
        }
 
        const handleSubmit = () => {
            if(!formObj.tel){
                VTips('手机号不能为空！')
            }else if(!utils.checkTel(formObj.tel)){
                VTips('手机号格式不正确！')
            }else if(!formObj.pwd){
                VTips('密码不能为空！')
            }else if(!formObj.vcode){
                VTips('验证码不能为空！')
            }else{
                ctx.$store.commit('SET_TOKEN', utils.setToken());
                ctx.$store.commit('SET_USER', formObj.tel);
 
                // ...
            }
        }
 
        // 60s倒计时
        const handleVcode = () => {
            if(!formObj.tel) {
                VTips('手机号不能为空！')
            }else if(!utils.checkTel(formObj.tel)) {
                VTips('手机号格式不正确！')
            }else {
                data.time = 60
                data.disabled = true
                countDown()
            }
        }
        const countDown = () => {
            if(data.time > 0) {
                data.vcodeText = '获取验证码('+ data.time +')'
                data.time--
                setTimeout(countDown, 1000)
            }else{
                data.vcodeText = '获取验证码'
                data.time = 0
                data.disabled = false
            }
        }
 
        return {
            formObj,
            ...toRefs(data),
            handleSubmit,
            handleVcode
        }
    }
}
</script>

背景虚化毛玻璃效果实现

<!-- //毛玻璃效果 -->
<div class="vui__bgblur">
  <svg width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
  </svg>
  <div class="blur-cover"></div>
</div>

图片预览

这里用到了element-plus组件库中的image组件。

element-plus.gitee.io/#/zh-CN/com…

<el-image class="img__pic" 
    :src="item.imgsrc"
    :preview-src-list="[item.imgsrc]"
    hide-on-click-modal
/>

视频预览

使用了v3layer组件来实现弹窗预览视频。

<!-- 视频播放器 -->
<v3-layer v-model="isShowVideoPlayer"
    title="<i class='iconfont icon-bofang'></i> 视频预览"
    layerStyle="background:#f9f9f9"
    opacity=".2"
    :area="['550px', '450px']"
    xclose
    resize
    :maximize="true"
>
    <video class="vplayer" ref="playerRef" autoplay preload="auto" controls
        :src="videoList.videosrc"
        :poster="videoList.imgsrc"
        x5-video-player-fullscreen="true"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline="true"
        x5-playsinline
    />
</v3-layer>

网址链接预览

// 匹配消息框中的链接
const transferHTML = (html) => {
    let reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g
    return html.replace(reg, "<a href='$1$2'>$1$2</a>")
}

let msg = transferHTML(data.editorText)

点击聊天内容，判断是否点击了链接地址。

const handleMsgClicked = (e) => {
    let target = e.target
    // 链接
    if(target.tagName === 'A') {
        e.preventDefault()
        // console.log('触发点击链接事件！')

        v3layer({
            type: 'iframe',
            title: '<i class="iconfont icon-link"></i> 网址预览',
            content: target.href,
            opacity: .2,
            area: ['860px', '600px'],
            xclose: true,
            resize: true,
            maximize: true
        })
    }
    // 图片
    if (target.tagName === 'IMG' && target.classList.contains('img-view')) {
        // ...
    }
}

发红包弹框

这里是使用v3layer来引入外部组件实现。

import SendRedPacket from './redPacket.vue'

<!-- ……发红包弹窗模板 -->
<v3-layer v-model="isShowSendRedPacketLayer"
    layerStyle="background:#fff8f4"
    opacity=".2"
    :area="['400px', '480px']"
    xclose
    xcolor="#ffdccb"
    drag='.ntDrag__head'
>
    <SendRedPacket />
</v3-layer>

ok，基于_vue3+elementPlus_开发网页端聊天实例就分享到这里。✍

最后贴上一个NuxtJs实例项目

nuxt.js聊天实例|Nuxt+Vue移动端仿微信/朋友圈