yos_web/src/components/mindmap/index.vue

<template>
  <div>
    <el-button size="mini" type="primary" @click="onShow">{{
      $t("360°画像")
    }}</el-button>
    <el-drawer
      :visible.sync="drawer"
      append-to-body
      size="90%"
      :with-header="false"
    >
      <custom
        :contentStyle="{ height: '100vh', width: '100vw' }"
        :divStyle="{ height: '100vh', width: '100vw' }"
        ref="custom"
        v-if="name === 'custom'"
        :id="id"
      />
      <project
        :contentStyle="{ height: '100vh', width: '100vw' }"
        :divStyle="{ height: '100vh', width: '100vw' }"
        ref="project"
        v-else-if="name === 'project'"
        :id="id"
      />
      <saler
        :contentStyle="{ height: '100vh', width: '100vw' }"
        :divStyle="{ height: '100vh', width: '100vw' }"
        ref="saler"
        v-else
        :id="id"
      />
    </el-drawer>
  </div>
</template>

<script>
import custom from "./custom.vue";
import project from "./project.vue";
import saler from "./saler.vue";
export default {
  props: ["id", "name"],
  components: {
    custom,
    project,
    saler,
  },
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    onShow() {
      this.drawer = true;
      this.$nextTick(() => {
        switch (this.name) {
          case "custom":
            console.log(this.$refs.custom);
            this.$nextTick(() => {
              this.$refs.custom.getData();
            });

            break;
          case "project":
            console.log(this.$refs.project);
            this.$refs.project.getData();
            break;
          default:
            console.log(this.$refs.saler);
            this.$refs.saler.getData();
            break;
        }
      }, 0);
    },
  },
};
</script>
<style>
</style>