基于vue3.0聊天实战|vue3.x网页版模仿QQ+微信
前言
伴随着vue3的越来越稳定,2021年将会再掀起一波vue.js开发热潮。加上尤雨溪开发的web构建工具vite2.x的推出,热启动速度秒杀webpack,前景也势不可挡!对vue3开发还在观望的同学,也要开始学习起来了。
项目介绍
今天给大家分享的是vue3.0最新实战项目vue3-webchat网页版聊天。运用了vue3全家桶技术和element-plus组件库实现项目构建。基本实现了图文表情、图片/视频预览、网址链接查看、拖拽/粘贴截图发送图片、红包及朋友圈等功能。
- 微信皮肤界面模板
- QQ皮肤界面模板
技术栈
- 编码器:vscode
- 框架技术:vue.js 3.0
- 状态管理:vuex4.x
- 路由管理:vue-router@4
- 组件库:element-plus (饿了么pc端vue3组件库)
- 弹窗组件:v3layer(基于vue3自定义弹窗组件)
- 虚拟滚动条:v3scroll(基于vue3自定义滚动条组件)
- 字体图标:阿里iconfont图标
vue3.x自定义全局弹窗组件
项目中使用到的弹窗是基于vue3.0开发的自定义弹窗组件v3layer。
一款功能及效果有些类似pc版的弹层layer.js插件。支持超过30+参数自定义配置。
由于之前有过一篇具体讲解实现方式,如果感兴趣可以去看一看。
vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件
vue3.x自定义pc端滚动条组件
为了这个项目整体效果保持和谐一致,所有页面的滚动条也是基于vue3.0自定义组件来实现。
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组件来实现。
<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>
另外网址链接查看和红包弹窗也均是使用v3layer组件来实现功能。
ok,以上就是使用vue3+element-plus技术开发网页端聊天实例的相关分享,希望各位能喜欢哈~~
后续还会分享一些vue3实战案例,希望大家多多支持!
文章来源: segmentfault.com,作者:xiaoyan2017,版权归原作者所有,如需转载,请联系作者。
- 点赞
- 收藏
- 关注作者
评论(0)