真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue+web端仿微信網(wǎng)頁版聊天室功能

一、項(xiàng)目介紹

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)原平免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技術(shù)混合架構(gòu)開發(fā)的仿微信web端聊天室——vueWebChat,實(shí)現(xiàn)了發(fā)送消息、表情(動(dòng)圖),圖片、視頻預(yù)覽,右鍵菜單、截屏、截圖可直接粘貼至文本框進(jìn)行發(fā)送。

二、技術(shù)框架

•MVVM框架:Vue2.5.6
•狀態(tài)管理:Vuex
•頁面路由:Vue-router
•iconfont圖標(biāo):阿里巴巴字體圖標(biāo)庫
•自定義滾動(dòng)條:vue-gemini-scrollbar
•彈窗組件:element-ui(餓了么前端UI庫)
•環(huán)境配置:node.js + cnpm + webpack
•高德地圖:vue-amap
•圖片預(yù)覽:vue-photo-preview

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

vue+web端仿微信網(wǎng)頁版聊天室功能

◆ 點(diǎn)擊右上角最大化按鈕,可以進(jìn)行全屏切換

vue+web端仿微信網(wǎng)頁版聊天室功能

◆ 引入公共及全局組件配置components.js

/*
 引入公共及全局組件配置
*/ 
// 引入側(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'
// 引入自定義滾動(dòng)條插件
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)用實(shí)例
 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", //類別切換控件,實(shí)現(xiàn)默認(rèn)圖層與衛(wèi)星圖、實(shí)施交通圖層之間切換的控制
   "AMap.PolyEditor", //編輯 折線多,邊形
   "AMap.CircleEditor", //圓形編輯器插件
   "AMap.Geolocation" //定位控件,用來獲取和展示用戶主機(jī)所在的經(jīng)緯度位置
  ],
  uiVersion: "1.0"
 });
}
export default install

◆ 主頁面模板



◆ vue文本框?qū)崿F(xiàn)截圖粘貼發(fā)送圖片:

// 【截圖粘貼圖片】
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;
    var _tpl = [
     '
  • \
    \

    王梅(Fine)

    \
    \
    \ \
  • ' ].join(""); $("#J__chatMsgList").append(_tpl); setTimeout(() => { $("#J__geminiScrollbar .gm-scroll-view").animate({ scrollTop: $("#J__chatMsgList").height() }, 0); $(".fixGeminiscrollHeight").show(); setTimeout(() => { $(".fixGeminiscrollHeight").hide();}, 300); }, 17); } } } });

    ◆ 表情處理及視頻預(yù)覽:

    // >>> 【表情、動(dòng)圖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);
    });
    // >>> 【視頻預(yù)覽模塊】--------------------------
    $("body").on("click", "#J__chatMsgList li .video", function () {
     var _src = $(this).find("img").attr("videoUrl"), _video;
     var videoIdx = wcPop({
      id: 'wc__previewVideo',
      skin: 'fullscreen',
      // content: '',
      content: '',
      shade: false,
      xclose: true,
      style: 'background: #000;padding-top:48px;',
      anim: 'scaleIn',
      show: function(){
       _video = document.getElementById("J__videoPreview");
       _video.src = _src;
       if (_video.paused) {
        _video.play();
       } else {
        _video.pause();
       }
       // 播放結(jié)束
       _video.addEventListener("ended", function(){
        _video.currentTime = 0;
       });
       // 退出全屏
       _video.addEventListener("x5videoexitfullscreen", function(){
        wcPop.close(videoIdx);
       })
      }
     });
    });

    總結(jié)

    以上所述是小編給大家介紹的vue+web端仿微信網(wǎng)頁版聊天室功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
    如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!


    網(wǎng)站名稱:vue+web端仿微信網(wǎng)頁版聊天室功能
    文章源于:http://weahome.cn/article/ipdcoj.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部