整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著vue3.x越來越穩定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發者的再一次熱捧。
Vue3迭代更新頻繁，目前star高達20.2K+。
// 官網地址
https://v3.vuejs.org/Vitejs目前的star達到15.7K+。
// 官網地址
https://vitejs.dev/vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術架構的仿微信PC端界面聊天實例。
以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。
大家看到的所有彈窗功能，均是自己開發的vue3.0自定義彈窗V3Layer組件。
前段時間有過一篇詳細的分享，這里就不作介紹了。感興趣的話可以去看看。
vue3.0系列：Vue3自定義PC端彈窗組件V3Layer
為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現。
v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。
大家感興趣的話，可以去看看這篇分享。
Vue3.0系列：vue3定制美化滾動條組件v3scroll
/**
* Vue3.0項目配置
*/
const path = require('path')
module.exports = {
// 基本路徑
// publicPath: '/',
// 輸出文件目錄
// outputDir: 'dist',
// assetsDir: '',
// 環境配置
devServer: {
// host: 'localhost',
// port: 8080,
// 是否開啟https
https: false,
// 編譯完是否打開網頁
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'))
}
}// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'
// 引入vue3滾動條組件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)
// 注冊公共組件
app.component('WinBar', WinBar)
app.component('SideBar', SideBar)
app.component('Middle', Middle)
app.provide('utils', Utils)
}
export default Plugins項目中主面板毛玻璃效果(虛化背景)
<!-- //虛化背景（毛玻璃） -->
<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.0中使用全局路由鉤子攔截登錄狀態。
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判斷當前路由地址是否需要登錄權限
if(to.meta.requireAuth) {
if(token) {
next()
}else {
// 未登錄授權
V3Layer({
content: '還未登錄授權！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
onEnd: () => {
next({ path: '/login' })
}
})
}
}else {
next()
}
})如上圖：聊天編輯框部分支持文字+emoj表情、在光標處插入表情、多行文本內容。
編輯器抽離了一個公共的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>另外還支持粘貼截圖發送，通過監聽paste事件，判斷是否是圖片類型，從而發送截圖。
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)
}
}
}
})還支持拖拽圖片至聊天區域進行發送。
<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: '暫時支持拖拽一張圖片', 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開發仿微信/QQ聊天實戰項目就分享到這里。
基于vue3.0+vant3移動端聊天實戰|vue3聊天模板實例
天教大家用Axure做一個聊天對話界面。該原型使用簡單，只需要填寫中繼器表格即可直接使用。有疑問或者喜歡該原型的小伙伴們可以在評論處給我留言哦。
其中效果包括：
原型演示地址：https://muf9ia.axshare.com
制作完成后，只需要填寫一個“內容中繼器”既可以完成此效果，非常方便。中繼器內容包括頭像，名稱、日期，對話內容。
列表中繼器材料：頭像圖片、名稱文本、最后一條聊天記錄文本、時間，提示紅點。
如下所示：
對話記錄中繼器材料：我的頭像和對話框，對方的頭像（圖片文件即可，交互是會重新設置）和對話框。如下所示
no：序號列，我們按順序1、2、3、4、5排列下去即可。中繼器每項加載時，按no升序排列。然后鼠標單擊列表中繼器里的內容時，設置其他當前行的序號為1，其他行的序號在原來的序號+1，這樣就可以點擊之后，讓他排到最前了、
picture：圖片，這里導入每個人的圖片。中繼器加載時，設置頭像圖片=picture
name：名稱，這里寫入每個人的名稱，中繼器加載時，設置名稱文本=name
time：時間，這里輸入最后對話時間，中繼器加載時，設置時間=tmie
number：這個是未查看的新信息，中繼器加載時，如果number=0隱藏提示紅點，否則設置紅點文本=number
textme1-10：這個是記錄我方對話記錄，后續會用到。這里需要做一個判斷，如果這條是最后一條，則設置最后一條聊天記錄等于此文本
text1-10：這個是對方的對話記錄，后續用到。這里需要做一個判斷，如果這條是最后一條，則設置最后一條聊天記錄等于此文本
這個很簡單，只需要兩行，而且什么都不用填，交互的上后，列表中繼器會把內容傳過來。
who：指代我方還是對方，如果who=me，指代我方，隱藏對方頭像和對話框，如果不是who不等于me就是對方，隱藏我方頭像和對話框。
content：對話內容，設置我方和對方的文本框內容=content即可，因為另一個隱藏了，所以為了方便快捷，直接設置兩個都是，就可以不用分情況。然后這里要做一個自適應才美觀，首先用length函數計算出content的字符長度，再按照不同長度的字符設置文本框的尺寸即可。
這個交互有點復雜，簡單的說一下思路，其實就是把列表中繼器里的text1-10和textme1-10，添加到對話記錄的中繼器里面。
實現方式是鼠標單擊列表某一行時，依次在對話記錄中繼器內添加行即可。text1-10，who為空，content=text；textme，who=me，content=textme
完成后隱藏列表中繼器，顯示對話記錄中繼器即可。
這里首先要做一個輸入框和按鈕，樣式如下：
點擊發送按鈕的時候，對話記錄中繼器新增一行，who=me，content=輸入框的內容。然后清空文本框文字即可。
最后還有最重要的一步，也是最難的一步。因為這個中繼器不會保存，所以我們返回到列表就沒有了，這時要把這里新增的信息更新到列表中繼器里面。因為這里都是我方發出去的，所以只需要更新行textme1-10的內容就可以了。這里需要做一個判斷，就是textme和text最后一組對話時哪組，然后更新內容到后面一組即可完成。
今天的這里就結束了，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦，我們下期見。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
ello,World.
土土今天給大家分享一個用jquery制作的簡易聊天界面。
1.首先寫一個html文件來展示前端頁面。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ簡易聊天框</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執行的效果全都放在這里-->
<div class="img"><img src="images/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn">
<span id="close">關閉(C)</span>
<span id="send">發送(S)</span>
</div>
</section>
</body>
</html>2.效果
1.js文件來寫jquery語句
$(document).ready(function(){
var headImg=new Array("head01.jpg","head02.jpg"); //定義圖片數組
var uName=new Array("L","G"); //定義名字數組
var iNum=1;
$("#send").click(function(){
var $Li=$("<li></li>");
if(iNum==0){//INum為0時，則加1換成另外一張，實現輪流出現的效果
iNum=iNum+1;
}else{
iNum=iNum-1;
}
var p=$("<p></p>");
$(p).append("<div style='font-size:10px;'>"+$(".chatText").val()+"</div>"+"<br>");//獲取輸入內容
if($(".chatText").val()==""){//判斷輸入內容是否為空
alert("請輸入內容")
}else{
var $touImg=$("<div><img src=images/"+headImg[iNum]+"></div>"); //輪流獲得數組照片
$name=uName[iNum];//輪流獲取數組的名字
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);//將內容追加在ul之后
$(".chatText").val("");//獲取完內容之后清空輸入框
}
});
$("#close").click(function(){
var x;
var r=confirm("確定關閉頁面嗎？");//詢問是否確定關閉頁面
if(r==true)//點擊確定則關閉頁面
close();
});
});2.效果圖
css文件來寫樣式
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;/**定義獲取到輸出內容的框的圓弧度**/
}建立一個images文件夾存放圖
head01.jpg
head02.jpg
icon.jpg
ok啦，這樣就完成啦！效果視頻來一波。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
白白啦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
