Vue3.0桌面端聊天｜vue3仿微信/QQ網(wǎng)頁(yè)版聊天實(shí)例

著vue3.x越來(lái)越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫(kù)，在2021年必然受到開(kāi)發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達(dá)20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達(dá)到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項(xiàng)目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實(shí)例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

使用技術(shù)：vue3.0+vuex4+vue-router4
UI組件庫(kù)：element-plus（餓了么Vue3 pc端組件庫(kù)）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動(dòng)條組件：V3Scroll（基于Vue3自定義虛擬美化滾動(dòng)條）
iconfont圖標(biāo)：阿里字體圖標(biāo)庫(kù)

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開(kāi)發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時(shí)間有過(guò)一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話(huà)可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動(dòng)條組件

為了使得項(xiàng)目效果一致，所有頁(yè)面的滾動(dòng)條均是采用vue3.0自定義組件實(shí)現(xiàn)。

v3scroll 一款輕量級(jí)的pc桌面端模擬滾動(dòng)條組件。支持是否原生滾動(dòng)條、自動(dòng)隱藏、滾動(dòng)條大小/層疊/顏色等功能。

大家感興趣的話(huà)，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動(dòng)條組件v3scroll

vue.config.js項(xiàng)目配置

/**
 * Vue3.0項(xiàng)目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開(kāi)啟https
        https: false,
        // 編譯完是否打開(kāi)網(wǎng)頁(yè)
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊(cè)公共組件

// 引入餓了么ElementPlus組件庫(kù)
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動(dòng)條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊(cè)公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項(xiàng)目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 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攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個(gè)公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發(fā)送，通過(guò)監(jiān)聽(tīng)paste事件，判斷是否是圖片類(lèi)型，從而發(fā)送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區(qū)域進(jìn)行發(fā)送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時(shí)支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開(kāi)發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

基于vue3.0+vant3移動(dòng)端聊天實(shí)戰(zhàn)|vue3聊天模板實(shí)例

ello,World.

土土今天給大家分享一個(gè)用jquery制作的簡(jiǎn)易聊天界面。

html

1.首先寫(xiě)一個(gè)html文件來(lái)展示前端頁(yè)面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ簡(jiǎn)易聊天框</title>
     <link rel="stylesheet" href="css/chat.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/chat.js"></script>
</head>
<body>  
<section id="chat">
    <div class="chatBody"><ul></ul></div><!--chat.js執(zhí)行的效果全都放在這里-->
    <div class="img"><img src="images/icon.jpg"></div>
     <textarea class="chatText"></textarea>
    <div class="btn">
      <span id="close">關(guān)閉(C)</span>
      <span id="send">發(fā)送(S)</span>
    </div>
</section>    
</body>
</html>

2.效果

chat.js

1.js文件來(lái)寫(xiě)jquery語(yǔ)句

$(document).ready(function(){
  var headImg=new Array("head01.jpg","head02.jpg"); //定義圖片數(shù)組
  var uName=new Array("L","G"); //定義名字?jǐn)?shù)組     
  var iNum=1;                 
  $("#send").click(function(){
       var $Li=$("<li></li>");  
       if(iNum==0){//INum為0時(shí)，則加1換成另外一張，實(shí)現(xiàn)輪流出現(xiàn)的效果
         iNum=iNum+1;
       }else{
         iNum=iNum-1;
       } 
       var p=$("<p></p>");
$(p).append("<div style='font-size:10px;'>"+$(".chatText").val()+"</div>"+"<br>");//獲取輸入內(nèi)容
       if($(".chatText").val()==""){//判斷輸入內(nèi)容是否為空
         alert("請(qǐng)輸入內(nèi)容")
       }else{
       var $touImg=$("<div><img src=images/"+headImg[iNum]+"></div>"); //輪流獲得數(shù)組照片 
       $name=uName[iNum];//輪流獲取數(shù)組的名字
       var $qqname=$("<h1 style='color:#0000FF;'>"+$name+"</h1>");//給名字添加樣式
        $($Li).append($touImg);//touImg追加在Li之后  
        $($Li).append($qqname);//qqname追加在Li之后   
        $($Li).append(p);//p追加在li之后    
        $(".chatBody ul").append($Li);//將內(nèi)容追加在ul之后
   
        $(".chatText").val("");//獲取完內(nèi)容之后清空輸入框
       }
 });
  $("#close").click(function(){
    var x;
    var r=confirm("確定關(guān)閉頁(yè)面嗎？");//詢(xún)問(wèn)是否確定關(guān)閉頁(yè)面
    if(r==true)//點(diǎn)擊確定則關(guān)閉頁(yè)面
    close();
});
});

2.效果圖

chat.css

css文件來(lái)寫(xiě)樣式

color: #ffffff; 
border-radius: 5px; 
background-color: #069dd5; 
font-size: 12px; 
margin-right: 3px; 
cursor:pointer;}
.chatBody p{
float: left; 
width:370px; 
font-size: 12px; 
color: #0000ff;}
ul,li {
  list-style: none;
}
.chatBody ul li {
  padding: 10px 0;
  /*border-bottom: 1px #999999 dashed;*/
  overflow: hidden;
}

