<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane name="byFile">
        <span slot="label"><i class="el-icon-document"></i> 按文件分类</span>
        <NoteByFile ref="NoteByFile" />
      </el-tab-pane>
      <el-tab-pane name="byTag">
        <span slot="label"><i class="el-icon-price-tag"></i> 按标签分类</span>
        <NoteByTag ref="NoteByTag" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import NoteByFile from "./components/noteByFile.vue";
import NoteByTag from "./components/noteByTag.vue";
export default {
  components: {
    NoteByFile,
    NoteByTag,
  },
  data() {
    return {
      activeName: "byFile",
    };
  },
  watch: {
    activeName(value) {
      if (value == "byFile") {
        this.$refs.NoteByFile.loadLeftList();
      } else {
        this.$refs.NoteByTag.loadLeftList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>

::v-deep .el-tab-pane {
  height: calc(100vh - 180px);
}
</style>
