gemercheung 2 lat temu
rodzic
commit
c7ee348a28

packages/qjkankan-editor/src/components/nestedFolder.vue → packages/qjkankan-editor/src/components/NNestedFolder.vue


+ 0 - 155
packages/qjkankan-editor/src/components/NestedFolder.vue

@@ -1,155 +0,0 @@
-<template>
-  <div
-    class="scene-group"
-  >
-    <div
-      class="top-bar"
-      :class="{
-        highlight: targetId === folderInfo.id,
-        disabled: isDisabled,
-      }"
-      @click="onClickTopBar"
-      :style="{
-        paddingLeft: topBarPaddingLeft,
-      }"
-    >
-      <i class="iconfont icon-edit_input_arrow icon-expand" :class="isExpanded ? '' : 'collapsed'"></i>
-      <img v-show="!isExpanded" class="folder collapsed" src="@/assets/images/icons/folder-blue-small-close.png" alt="" draggable="false">
-      <img v-show="isExpanded" class="folder opened" src="@/assets/images/icons/folder-blue-small-open.png" alt="" draggable="false">
-      <span class="group-name">{{folderInfo.id === 1 ? $i18n.t('gather.root_dir') : folderInfo.name}}</span>
-    </div>
-
-    <div class="group-content" v-if="isExpanded">
-        <div
-          v-for="(item, index) of folderInfo.children"
-          :key=item.id
-        >
-          <component
-            :is="'NestedFolder'"
-            :folderInfo="item"
-            :level="level + 1"
-            :targetId="targetId"
-            :disabledFolderList=disabledFolderList
-            @targeted="onSonTargeted"
-          />
-        </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: 'NestedFolder',
-  components: {
-  },
-  props: {
-    folderInfo: {
-      type: Object,
-      required: true,
-    },
-    level: {
-      type: Number,
-      default: 1,
-    },
-    disabledFolderList: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    targetId: {
-      required: true,
-    }
-  },
-  data() {
-    return {
-      isExpanded: this.level === 1 ? true : false,
-    }
-  },
-  computed: {
-    topBarPaddingLeft() {
-      return 12 + (this.level - 1) * 12 + 'px' 
-    },
-    sceneItemPaddingLeft() {
-      return 18 + this.level * 12 + 'px' 
-    },
-    isDisabled() {
-      return this.disabledFolderList.some((item) => {
-        return item.id === this.folderInfo.id
-      })
-    },
-  },
-  methods: {
-    onClickTopBar() {
-      if (!this.isDisabled) {
-        this.isExpanded = !this.isExpanded
-        this.$emit('targeted', this.folderInfo.id)
-      }
-    },
-    onSonTargeted(id) {
-      this.$emit('targeted', id)
-    }
-  },
-  mounted() {
-  },
-  destroyed() {
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.scene-group {
-  user-select: none;
-  .top-bar {
-    position: relative;
-    height: 40px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding-right: 10px;
-    &:hover {
-    }
-    &.highlight {
-      background: #ebedf0;
-    }
-    &.disabled {
-      opacity: 0.5;
-    }
-    > .icon-expand {
-      display: inline-block;
-      font-size: 12px;
-      transform: scale(0.7);
-      color: rgba(130, 134, 142, 1);
-      flex: 0 0 auto;
-      &.collapsed {
-        display: inline-block;
-        transform: scale(0.7) rotate(-90deg);
-      }
-    }
-    > img.folder {
-      margin-left: 7px;
-      flex: 0 0 auto;
-      width: 16px;
-      &.collapsed {
-        height: 16px;
-        }
-      &.opened {
-        height: 14px;
-      }
-    }
-    > .group-name {
-      margin-left: 6px;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      flex: 1 1 auto;
-      font-size: 14px;
-      color: #323233;
-      cursor: default;
-    }
-  }
-}
-</style>