Vue.js仿微信聊天窗口展示组件功能
发布时间：2020-12-17 02:50:39 所属栏目：百科 来源：网络整理
导读：源码： 演示地址： 运行 介绍 支持文本和图片的展示（后续将支持对语音类的展示）。 支持滚动加载数据，其中滚动加载依赖我另外一个组件scrollLoader.vue（《》）。 支持QQ表情，为了能使用表情请全局注册指令v-emotion,我在main.js做了实现；代码如下： 104
|
源码： 演示地址：
运行介绍
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)
}
});
如何使用?参数已经在组件中做了说明，并在 参数和说明：
width 组件宽度，默认450 wrapBg 外层父元素背景颜色，默认#efefef maxHeight 展示窗口最高高度,默认900 contactAvatarUrl 好友头像url ownerAvatarUrl 微信主人头像url ownerNickname 微信主人昵称 getUpperData （必需）当滚动到上方时加载数据的方法，返回值要为Promise对象，resolve的结构同data getUnderData （必需）当滚动到下方时加载数据的方法，返回值同上 data （必需）传入初始化数据， 结构如下： 效果： 代码： 欢迎 start:
总结以上所述是小编给大家介绍的Vue.js仿微信聊天窗口展示组件功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
