修复:启用评论组件
This commit is contained in:
56
docs/.vitepress/theme/components/WordCloud.vue
Normal file
56
docs/.vitepress/theme/components/WordCloud.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div id="wordcloud-container"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, toRefs, onBeforeUnmount, watch } from 'vue'
|
||||
import { WordCloud, G2 } from '@antv/g2plot'
|
||||
import { debounce, useDark } from '@pureadmin/utils'
|
||||
|
||||
// 定义属性
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 渲染WordCloud
|
||||
const theme = G2.getTheme('dark')
|
||||
G2.registerTheme('customize-dark', {
|
||||
...theme,
|
||||
background: 'transparent',
|
||||
})
|
||||
|
||||
const { isDark } = useDark()
|
||||
let wordCloud
|
||||
debounce(() => {
|
||||
wordCloud = new WordCloud("wordcloud-container", {
|
||||
data: props.dataList,
|
||||
wordField: 'name',
|
||||
weightField: 'value',
|
||||
colorField: 'name',
|
||||
wordStyle: {
|
||||
fontFamily: 'Verdana',
|
||||
fontSize: [14, 35],
|
||||
rotation: 0,
|
||||
},
|
||||
theme: isDark.value ? 'customize-dark' : 'light',
|
||||
// 返回值设置成一个 [0, 1) 区间内的值,
|
||||
// 可以让每次渲染的位置相同(前提是每次的宽高一致)。
|
||||
random: () => 0.5,
|
||||
})
|
||||
wordCloud.render()
|
||||
}, 20)()
|
||||
|
||||
watch(isDark, (value) => {
|
||||
value
|
||||
? wordCloud?.update({ theme: 'customize-dark' })
|
||||
: wordCloud?.update({ theme: 'light' })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
wordCloud.destroy()
|
||||
})
|
||||
</script>
|
Reference in New Issue
Block a user