Bagaimana untuk melaksanakan antara muka sembang dalam vuejs-View.js-php.cn

Bagaimana untuk melaksanakan antara muka sembang dalam vuejs

藏色散人

Lepaskan： 2023-01-13 00:45:40

asal

3939 orang telah melayarinya

Cara melaksanakan antara muka sembang dalam vuejs: 1. Pasang dependensi dengan melaksanakan "npm install"; 2. Laksanakan pemuatan menatal melalui "scrollLoader.vue"; App.vue Parameter dalam boleh digunakan.

Bagaimana untuk melaksanakan antara muka sembang dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk melaksanakan antara muka sembang dalam vuejs?

Fungsi komponen paparan tetingkap sembang WeChat tiruan Vue.js

Kod sumber: https://github.com/doterlin/vue-wxChat

Alamat demo: https://doterlin.github.io/vue-wxChat/

Lari

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

Salin selepas log masuk

Pengenalan

Menyokong paparan teks dan gambar (paparan kategori suara akan disokong pada masa hadapan).
Menyokong pemuatan tatal bagi data, di mana pemuatan tatal bergantung pada komponen saya yang lain, scrollLoader.vue ("komponen pemuatan tatal atas dan bawah" Vue.js).
Menyokong emotikon QQ, sila daftarkan perintah v-emosi secara global yang saya laksanakan di main.js; >

Bagaimana untuk menggunakan?

function toEmotion(text, isNoGif){
 var list = [&#39;微笑&#39;, &#39;撇嘴&#39;, &#39;色&#39;, &#39;发呆&#39;, &#39;得意&#39;, &#39;流泪&#39;, &#39;害羞&#39;, &#39;闭嘴&#39;, &#39;睡&#39;, &#39;大哭&#39;, &#39;尴尬&#39;, &#39;发怒&#39;, &#39;调皮&#39;, &#39;呲牙&#39;, &#39;惊讶&#39;, &#39;难过&#39;, &#39;酷&#39;, &#39;冷汗&#39;, &#39;抓狂&#39;, &#39;吐&#39;, &#39;偷笑&#39;, &#39;愉快&#39;, &#39;白眼&#39;, &#39;傲慢&#39;, &#39;饥饿&#39;, &#39;困&#39;, &#39;惊恐&#39;, &#39;流汗&#39;, &#39;憨笑&#39;, &#39;大兵&#39;, &#39;奋斗&#39;, &#39;咒骂&#39;, &#39;疑问&#39;, &#39;嘘&#39;, &#39;晕&#39;, &#39;折磨&#39;, &#39;衰&#39;, &#39;骷髅&#39;, &#39;敲打&#39;, &#39;再见&#39;, &#39;擦汗&#39;, &#39;抠鼻&#39;, &#39;鼓掌&#39;, &#39;糗大了&#39;, &#39;坏笑&#39;, &#39;左哼哼&#39;, &#39;右哼哼&#39;, &#39;哈欠&#39;, &#39;鄙视&#39;, &#39;委屈&#39;, &#39;快哭了&#39;, &#39;阴险&#39;, &#39;亲亲&#39;, &#39;吓&#39;, &#39;可怜&#39;, &#39;菜刀&#39;, &#39;西瓜&#39;, &#39;啤酒&#39;, &#39;篮球&#39;, &#39;乒乓&#39;, &#39;咖啡&#39;, &#39;饭&#39;, &#39;猪头&#39;, &#39;玫瑰&#39;, &#39;凋谢&#39;, &#39;示爱&#39;, &#39;爱心&#39;, &#39;心碎&#39;, &#39;蛋糕&#39;, &#39;闪电&#39;, &#39;炸弹&#39;, &#39;刀&#39;, &#39;足球&#39;, &#39;瓢虫&#39;, &#39;便便&#39;, &#39;月亮&#39;, &#39;太阳&#39;, &#39;礼物&#39;, &#39;拥抱&#39;, &#39;强&#39;, &#39;弱&#39;, &#39;握手&#39;, &#39;胜利&#39;, &#39;抱拳&#39;, &#39;勾引&#39;, &#39;拳头&#39;, &#39;差劲&#39;, &#39;爱你&#39;, &#39;NO&#39;, &#39;OK&#39;, &#39;爱情&#39;, &#39;飞吻&#39;, &#39;跳跳&#39;, &#39;发抖&#39;, &#39;怄火&#39;, &#39;转圈&#39;, &#39;磕头&#39;, &#39;回头&#39;, &#39;跳绳&#39;, &#39;挥手&#39;, &#39;激动&#39;, &#39;街舞&#39;, &#39;献吻&#39;, &#39;左太极&#39;, &#39;右太极&#39;, &#39;嘿哈&#39;, &#39;捂脸&#39;, &#39;奸笑&#39;, &#39;机智&#39;, &#39;皱眉&#39;, &#39;耶&#39;, &#39;红包&#39;, &#39;鸡&#39;];
 if (!text) {
  return text;
 }
 text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word){
  var newWord = word.replace(/\[|\]/gi,&#39;&#39;);
  var index = list.indexOf(newWord);
  var backgroundPositionX = -index * 24
  var imgHTML = &#39;&#39;;
  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 ? &#39;/img&#39; : &#39;https://res.wx.qq.com/mpres/htmledition/images/icon&#39;;
   imgHTML = `![](${path}/emotion/${index}.gif)`
  }
  return imgHTML;
 });
 return text;
}
Vue.directive(&#39;emotion&#39;, {
 bind: function (el, binding) {
  el.innerHTML = toEmotion(binding.value)
 }
});

