# ct-login

> 本仓库为青塔B端系统通用登录页组件，仅支持Vue3项目安装，对Vue2项目不做兼容。

Latest version **4.16.5** (published 2026-09-24) · 0 weekly downloads

## Install

```sh
npm install ct-login
pnpm add ct-login
yarn add ct-login
bun add ct-login
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 4.16.5 |
| Published | 2026-09-24 |
| First published | 2023-11-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 447 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | atone, madx_s, zxw0621222, cingta_cj |

## Links

- npm: https://www.npmjs.com/package/ct-login
- npm.io page: https://npm.io/package/ct-login

## Dependencies (9)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [axios](https://npm.io/package/axios.md) ^1.6.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.2.0
- [js-base64](https://npm.io/package/js-base64.md) ^3.7.7
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.5
- [vue-router](https://npm.io/package/vue-router.md) ^4.3.0
- [cingta-icon](https://npm.io/package/cingta-icon.md) ^2.0.1
- [element-plus](https://npm.io/package/element-plus.md) ^2.4.1
- [vue-json-viewer](https://npm.io/package/vue-json-viewer.md) ^3.0.4

## Recent versions

- 4.16.5 (latest) — 2026-09-24
- 4.16.4 — 2026-05-26
- 4.16.3 — 2026-05-26
- 4.16.2 — 2026-05-22
- 4.16.1 — 2026-05-21
- 4.16.0 — 2026-05-21
- 4.15.0 — 2026-02-26
- 4.14.0 — 2026-02-25
- 4.13.0 — 2026-02-25
- 4.12.0 — 2025-12-17
- 4.10.1 — 2025-12-09
- 4.11.2 — 2025-11-24
- 4.11.1 — 2025-11-18
- 4.11.0 — 2025-11-14
- 4.10.0 — 2025-09-17
- … 210 more at https://npm.io/package/ct-login/versions

## README

# 登录组件使用手册

本仓库为青塔B端系统通用登录页组件，仅支持Vue3项目安装，对Vue2项目不做兼容。

## 使用步骤

### 安装

```bash
# NPM安装
npm install ct-login
```

### 注册

安装插件时必须将系统的baseDao文件作为配置项以实现axios请求。

```js
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");
```

### 具体使用

```vue
<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        | 背景配置对象,必填<br />`color`：背景颜色，可接受16进制颜色值或css变量，默认值无(显示白色背景)<br />`imgUrl`：背景配图，接受oss地址或本地图片引入，具体使用看上面代码,必填<br />`width`：背景配图的宽度，默认为800px | `Object`  | -      |
| titleObj     | 标题配置对象,必填<br />`logoUrl`：系统logo，接受oss地址或本地图片引入，具体使用看上面代码,必填<br />`hasDivider`：是否需要标题分隔线，默认为true<br />`headline`：系统标题文案，传入一个字符串数组<br /> | `Object`  | -      |
| showSwitch   | 是否显示切换按钮，默认为true                                 | `Boolean` | `true` |
| wxConfig     | 微信二维码配置对象，以对象合并的形式对默认的二维码配置进行修改，部分字段必填<br />`redirect_uri`：重定向地址，需要进行UrlEncode，每个系统不一样，必须配置<br />`state`：用于保持请求和回调的状态，授权请求后原样带回给第三方，与后端约定一致即可，默认为`aaa`<br />其他参数说明详见[微信开放平台](https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html) | `Object`  | -      |
| loginConfig  | 登录方法对象，必填<br />`loginApi`：登录接口地址，必填<br />`loginCb`：登录回调函数，会把后端发送过来结果作为参数返回到回调函数之中，以满足不同系统之间的不同需求<br />`loginMethod`：调用方法，默认为`post1`，不统一处理返回结果中的state状态 | `Object`  | -      |
| bindConfig   | 绑定账号方法对象，必填<br />`bindApi`：登录接口地址，必填<br />`bindCb`：登录回调函数，会把后端发送过来结果作为参数返回到回调函数之中，以满足不同系统之间的不同需求<br />`bindMethod`：调用方法，默认为`post`，统一处理返回结果中的state状态 | `Object`  | -      |
| needVerify   | 在账号密码多次输入错误后是否需要图片验证，默认开启图片验证   | `Boolean` | `true` |
| codeUrl      | 服务二维码地址                                               | `String`  | -      |
| cookieConfig | 勾选记住我后会将账号密码加密后保存到cookies里面，这里可以配置cookies的名字、过期时间等内容<br />`name`：cookies的key<br />`expires`：cookies的过期时间，以天为单位，默认值为1<br />`path`：cookies的生效路径，可配置为仅登录页有效 | `Object`  |        |



### 事件 Events

| 事件名 | 说明                                                         | 类型                             |
| ------ | ------------------------------------------------------------ | -------------------------------- |
| info   | 由于本组件中不会单独封装通知组件，因此登录时的各类通知需要到各自系统中以事件的形式触发。 | `Function({message:"",type:""})` |



### 插槽 Slots

| 插槽名 | 说明                                   | 作用域 |
| ------ | -------------------------------------- | ------ |
| hint   | 登录卡片内的提示文字                   | -      |
| footer | 登录卡片底部插槽，满足不同系统不同需求 | -      |

---
_Source: https://npm.io/package/ct-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._