这是一个用于演示如何归类加载Flash的站点示例，效果如下：

部分源码如下：

<script setup lang="ts">
import FlashPlayer from './components/FlashPlayer.vue'
import {NSplit} from "naive-ui";
import {ref} from "vue";
import Category from "./components/Category.vue";


let player = ref<any>(null)
let flashPlayerCoverVisile = ref(false);

function dragStartHandler() {
  flashPlayerCoverVisile.value = true;
}

function dragEndHandler() {
  flashPlayerCoverVisile.value = false;
}

function selectedSwfHandler(option: any) {
  player.value.play(option.path);
}

</script>

<template>
  <n-split direction="horizontal" style="height: 100%;width:100%"
           default-size="260px"
           min="220px"
           max="500px"
           @drag-end="dragEndHandler"
           @drag-start="dragStartHandler">
    <template #1>
      <Category style="width: 100%;height: 100%" @selected-swf="selectedSwfHandler"/>
    </template>
    <template #2>
      <div style="position: relative;width: 100%;height: 100%;overflow: hidden">
        <FlashPlayer style="width: 100%;height: 100%" ref="player"/>
        <div v-if="flashPlayerCoverVisile"
             style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0,0,0,0.3)">
        </div>
      </div>
    </template>
  </n-split>

</template>

<style scoped>
</style>