用户名和下拉列表的使用-引入标记

用户名和下拉列表的使用-引入标记

图例

结构

<el-dropdown class="my-dropdown" trigger="click">
    <span class="el-dropdown-link">
        <!-- 头像 用户名称 -->
        <!-- <img class="avatar" src="../../assets/images/avatar.jpg" alt /> -->
        <template v-if="mention+discuss>0">
            <span class="username">
                <!-- <el-badge :value="mention"></el-badge> -->
                <el-badge is-dot class="it"></el-badge>
                {{displayname}}
            </span>
        </template>
        <template v-else>
            <span class="username">{{displayname}}</span>
        </template>
        <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <!--  slot="dropdown" 插槽 -->
    <el-dropdown-menu slot="dropdown">
        <template v-if="role != '-' && verifyuser">
            <template v-if="mention+discuss>0">
                <el-badge is-dot class="itk"></el-badge>
            </template>
            <el-dropdown-item @click.native="openAmc()">后台管理</el-dropdown-item>
        </template>
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

数据

data(){
    return{
      role: this.$store.getters['auth/userRole'],
      displayname: this.$store.getters['auth/userName'],
    }
}
  created() {
    // 获取用户名字
    this.getPublicUserInfo()
    //  console.log(this.$route.path)
  },

方法

methods:{
     async getPublicUserInfo() {
      try {
        // console.log(this.$route.fullPath)
        // if ((this.$route.fullPath = '/report')) {
        //   this.pink = false
        // }

        let res = await this.$http.get('cms/public/user')
        // console.log(res)
        if (res.code == 200) {
          this.mention = res.result.mention
          this.discuss = res.result.discuss
          if (res.result.role != '-') {
            this.verifyuser = true
          }
        } else {
          //this.$message.error('用户登录异常，请刷新页面')
          this.$router.push({
            path: '/login',
            query: { redirect: this.$route.fullPath },
          })
        }
      } catch (err) {
        //this.$message.error('连不上系统，请刷新页面')
        this.$router.push({
          path: '/login',
          query: { redirect: this.$route.fullPath },
        })
      }
    },
}

css

.my-dropdown {
    // padding-right: 130px;
    float: right;
    .avatar {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }
    .username {
        cursor: pointer;
        margin-left: 10px;
        font-weight: bold;
        color: #333;
        vertical-align: middle;
    }
}

res数据