vue3.0仿製QQ+微信PC端|vue3+element-plus實戰聊天室|vue3網頁例項

使用vue3全家桶vue3.0.5+vuex4+vue-router@4 + elementPlus+v3scroll+v3layer等技術仿製QQ/微信網頁端介面聊天實戰專案。支援圖文訊息、視訊/圖片預覽、網址連結檢視、拖拽傳送圖片、紅包/朋友圈等功能。

• MVVM 框架：Vue.js 3.0.5
• 狀態管理：Vuex4
• 路由管理：Vue-router@4
• UI 元件庫：elementPlus (餓了麼 pc 端 vue3 元件庫)
• 彈窗元件：v3layer （基於 vue3 自定義彈窗元件）
• 滾動條元件：v3scroll （基於 vue3 自定義滾動條元件）
• 字型圖示：阿里 iconfont 圖示
• 環境配置：node.js + npm/yarn

專案中所有頁面均是採用統一滾動條，目的是保持頁面效果一致。

之前有過一篇分享文章，感興趣的話大家可以去看看。
vue3.x自定義pc端美化滾動條元件

v3layer 基於vue3開發的PC桌面端自定義彈窗元件。 支援多達30+種引數，支援拖拽、縮放、最大化、全屏及自定義樣式和置頂等功能。

vue3.x自定義pc桌面端全域性彈窗元件

<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>

專案中的背景採用整體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>

圖片預覽功能使用的是element-plus元件庫中的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>

專案中點選聊天網址連結會彈窗顯示連結內容。

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')) {
        // ...
    }
}

/**
 * @Desc     vue3.0登錄檔單驗證
 * @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>

Okay，以上就是vue3.x+elementPlus實戰聊天專案的介紹，希望對大家有所幫助哈！✍️?

nuxt.js仿微信App通訊聊天|vue+nuxt聊天|仿微信介面

本作品採用《CC 協議》，轉載必須註明作者和本文連結