common-login

AuthIframe 用法

<template>
  <div class="home">
    <AuthIframe
      ref="AuthIframeComp"
      :iframeSrc="authIframeSrc"
      :isVisible="authIframeVisible"
    />
    <div class="test-btns">
      <el-button
        type="primary"
        size="small"
        @click="authIframeVisible = !authIframeVisible"
        >{{ authIframeVisible ? "隐藏" : "显示" }}</el-button
      >
      <el-button type="primary" size="small" @click="testSetJson"
        >TEST SET JSON</el-button
      >
      <el-button type="primary" size="small" @click="testGetJson"
        >TEST GET JSON</el-button
      >
      <el-button type="primary" size="small" @click="testSetString"
        >TEST SET STRING</el-button
      >
      <el-button type="primary" size="small" @click="testGetString"
        >TEST GET STRING</el-button
      >
    </div>
  </div>
</template>

<script>
import { AuthIframe } from "@junhe/common-login";
import { Button as ElButton } from "element-ui";

export default {
  name: "HomeView",
  components: { AuthIframe, ElButton },
  data() {
    return {
      authIframeSrc: "https://saas.i3vsoft.com:10998/SAAS/common-login-auth/#/",
      authIframeVisible: true,
    };
  },
  methods: {
    async testSetJson() {
      const refAuthIframe = this.$refs.AuthIframeComp;
      await refAuthIframe.$setJson({ name: "张三", age: 18 }, "auth-json-test");
    },

    async testGetJson() {
      const refAuthIframe = this.$refs.AuthIframeComp;
      const json = await refAuthIframe.$getJson("auth-json-test");
      console.log("json :>> ", json);
    },

    async testSetString() {
      const refAuthIframe = this.$refs.AuthIframeComp;
      await refAuthIframe.$setString("0123456789", "auth-string-test");
    },

    async testGetString() {
      const refAuthIframe = this.$refs.AuthIframeComp;
      const string = await refAuthIframe.$getString("auth-string-test");
      console.log("string :>> ", string);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;

  .test-btns {
    margin-top: 20px;
  }
}
</style>