From 90d27bda59641219750a570a0d470d4043463da9 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Thu, 22 Aug 2024 16:29:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=87=E7=AD=BE=E5=A2=99=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/guide/tagged-wall.md | 11 ++++ src/tagged-wall/tag.tsx | 20 ++++--- src/tagged-wall/tagged-wall.controller.ts | 64 +++++++++++++++++++++++ src/tagged-wall/tagged-wall.tsx | 13 +++-- 4 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 src/tagged-wall/tagged-wall.controller.ts diff --git a/docs/guide/tagged-wall.md b/docs/guide/tagged-wall.md index f0ccf45..adfff24 100644 --- a/docs/guide/tagged-wall.md +++ b/docs/guide/tagged-wall.md @@ -7,13 +7,23 @@ ![效果呈现](../public/img/tagged-wall.png) ## 主要内容 + 标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。 ## 插件 该插件隶属于列表绘制插件（基于列表进行扩展），下方数据导入应用即可使用 +部件参数配置 + +| 名称 | 类型 | 说明 | +| -------------------- | ------- | ------------------------ | +| ENABLEFONTSIZERANDOM | boolean | 字体大小是否为随机 | +| RANDOMFONTSIZERANGE | object | 随机字体大小时的范围参数 {max:16,min:2} | +| DEFAULTFONTSIZE | number | 不随机时默认字号 | + ::: details 点我查看代码 + ```json [ { @@ -24,6 +34,7 @@ } ] ``` + ::: ## 配置 diff --git a/src/tagged-wall/tag.tsx b/src/tagged-wall/tag.tsx index 0434b10..b404522 100644 --- a/src/tagged-wall/tag.tsx +++ b/src/tagged-wall/tag.tsx @@ -1,7 +1,8 @@ -import { computed, defineComponent } from 'vue'; +import { computed, defineComponent, PropType } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import { $RandomColor, $Normal } from './utils'; import './tags.scss'; +import { TaggedWallController } from './tagged-wall.controller'; export const CustomTag = defineComponent({ name: 'CustomTag', @@ -10,17 +11,20 @@ export const CustomTag = defineComponent({ type: String, required: true, }, - bgcolor: { - type: String, - }, - color: { - type: String, + controller: { + type: Object as PropType, + required: true, }, }, - setup() { + setup(props) { const ns = useNamespace('custom-tag'); const setColor = computed(() => $RandomColor()); - const normalSize = computed(() => `${$Normal(16, 8)}px`); + const normalSize = computed(() => { + if (props.controller.enableFontSizeRandom) { + return `${$Normal(props.controller.maxFontSize, props.controller.minFontSize)}px`; + } + return `${props.controller.defaultFontSize}px`; + }); return { ns, diff --git a/src/tagged-wall/tagged-wall.controller.ts b/src/tagged-wall/tagged-wall.controller.ts new file mode 100644 index 0000000..31481be --- /dev/null +++ b/src/tagged-wall/tagged-wall.controller.ts @@ -0,0 +1,64 @@ +import { ListController } from '@ibiz-template/runtime'; +import { isNumber } from 'lodash-es'; + +export class TaggedWallController extends ListController { + /** + * 字体大小是否为随机 + * + * @author fangZhiHao + * @date 2024-08-22 15:08:22 + * @type {boolean} + */ + enableFontSizeRandom: boolean = true; + + /** + * 字体最大字号 + * + * @author fangZhiHao + * @date 2024-08-22 16:08:47 + * @type {number} + */ + maxFontSize: number = 16; + + /** + * 字体最小字号 + * + * @author fangZhiHao + * @date 2024-08-22 16:08:06 + * @type {number} + */ + minFontSize: number = 8; + + /** + * 默认字号 + * + * @author fangZhiHao + * @date 2024-08-22 16:08:51 + * @type {number} + */ + defaultFontSize: number = 16; + + protected async onCreated(): Promise { + await super.onCreated(); + + const { ENABLEFONTSIZERANDOM, RANDOMFONTSIZERANGE, DEFAULTFONTSIZE } = this + .model.controlParam?.ctrlParams as IData; + console.log(ENABLEFONTSIZERANDOM, RANDOMFONTSIZERANGE, DEFAULTFONTSIZE); + if (ENABLEFONTSIZERANDOM) { + this.enableFontSizeRandom = JSON.parse(ENABLEFONTSIZERANDOM); + } + if (RANDOMFONTSIZERANGE) { + const range = JSON.parse(RANDOMFONTSIZERANGE); + const { min, max } = range; + if (isNumber(min)) { + this.minFontSize = min; + } + if (isNumber(max)) { + this.maxFontSize = max; + } + } + if (isNumber(DEFAULTFONTSIZE)) { + this.defaultFontSize = DEFAULTFONTSIZE; + } + } +} diff --git a/src/tagged-wall/tagged-wall.tsx b/src/tagged-wall/tagged-wall.tsx index 1e40cd2..839d4b8 100644 --- a/src/tagged-wall/tagged-wall.tsx +++ b/src/tagged-wall/tagged-wall.tsx @@ -2,10 +2,11 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; import { computed, defineComponent, PropType, ref, watch } from 'vue'; import { IDEList } from '@ibiz/model-core'; -import { IControlProvider, ListController } from '@ibiz-template/runtime'; +import { IControlProvider } from '@ibiz-template/runtime'; import './tagged-wall.scss'; import { $NormalSort, $RandomSplit } from './utils'; import { CustomTag } from './tag'; +import { TaggedWallController } from './tagged-wall.controller'; export const TaggedWall = defineComponent({ name: 'TaggedWall', @@ -37,7 +38,9 @@ export const TaggedWall = defineComponent({ loadDefault: { type: Boolean, default: true }, }, setup() { - const c = useControlController((...args) => new ListController(...args)); + const c = useControlController( + (...args) => new TaggedWallController(...args), + ); const ns = useNamespace(`tagged-wall`); const list = ref([]); const tagList = ref([]); @@ -83,7 +86,11 @@ export const TaggedWall = defineComponent({
{item.map(tag => { return ( - + ); })}
-- Gitee