vue3.0 web版聊天室|vue3+element-plus实战开发

#1

继上一次分享vue3+vant3手机端聊天项目,今天带来的是最新开发的pc端聊天实战项目。

vue3-webchat聊天室 基于vue3+vuex+element-plus+v3scroll+v3layer等技术开发的高仿QQ/微信界面网页版实战案例。


Vue3Webchat 支持 发送图文表情、图片/视频预览、链接查看、红包/朋友圈 等功能。

使用技术

  • 技术框架:vue3.x+vue-router@4+vuex4
  • UI组件库:element-plus (饿了么桌面端vue3组件库)
  • 弹窗组件:v3layer(基于vue3自定义弹窗组件)
  • 美化滚动条:v3scroll(基于vue3自定义滚动条组件)
  • 字体图标:阿里iconfont图标

支持微信+QQ两种皮肤。

vue3自定义弹窗+滚动条组件

所有页面弹窗及滚动条组件均是自定义vue3组件来实现。


vue3自定义组件:vue3.0 pc端对话框组件
vue3自定义组件:vue3.0 全局网页端虚拟滚动条组件

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表单验证

<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>

网址链接预览

聊天编辑框支持检测http/https链接。

// 匹配消息框中的链接
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>

end,基于vue3+vuex开发web版聊天项目就暂时先分享到这里。
后续还是继续为大家分享一些vue3实战案例。:muscle:

nuxt.js+vue+vant仿微信app界面聊天室