@qiov/vehicle-login-ui

统一登录服务UI组件库

扫码登录，车企管理，成员、角色等管理等UI组件

Install

# 安装登录 core sdk
npm install --save @qiov/vehicle-login-core
# 安装登录 UI组件库 (npm版本<7)
npm install --save @qiov/vehicle-login-ui
# 安装登录 UI组件库 (npm版本>=7)
npm install --legacy-peer-deps --save @qiov/vehicle-login-ui

Usage

初始化 @qiov/vehicle-login-core 基础能力

import { init } from "@qiov/vehicle-login-core";

const param = {
  unAppId: "", // 统一登录服务下发的appid。必传
  tcbEnv: "", // tcb 环境id。必传
  wxOpenAppId: "", // 微信开放平台appid。必传
  redirectUri: "", // 登录回调url。非必传
  qrStyle: "", // 二维码的样式。非必传
};
// 初始化sdk
init(param);

全局加载

import VehicleLoginUi from "@qiov/vehicle-login-ui";
import "@qiov/vehicle-login-ui/lib/styles/vehicle-login-ui.css";

Vue.use(VehicleLoginUi);

按需引用

方式 1：手动加载 js 和 css

import SocialSignin from "@qiov/vehicle-login-ui/lib/social-signin";
import "@qiov/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": "@qiov/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 "@qiov/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>