easeChat模块demo退出登录功能源码案例
Posted tuituile
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easeChat模块demo退出登录功能源码案例相关的知识，希望对你有一定的参考价值。
代码片段：
<div class="flex-vertical" id="rootWarp" v-cloak>
<!-- 头部 -->
<header id="header">
<div class="header" :class="{on:headers.num==0}" v-for="(headers,index) in header">
<div class="title">{{headers.name}}</div>
<div class="right" @click="fnAddFriends();" v-if="headers.name==‘通讯录‘"></div>
</div>
</header>
<!-- sectionflex-con -->
<section class="flex-con"></section>
<!-- 底部 -->
<footer id="footer" class="flex-wrap">
<div class="bar-tab-item flex-con" :class="{active:footers.num==0}" v-for="(footers,index) in footer" @click="fnChange(index);">
<!-- 聊天列表消息数 -->
<div class="badge" v-show="footers.name==‘消息‘ && footers.number>0">{{footers.number}}</div>
<!-- 通讯录加好友的新消息提示 -->
<div class="dot" v-if="footers.id==1 && footers.newNews==true"></div>
<i class="icon" :class="fnAddcs(footers.id)"></i>
<div class="bar-tab-label">{{footers.name}}</div>
</div>
</footer>
</div>
复制代码
首先api使用需要在vue渲染之后生效，所以初始化一下vue
apiready = function() {
//初始化vue
fnInitVue();
};
复制代码
// 设置底部点击初始化0防止多次重复点击
var eliminate = 0;
function fnInitVue() {
window.rootVue = new Vue({
el: ‘#rootWarp‘,
data: {
header: [],
footer: []
},
mounted: function() {
this.$nextTick(function() {
fnRequest();
fnInit();
});
},
methods: {
//打开添加好友页面
fnAddFriends: function() {
},
// 底部图标状态
fnAddcs: function(id) {
if (id == 0) {
return "message"; //消息图标
}
if (id == 1) {
return "directories"; //通讯录图标
}
if (id == 2) {
return "setup"; //设置图标
}
},
//底部tab
fnChange: function(index) {
// 防止重复点击
if (index == eliminate) {
return;
}
eliminate = index;
// 改变头部显示
this.header[index].num = 0;
// 改变底部显示
this.footer[index].num = 0;
//改变页面
api.setFrameGroupIndex({
name: ‘main_group‘,
index: index
});
}
}
})
}
复制代码
设置页面代码片段：
模拟ios滑动开关css：
.list-item .right {
position: relative;
z-index: 33;
}
.list-item .right .state {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 38px;
height: 21px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
}
.list-item .right .open {
}
.list-item .right .open::after {
content: " ";
float: right;
margin-top: 1px;
margin-right: 1px;
width: 19px;
height: 19px;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.list-item .right .close {
}
.list-item .right .close::after {
content: " ";
float: left;
margin-top: 1px;
margin-left: 1px;
width: 19px;
height: 19px;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
复制代码
div：
<div id="rootlist" class="list" v-cloak>
<transition v-for="(lists,index) in list">
<div class="list-item flex-wrap" @click="fnOpenWin(list.id,list.name);" v-if="list.id==0||list.id==1">
<div class="left">{{lists.name}}</div>
<div class="title flex-con"></div>
<div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
<div class="state" :class="fnBarType(lists.state)"></div>
</div>
</div>
<div class="list-item flex-wrap" v-else>
<div class="left">{{lists.name}}</div>
<div class="title flex-con"></div>
<div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
<div class="state" :class="fnBarType(lists.state)"></div>
</div>
</div>
</transition>
<div class="list-footer" v-if="list.length>0">
<div class="btn" @click="fnSignOut();">退出登录（<span>{{user}}</span>）</div>
</div>
</div>
复制代码
js：
apiready = function() {
fnInitVue();
};
function fnInitVue() {
window.rootVue = new Vue({
el: ‘#rootlist‘,
data: {
list: [],
user: ‘‘,
},
mounted: function() {
this.$nextTick(function() {
fnInit();
fnRequest();
});
},
methods: {
// 开关状态
fnSwitch: function(index) {
if (this.list[index].state) {
this.list[index].state = false;
} else {
this.list[index].state = true;
}
},
// 根据true false显示不同按钮状态
fnBarType: function(type) {
if (type == true) return ‘open‘;
if (type == false) return ‘close‘;
},
// 退出登录
fnSignOut: function() {
}
}
})
}
复制代码
以上是关于easeChat模块demo退出登录功能源码案例的主要内容，如果未能解决你的问题，请参考以下文章
JavaWeb jsp+servlet学生宿舍管理系统001（源码+sql文件可运行《精品毕设》）主要功能:不同角色登录宿舍管理员管理学生信息管理宿舍信息管理学生缺勤管理修改密码和退出功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑——使用Flask-Login库实现登录功能