1.0.0 • Published 10 months ago

hundun-pc-auth v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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>

未登录时: npm.io

点击图标登录(样式待完善): npm.io

登录后用户图标: npm.io

hundun-pc-user

Attributes

参数说明类型可选值默认值
token-name全局token名称String-x-tone-token
info是否显示个人信息Boolean-false
color用户名称字体颜色String-#000000
items自定义下拉列表,详见下表Array--
dialog-color登录框表单颜色String-#d19a2f
wei-chart是否需要支持微信扫码登录Boolean-false
sync-login是否需要单点同登Boolean-true
sync-logout是否需要单点同退Boolean-true

items Attributes

参数说明类型可选值默认值
id下拉列表id,可为空String--
name显示名称,不能为空String--
routeName跳转路由名称,为空则继续判断routePathString--
routePath跳转路由pathString--
routePath跳转路由pathString--

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

method

方法说明参数返回值
getUser获取当前登录用户信息,未登录返回null-{ userId: '', username: '', logoUrl: '' , userNo: '' }
getToken返回当前登录token-String

event

方法说明参数
login登录成功后的回调,携带用户id用户信息{userId:'' , username:'',logiUrl: ''...}
logout主动登出后的回调-
itemClick自定义items下拉菜单列表后,点击下拉菜单的回调事件items中配置的当前点击数据
privacyPolicy隐私协议点击后触发的回调-

slot

方法说明
menus下拉列表插槽