Salin selepas log masuk

Parameter telah diterangkan dalam komponen dan ditunjukkan dalam :

Parameter dan perihalan:

App.vue

Komponen visual sembang WeChat

Bergantung pada komponen scrollLoader dan arahan v-emosi (sila lihat main.js untuk pelaksanaan)

Parameter:

lebar komponen lebar, lalai 450wrapBg warna latar belakang elemen induk luar, #efefef lalai

tetingkap paparan maxHeight Ketinggian maksimum, lalai 900

hubungi url avatar rakan AvatarUrl

url avatar pemilik pemilikAvatarUrl WeChat

pemilikNamaSamaran WeChat apabila nama panggilan pemilikDapatkan semula

<🎜 menatal ke atas Kaedah memuatkan data, nilai pulangan harus menjadi objek Janji, struktur penyelesaian adalah sama dengan data

getUnderData (diperlukan) Kaedah memuatkan data semasa menatal ke bawah, nilai pulangan adalah sama seperti di atas

data (diperlukan) Lulus dalam data permulaan, strukturnya adalah seperti berikut:

Contoh penggunaan lengkap

[{
 direction: 2, //为2表示微信主人发出的消息，1表示联系人
 id: 1, //根据这个来排序消息
 type: 1, //1为文本，2为图片
 content: &#39;你好!![呲牙]&#39;, //当type为1时这里是文本消息，当type2为2时这里要存放图片地址；后续会支持语音的显示
 ctime: new Date().toLocaleString() //显示当前消息的发送时间
},
{
 direction: 1,
 id: 2,
 type: 1,
 content: &#39;你也好。[害羞]&#39;,
 ctime: new Date().toLocaleString()
}]

Salin selepas log masuk

Kesan: https://doterlin.github.io /vue-wxChat/Kod:

Selamat datang:

https://github.com/doterlin/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 &#39;./components/wxChat.vue&#39;
export default {
 name: &#39;app&#39;,
 data () {
 return {
  upperTimes: 0,
  underTimes: 0,
  upperId: 0,
  underId: 6,
  ownerAvatarUrl: &#39;./src/assets/avatar1.png&#39;,
  contactAvatarUrl: &#39;./src/assets/avatar2.png&#39;,
  wxChatData: [{
  direction: 2,
  id: 1,
  type: 1,
  content: &#39;你好!![呲牙]&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 2,
  type: 1,
  content: &#39;你也好。[害羞]&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 3,
  type: 1,
  content: &#39;这是我的简历头像：&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 4,
  type: 2,
  content: &#39;./src/assets/wyz.jpg&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 5,
  type: 1,
  content: &#39;你开心就好。[微笑]&#39;,
  ctime: new Date().toLocaleString()
  }]
 }
 },
 components:{wxChat},
 methods:{
 //向上滚动加载数据
 getUpperData(){
  var me = this;
  // 这里为模拟异步加载数据
  // 实际上你可能要这么写:
  // return axios.get(&#39;xxx&#39;).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: &#39;向上滚动加载第 &#39; + me.upperTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   },
   {
    direction: 1,
    id: me.upperId-2,
    type: 1,
    content: &#39;向上滚动加载第 &#39; + me.upperTimes +&#39; 条！&#39;,
    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: &#39;向下滚动加载第 &#39; + me.underTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   },
   {
    direction: 2,
    id: me.underId+2,
    type: 1,
    content: &#39;向下滚动加载第 &#39; + me.underTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.underId = me.underId+2;
  me.underTimes++;
  })
 }
 }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
#app {
 font-family: &#39;Avenir&#39;, 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>

Salin selepas log masuk

Disyorkan: "

Pilihan tutorial video 5 vue.js terkini
"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan antara muka sembang dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!