.chatBody ul li div {
  float: left;
  border-bottom-style: none;
    margin-right: 5px;
}

}
.chatBody ul li div img {
  width: 40px;
}

.chatBody ul li h1 {
  font-size: 10px;
  line-height: 20px;

}
.chatBody ul li p {
  color:midnightblue;
  line-height: 25px;
  font-size: 8px;
}
.chatBody ul li p div {
  padding-right: 20px;
  background-color:#EFEFEF;
  width:340px;
  border-radius: 5px;/**定義獲取到輸出內(nèi)容的框的圓弧度**/
}

images

建立一個(gè)images文件夾存放圖

head01.jpg

head02.jpg

icon.jpg

ok啦，這樣就完成啦！效果視頻來(lái)一波。

白白啦！

近一直在搗鼓Next項(xiàng)目，Next.js是一個(gè)基于React.js的服務(wù)端ssr渲染框架，能夠讓你的react頁(yè)面擁有SEO功能。

Next.js的star高達(dá)58.8K+。一款非常受開(kāi)發(fā)者青睞的React SSR框架。

https://www.nextjs.cn/
https://github.com/vercel/next.js

項(xiàng)目簡(jiǎn)介

Next-WebChat 基于next.js+react+redux+antd+rlayer等技術(shù)開(kāi)發(fā)的PC桌面端聊天實(shí)例。實(shí)現(xiàn)了發(fā)現(xiàn)消息/表情gif、圖片/視頻預(yù)覽、彈窗菜單、紅包/朋友圈等功能。

技術(shù)實(shí)現(xiàn)

技術(shù)框架：Next.js+React.js+Redux
UI組件庫(kù)：Antd（螞蟻金服PC桌面端組件庫(kù)）
彈框組件：RLayer
字體圖標(biāo)：阿里iconfont字體圖標(biāo)庫(kù)
動(dòng)態(tài)圖片：next-images（通過(guò)require動(dòng)態(tài)引入本地圖片）

效果預(yù)覽

react自定義彈窗組件

項(xiàng)目中用到的所有彈窗功能均是自己開(kāi)發(fā)的RLayer.js彈出框組件。

前段時(shí)間有分享過(guò)一篇關(guān)于react.js實(shí)現(xiàn)自定義彈窗組件，感興趣的可以去看看。

React.js PC桌面端自定義彈出框組件

react自定義虛擬滾動(dòng)條組件

項(xiàng)目中用到的滾動(dòng)條均是基于react.js構(gòu)建的輕量級(jí)美化滾動(dòng)條組件RScroll。支持原生滾動(dòng)條、是否自動(dòng)隱藏、滾動(dòng)條尺寸/層級(jí)/顏色等功能。

由于之前有過(guò)一篇分享文章，這里就不作過(guò)多的介紹了。

React.js輕量級(jí)虛擬滾動(dòng)條組件

Next.js公共布局

next.js中自定義公共布局模板，在layouts目錄下的index.js頁(yè)面。

