乐趣区

关于typescript:基于vue30elementplus实战聊天vue3仿微信界面网页版

jiezi

我的项目简述

Vue3WebChat 基于 vue3 全家桶技术 实现的仿 QQ 和微信界面桌面端聊天实战开发我的项目。实现 发送图文音讯、图片 / 视频预览、链接查看、拖拽发送图片、红包 / 朋友圈 等性能。

使用技术

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













下面的就是 vue3 实现的 QQ 皮肤聊天界面。同样如下也反对微信皮肤。





我的项目目录

目录构造还是比拟清晰，一看就明确的。

vue3.x 自定义滚动条组件

为了让我的项目整体成果保持一致，我的项目中所有页面均是采纳 vue3.0 自定义滚动条来替换原生滚动条。

v3scroll 一款轻量级 vue3 自定义模拟系统滚动条组件。反对监听 DOM 尺寸动静更新滚动条。
https://segmentfault.com/a/11…

vue3.x 自定义对话框组件

为了这个我的项目，特意开发了一款 Vue3 自定义弹窗组件。


v3layer 基于 vue3 构建的 pc 网页版弹窗组件。超过 30+ 参数配置。反对 拖拽、缩放、最大化、全局、自定义置顶层级 等性能。
https://segmentfault.com/a/11…

main.js 引入配置

/**
 * 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')

App.vue 主模板配置

针对 QQ 和微信皮肤写了两种不同款式。

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

vue3 中 form 表单提交验证及 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>

大家看到页面背景有些虚化毛玻璃成果。应用 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>

vue3.x 编辑器实现

我的项目中聊天编辑框仍旧应用的是 div 可编辑 contenteditable 实现。

/**
 * @Desc     vue3 图文混排编辑器
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */
setup(props, { emit}) {const editorRef = ref(null)

    const data = reactive({
        editorText: props.modelValue,
        isChange: true,

        // 记录光标最初地位
        lastCursor: null,
    })

    watch(() => props.modelValue, () => {if(data.isChange) {data.editorText = props.modelValue}
    })

    onMounted(() => {
        // 解决粘贴事件
        editorRef.value.addEventListener('paste', function(e) {// ...})
    })

    const handleInput = () => {emit('update:modelValue', editorRef.value.innerHTML)

        data.lastCursor = getLastCursor()}
    // 删除内容
    const handleDel = () => {
        let range
        let sel = window.getSelection()
        if(data.lastCursor) {sel.removeAllRanges()
            sel.addRange(data.lastCursor)
        }
        range = getLastCursor()
        range.collapse(false)
        document.execCommand('delete')
    }
    // 清空编辑器
    const handleClear = () => {
        editorRef.value.innerHTML = ''
        editorRef.value.focus()}
    
    // 点击编辑器
    const handleClick = () => {emit('clickFn')

        data.lastCursor = getLastCursor()}
    // 获取焦点
    const handleFocus = () => {
        data.isChange = false
        emit('focusFn')

        data.lastCursor = getLastCursor()}
    // 失去焦点
    const handleBlur = () => {
        data.isChange = true
        emit('blurFn')
    }

    // 获取光标最初地位
    const getLastCursor = () => {let sel = window.getSelection()
        if(sel && sel.rangeCount > 0) {return sel.getRangeAt(0)
        }
    }


    // 光标处插入内容 @param html 须要插入的内容
    const insertHtmlAtCursor = (html) => {// ...}

    return {...toRefs(data),
        editorRef,

        handleInput,
        handleDel,
        handleClear,
        handleClick,
        handleFocus,
        handleBlur,
        insertHtmlAtCursor,
    }
}

好了，以上就是 vue3 开发仿 QQ+ 微信网页版聊天实战我的项目。心愿大家能喜爱哈~~

最初送上一个 Nuxt.js 实例我的项目
nuxt.js 聊天室 |Vue+Nuxt.js 仿微信手机端聊天我的项目

退出移动版