继上一次分享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实战案例。