71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div class="Container">
|
|
<div class="icon" @click="openWeiXinModel">
|
|
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
|
|
<span>{{ $props.text }}</span>
|
|
</div>
|
|
<weiXinModel ref="weiXinModel"></weiXinModel>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
|
|
import weiXinModel from "./weiXinModel.vue";
|
|
export default defineComponent({
|
|
name: "login",
|
|
components: {
|
|
weiXinModel
|
|
},
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: 'Sign in with Wechat'
|
|
}
|
|
},
|
|
setup() {
|
|
let weiXinDom = reactive({
|
|
weiXinModel:null
|
|
})
|
|
const openWeiXinModel = ()=>{
|
|
weiXinDom.weiXinModel.init()
|
|
}
|
|
onMounted(()=>{
|
|
|
|
})
|
|
return {
|
|
...toRefs(weiXinDom),
|
|
openWeiXinModel,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style scoped lang="less">
|
|
.Container{
|
|
position: relative;
|
|
.icon{
|
|
// width: 40px;
|
|
width: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #dadce0;
|
|
border-radius: 4rem;
|
|
padding: .5rem 3rem;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
&:hover{
|
|
background: #f8faff;
|
|
}
|
|
img{
|
|
width: 3.8rem;
|
|
height: 3.8rem;
|
|
}
|
|
span{
|
|
font-size: 1.4rem;
|
|
margin-left: 1.4rem;
|
|
}
|
|
}
|
|
&.Container:hover{
|
|
}
|
|
}
|
|
</style>
|