0.0.55 • Published 2 years ago
tw-pc-component v0.0.55
天蛙tw-pc-component
说明: 天蛙PC端组件库,为了整合现有各个系统的通用功能,也为了方便管理统一的版本,提供了NPM包
安装:
npm install tw-pc-component
组件:SecurityLogin:
import { SecurityLogin } from 'tw-pc-component'
demo:
<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:
import { WebSocketMessage } from 'tw-pc-component'
demo:
<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>
0.0.55
2 years ago
0.0.40
2 years ago
0.0.41
2 years ago
0.0.42
2 years ago
0.0.43
2 years ago
0.0.44
2 years ago
0.0.45
2 years ago
0.0.46
2 years ago
0.0.47
2 years ago
0.0.39
2 years ago
0.0.51
2 years ago
0.0.52
2 years ago
0.0.53
2 years ago
0.0.54
2 years ago
0.0.50
2 years ago
0.0.48
2 years ago
0.0.49
2 years ago
0.0.38
2 years ago
0.0.37
3 years ago
0.0.30
3 years ago
0.0.31
3 years ago
0.0.32
3 years ago
0.0.33
3 years ago
0.0.34
3 years ago
0.0.35
3 years ago
0.0.36
3 years ago
0.0.28
3 years ago
0.0.29
3 years ago
0.0.23
3 years ago
0.0.24
3 years ago
0.0.25
3 years ago
0.0.26
3 years ago
0.0.27
3 years ago
0.0.22
3 years ago
0.0.21
3 years ago
0.0.20
3 years ago
0.0.19
3 years ago
0.0.18
3 years ago
0.0.17
3 years ago
0.0.16
3 years ago
0.0.15
3 years ago
0.0.14
3 years ago
0.0.13
3 years ago
0.0.12
3 years ago
0.0.11
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago