fe-manage/src/components/OpenPages.vue

<template>
  <div class="openPages">
    <draggable
      v-model="openList"
      chosenClass="chosen"
      forceFallback="true"
      ghostClass="ghost"
      group="openPage"
      animation="500"
      @start="onStart"
      @end="onEnd"
      style="display: flex"
    >
      <template #item="{ element }">
        <div style="position: relative">
          <router-link
            :to="element.href"
            class="openItems"
            :style="{ background: element.active ? '#f5f7fa' : '' }"
          >
            <div
              :style="{
                color: element.active
                  ? 'rgba(64, 158, 255, 1)'
                  : 'rgba(135, 139, 146, 1)',
              }"
            >
              {{ element.pagename }}
            </div>
          </router-link>
          <div class="close" @click.stop="closePage(element)">
            <img src="../assets/images/openPages/close.png" />
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import draggable from "vuedraggable";
import { message } from "ant-design-vue";
export default {
  name: "OpenPages",
  components: {
    draggable,
  },
  setup() {
    const store = useStore();
    const $router = useRouter();
    const state = reactive({
      openList: store.state.openpages,
    });
    console.log('state111111',state)
    const closePage = (value) => {
      console.log("点击关闭页面", value, state.openList);

      state.openList.map((item, key) => {
        if (item.href === value.href) {
          if (state.openList.length === 1) {
            if (state.openList[0].href !== "/learningpath") {
              state.openList.splice(key, 1);
              $router.push({ path: "/learningpath" });
            } else {
              message.destroy();
              return message.warning("至少保留一个页面");
            }
          } else {
            if (value.active) {
              if (key === state.openList.length - 1) {
                $router.push({ path: state.openList[key - 1].href });
              } else {
                $router.push({ path: state.openList[key + 1].href });
              }
            }
            state.openList.splice(key, 1);
          }
        }
      });
      store.commit("chengeOpenpages", state.openList);
    };
    return {
      ...toRefs(state),
      closePage,
    };
  },
};
</script>
<style lang="scss">
.openPages {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
  overflow-x: auto;

  .openItems {
    width: 272px;
    // min-width: 250px;
    height: 50px;
    border: 1px solid #edf2fa;
    border-left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .close {
    width: 50px;
    height: 50px;

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    right: 0px;
  }

  .close:hover {
    background: rgba(220, 220, 220, 1);
  }

  .chosen {
    // background-color: pink;
  }

  .ghost {
    // background-color: red;
    opacity: 0;
  }
}
</style>