vue2.x+vuex網(wǎng)頁端聊天|vue仿微信pc聊天實例
一、項目簡述
基于Vue2.x+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技術(shù)開發(fā)的仿微信網(wǎng)頁web端聊天室，實現(xiàn)了發(fā)送消息、表情(動圖)，圖片、視頻預(yù)覽，右鍵菜單、截屏、截圖可直接粘貼至文本框進(jìn)行發(fā)送。
二、技術(shù)框架
前端框架：Vue2.5.6
狀態(tài)管理：Vuex
頁面路由：Vue-router
iconfont圖標(biāo)：阿里巴巴字體圖標(biāo)庫
彈窗組件：element-ui（餓了么前端UI庫）
環(huán)境配置：node.js + cnpm + webpack
高德地圖：vue-amap
圖片預(yù)覽：vue-photo-preview
vue主頁面模板 (聊天面板分為側(cè)邊欄+內(nèi)容區(qū)+右上角按鈕)
<template>
? <div id="app">
? ? <div class="vChat-wrapper flexbox flex-alignc">
? ? ? <div class="vChat-panel" style="background-image: url(src/assets/img/placeholder/vchat__panel-bg01.jpg);">
? ? ? ? <div class="vChat-inner flexbox">
? ? ? ? ? <!-- //頂部按鈕(最大、最小、關(guān)閉) -->
? ? ? ? ? <win-bar></win-bar>
? ? ? ? ? <!-- //側(cè)邊欄 -->
? ? ? ? ? <side-bar></side-bar>
? ? ? ? ? <keep-alive>
? ? ? ? ? ? <router-view class="flex1 flexbox"></router-view>
? ? ? ? ? </keep-alive>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'app',
? data () {
? ? return {}
? },
? methods: {},
}
</script>
<style>
/* 引入公共樣式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
</style>
vue注冊組件/引入全局組件|樣式
/**
?*? @desc 引入公共及全局組件配置? ?Q：282310962
?*/?
// 引入側(cè)邊欄及聯(lián)系人
import winBar from './components/winbar'
import sideBar from './components/sidebar'
import recordList from './components/recordList'
import contactList from './components/contact'
// 引入jquery
import $ 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'
// 引入圖片預(yù)覽插件
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)
? ? // 應(yīng)用實例
? ? 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", //類別切換控件，實現(xiàn)默認(rèn)圖層與衛(wèi)星圖、實施交通圖層之間切換的控制
? ? ? ? ? ? "AMap.PolyEditor", //編輯 折線多，邊形
? ? ? ? ? ? "AMap.CircleEditor", //圓形編輯器插件
? ? ? ? ? ? "AMap.Geolocation" //定位控件，用來獲取和展示用戶主機(jī)所在的經(jīng)緯度位置
? ? ? ? ],
? ? ? ? uiVersion: "1.0"
? ? });
}
export default install
vue實現(xiàn)獲取截圖工具的圖片 (通過監(jiān)聽編輯器paste事件獲取圖片)
document.getElementById('J__wcEditor').addEventListener('paste',function(e){
? ? var cbd = e.clipboardData;
? ? var ua = window.navigator.userAgent;
? ? // 沒有數(shù)據(jù)
? ? if (!(e.clipboardData && e.clipboardData.items)) {
? ? ? ? return;
? ? }
? ? // Mac平臺下Chrome49版本以下 復(fù)制Finder中的文件的Bug Hack掉
? ? 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;
? ? ? ? ? ? ? ? //邏輯部分...
? ? ? ? ? ? }
? ? ? ? }
? ? }
});
表情/動圖swiper切換處理模塊
var emotionSwiper;
function setEmotionSwiper(tmpl) {
? ? var _tmpl = tmpl ? tmpl : $("#J__emotionFootTab ul li.cur").attr("tmpl");
? ? $("#J__swiperEmotion .swiper-container").attr("id", _tmpl);
? ? $("#J__swiperEmotion .swiper-wrapper").html($("." + _tmpl).html());
? ? emotionSwiper = new Swiper('#' + _tmpl, {
? ? ? ? // loop: true,
? ? ? ? // autoplay: true,
? ? ? ? // 分頁器
? ? ? ? pagination: {
? ? ? ? ? ? el: '.pagination-emotion', clickable: true,
? ? ? ? },
? ? });
}
$("body").on("click", "#J__emotionFootTab ul li.swiperTmpl", function () {
? ? // 先銷毀swiper
? ? emotionSwiper && emotionSwiper.destroy(true, true);
? ? var _tmpl = $(this).attr("tmpl");
? ? $(this).addClass("cur").siblings().removeClass("cur");
? ? setEmotionSwiper(_tmpl);
});
這次的內(nèi)容就分享到這里，喜歡的話可以點個贊，想要了解更多前端開發(fā)實例也可以關(guān)注下面公眾號。
