运行
介绍
- 支持文本和图片的展示（后续将支持对语音类的展示）。
- 支持滚动加载数据，其中滚动加载依赖我另外一个组件scrollLoader.vue（《》）。
- 支持QQ表情，为了能使用表情请全局注册指令v-emotion,我在main.js做了实现；代码如下：
104){
return word;
}
imgHTML = ``
} else {
var path = index>104 ? '/img' : 'https://res.wx.qq.com/mpres/htmledition/images/icon';
imgHTML = ``
}
return imgHTML;
});
return text;
}
Vue.directive('emotion',{
bind: function (el,binding) {
el.innerHTML = toEmotion(binding.value)
}
});
如何使用?
参数已经在组件中做了说明，并在App.vue中做了演示：
参数和说明：
width 组件宽度，默认450 wrapBg 外层父元素背景颜色，默认#efefef maxHeight 展示窗口最高高度,默认900 contactAvatarUrl 好友头像url ownerAvatarUrl 微信主人头像url ownerNickname 微信主人昵称 getUpperData （必需）当滚动到上方时加载数据的方法，返回值要为Promise对象，resolve的结构同data getUnderData （必需）当滚动到下方时加载数据的方法，返回值同上 data （必需）传入初始化数据， 结构如下：参数：
完整的使用实例
代码：
文件，对wxChat的用法做示例
欢迎 start:
nofollow" href="https://github.com/doterlin/vue-wxChat">https://github.com/doterlin/vue-wxChat
总结
以上所述是小编给大家介绍的Vue.js仿微信聊天窗口展示组件功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/37235.html