aida_front/src/component/LoginPage/weiXinLogin.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,
} 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: .1rem solid #000;
    border-radius: 4rem;
    padding: 0.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>