Vue.js 위 챗 창 을 모방 하여 구성 요소 기능 을 보 여 줍 니 다.

원본 코드:https://github.com/doterlin/vue-wxChat
프레젠테이션 주소:https://doterlin.github.io/vue-wxChat/

운행 하 다.

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build

소개 하 다.

텍스트 와 그림 의 전 시 를 지원 합 니 다.

은 스크롤 로 딩 데 이 터 를 지원 합 니 다.그 중에서 스크롤 로 딩 은 다른 구성 요소 인 scrollLoader.vue(Vue.js 상하 스크롤 로 딩 구성 요소)에 의존 합 니 다.

QQ 표정 을 지원 합 니 다.표정 을 사용 할 수 있 도록 전역 등록 명령 v-emotion 을 사용 하 십시오.저 는 main.js 에서 이 루어 졌 습 니 다.코드 는 다음 과 같 습 니 다:

function toEmotion(text, isNoGif){
 var list = ['  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', ' ', ' ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '   ', '  ', '   ', '   ', '  ', '  ', '  ', '   ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', ' ', ' ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', 'NO', 'OK', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '   ', '   ', '  ', '  ', '  ', '  ', '  ', ' ', '  ', ' '];
 if (!text) {
  return text;
 }
 text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word){
  var newWord = word.replace(/\[|\]/gi,'');
  var index = list.indexOf(newWord);
  var backgroundPositionX = -index * 24
  var imgHTML = '';
  if(index<0){
   return word;
  }
  if (isNoGif) {
   if(index>104){
    return word;
   }
   imgHTML = `<i class="static-emotion" style="background:url(https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/default218877.gif) ${backgroundPositionX}px 0;"></i>`
  } else {
   var path = index>104 ? '/img' : 'https://res.wx.qq.com/mpres/htmledition/images/icon';
   imgHTML = `![](${path}/emotion/${index}.gif)`
  }
  return imgHTML;
 });
 return text;
}
Vue.directive('emotion', {
 bind: function (el, binding) {
  el.innerHTML = toEmotion(binding.value)
 }
});

어떻게 사용 합 니까?
매개 변 수 는 이미 구성 요소 에 설명 을 했 고 App.vue 에서 시범 을 보 였 습 니 다.
인자 와 설명:
위 챗 채 팅 시각 화 구성 요소
scrollLoader 구성 요소 에 의존 하고 명령 v-emotion 에 의존 합 니 다.
인자:
width 구성 요소 너비,기본 값 450
wrapBg 외부 부모 요소 배경 색,기본 값\#efefef
max Height 전시 창 최고 높이,기본 값 900
contactAvatarUrl 친구 프로필 사진 url
위 챗 주인 프로필 사진 url
위 챗 주인 닉네임
getUpperData(필수)위로 굴 러 갈 때 데 이 터 를 불 러 오 는 방법,반환 값 은 Promise 대상,resolve 의 구조 와 data 입 니 다.
getUnderData(필수)아래로 굴 러 갈 때 데 이 터 를 불 러 오 는 방법,반환 값 이 같 습 니 다.
data(필수)초기 화 데 이 터 를 입력 합 니 다.구 조 는 다음 과 같 습 니 다.

[{
 direction: 2, // 2           ，1     
 id: 1, //         
 type: 1, //1   ，2   
 content: '  !![  ]', // type 1        ， type2 2          ；          
 ctime: new Date().toLocaleString() //           
},
{
 direction: 1,
 id: 2,
 type: 1,
 content: '   。[  ]',
 ctime: new Date().toLocaleString()
}]

완전한 사용 실례
효과:https://doterlin.github.io/vue-wxChat/
코드:

//   ， wxChat      
<template>
<wxChat 
 :data="wxChatData"
 :showShade="false"
 contactNickname="  "
 :getUpperData="getUpperData"
 :getUnderData="getUnderData"
 :ownerAvatarUrl="ownerAvatarUrl"
 :contactAvatarUrl="contactAvatarUrl"
 :width="420">
</wxChat>
</template>
<script>
import wxChat from './components/wxChat.vue'
export default {
 name: 'app',
 data () {
 return {
  upperTimes: 0,
  underTimes: 0,
  upperId: 0,
  underId: 6,
  ownerAvatarUrl: './src/assets/avatar1.png',
  contactAvatarUrl: './src/assets/avatar2.png',
  wxChatData: [{
  direction: 2,
  id: 1,
  type: 1,
  content: '  !![  ]',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 2,
  type: 1,
  content: '   。[  ]',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 3,
  type: 1,
  content: '        ：',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 4,
  type: 2,
  content: './src/assets/wyz.jpg',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 5,
  type: 1,
  content: '     。[  ]',
  ctime: new Date().toLocaleString()
  }]
 }
 },
 components:{wxChat},
 methods:{
 //        
 getUpperData(){
  var me = this;
  //            
  //           :
  // return axios.get('xxx').then(function(result){
  //  return result; //result         resolve     
  // })
  return new Promise(function(resolve){
  setTimeout(function(){
   //      
   if(me.upperTimes>3){
   return resolve([]);
   }
   //    
   resolve([{
    direction: 2,
    id: me.upperId-1,
    type: 1,
    content: '        ' + me.upperTimes +'  ！',
    ctime: new Date().toLocaleString()
   },
   {
    direction: 1,
    id: me.upperId-2,
    type: 1,
    content: '        ' + me.upperTimes +'  ！',
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.upperId= me.upperId+2;
  me.upperTimes++;
  })
 },
 getUnderData(){
  var me = this;
  //   getUpperData()
  return new Promise(function(resolve){
  setTimeout(function(){
   //      
   if(me.underTimes>3){
   return resolve([]);
   }
   //    
   resolve(
   [{
    direction: 1,
    id: me.underId+1,
    type: 1,
    content: '        ' + me.underTimes +'  ！',
    ctime: new Date().toLocaleString()
   },
   {
    direction: 2,
    id: me.underId+2,
    type: 1,
    content: '        ' + me.underTimes +'  ！',
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.underId = me.underId+2;
  me.underTimes++;
  })
 }
 }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
}
</style>

시작 을 환영 합 니 다:
https://github.com/doterlin/vue-wxChat
총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 Vue.js 가 위 챗 채 팅 창 을 모방 하여 구성 요소 기능 을 보 여 드 리 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!