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

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

const tags = ref<any>([])

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: '#DEMOSEVER#',
    }))
    provide('__sdk', __sdk)
    __sdk.TagManager.on('loaded', (data: any) =>
      __sdk.TagManager.load((tags.value = data) && tags.value)
    )
    __sdk.mount(`#scene1`).render()
  }
})
onUnmounted(() => {
  const __win = window as any
  if (__win.__sdk) {
    __win.__sdk = null
  }
})
const handleTagview = ({ id }) => {
  console.log('id', id)
}
</script>

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