词云 xTextCloud
预览
介绍
密铺词云：left/alphabetic 量盒，宽至少字宽。只横/竖。全端 x-skia-u。
平台兼容
| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|---|---|---|---|---|---|---|---|
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
文件路径
ts
@/uni_modules/tmx-ui/components/x-text-cloud/x-text-cloud.uvue使用
ts
<x-text-cloud></x-text-cloud>Props 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 宽度，px / rpx / % / auto | string | "100%" |
| height | 高度，px / rpx / % | string | "440rpx" |
| backgroundColor | 画布背景色，空或 transparent 为透明 | string | "transparent" |
| list | 词条，按 weight 越大字越大、越靠中心 | Array | () : TEXTCLOUD_ITEM_INFO[] => [] as TEXTCLOUD_ITEM_INFO[] |
| color | 未指定 item.color 时的基准色，会按权重派生多种对比色 | string | "primary" |
| rotate | 朝向：none 全横 / cross 横+竖密铺 | xTextCloudRotate | "cross" |
Events 事件
| 名称 | 参数 | 说明 |
|---|
Slots 插槽
| 名称 | 说明 | 数据 |
|---|
Ref 方法
| 名称 | 参数 | 返回值 | 说明 |
|---|
示例文件路径
json
/pages/zhanshi/text-cloud示例源码
uvue
vue
<template>
<!-- #ifdef MP-WEIXIN -->
<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
<navigation-bar :background-color="xThemeConfigNavBgColor"
:front-color="xThemeConfigNavFontColor"></navigation-bar>
</page-meta>
<!-- #endif -->
<x-sheet>
<x-text font-size="18" class=" text-weight-b mb-8">词云 xTextCloud</x-text>
<x-text color="#999999">密铺咬合：大词当骨架，小词填缝，只横竖。词越多、缝补得越满。</x-text>
</x-sheet>
<x-sheet>
<x-text font-size="16" class=" text-weight-b mb-8">朝向</x-text>
<x-radio-button v-model="rotateId" :list="rotateList" font-size="13" height="40" class="mb-12"></x-radio-button>
<x-text-cloud :list="words" :rotate="rotateId" height="480rpx"></x-text-cloud>
</x-sheet>
<x-sheet>
<x-text font-size="16" class=" text-weight-b mb-8">指定热词颜色</x-text>
<x-text color="#999999" class="mb-12">个别词写 color，其余仍走主题派生。</x-text>
<x-text-cloud :list="colored" rotate="cross" height="480rpx" color="success"></x-text-cloud>
</x-sheet>
<view class="py-32"></view>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { TEXTCLOUD_ITEM_INFO, RADIO_BUTTON } from "@/uni_modules/tmx-ui/interface.uts"
type xTextCloudRotate = "none" | "cross"
const rotateId = ref<xTextCloudRotate>("cross")
const rotateList = [
{ id: "none", title: "横排" } as RADIO_BUTTON,
{ id: "cross", title: "纵横" } as RADIO_BUTTON
] as RADIO_BUTTON[]
const words = [
{ text: "设计", weight: 100 },
{ text: "体验", weight: 88 },
{ text: "灵感", weight: 80 },
{ text: "品牌", weight: 74 },
{ text: "创意", weight: 70 },
{ text: "交互", weight: 66 },
{ text: "视觉", weight: 62 },
{ text: "产品", weight: 58 },
{ text: "用户", weight: 54 },
{ text: "趋势", weight: 50 },
{ text: "色彩", weight: 46 },
{ text: "动效", weight: 44 },
{ text: "布局", weight: 40 },
{ text: "组件", weight: 38 },
{ text: "数据", weight: 36 },
{ text: "流畅", weight: 34 },
{ text: "细节", weight: 32 },
{ text: "质感", weight: 30 },
{ text: "简洁", weight: 28 },
{ text: "高级", weight: 26 },
{ text: "克制", weight: 24 },
{ text: "留白", weight: 22 },
{ text: "层次", weight: 22 },
{ text: "节奏", weight: 20 },
{ text: "对比", weight: 20 },
{ text: "平衡", weight: 18 },
{ text: "焦点", weight: 18 },
{ text: "网格", weight: 16 },
{ text: "字体", weight: 16 },
{ text: "图标", weight: 15 },
{ text: "阴影", weight: 14 },
{ text: "圆角", weight: 14 },
{ text: "渐变", weight: 13 },
{ text: "暗黑", weight: 13 },
{ text: "主题", weight: 12 },
{ text: "响应", weight: 12 },
{ text: "适配", weight: 11 },
{ text: "性能", weight: 11 },
{ text: "无障碍", weight: 10 },
{ text: "反馈", weight: 10 },
{ text: "手势", weight: 9 },
{ text: "导航", weight: 9 },
{ text: "卡片", weight: 8 },
{ text: "列表", weight: 8 },
{ text: "搜索", weight: 7 },
{ text: "标签", weight: 7 },
{ text: "空态", weight: 6 },
{ text: "骨架", weight: 6 },
{ text: "加载", weight: 5 },
{ text: "缓存", weight: 5 },
{ text: "刷新", weight: 5 },
{ text: "分页", weight: 4 },
{ text: "筛选", weight: 4 },
{ text: "排序", weight: 4 },
{ text: "置顶", weight: 4 },
{ text: "草稿", weight: 3 },
{ text: "发布", weight: 3 },
{ text: "预览", weight: 3 },
{ text: "复制", weight: 3 },
{ text: "撤销", weight: 3 },
{ text: "重做", weight: 3 },
{ text: "缩放", weight: 3 },
{ text: "吸附", weight: 3 },
{ text: "参考线", weight: 3 },
{ text: "图层", weight: 3 },
{ text: "蒙版", weight: 2 },
{ text: "描边", weight: 2 },
{ text: "填充", weight: 2 },
{ text: "对齐", weight: 2 },
{ text: "分布", weight: 2 },
{ text: "编组", weight: 2 },
{ text: "锁定", weight: 2 },
{ text: "隐藏", weight: 2 },
{ text: "导出", weight: 2 },
{ text: "切片", weight: 2 },
{ text: "标注", weight: 2 }
] as TEXTCLOUD_ITEM_INFO[]
const colored = [
{ text: "热销", weight: 96, color: "error" },
{ text: "新品", weight: 80, color: "warn" },
{ text: "口碑", weight: 72, color: "success" },
{ text: "限时", weight: 64, color: "error" },
{ text: "品质", weight: 58 },
{ text: "好评", weight: 50 },
{ text: "推荐", weight: 46 },
{ text: "精选", weight: 42 },
{ text: "优惠", weight: 38, color: "warn" },
{ text: "包邮", weight: 34 },
{ text: "现货", weight: 30 },
{ text: "爆款", weight: 28, color: "error" },
{ text: "套装", weight: 24 },
{ text: "礼盒", weight: 22 },
{ text: "会员", weight: 20 },
{ text: "积分", weight: 16 },
{ text: "评价", weight: 14 },
{ text: "收藏", weight: 12 },
{ text: "分享", weight: 10 },
{ text: "对比", weight: 8 },
{ text: "加购", weight: 8 },
{ text: "预售", weight: 7 },
{ text: "拼团", weight: 7 },
{ text: "秒杀", weight: 7, color: "error" },
{ text: "满减", weight: 6 },
{ text: "券", weight: 6 },
{ text: "折扣", weight: 6 },
{ text: "赠品", weight: 5 },
{ text: "试用", weight: 5 },
{ text: "晒单", weight: 5 },
{ text: "回购", weight: 5 },
{ text: "好穿", weight: 4 },
{ text: "好用", weight: 4 },
{ text: "正品", weight: 4 },
{ text: "发货", weight: 4 },
{ text: "物流", weight: 4 },
{ text: "售后", weight: 3 },
{ text: "客服", weight: 3 },
{ text: "尺码", weight: 3 },
{ text: "颜色", weight: 3 },
{ text: "库存", weight: 3 },
{ text: "浏览", weight: 3 },
{ text: "足迹", weight: 3 },
{ text: "想要", weight: 2 },
{ text: "问大家", weight: 2 },
{ text: "种草", weight: 2 },
{ text: "测评", weight: 2 },
{ text: "清单", weight: 2 },
{ text: "搭配", weight: 2 },
{ text: "同款", weight: 2 },
{ text: "旗舰", weight: 2 },
{ text: "官方", weight: 2 },
{ text: "认证", weight: 2 },
{ text: "包退", weight: 2 },
{ text: "质保", weight: 2 },
{ text: "运费", weight: 2 },
{ text: "到付", weight: 2 },
{ text: "自提", weight: 2 },
{ text: "预约", weight: 2 },
{ text: "直播", weight: 2 },
{ text: "短视频", weight: 2 },
{ text: "详情", weight: 1 },
{ text: "参数", weight: 1 },
{ text: "规格", weight: 1 },
{ text: "服务", weight: 1 },
{ text: "保障", weight: 1 },
{ text: "发票", weight: 1 },
{ text: "分期", weight: 1 },
{ text: "免息", weight: 1 }
] as TEXTCLOUD_ITEM_INFO[]
</script>
<style lang="scss">
</style>