vue element-ui Modal bug All In One

vue element-ui Modal bug All In One

this.$nextTick

<template>
  <el-dialog
    :visible.sync="isShow"
    append-to-body
    :show-close="false"
    width="300px"
    custom-class=""
    :before-close="close"
  >
    <el-tabs
      v-model="activeTab"
      class="creative-tab-wrap"
      @tab-click="tabChange(true)"
    >
      <el-tab-pane name="CUSTOM" label="自定义">
        <div v-if="activeTab === 'CUSTOM'">
          <Tab1 :isShow="isShowTab1" />
        </div>
      </el-tab-pane>
      <el-tab-pane name="RECOMMENDED" label="推荐自定义">
        <div v-if="activeTab === 'RECOMMENDED'">
          <Tab2 :isShow="isShowTab2" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <div class="hello" v-if="isShow">
      <h1>{{ msg }}</h1>
    </div> -->
    <section slot="footer">
      <hr />
      <!-- <el-button type="primary" @click="tabChange(true)">change tab</el-button> -->
      <el-button type="default" @click="close">close</el-button>
      <el-button type="primary" @click="confirm">confirm</el-button>
    </section>
  </el-dialog>
</template>

<script>
import Tab1 from "./Tab1";
import Tab2 from "./Tab2";

export default {
  name: "Modal",
  components: {
    Tab1,
    Tab2,
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    msg: {
      type: String,
      default: "Modal",
    },
  },
  watch: {
    isShow(nv) {
      console.log("isShow", nv);
      this.tabChange();
    },
  },
  data() {
    return {
      activeTab: "CUSTOM",
      isShowTab1: false,
      isShowTab2: false,
      selectList: [],
    };
  },
  mounted() {
    console.log("init modal", this.isShow);
    this.tabChange();
  },
  methods: {
    tabChange() {
      console.log("activeTab", this.activeTab);
      if (this.activeTab === "CUSTOM") {
        this.isShowTab1 = true;
      } else {
        this.isShowTab2 = true;
      }
    },
    close() {
      this.$emit("close");
    },
    confirm() {
      this.$emit("select", this.selectList);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---