ct-login
v1.0.0
Published
本仓库为青塔B端系统通用登录页组件,仅支持Vue3项目安装,对Vue2项目不做兼容。
Downloads
179
Readme
登录组件使用手册
本仓库为青塔B端系统通用登录页组件,仅支持Vue3项目安装,对Vue2项目不做兼容。
使用步骤
安装
# NPM安装
npm install ct-login
注册
安装插件时必须将系统的baseDao文件作为配置项以实现axios请求。
import { createApp } from 'vue';
import CtLogin from "ct-login";
import baseDao from "@/service/BaseDao";
const app = createApp(App);
app.use(Ctlogin,{baseDao});
app.mount("#app");
具体使用
<template>
<ct-login-page v-bind="loginConfig"
@info="infoUser">
<template #footer>
<div class="contact-info">
没有账号?<span class="can-click"
@click="goTrial">申请试用</span>
</div>
</template>
</ct-login-page>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const loginConfig = ref({
bgObj: {
color: "#4D64FF",
imgUrl: new URL('./assets/img/login_image.png', import.meta.url).href,
width: "800px"
},
titleObj: {
logoUrl: "https://static.cingta.com/Front/first-class-sub/common/icon_login_logo.svg",
hasDivider: true,
headline: ["全景云", "发展数据云平台"]
},
showSwitch: true,
wxConfig: {
redirect_uri: encodeURIComponent("https://ud.cingta.com/wscan-test/ud"),
},
loginConfig: {
loginApi: "/users/mylogin/",
loginCb: testCb
},
bindConfig: {
bindApi: "/wscan-test/bind-user/",
bindCb: testCb
},
needVerify: true,
codeUrl: 'https://ctpublish.oss-cn-hangzhou.aliyuncs.com/hdi_static/yangxue.png',
cookieConfig: {
name: 'ct-login-token',
expires: 1
}
});
const goTrial = () => {
window.open("https://info.cingta.com/#/applyForm?id=43&from=platform", "_blank");
};
function testCb() {
console.log("testCb");
};
const infoUser = (data) => {
const { message, type } = data;
ElMessage({ message: message, type: type, duration: 3000, });
};
</script>
<style scoped lang="less">
.contact-info {
width: 100%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
background: #F1F4F9;
color: #8F99A3;
font-size: 13px;
.can-click {
cursor: pointer;
color: var(--ct-color-primary);
&:hover {
text-decoration: underline;
}
}
}
</style>
属性 Attributes
| 属性名 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------------------------ | --------- | ------ |
| bgObj | 背景配置对象,必填color
:背景颜色,可接受16进制颜色值或css变量,默认值无(显示白色背景)imgUrl
:背景配图,接受oss地址或本地图片引入,具体使用看上面代码,必填width
:背景配图的宽度,默认为800px | Object
| - |
| titleObj | 标题配置对象,必填logoUrl
:系统logo,接受oss地址或本地图片引入,具体使用看上面代码,必填hasDivider
:是否需要标题分隔线,默认为trueheadline
:系统标题文案,传入一个字符串数组 | Object
| - |
| showSwitch | 是否显示切换按钮,默认为true | Boolean
| true
|
| wxConfig | 微信二维码配置对象,以对象合并的形式对默认的二维码配置进行修改,部分字段必填redirect_uri
:重定向地址,需要进行UrlEncode,每个系统不一样,必须配置state
:用于保持请求和回调的状态,授权请求后原样带回给第三方,与后端约定一致即可,默认为aaa
其他参数说明详见微信开放平台 | Object
| - |
| loginConfig | 登录方法对象,必填loginApi
:登录接口地址,必填loginCb
:登录回调函数,会把后端发送过来结果作为参数返回到回调函数之中,以满足不同系统之间的不同需求loginMethod
:调用方法,默认为post1
,不统一处理返回结果中的state状态 | Object
| - |
| bindConfig | 绑定账号方法对象,必填bindApi
:登录接口地址,必填bindCb
:登录回调函数,会把后端发送过来结果作为参数返回到回调函数之中,以满足不同系统之间的不同需求bindMethod
:调用方法,默认为post
,统一处理返回结果中的state状态 | Object
| - |
| needVerify | 在账号密码多次输入错误后是否需要图片验证,默认开启图片验证 | Boolean
| true
|
| codeUrl | 服务二维码地址 | String
| - |
| cookieConfig | 勾选记住我后会将账号密码加密后保存到cookies里面,这里可以配置cookies的名字、过期时间等内容name
:cookies的keyexpires
:cookies的过期时间,以天为单位,默认值为1path
:cookies的生效路径,可配置为仅登录页有效 | Object
| |
事件 Events
| 事件名 | 说明 | 类型 |
| ------ | ------------------------------------------------------------ | -------------------------------- |
| info | 由于本组件中不会单独封装通知组件,因此登录时的各类通知需要到各自系统中以事件的形式触发。 | Function({message:"",type:""})
|
插槽 Slots
| 插槽名 | 说明 | 作用域 | | ------ | -------------------------------------- | ------ | | hint | 登录卡片内的提示文字 | - | | footer | 登录卡片底部插槽,满足不同系统不同需求 | - |