动态表单元素

相关说明

在日常开发中，经常需要使用动态表单元素来收集、提交表单数据。我们为您写好了基础代码，您可以在其基础上做出更丰富、更复杂的动态表单~ 原理 : 利用 v-model 动态记录数据进行后续操作及提交;

兼容平台

完整代码

分步提交

相关说明

当表单元素数量较大时，我可以将表单进行分步处理，GraceUI 为您准备好了这样的架构，您可以在此基础上根据自己的项目情况快速实现表单的分步及提交~使用 v-model 记录输入数据，数据统一记录在 formData 变量内，提交和校验都使用此数据;在步骤切换时可以利用 formData 变量进行数据验证;

兼容平台

演示代码

步进器

组件名称

gui-step-box : /graceUI/组件目录/gui-step-box

兼容平台

组件属性

演示代码

数字键盘

组件名称

gui-number-keyboard : /graceUI/组件目录/gui-number-keyboard

兼容平台

组件属性

组件函数

组件事件

演示代码

车牌键盘

组件介绍

车牌号码专用输入键盘，兼顾新能源车牌号码。

组件名称

gui-car-number : /graceUI/组件目录/gui-car-number

组件事件

@confirm 客户点击确定按钮时触发，携带参数 : 车牌号码

2022.01.10 新增事件 @open 键盘打开 @close 键盘关闭

组件函数

setType(carType) : 切换类型， 0 - 普通 1 - 新能源 setVal(carNumber) : 设置默认车牌号

兼容平台

演示代码

滑动解锁

组件名称

gui-slide-to-unlock : /graceUI/组件目录/gui-slide-to-unlock

兼容平台

组件属性

演示代码

进度滑块

组件名称

gui-single-slider : /graceUI/组件目录/gui-single-slider

兼容平台

组件属性

组件方法

setProgress : 设置组件默认进度, 参数 : 0 - 100 间的整数;

组件事件

@change : 组件进度发生变化时触发，携带参数 : 进度值；

演示代码

区间滑块

组件名称

gui-interval-slider : /graceUI/组件目录/gui-interval-slider

兼容平台

组件属性

组件事件

滑块滑动触发 change 事件，返回滑块值，数组形式 : [ 区间左值, 区间右值 ]

演示代码

功能标签

组件介绍

gui-stags 功能标签组件基于标签形式实现标签的选择和删除功能；

组件名称

gui-stags : /graceUI/组件目录/gui-stags

兼容平台

组件属性

组件事件

change : 组件数据变化时触发，携带数据: 01 单选 : 有选中的项目 : {选中项目的数据 }, {标签数据}； 无选中的项目 : -1, {标签数据}

02 多选 : [ 数组形式的多选项目的索引], {标签数据};

03 删除 : 删除后新的 [ 标签数据 ];

演示代码

点选组件

组件介绍

gui-radio 点选组件区别于原生的 radio，样式更自由，用于单个选择；

组件名称

gui-radio : /graceUI/组件目录/gui-radio

兼容平台

组件属性

演示代码

日历组件

组件名称

gui-calendar : /graceUI/组件目录/gui-calendar

兼容平台

组件属性

组件事件

@changeDate : 日期选择时触发，携带数据 当前日期 @confirm : 点击确定按钮时触发，携带数据 当前日期 [ 2021.08.02 新增事件 ]

演示代码

日期区间

组件名称

gui-date-between : /graceUI/组件目录/gui-date-between

组件介绍

graceDateBetween 以日历形式来实现日期区间的选择功能。 通过属性设置您可以实现 : 选中区域背景色调整、展示月份数量调整等多种功能 。

组件事件

selectDate : 区间选择变化时激活的事件，携带数据 [[起始日期, 结束日期], 总天数]。

组件方法

setMonth()

功能 : 设置组件展示的起始月份 参数 : 有效的月份，格式 2020年05月 或者 2020-05

1. setBetween

功能 : 设置默认区间 参数 : [ 默认起始日期, 默认结束日志 ]，请严格遵守格式 : [ 20200501, 20200522 ]

演示代码

日期时间选择器

组件名称

gui-datetime : /graceUI/组件目录/gui-datetime

功能介绍

gui-datetime 组件以 picker-view 形式来实现日期时间的选择工作，具备以下特色 :

1. 选择器展示、关闭封装在组件内，不需要开发者实现，调用更方便;

2. 自动识别对应年份对应月份应有的天数（如 : 自动计算某年2月份应用的天数）;

组件属性

会触发的事件

修改默认值

组件插槽

演示代码

时间段选择

组件名称

gui-datetime-between : /graceUI/组件目录/gui-datetime-between

功能描述

