diff --git a/docs/guide/custom-image-search-box.md b/docs/guide/custom-image-search-box.md index 359b394b4c7d1fd86e5d12e082a4132f993c6cbc..56b5f0f8113768f8e632d581013512564044b3d5 100644 --- a/docs/guide/custom-image-search-box.md +++ b/docs/guide/custom-image-search-box.md @@ -1,21 +1,33 @@ # 图片搜索框 -图片搜索框为搜索框呈现模式,自定义编辑器样式的一种增强，要达到该目标，需要在编辑器上绑定插件。 +图片搜索框为搜索框呈现模式，主要应用与需要自定义背景的搜索框。 + ## 效果呈现 ![效果呈现](../public/img/custom-image-search-box.png) -## 插件 +## 配置 该插件隶属于自定义编辑器插件（基于自定义编辑器进行扩展），下方数据导入应用即可使用 -成员参数配置 +::: details 点我查看代码 -| 名称 | 类型 | 说明 | -| ----------- | ------ | -------------- | -| PLACEHOLDER | string | 输入框占位提示 | +编辑器样式 -::: details 点我查看代码 +```json +[ + { + "codename": "CUSTOM_IMAGE_SEARCH_BOX", + "pssyspfpluginid": "UsrPFPlugin0815614534", + "repdefault": 0, + "validflag": 1, + "pssyseditorstylename": "自定义图片搜索框", + "pseditortypeid": "RAW" + } +] +``` + +编辑器插件 ```json [ @@ -30,8 +42,21 @@ ::: -## 配置 - -图片搜索框插件配置 +插件配置截图 ![配置](../public/img/custom-image-search-box_config.png) + +编辑器样式 + +![配置](../public/img/custom-image-search-box_configStyle.png) + +## 功能说明 + +- 支持自定义图片输入框背景 +- 支持占位提示配置 + +## 参数说明 （成员参数配置） + +| 名称 | 类型 | 说明 | 默认值 | +| ----------- | ------ | -------------- | ------ | +| PLACEHOLDER | string | 输入框占位提示 | ' ' | diff --git a/docs/guide/screen-portlet-real-time.md b/docs/guide/screen-portlet-real-time.md index 97f3ce8c6f0a82584cb128c6a6b9c385fc318158..18625fe6fdd648d24d7efe35719559ed03c46917 100644 --- a/docs/guide/screen-portlet-real-time.md +++ b/docs/guide/screen-portlet-real-time.md @@ -1,6 +1,6 @@ # 门户实时时间 -大屏门户实时时间为大屏时间呈现模式，自定义门户部件的一种增强，要达到该目标，需要在门户部件上绑定插件，然后设置参数。 +大屏实时时间为大屏时间呈现模式，主要用于在页面中展示实时时间。 ## 效果呈现 @@ -10,13 +10,10 @@ 该插件隶属于自定义部件绘制插件（基于门户部件进行扩展），下方数据导入应用即可使用 -成员参数配置 -| 属性名 | 描述 | 类型 | 默认值 | -| -------- | -------------- | ------ | ------------------------ | -| VALUEFORMAT | 时间格式化参数 | string | YYYY-MM-DD,week,HH:mm:ss | - ::: details 点我查看代码 +部件插件 + ```json [ { @@ -30,8 +27,17 @@ ::: -## 配置 - -大屏门户插件配置 +插件配置截图 ![配置](../public/img/screen-portlet-real-time_config.png) + +## 功能说明 + +- 支持实时时间展示 +- 时间展示自定义格式 + +## 参数说明 (成员参数配置) + +| 属性名 | 描述 | 类型 | 默认值 | +| ----------- | -------------- | ------ | ------------------------ | +| VALUEFORMAT | 时间格式化参数 | string | YYYY-MM-DD,week,HH:mm:ss | diff --git a/docs/guide/screen-radio-list.md b/docs/guide/screen-radio-list.md index 808d09c90fa8cfdc38fbdbe176c9317b61bf6339..a7b909d825367c3739c38a069ab95d10e5c0ee8e 100644 --- a/docs/guide/screen-radio-list.md +++ b/docs/guide/screen-radio-list.md @@ -1,24 +1,19 @@ # 大屏循环单选列表 -循环单选列表为大屏单选项列表呈现模式，单选项列表的一种增强，要达到该目标，需要在单选项列表编辑器上绑定编辑器样式，然后设置编辑器参数。 +循环单选列表为大屏单选项列表呈现模式，主要应用在页面中需要循环切换的场景。 ## 效果呈现 ![效果呈现](../public/img/screen-radio-list.png) -## 编辑器参数配置 - -| 属性名 | 描述 | 类型 | 默认值 | -| --------------- | ------------ | ------- | ------ | -| ENABLECIRCULATE | 是否开启循环 | boolean | true | -| INTERVALTIME | 循环间隔 | number | 3000 | - -## 插件 +## 配置 该插件隶属于编辑器样式（基于单选项列表进行扩展），下方数据导入应用即可使用 ::: details 点我查看代码 +编辑器样式 + ```json [ { @@ -33,8 +28,17 @@ ::: -## 配置 - -大屏门户插件配置 +编辑器样式 ![配置](../public/img/screen-radio-list_config.png) + +## 功能说明 + +- 支持循环切换选项 + +## 参数说明（编辑器参数配置） + +| 属性名 | 描述 | 类型 | 默认值 | +| --------------- | ------------ | ------- | ------ | +| ENABLECIRCULATE | 是否开启循环 | boolean | true | +| INTERVALTIME | 循环间隔 | number | 3000 | diff --git a/docs/guide/screen-real-time.md b/docs/guide/screen-real-time.md index 26ced1b47009846be28fc1332f45af0057dd2587..6f6c96515efaf7ef4b39e6a65c15e071a0f87a5e 100644 --- a/docs/guide/screen-real-time.md +++ b/docs/guide/screen-real-time.md @@ -1,26 +1,19 @@ # 大屏实时时间 -大屏实时时间为大屏时间呈现模式，标签的一种增强，要达到该目标，需要在标签编辑器上绑定编辑器样式，然后设置编辑器参数。 +大屏实时时间为大屏时间呈现模式，主要用于在页面中展示实时时间。 ## 效果呈现 ![效果呈现](../public/img/screen-real-time.png) -## 编辑器参数配置 - -| 属性名 | 描述 | 类型 | 默认值 | -| -------- | -------------- | ------ | ------------------------ | -| 值格式化 | 时间格式化参数 | string | YYYY-MM-DD,week,HH:mm:ss | - - -![配置](../public/img/screen-real-time_params.png) - -## 插件 +## 配置 该插件隶属于编辑器样式（基于标签进行扩展），下方数据导入应用即可使用 ::: details 点我查看代码 +编辑器样式 + ```json [ { @@ -35,8 +28,19 @@ ::: -## 配置 - -大屏门户插件配置 +编辑器样式 ![配置](../public/img/screen-real-time_config.png) + +## 功能说明 + +- 支持实时时间展示 +- 时间展示自定义格式 + +## 参数说明 （编辑器参数配置） + +| 属性名 | 描述 | 类型 | 默认值 | +| -------- | -------------- | ------ | ------------------------ | +| 值格式化 | 时间格式化参数 | string | YYYY-MM-DD,week,HH:mm:ss | + +![配置](../public/img/screen-real-time_params.png) diff --git a/docs/guide/tagged-wall.md b/docs/guide/tagged-wall.md index b1198c283d3ca40d49ef40ed6f523740ee8951a1..81439282ec9fd162e1d8c4b56b970255c3e32ea1 100644 --- a/docs/guide/tagged-wall.md +++ b/docs/guide/tagged-wall.md @@ -6,25 +6,14 @@ ![效果呈现](../public/img/tagged-wall.png) -## 主要内容 - -标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。 - -## 插件 +## 配置 该插件隶属于列表绘制插件（基于列表进行扩展），下方数据导入应用即可使用 -部件参数配置 - -| 名称 | 类型 | 说明 | -| -------------------- | ------- | ------------------------ | -| ENABLEFONTSIZERANDOM | boolean | 字体大小是否为随机 | -| RANDOMFONTSIZERANGE | object | 随机字体大小时的范围参数 {max:16,min:2} | -| DEFAULTFONTSIZE | number | 不随机时默认字号 | -| CUSTOMCOLORGROUP | string[] | 自定义字体颜色组 | - ::: details 点我查看代码 +列表插件 + ```json [ { @@ -38,8 +27,19 @@ ::: -## 配置 - -大屏门户插件配置 +插件配置截图 ![配置](../public/img/tagged-wall_config.png) + +## 说明 + +标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。 + +## 参数说明 (部件参数配置) + +| 名称 | 类型 | 说明 | 默认值 | +| -------------------- | -------- | ------------------------ | ------------------- | +| ENABLEFONTSIZERANDOM | boolean | 字体大小是否为随机 | true | +| RANDOMFONTSIZERANGE | object | 随机字体大小时的范围参数 | 最大值：16，最小值2 | +| DEFAULTFONTSIZE | number | 不随机时默认字号 | 16 | +| CUSTOMCOLORGROUP | string[] | 自定义字体颜色组 | [] | diff --git a/docs/public/img/custom-image-search-box_configStyle.png b/docs/public/img/custom-image-search-box_configStyle.png new file mode 100644 index 0000000000000000000000000000000000000000..40bc6ecd9e8de7e42c21ab74de379414ce06cc77 Binary files /dev/null and b/docs/public/img/custom-image-search-box_configStyle.png differ diff --git a/src/custom-image-search-box/custom-image-search-box.tsx b/src/custom-image-search-box/custom-image-search-box.tsx index fe871b8cb4c5325e43094d65d958fd30178560c7..223e5a7105e5dbcc1fce27a43b93fa5a465f8fc7 100644 --- a/src/custom-image-search-box/custom-image-search-box.tsx +++ b/src/custom-image-search-box/custom-image-search-box.tsx @@ -27,11 +27,19 @@ export const CustomImageSearchBox = defineComponent({ } }; + // 处理键盘事件 + const handleKeyUp = (e: KeyboardEvent) => { + if (e && e.code === 'Enter') { + onSearch(); + } + }; + return { c, ns, searchValue, onSearch, + handleKeyUp, }; }, render() { @@ -58,6 +66,7 @@ export const CustomImageSearchBox = defineComponent({ name='search' /> } + onKeyup={this.handleKeyUp} > );