4dkankan-components/docs/examples/tag/basic.vue

<script setup lang="ts">
import { onMounted, onUnmounted, provide, ref, unref } from 'vue'
import { UITag } from 'kankan-components'

const tags = ref<any>([])

onMounted(() => {
    console.warn('onMounted')
    const __win = window as any
    if (!__win.__sdk) {
        const __sdk = (__win.__sdk = new __win.KanKan({
            num: 'KJ-t-wOXfx2SDFy',
            // server: 'https://test.4dkankan.com',
            server: '/demoServer',
        }))
        provide('__sdk', __sdk)

        __sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
        __sdk.mount('#scene').render()
    }
})
onUnmounted(() => {
    const __win = window as any
    console.warn('onUnmounted')
    if (__win.__sdk) {
        __win.__sdk = null
        location.reload()
    }
})
const handleTagview = ({ id }) => {
    console.log('id', id)
}
</script>

<template>
    <div id="scene" class="scene">
        <Teleport v-if="tags.length > 0" to=".kankan-plugins">
            <div xui_tags_view>
                <UITag v-for="(item, index) in tags" :key="index" :tag="item" @click="handleTagview" />
            </div>
            <!-- <div xui_tags_view>
        <UITag v-for="(item, index) in tags" :key="index" :tag="item">
          <template #content="{ data, id, isClick, isShow, x, y }">
            <div>id:{{ id }}</div>
            <div>isClick:{{ isClick }}</div>
            <div>isShow:{{ isShow }}</div>
            <div>x:{{ x }}</div>
            <div>y:{{ y }}</div>
          </template>
        </UITag>
      </div> -->
        </Teleport>
    </div>
</template>
<style>
html,
body,
#app {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.scene {
    width: 100%;
    height: 600px;
    padding: 0;
    margin: 0;
}
</style>