基于vue3.0聊天实战|vue3.x网页版模仿QQ+微信

举报
Andy Yan 发表于 2021/01/28 22:06:54 2021/01/28
【摘要】 前言伴随着vue3的越来越稳定,2021年将会再掀起一波vue.js开发热潮。加上尤雨溪开发的web构建工具vite2.x的推出,热启动速度秒杀webpack,前景也势不可挡!对vue3开发还在观望的同学,也要开始学习起来了。项目介绍今天给大家分享的是vue3.0最新实战项目vue3-webchat网页版聊天。运用了vue3全家桶技术和element-plus组件库实现项目构建。基本实现了图...

前言

伴随着vue3的越来越稳定,2021年将会再掀起一波vue.js开发热潮。加上尤雨溪开发的web构建工具vite2.x的推出,热启动速度秒杀webpack,前景也势不可挡!对vue3开发还在观望的同学,也要开始学习起来了。

项目介绍

今天给大家分享的是vue3.0最新实战项目vue3-webchat网页版聊天。运用了vue3全家桶技术和element-plus组件库实现项目构建。基本实现了图文表情、图片/视频预览、网址链接查看、拖拽/粘贴截图发送图片、红包及朋友圈等功能。

038360截图20210117220109988.png

  • 微信皮肤界面模板

p2.gif

  • QQ皮肤界面模板

p2-2.gif

技术栈

  • 编码器:vscode
  • 框架技术:vue.js 3.0
  • 状态管理:vuex4.x
  • 路由管理:vue-router@4
  • 组件库:element-plus (饿了么pc端vue3组件库)
  • 弹窗组件:v3layer(基于vue3自定义弹窗组件)
  • 虚拟滚动条:v3scroll(基于vue3自定义滚动条组件)
  • 字体图标:阿里iconfont图标

360截图20210118103744407.png

003360截图20210117104011335.png

005360截图20210117104208984.png

007360截图20210117104432183.png

008360截图20210117104456093.png

009360截图20210117104527268.png

010360截图20210117104815309.png

015360截图20210117105354501.png

019360截图20210117105915222.png

022360截图20210117110527076.png

026360截图20210117111039022.png

029360截图20210117111338190.png

035360截图20210117111928494.png

037360截图20210117112029461.png

vue3.x自定义全局弹窗组件

项目中使用到的弹窗是基于vue3.0开发的自定义弹窗组件v3layer。

一款功能及效果有些类似pc版的弹层layer.js插件。支持超过30+参数自定义配置。

p1.gif

由于之前有过一篇具体讲解实现方式,如果感兴趣可以去看一看。

vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

vue3.x自定义pc端滚动条组件

为了这个项目整体效果保持和谐一致,所有页面的滚动条也是基于vue3.0自定义组件来实现。

p1.gif

v3scroll 非常简单的一款基于vue3开发的pc端自定义系统虚拟滚动条组件。拥有极简的调用方式和多参数配置。

vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

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.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')

聊天背景虚化

项目中聊天背景有种毛玻璃效果,采用svg filter来实现功能。

<!-- //毛玻璃效果 -->
<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>

表单验证及60s倒计时

vue3.x使用最新的组合式语法来实现表单的验证功能及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>

图片+视频预览

图片预览功能使用的是饿了么vue3组件库的image组件来实现。

未标题8.png

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

视频预览功能则是使用v3layer弹窗来实现效果。

未标题7.png

<!-- 视频播放器 -->
<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>

另外网址链接查看和红包弹窗也均是使用v3layer组件来实现功能。

ok,以上就是使用vue3+element-plus技术开发网页端聊天实例的相关分享,希望各位能喜欢哈~~

后续还会分享一些vue3实战案例,希望大家多多支持!

20160819150003341be.gif

文章来源: segmentfault.com,作者:xiaoyan2017,版权归原作者所有,如需转载,请联系作者。

原文链接:https://segmentfault.com/a/1190000039067243

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。