标签：可用性 stylus oca cti round show splay square temp
import ajax from ‘./ajax‘ /* 用户模块 */ /* 获取验证码 */ export const getcode = (code) => ajax({ url: ‘/user/handleEmail/getcode‘, type: ‘post‘, params: code }) /* 注册用户 */ export const registerUser = (data) => ajax({ url: ‘/user/useradmin/register‘, type: ‘post‘, params: data }) /* 用户登录 */ export const loginUser = (data) => ajax({ url: ‘/user/useradmin/loginUser‘, type: ‘post‘, params: data }) /* 检验邮箱 */ export const checkCode = (data) => ajax({ url: ‘/user/handleEmail/checkcode‘, type: ‘post‘, params: data }) // 验证码是否正确 export const matchCode = (data) => ajax({ url: ‘/user/handleEmail/matchcode‘, type: ‘post‘, params: data }) //重置密码 export const resetPasswords = (data) => ajax({ url: ‘/user/useradmin/resetPasswords‘, type: ‘post‘, params: data }) /* 用户退出 */ export const signOut = () => ajax({ url: ‘/user/useradmin/signOut‘, type: ‘post‘ })
1 <template> 2 <div class="user-action-container"> 3 <el-menu ref="item" 4 mode="horizontal" 5 background-color="#141619" 6 menu-trigger="click" 7 active-text-color="#ffb848" 8 :unique-opened="true" 9 @open="openItem" 10 text-color="rgba(255,255,255,.6)"> 11 <el-submenu index="1"> 12 <template slot="title"> 13 <el-badge class="item h_24 lh_24 " 14 :value="3"> 15 <i class="icon iconfont icon-lingdang ft_24 c_f"></i> 16 </el-badge> 17 </template> 18 <el-menu-item index="1-1">选项1</el-menu-item> 19 <el-menu-item index="1-2">选项2</el-menu-item> 20 <el-menu-item index="1-3">选项3</el-menu-item> 21 </el-submenu> 22 <el-submenu index="2"> 23 <template slot="title"> 24 <i class="el-icon-chat-dot-square ft_24 c_f"></i> 25 </template> 26 <el-menu-item index="2-1">选项2-2</el-menu-item> 27 <el-menu-item index="2-2">选项2-2</el-menu-item> 28 <el-menu-item index="2-3">选项2-3</el-menu-item> 29 </el-submenu> 30 <el-submenu index="3"> 31 <template slot="title"> 32 <el-avatar src="/images/home/user_bg.png"></el-avatar> 33 </template> 34 <el-menu-item index="3-1">选项3-1</el-menu-item> 35 <el-menu-item index="3-2">选项3-2</el-menu-item> 36 <el-menu-item index="3-3" 37 @click="_signOut"> 38 <span class="icon iconfont icon-084tuichu mr_5"></span> 39 <span> 40 退出 41 </span> 42 </el-menu-item> 43 </el-submenu> 44 </el-menu> 45 </div> 46 </template> 47 48 <script> 49 import { signOut } from ‘~/plugins/api‘ 50 import ruleMixin from ‘~/assets/mixin/userRuleMixin‘ 51 52 export default { 53 mixins: [ruleMixin], 54 data () { 55 return { 56 timer: null 57 }; 58 }, 59 methods: { 60 openItem (index) { 61 this.timer = setTimeout(() => { 62 if (index !== ‘0‘) { 63 this.$refs.item.close(index) 64 } 65 }, 5000) 66 }, 67 async _signOut () { 68 let { code, message } = await signOut() 69 location.reload() 70 } 71 }, 72 beforeDestroy () { 73 this.timer && clearTimeout(this.timer) 74 } 75 } 76 </script> 77 78 <style scoped lang="stylus"> 79 .user-action-container 80 >>>.el-submenu__title .el-submenu__icon-arrow 81 display none 82 >>>.el-submenu__title 83 padding 0 13px 84 border none !important 85 .el-badge__content 86 border none 87 </style>
<template>
<div class="user-action-container">
<el-menu ref="item"
mode="horizontal"
background-color="#141619"
menu-trigger="click"
active-text-color="#ffb848"
:unique-opened="true"
@open="openItem"
text-color="rgba(255,255,255,.6)">
<el-submenu index="1">
<template slot="title">
<el-badge class="item h_24 lh_24 "
:value="3">
<i class="icon iconfont icon-lingdang ft_24 c_f"></i>
</el-badge>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-chat-dot-square ft_24 c_f"></i>
</template>
<el-menu-item index="2-1">选项2-2</el-menu-item>
<el-menu-item index="2-2">选项2-2</el-menu-item>
<el-menu-item index="2-3">选项2-3</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<el-avatar src="/images/home/user_bg.png"></el-avatar>
</template>
<el-menu-item index="3-1">选项3-1</el-menu-item>
<el-menu-item index="3-2">选项3-2</el-menu-item>
<el-menu-item index="3-3"
@click="_signOut">
<span class="icon iconfont icon-084tuichu mr_5"></span>
<span>
退出
</span>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
import { signOut } from ‘~/plugins/api‘
import ruleMixin from ‘~/assets/mixin/userRuleMixin‘
export default {
mixins: [ruleMixin],
data () {
return {
timer: null
};
},
methods: {
openItem (index) {
this.timer = setTimeout(() => {
if (index !== ‘0‘) {
this.$refs.item.close(index)
}
}, 5000)
},
async _signOut () {
let { code, message } = await signOut()
location.reload()
}
},
beforeDestroy () {
this.timer && clearTimeout(this.timer)
}
}
</script>
<style scoped lang="stylus">
.user-action-container
>>>.el-submenu__title .el-submenu__icon-arrow
display none
>>>.el-submenu__title
padding 0 13px
border none !important
.el-badge__content
border none
</style>
标签：可用性 stylus oca cti round show splay square temp
原文地址：https://www.cnblogs.com/hanhaoyu/p/12299210.html
