4dkankan-components/playground/src/App.vue

<script setup lang="ts">
  import { onMounted, VNode } from 'vue';
  import { UIAudio, UIIcon } from '@kankan/components';
  // import { buildProps } from '@kankan/utils';
  // import { h } from 'vue';
  // import * as KanKanSDK from '@kankan/sdk';
  console.log('UI', UIAudio, UIIcon);

  onMounted(async () => {
    const KanKan = (window as any).KanKan;
    const app = new KanKan({
      // dom: '#scene',
      num: 'KJ-JYo2ZZyKKJ',
    });
    app.mount('#scene').render();

    // console.log('TagView', await TagView);
    // const el = h(KKAudio, {
    //   src: 'http://samplelib.com/lib/preview/mp3/sample-3s.mp3',
    // });
    // app.use(KKAudio);

    // console.log('kankan', KKAudio);
    // const res = await kankan.use(KKAudio.render());
    // console.log('11', res);
    app.use('TagEditor');

    const TagView = await app.use('TagView', {
      render: (data: VNode) => {
        console.log('data', data.type);
      },
    });

    TagView.on('click', (event: Event) => {
      console.log('event', event);
      // debugger;
    });
    console.log('1app', app);

    const TagEditor = await app.TagManager.editor.promise();
    console.log('TagEditor', TagEditor);
    // TagEditor.enter();

    console.log('TagView', TagView);
    // .then(function () {
    //   console.log(arguments);
    // });
  });
</script>

<template>
  <div id="scene">
    <KKAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
  </div>
</template>

<style scoped>
  #scene {
    width: 100vw;
    height: 100vh;
  }
</style>