# tw-pc-component

> tw-pc-component

Latest version **0.0.55** (published 2022-05-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install tw-pc-component
pnpm add tw-pc-component
yarn add tw-pc-component
bun add tw-pc-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.55 |
| Published | 2022-05-10 |
| First published | 2021-10-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 235.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | fuxq |
| Maintainers | fuxq |

## Links

- npm: https://www.npmjs.com/package/tw-pc-component
- npm.io page: https://npm.io/package/tw-pc-component

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^1.7.5

## Recent versions

- 0.0.55 (latest) — 2022-05-10
- 0.0.54 — 2022-04-11
- 0.0.53 — 2022-04-07
- 0.0.52 — 2022-04-07
- 0.0.51 — 2022-04-06
- 0.0.50 — 2022-04-06
- 0.0.49 — 2022-04-06
- 0.0.48 — 2022-04-01
- 0.0.47 — 2022-04-01
- 0.0.46 — 2022-04-01
- 0.0.45 — 2022-03-31
- 0.0.44 — 2022-03-31
- 0.0.43 — 2022-03-31
- 0.0.42 — 2022-03-30
- 0.0.41 — 2022-03-30
- … 40 more at https://npm.io/package/tw-pc-component/versions

## README

## 天蛙tw-pc-component

说明: 天蛙PC端组件库，为了整合现有各个系统的通用功能，也为了方便管理统一的版本，提供了NPM包


## 安装:

```js
npm install tw-pc-component
```

## 组件：SecurityLogin:

```js
import { SecurityLogin } from 'tw-pc-component'
```

## demo:

```js
<template>
  <div id="app" class="wrapper">
    <div style="width:320px;height:366px;position: fixed;left:1418px;top:268px;" ref="login-form">
      这个是系统登录框，点击“登录”调用安全验证
      <button type="button" style="width:100px;height:100px" @click="securityVerifyLogin">登录</button>
    </div>
    <security-login :sourceType="securityVerify.sourceType" :styles="securityVerify.styles" :gateway="securityVerify.gateway" :data="securityVerify.data" :visible="securityVerify.visible" @change="verifyChange" @close="verifyClose"></security-login>
  </div>
</template>

<script>
import { SecurityLogin } from 'tw-pc-component'
export default {
  components:{
    SecurityLogin
  },
  data() {
    return {
      securityVerify:{
        sourceType:'TW_CLOUD_SSO',// TW_CLOUD_BASE(天蛙云基础平台)、TW_CLOUD_CQES(天蛙云综评)、TW_CLOUD_SSO(天蛙云认证中心)、TW_CLOUD_CLASSBRAND(天蛙云班牌)、TW_CLOUD_APP(天蛙云APP)、TW_CLOUD_WECHAT(天蛙云微信)、TW_CLOUD_WINDOWS(天蛙云Windows)
        gateway:'http://sso2-dev.591iq.com.cn', // 网关地址
        styles:{ width: '320px', height: '366px', left: '1418px', top: '268px' }, // 安全验证框位置以及宽和高
        data: { userName: '350000302', userPwd: 'wgm_123456' },// 登录的用户名、密码
        visible:false // 验证状态，true:开始验证，false:关闭验证
      }
    }
  },
  created(){
  },
  mounted(){
    // 初始化安全登录位置和宽高
    this.$nextTick(() => {
      this.initSecurityVerify()
    })
  },
  methods: {
    // 初始化安全登录位置和宽高
    initSecurityVerify(){
      const { offsetWidth,offsetHeight,offsetLeft,offsetTop }=this.$refs['login-form']
      this.securityVerify.styles={ width: `${offsetWidth}px`, height: `${offsetHeight}px`, left: `${offsetLeft}px`, top: `${offsetTop}px` }
    },
    // 点击“登录”时屏蔽原有逻辑，调用此方法
    securityVerifyLogin(){
      this.securityVerify.visible=true
    },
    // 验证完成后回调方法
    verifyChange(res){
      // res:{
      //   accessToken:'09841ECCFB3128AD08D2015F06BBFB57',
      //   service:'http://web-dev.591iq.com.cn/saas/#/',
      //   userName: "350000304"
      //   userRefId: 38774
      //   userType: 1
      //   ...
      // }
    },
    // 关闭验证回调方法
    verifyClose(){
      this.securityVerify.visible=false
    }
  }
}
</script>
```


## 组件：WebSocketMessage:

```js
import { WebSocketMessage } from 'tw-pc-component'
```

## demo:

```js
  <template>
    <div style="height: 100vh; width: 100%;" >
      <div v-for="item in messages" :key="item" v-html="item"></div>
    </div>
  </template>
  <script>
  import { WebSocketMessage } from 'tw-pc-component'
  export default {
    data() {
      return {
        websocket: null,
        messages:[]
      }
    },
    created() {
      this.initSocket()
    },
    beforeDestroy() {
      // 销毁websocket
      if(this.websocket){
        this.websocket.destroy()
      }

      this.websocket = null
    },
    methods: {
      initSocket(){
        const obj={ userId:"d3fd15177255317422457122c6c117f9",userName:"张三",token:"d3fd15177255317422457122c6c117f9",roomId:"2D9201AE6961DD4E557EEA105A499856",socketUrl:"ws://192.168.31.18:9901" }
        const websocket = new WebSocketMessage(obj.userId, obj.userName, obj.token, obj.roomId, obj.socketUrl)
        // 新消息
        websocket.onMessgae((res) => {
          this.onMessage(res)
        })
      },
      onMessage(res){
        // messageType('join':'加入房间', 'chat':'聊天消息', 'gift':'送礼物', 'handsup':'举手', 'good':'点赞', 'notice':'公告', 'room':'房间信息')
        if(res.messageType==='chat') {
          // 将聊天消息展示到页面上
          this.messages.push(`<span>${res.message}</span>`)
        }

      }
    }
  }
  </script>
```

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