GraceUI 日期时间区间选择组件以 picker-view 为基础实现，可以方便地完成时间段的选择功能;

组件属性

触发事件

组件插槽

演示代码

日程日历

组件介绍

带有日程安排、提醒的日历组件。

组件名称

gui-schedule : /graceUI/组件目录/gui-schedule

兼容平台

组件属性

组件事件

01 scheduleTap : 日程项目被点击时触发，携带参数 : 被点击项目的索引; 02 chooseDate : 点击具体日期时触发，携带参数 : 选中的日期信息; 03 selectDate : 用户点击日期 picker 并确认选择日期后触发，携带参数 : 选中的日期信息; 04 gotoToday : 用户点击返回今天按钮时触发，携带参数 : 今天对应的日期信息;

演示代码

注意 : 请使用 v-if/wx:if 等待api加载完成后再创建组件，详见项目的演示代码 (:

横向日历

布局介绍

GraceUI 横向日历由滚动区域 + 列表组件组合而成，适用于日期、行程类应用界面；非组件布局模式，更灵活。

兼容平台

完整代码

文章列表

组件说明

内部使用 gui-image 组件完美实现图片的兼容和加载效果；如果组件属性不能满足您的项目需求，请复制此组件命名为自己的组件进行改进 ；演示代码演示了最基础用法，更复杂的应用演示见左侧手册文章列表相关；

组件名称

gui-article-list : /graceUI/组件目录/gui-article-list

兼容平台

组件属性

演示代码

文章列表实战演示

演示介绍

利用 页面组件 + 切换导航 + 文章列表 + 刷新组件 + 加载组件 完成布局；点击分类切换对应的文章列表数据模式 ( 运行效率较高 )，选项卡模式见左侧手册；完整的实现了文章列表页面布局、刷新、加载、分类切换等功能；

兼容平台

完整代码

文章列表选项卡

相关介绍

1、使用页面组件+切换导航组件+轮播组件+滚动区域组合实现； 2、完整的刷新、加载、分类切换逻辑； 3、基于滚动区域的模拟形式的刷新及加载； 4、请参考演示数据的逻辑连接自己的后端 api 获取数据；

兼容平台

重要说明

此页面基于轮播 + 滚动区域 + 文章列表组件实现，在低端机上有可能因为以下原因造成页面卡顿，我们也与官方沟通过此类情况，总结如下 :

1. 图片过大并且数量较多，解决方案 : 后端压缩图片尺寸（与uni-app 官方沟通、验证过）；

2. nvue 端即便使用 list cell 依旧不能解决安卓低端机器卡顿问题，请使用 vue 版本实现（ uni-app 底层对图片组件进行了改进存在渲染问题 ）；

3. 如果图片左右布局请使用 列表组件来代替此页面的 文章列表 组件；

4. 卡顿现象多出现于 app 顿，小程序端运行良好；

演示代码

内容编辑器组件

组件介绍

gui-content-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用，具备以下特色 :

1. 体验较好、功能丰富、全端兼容；

2. 内容选项可以删除、排序；

3. 以数组形式收集编辑器数据，可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;

4. 配套提供数据对应的解析器，用于展示编辑器产生的文章数据，体验更好；

组件名称

gui-content-editor : GraceUI 组件目录/gui-content-editor.vue

组件事件

@deleteImage 删除已上传图片时触发，携带参数 : 图片路径。

兼容平台

上传后端返回值格式

使用说明

编辑器默认值赋值方式在演示代码 mounted() 处，请参考后用于文章编辑功能； 采用提交时上传图片方式，上传代码在演示代码中已经写好； 上传图片时采用一次一个循环上传的方式进行上传； 我们已经为大家写好了基于 php 和 go 语言的后端源码，请加入 GraceUI 付费用户 QQ 群，进入群文件进行下载。

演示代码

编辑器组件

此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧 内容编辑器 组件。

组件介绍

gui-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用，具备以下特色 :

1. 体验较好、功能丰富、全端兼容；

2. 内容选项可以删除、排序；

3. 以数组形式收集编辑器数据，可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;

4. 配套提供数据对应的解析器，用于展示编辑器产生的文章数据，体验更好；

组件名称

gui-editor : /graceUI/组件目录/gui-editor

兼容平台

上传后端返回值格式

使用说明

编辑器默认值赋值方式在演示代码 onload 函数内，请参考后用于文章编辑功能；才有提交时上传图片方式，上传代码在演示代码中已经写好；上传图片时才有一次一个循环上传的方式进行上传，后端接收代码 php 版本 示例 :

建议 : 写一个简单的单图上传功能，调试接口返回值，保证接口无误再使用组件;

演示代码

将编辑器内容转换为HTML

转换介绍

说明 : 此功能为旧版本，仅为老用户保留，新的转换源码（ php 和 go 语言 ）请加入 GraceUI 付费用户群获取。

1. 此页面以 php 为例 [ 其他后端语言原理类似 ]，演示了如何将 GraceUI 编辑器产生的项目转换为 html 内容，最终保存至数据库内；

2. 项目实际使用流程 :

02.1 前端提交内容 : 前端编辑器产生内容项目 > 转换为 Json 格式发送给后端 api > 后端将其转换为 html 保存至数据库 ( 可以直接赋值给 ueditor 编辑器进行编辑 ) ; 02.2 后端提交内容 后端使用编辑器 ( 如 : ueditor ) 生成内容 > 使用我们提供的 解析器 ( http://www.graceui.com/v5/info/10101-100.html ) 解析给前端进行内容展示；

php 版本演示代码

5.0内容渲染组件

组件介绍

gui-content-render [ 内容解析组件 ] 功能包括 : 1、解析 GraceUI 编辑器产生的内容; 2、经过转换( 我们提供 php 和 go 语言版本的转换代码 ) 可以适配各类网页编辑器，如 ：UEditor 生成的 html 内容; 3、提供图片预览功能、样式更好看，基于原生组件渲染，效率更高;

组件名称

gui-content-render : GraceUI 组件目录/gui-content-render.vue

兼容平台

组件属性

为什么使用此组件

1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件; 2、webview : 交互困难，页面无法使用其他组件，效率较低、效果不好; 3、本组件基于原生组件渲染，效率更高。

项目数据结构

[{“type”:“txt”,“content”:““},……]

支持的类型

p - 普通文本

center - 居中

img - 图片

blockquote - 引用

pre - 代码块

strong - 加粗

a - 链接

hr - 分隔线 [ 编辑器对应 hr 标签 ] h1 ~ h6 video 视频

转换思路

我们提供了 php 和 go 语言版本的完整的配套后端源码，请在GraceUI 付费用户群内下载 ~

演示代码

文章详情

此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧 内容渲染 组件。

组件介绍

gui-article-info [ 文章内容解析组件 ] 功能包括 : 1、解析 GraceUI 编辑器产生的内容; 2、经过转换( 我们提供 php 版本的转换代码 ) 可以适配 百度 UEditor 生成的 html 内容; 3、提供图片预览功能、样式更好看;

组件名称

gui-article-info : /graceUI/组件目录/gui-article-info

兼容平台

组件属性

为什么使用此组件

1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件; 2、webview : 交互困难，页面无法使用其他组件; 3、效率较低、效果不好!

项目数据结构

[{“type”:“txt”,“content”:““},……]

支持的类型

txt - 普通文本

center - 居中

img - 图片

quote - 引用

pre - 代码块

strong - 加粗

link - 链接

spline - 分隔线 [ 编辑器对应 hr 标签 ] h1 ~ h6 2021.07.12 新增 video 2021.10.08 新增

转换思路

我们提供了 php 版本的 基于“百度 UEditor“ 生成内容的转换代码，请在GraceUI 付费用户群内下载 ~

演示代码

富文本

相关说明

本页面核心目的是演示将及字符串转换为数组，以满足 uni-app 原生 rich-text 组件的数据需要； 页面需要引入 : parserHTML.js var parserHtml = require(“@/GraceUI5/js/parserHTML.js”);

兼容平台

一些问题

因 uni-app 提供的 rich-text 组件底层存在一下缺点 :

1. 兼容性较差, nvue 端存在问题较多；

2. 对于编辑器生成的 html 解析效率不高，复杂 dom 解析效果不好；

解决建议

使用 GraceUI 提供的编辑器及解析器完成文章相关工作；通过 uni-app 插件市场发现更多更好用的富文本插件，网址 :

https://ext.dcloud.net.cn/search?q=parse

演示代码

展开阅读

组件名称

gui-spread : /graceUI/组件目录/gui-spread

功能描述

可配置限制高度，组件自动完成点击展开功能;

组件属性

兼容平台

演示代码

评论布局

布局介绍

GaceUI 为您提供了评论列表样式，您可以通过基础样式组合出多种模式的评论列表效果;

兼容平台

样式说明

演示代码

评论提交

组件介绍

底部弹出形式的评论提交组件，包含 at、内容、图片信息;

组件名称

gui-submit-comment : /graceUI/组件目录/gui-submit-comment

兼容平台

组件属性

重要说明

组件方法

组件事件

演示代码

文章分享

布局介绍

利用弹出层组件 + 宫格布局完成布局。 H5 端预览 : 请下载源码内的图片，部署到自己的服务，然后替换自己的图片地址；

兼容平台

布局代码

音乐播放器

组件名称

gui-audio-player : /graceUI/组件目录/gui-audio-player

功能介绍

基于背景音乐api封装的音乐播放器，提供音乐播放、暂停、进度展示、进度选择、列表播放、单曲循环等常用的音乐播放功能； 请使用真机调试体验效果~

兼容平台

组件属性

兼容性说明

因 H5 端不支持背景音乐 api，故本组件不支持 h5 端;因 nvue 端不支持音乐文件长度获取，故本组件暂不发布 weex 版本（ weex 项目请使用 .vue 完成此功能）;

权限说明

请仔细阅读权限相关要求，被在对应平台完成配置工作 :

1. uni-app 资料 https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager

2. 微信小程序资料 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes

微信小程序权限添加示例

扩展说明

播放器组件涉及的样式较多，且不同项目要求不一样，我们无法把他们都封装为属性。所以我们为您提供了完善的基础功能，我们建议您自己根据项目要求对组件进行二次开发! 开发流程 : 01 复制 gui-audio-player 组件文件 > 02 改成自己的文件 > 03 改进组件 > 04 调用自己修改过的组件;

演示代码

视频播放

演示介绍

本页面以课程为例，展示了视频组件的用法， 包含以下功能 : 1 课程描述与课程目录切换;

2 点击视频列表实现视频的切换与播放;

3 切换播放章节时对应更新头部标题信息;

兼容平台

演示代码

地图标注

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分 （ 尤其是注意事项部分 ）。 手册地址 : https://uniapp.dcloud.io/component/map

经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

坐标拾取

坐标拾取工具 ( 可以手动获取某个地点的坐标 )

https://lbs.qq.com/tool/getpoint/index.html

1. 利用后端语言开发一套 api 动态获取一个具体位置的坐标， 后端代码 php 版本请在 GraceUI 已付费用户群群文件获取。

定位图标

请 GraceUI 已付费用户群群文件 下载定位图标并将其部署到 /static/ 目录下, /static/location.png

示例说明

示例代码演示了搜索一个具体位置并在地图上进行标注；示例代码演示了点击标注点后使用第三方导航的功能；示例代码小程序端运行时请 “打开调试”;演示获取当前位置信息方法；演示详细位置到坐标的转换；演示根据精度纬度获取详细地址；需要打包生效 ( 建议使用 vue 完成地图功能页面 )；

微信小程序权限配置演示

完整代码

地图周边

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分 （ 尤其是注意事项部分 ）。 手册地址 : https://uniapp.dcloud.io/component/map 经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

功能介绍

获取当前位置；根据当前位置获取周边 1000 米内的兴趣位置信息；

注意 : nvue 模式需要打包生效，建议使用 vue 完成地图功能页面；

定位图标

请 GraceUI 已付费用户群群文件 下载定位图标并将其部署到 /static/ 目录下, /static/location.png。

后端源码

本示例使用腾讯地图 api 获取周边信息，相关后端 php 文件请在 GraceUI 付费用户群内下载 (:

完整代码

拖拽定位

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分 （ 尤其是注意事项部分 ）。 手册地址 : https://uniapp.dcloud.io/component/map 经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

相关说明

请 GraceUI 已付费用户群群文件 下载定位图标并将其部署到 /static/ 目录下, /static/location.png；

注意 :

1. nvue 模式需要打包生效，建议使用 vue 完成地图功能页面；

2. 小程序模拟器报错忽略即可（官方版本bug），真机运行并无问题；

示例说明

利用地图组件的 controls 属性在地图中心摆放一个图标；利用 regionchange 事件获取地图中心点坐标；

完整代码

用户隐私协议界面模板

组件介绍

利用 gui-modal 组件实现的用户隐私协议界面模板，涵盖动态高度计算、协议签订记录逻辑演示代码。

协议内容模板推荐

个推 - APP隐私政策模板 : https://docs.getui.com/templet/

兼容平台

演示代码

会员登录

模板介绍

会员登录布局模板，基于 用户名 + 密码。

兼容平台

模板代码

用户登录界面

模板介绍

会员登录布局模板，基于 手机号 + 密码，带有国家号码前缀，使用提交按钮组件。

兼容平台

演示代码

短信登录模板

模板介绍

手机短信验证形式的会员登录模板，含有验证短信发送及倒计时功能。

兼容平台

模板代码

短信验证

页面介绍

GraceUI 短信验证

兼容平台

模板代码

个人中心

模板介绍

个人中心模板基于 GraceUI list 组件及横向公告组件的组合， 您可以在其基础上根据项目需要进行扩展。

兼容平台

模板代码