hundun-pc-auth v1.0.0

huawen-pc-auth 前端登录组件库

仓库

当前组件库发布在 私有仓库中，仓库地址: http://10.43.219.188:4873/

// 设置仓库地址
npm config set registry http://10.43.219.188:4873

安装

npm install --save  hundun-pc-auth

引用与配置

 // 导入组件库
import hundunPcAuth  from 'hundun-pc-auth'
// 导入样式
import 'hundun-pc-auth/lib/hundun-pc-auth.css'
// 注册组件库
Vue.use(hundunPcAuth) 等同于: Vue.use(hundunPcAuth , {type: 'element'})
// 如果当前使用组件库是view-design 则修改为
Vue.use(hundunPcAuth , {type: 'iview'})
// 配置axios
// 其中axios为当前前端项目配置好的axios封装，后续将使用当前项目的axios进行组件内部的http请求
window.http = axios 

页面引用示例

<div id="app"> 
    <hundun-pc-user color="#303133"  token-name="x-tone-token" @login="loginCallback(uid)" @privacyPolicy="privacyPolicy()">
    </hundun-pc-user>
    
</div>

扩展自定义插槽实现登录后的下拉列表

<template>
  <div  >
    <hundun-pc-user color="#303133"  token-name="x-tone-token"  >
    <template slot="menus">
        <el-dropdown-item >
            <router-link>插槽按钮</router-link>
        </el-dropdown-item>
    </template>
    </hundun-pc-user>
    
  </div> 
</template>

通过组件回调来获取用户主动登录和登出的事件

<template>
  <div  >
    <hundun-pc-user ref="hundunPcUser" @login="loginCallback" @logout="logoutCallback">

    </hundun-pc-user>
    
  </div> 
</template>
<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    // 用户登录事件 带回用户信息
    loginCallback(userData){
      this.userInfo = userData
    },
    // 用户登出事件
    logoutCallback() {
      this.userInfo = {}
    }
  }
}


</script>

未登录时：

点击图标登录（样式待完善）：

登录后用户图标：

hundun-pc-user

Attributes

items Attributes

其中 routeName和routePath均为空时 点击不跳转，会触发回调函数 @itemClick,参数为当前点击的条目

method

event

slot