着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聊天模板实例
图网专注web前端开发,在做vue开发的时候,难免有时候需要引用外部的JS文件,比如一个3级的地区数据,或者一个方法,或者一个JS类文件等等,下面介绍Vue.js 引入外部js方法,亲测有用。
1、外部文件config.js
第一种写法
//常量的定义
const config = {
baseurl:’http://172.16.114.5:8088/MGT2′
}
//函数的定义
function formatXml(text) {
return text
}
//导出 {常量名、函数名}
export {config,formatXml}
第二种写法
//常量的定义
export const config = {
baseurl:’http://172.16.114.5:8088/MGT2′
}
//函数的定义
export function formatXml(text) {
return text
}
2、引入config.js里面的常量和方法
import {config,formatXml} from ‘../config’//记得带上{}花括号
最近在项目上有个移动端(uni-app)的需求,就是要在移动端APP上的vue页面中通过web-view组件来调用html页面,并且要实现在html页面中可以点击一个元素来调用vue页面中uni的API(扫码接口),同时也可以在vue页面中也可以调用html页面中的js函数并进行传参。
1. HBuilderX版本:2.8.11.20200907
2. V3编译器
引用依赖的文件
在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
注意:这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的,而不是 uni-app 项目中的文件。
监听 web-view 的 message 事件
监听 web-view 组件的 message 事件,然后在事件回调的 event.detail.data 中接收传递过来的消息。
<template>
<view>
<web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
handleMessage(evt) {
console.log('接收到的消息:' + JSON.stringify(evt.detail.data));
}
}
}
</script>
调用的时机
在引入上面的依赖文件后,需要在HTML中监听UniAppJSBridgeReady,事件触发后,
才能安全调用uni的API。
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script>
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if(action === 'navigateTo') {
uni.postMessage({
data: {
action: 'postMessage'
}
});
}
}
});
</script>
上面代码的意思就是在html页面中点击按钮列表中的某个按钮,
触发了uni.postMessage接口,进而调用了vue页面methods中的handleMessage方法,
并将参数data传给了vue页面。
在vue页面中调用html页面的js函数
示例代码:
var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");
其中的htmljsfuc就是要在html页面中定义的js函数。
完整代码示例:
*请认真填写需求信息,我们会在24小时内与您取得联系。