function Layout(props) {
    // console.log(props)
    const router = useRouter()

    // 登錄驗(yàn)證攔截
    useEffect(() => {
        // ...
    }, [])

    return (
    <>
        {/* 配置公共頭部信息 */}
        <Head>
            <title>Next.js聊天室</title>
            <link rel="icon" href="/favicon.ico" />
            <meta name="keywords" content="Next.js|React.js|Next.js聊天室|Next.js仿微信|React聊天實(shí)例"></meta>
            <meta name="description" content="Next-WebChat 基于Next.js+React+Redux構(gòu)建的服務(wù)端渲染聊天應(yīng)用程序"></meta>
        </Head>

        <div className="next__container flexbox flex-alignc flex-justifyc">
            <div className={utils.classNames('next__wrapper', props.isWinMaximize&&'maximize')} style={{ backgroundImage: `url(${props.skin})` }}>
                <div className="next__board flexbox">
                    {/* 右上角按鈕 */}
                    <WinBar {...props} />

                    {/* 側(cè)邊欄 */}
                    <Sidebar {...props} />

                    {/* 中間欄 */}
                    <Middle />

                    {/* 主體布局 */}
                    <div className="nt__mainbox flex1 flexbox flex-col">
                        {props.children}
                    </div>
                </div>
            </div>
        </div>
    </>
    )
}

Head組件里配置一些頁(yè)面頭部信息，如：標(biāo)題、關(guān)鍵詞、描述及圖標(biāo)等信息。

Next.js聊天模塊

聊天編輯器區(qū)域單獨(dú)抽離了一個(gè)組件，用來(lái)進(jìn)行聊天輸入處理。

// react實(shí)現(xiàn)contenteditable功能
return (
	<div 
		ref={editorRef}
		className="editor"
		contentEditable="true"
		dangerouslySetInnerHTML={{__html: state.editorText}}
		onClick={handleClicked}
		onInput={handleInput}
		onFocus={handleFocus}
		onBlur={handleBlur}
		style={{userSelect: 'text', WebkitUserSelect: 'text'}}>
	</div>
)

編輯器支持多行文本輸入、光標(biāo)處插入表情、粘貼截圖發(fā)送、輸入鏈接等功能。

如上圖：視頻播放是基于rlayer彈窗實(shí)現(xiàn)。

handlePlayVideo = (item, e) => {
	rlayer({
		content: (
			<div className="flexbox flex-col" style={{height: '100%'}}>
				<div className="ntDrag__head" style={{color:'#696969',padding:'0 60px 0 15px',lineHeight:'42px'}}><i className="iconfont icon-bofang"></i> 視頻預(yù)覽</div>
				<div className="ntMain__cont flex1 flexbox flex-col">
					{/* 視頻video */}
					<video className="vplayer" src={item.videosrc} poster={item.imgsrc} autoPlay preload="auto" controls
						x5-video-player-fullscreen="true"
						webkit-playsinline="true"
						x-webkit-airplay="true"
						playsInline
						x5-playsinline="true"
						style={{height: '100%', width: '100%', objectFit: 'contain', outline: 'none'}}
					/>
				</div>
			</div>
		),
		layerStyle: {background: '#f6f5ef'},
		opacity: .2,
		area: ['550px', '450px'],
		drag: '.ntDrag__head',
		resize: true,
		maximize: true,
	})
}

聊天區(qū)域還支持拖拽發(fā)送圖片功能。

handleDragEnter = (e) => {
	e.stopPropagation()
	e.preventDefault()
}
handleDragOver = (e) => {
	e.stopPropagation()
	e.preventDefault()
}
handleDrop = (e) => {
	e.stopPropagation()
	e.preventDefault()
	console.log(e.dataTransfer)

	this.handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
handleFileList = (filelist) => {
	let files = filelist.files
	if(files.length >= 2) {
		rlayer.message({icon: 'error', content: '暫時(shí)支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
		return false
	}
	for(let i = 0; i < files.length; i++) {
		if(files[i].type != '') {
			this.handleFileAdd(files[i])
		}else {
			rlayer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
		}
	}
}
handleFileAdd = (file) => {
	if(file.type.indexOf('image') == -1) {
		rlayer.message({icon: 'error', content: '目前不支持非圖片拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
	}else {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onload = function() {
			let img = this.result

			console.log(img)
		}
	}
}

大家如果感興趣的話(huà)，可以試一試。

好了，今天就分享到這里。希望對(duì)大家有所幫助哈！

基于Nuxt.js+Vue仿微信App聊天實(shí)例

在線(xiàn)咨詢(xún)

上一篇：快速完成網(wǎng)頁(yè)設(shè)計(jì),10個(gè)頂尖響應(yīng)式HTML5網(wǎng)頁(yè)模板助你一臂之力
下一篇：Dreamweaver cs6 網(wǎng)頁(yè)設(shè)計(jì)教程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商