统一登录服务UI组件库
扫码登录，车企管理，成员、角色等管理等UI组件
Install
# 安装登录 core sdk
npm install --save @tripmini/vehicle-login-core
# 安装登录 UI组件库 (npm版本<7)
npm install --save @tripmini/vehicle-login-ui
# 安装登录 UI组件库 (npm版本>=7)
npm install --legacy-peer-deps --save @tripmini/vehicle-login-uiUsage
初始化 @tripmini/vehicle-login-core 基础能力
import { init } from '@tripmini/vehicle-login-core'
const param = {
unAppId: '', // 统一登录服务下发的appid。必传
tcbEnv: '', // tcb 环境id。必传
wxOpenAppId: '', // 微信开放平台appid。必传
redirectUri: '', // 登录回调url。非必传
qrStyle: '' // 二维码的样式。非必传
}
// 初始化sdk
init(param)全局加载
import VehicleLoginUi from '@tripmini/vehicle-login-ui'
import '@tripmini/vehicle-login-ui/lib/styles/vehicle-login-ui.css'
Vue.use(VehicleLoginUi)按需引用
方式1：手动加载js和css
import SocialSignin from '@tripmini/vehicle-login-ui/lib/social-signin'
import '@tripmini/vehicle-login-ui/lib/styles/social-signin.css'
Vue.component('vh-signin', SocialSignin)方式2：通过 babel-plugin-component 自动转换
npm install --save-dev babel-plugin-component
Configure your .babelrc file like this
{
"plugins": [
["component", {
"libraryName": "@tripmini/vehicle-login-ui",
"libDir": "lib",
"styleLibrary": {
"name": "styles",
"base": false, // no base.css file
"path": "[module].css"
}
}]
]
}The you can import component on demand, and you don't need to care about importing styles, the babel plugin will do it automaticly.
import Vue from 'vue'
import { SocialSignin } from '@tripmini/vehicle-login-ui'
Vue.component('vh-signin', SocialSignin)组件使用
<template>
<div class="root">
<vh-signin :platform="platform" @login-event="loginEvent" />
</div>
</template>
<script>
export default {
name: 'Login',
components: { },
data() {
return {
platform: 1 // 选中的第三方登录平台 0企微 1 微信。默认1
}
},
watch: {
},
mounted() {
},
methods: {
loginEvent(e) {
console.log('loginEvent :>> ', e)
const { data } = e
this.$store.dispatch('user/login', data)
.then(() => {
console.log('user/login success:>> ')
this.$router.push({ path: '/' })
})
.catch((e) => {
console.log('user/login error:>> ', e)
})
}
}
}
</script>