基于 vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop 等技术开发的仿微信聊天界面|仿微信聊天室 vue-chatRoom,新增了消息下拉刷新,实现了消息发送,图片、视频预览,打赏、红包等功能。 https://www.cnblogs.com/xiaoyan2017/p/10657781.html
<template>
<div class="weChatIM__panel clearfix">
<div class="we__chatIM-wrapper flexbox flex__direction-column">
<!-- //顶部 -->
<header-bar :class="{'topfixed': isTopFixed}"></header-bar>
<!-- //主页面 -->
<div class="wcim__container flex1">
<keep-alive><router-view></router-view></keep-alive>
</div>
<!-- //底部 tab -->
<tab-bar></tab-bar>
</div>
</div>
</template>
<script>
import headerBar from './components/header'
import tabBar from './components/footer'
export default {
name: 'app',
data () {
return {
isTopFixed: true
}
},
components: {
headerBar,
tabBar
}
}
</script>
<style>
/* 引入公共样式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
</style>
欢迎大家一起交流、学习 Q:282310962 wx:xy190310
1
xiaoyan2017 OP vue 全家桶仿微信网页端聊天室 IM 系统
https://www.cnblogs.com/xiaoyan2017/p/10793728.html |