vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用,实现了发送消息+表情(动图gif)、图片/视频预览、右键长按菜单、红包/朋友圈、截图发送等功能。
技术栈
vue版本:Vue2.5.6
状态管理:Vuex
页面路由:Vue-router
iconfont图标:阿里巴巴字体图标库
自定义滚动条:vue-gemini-scrollbar
UI组件库:element-ui(饿了么UI库)
高德地图:vue-amap
图片预览:vue-photo-preview
饿了么UI组件库
Element | 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
https:
https:
安装
install
使用
import Vue
vue引入公共/全局组件
/* 引入公共及全局组件配置 | Q:282310962*/// 引入侧边栏及联系人import winBar from './components/winbar'import sideBar from './components/sidebar'import recordList from './components/recordList'import contactList from './components/contact'// 引入jqueryimport $ from 'jquery'// 引入wcPop弹窗插件import wcPop from './assets/js/wcPop/wcPop'import './assets/js/wcPop/skin/wcPop.css'// 引入饿了么pc端UI库import elementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'// 引入图片预览插件import photoPreview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'// 引入自定义滚动条插件import geminiScrollbar from 'vue-gemini-scrollbar'// 引入加载更多插件import infiniteLoading from 'vue-infinite-scroll'// 引入高德地图import vueAMap from 'vue-amap'const install = Vue => { // 注册组件 Vue.component('win-bar', winBar) Vue.component('side-bar', sideBar) Vue.component('record-list', recordList) Vue.component('contact-list', contactList) // 应用实例 Vue.use(elementUI) Vue.use(photoPreview, { loop: false, fullscreenEl: true, //是否全屏 arrowEl: true, //左右按钮 }); Vue.use(geminiScrollbar) Vue.use(infiniteLoading) Vue.use(vueAMap) vueAMap.initAMapApiLoader({ key: "e1dedc6bdd765d46693986ff7ff969f4", plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图插件 比例尺 "AMap.OverView", //地图鹰眼插件 "AMap.ToolBar", //地图工具条 "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制 "AMap.PolyEditor", //编辑 折线多,边形 "AMap.CircleEditor", //圆形编辑器插件 "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置 ], uiVersion: "1.0" });}export default install
效果图
vue主页面配置
/* * 主页面js */import Vue from 'vue'import App from './App.vue'import router from './router'import store from './vuex'// 引入公共Jsimport './common.js'// 引入全局组件// 方式一:// Vue.component('headerBar', resolve => require(['./common/header'], resolve))// Vue.component('tab-bar', resolve => require(['./common/footer'], resolve))// 方式二:import _g_component from './components.js'Vue.use(_g_component)new Vue({ el: '#app', router, store, render: h => h(App)})
App.vue页面模板
/* 引入公共样式 */@import './assets/fonts/iconfont.css';@import './assets/css/reset.css';@import './assets/css/layout.css';
vue路由配置
/* * 页面地址路由js */ import Vue from 'vue'import Router from 'vue-router'import store from '../vuex'// 通过改写router.go方法,当new Router 实例就包含back方法Router.prototype.back = function(){ window.history.go(-1)}Vue.use(Router)const router = new Router({ routes: [ // 登录、注册 { path: '/login', component: resolve => require(['../views/auth/login'], resolve), meta: { hideSideBar: true }, }, { path: '/register', component: resolve => require(['../views/auth/register'], resolve), meta: { hideSideBar: true }, }, //... // 聊天页面 { path: '/chat', component: resolve => require(['../views/chat/group-chat'], resolve), meta: { requireAuth: true } }, //... ]});export default router
vue中router.beforeEach和next实现路由拦截验证
// 注册全局钩子(拦截登录状态)router.beforeEach((to, from, next) => { const token = store.state.token // 判断该路由地址是否需要登录权限 if(to.meta.requireAuth){ // 判断token是否存在 if(token){ next() }else{ next() // 未登录授权 wcPop({ content: '还未登录授权!', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2, end: function(){ next({ path: '/login' }) } }); } }else{ next() }})
END
最后附上两个最近实战项目
flutter+dart仿微信App界面聊天实例
uniapp+nvue仿抖音效果|小视频直播室
转载是一种动力 分享是一种美德
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例相关推荐
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- |flutter仿微信界面聊天室
1.项目介绍 Flutter 是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如 阿里闲鱼 , 美团 , 腾讯 等大公司都有投入相关案例生产使用. flutter_ch ...
- flutter offset_Flutter 仿微信界面聊天室 | 基于 (Flutter+Dart) 聊天实例
1.项目介绍 Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼,美团,腾讯等大公司都在投入相关案例生产使用.flutter_chatroom项目 ...
- flutter图片聊天泡泡_基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室
1.项目介绍 Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼,美团,腾讯等大公司都有投入相关案例生产使用. flutter_chatroom项 ...
- html仿微信语音功能案例,html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图...
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...
- vue2.0聊天室vue-chatRoom|仿微信界面vue+vuex+vueRouter
Vue2.0+Vuex+VueRouter仿微信界面聊天室|仿微信聊天窗口|仿微信群聊 基于vue2.0+vuex+webpack2.0+es6+wcPop等技术开发的仿微信聊天室vue-weChat ...
- flutter图片聊天泡泡_flutter即时聊天IM仿微信|flutter聊天界面
鉴于Flutter最近比较火,今天给大家分享的是基于flutter+dart全家桶技术开发的仿微信界面聊天FlutterChat项目实例.实现了消息+表情.图片预览.红包.长按菜单.视频/仿朋友圈等功 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
最新文章
- 多伦多到温莎_我想要freeCodeCamp Toronto的Twitter来发布报价,所以我做了一个免费的bot来做到这一点。...
- 在树莓派上安装AdGuardHome当DNS服务器,来屏蔽广告和追踪的DNS请求
- 美工程序员—每个创业公司都在寻找的传奇人物
- 手把手教你:如何让Windows恋上Linux bash
- 非静态方法可以访问Java中的静态变量/方法吗?
- 携号转网全面启动后,新诈骗套路也跟上了!一招教你识别!
- iis php5.3 mysql_IIS7.5+PHP5.3+MYSQL5.5
- C#winform程序窗口全屏是否遮盖任务栏问题
- RocketMQ如何保证消息的可靠性?
- 随机过程(基本概念、平稳随机过程)
- STM32HAL库函数
- 鸿蒙双系统怎么切换,苹果 Mac双系统如何切换?用Option键切换双系统的步骤分享...
- TFT-LCD电路设计之时序控制电路(TCON)
- Win11下蓝牙鼠标停止4秒后启动卡顿
- 微信美团服务器开小差,“美团无法使用微信支付”耽误大家干饭,客服:异常已经解决...
- 电磁兼容滤波知识大全
- sift算法_论文和专利笔记:翻拍检测算法
- 矩阵三角分解法(LU分解)
- aliexpress 速卖通主图、SKU、属性、详情Python 测试爬取
- php是什么电荷,分子中电荷变化种种 - 量子化学 - 小木虫 - 学术 科研 互动社区...
热门文章
- 移植tslib后,运行报错 Couldnt load module linear
- 基于QT实现的简单版控制台植物大战僵尸
- 中国反垄断第三枪,枪枪致命!涉及阿里、京东、百度、滴滴等被国家顶格处罚!...
- 13、【易混淆概念集】-第七章 质量成本 项目预算 成本基准 应急储备 VS 管理储备 挣值分析
- SourceTree使用方法总结
- 精尽Spring MVC源码分析 - 一个请求的旅行过程
- 合泰单片机BH66F2652开发笔记链接
- 可以用于毕设参考,请勿过度借鉴
- 鱼眼镜头拍摄全景图的教程方法
- 服务器系统迁移工具,Win2008 R2迁移实战之迁移工具使用