前言
2021让vue3生态越来越好，让更多的开发者参与进来。继上次分享了一个vue3移动端聊天实例，这次再给大家分享一个最新开发的vue3.0 饿了么vue3组件库开发的桌面端实例项目。
vue3-webchat 支持图文表情混排、视频/图片预览、网址查看、粘贴截图/拖拽图片发送及朋友圈等功能。
使用技术
- 编码器：VScode
- MVVM框架：Vue3.0.5
- 状态管理：Vuex4.x
- 页面路由：Vue-Router@4
- 组件库：element-plus (饿了么桌面端vue3组件库)
- 弹窗组件：v3layer（基于vue3自定义弹窗组件）
- 滚动条组件：v3scroll（基于vue3自定义滚动条组件）
- 字体图标：阿里iconfont图标
微信皮肤风格
QQ皮肤风格支持如上两种风格界面。所有页面均是使用vue3最新语法编码。
项目结构
饿了么vue3桌面端组件库
element-plus 饿了么前端团队又一力作vue3组件库，一经推出便受到众多开发者关注。
目前的star高达8K ，非常良心的一款vue3组件库。
// 安装
npm install element-plus --save在main.js中全局引入，同时也支持按需引入。
代码语言：javascript复制import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')主模板布局
项目整体采用侧边栏 中间 右侧内容区三大模块。
代码语言：javascript复制<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自定义组件(美化滚动条 弹窗)
项目中使用到的弹窗及滚动条均是自定义组件来实现。
vue3组件系列：vue3.x自定义全局滚动条组件
vue3组件系列：vue3.x pc端自定义弹窗组件
vue3.0验证表单 60s倒计时
代码语言：javascript复制/**
* @Desc 表单验证/60s倒计时
* @Time andy by 2021-01
* @About Q：282310962 wx：xy190310
*/
<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>模糊毛玻璃效果
项目中的背景采用整体模糊化效果。
代码语言：javascript复制<!-- //虚化背景 -->
<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组件来实现大图预览。
<el-image class="img__pic"
:src="item.imgsrc"
:preview-src-list="[item.imgsrc]"
hide-on-click-modal
/>
视频预览则是使用了v3layer弹窗组件来实现。
<!-- video播放器 -->
<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>
ok，以上就是基于vue3 element-plus开发聊天实例的分享，后续还会分享一些vue3.x实战项目，谢谢支持！
