GraceUI5.0手册 (3) | 清弦子@博客

type

Post

status

Published

date

Apr 19, 2026

slug

grace5-03

summary

Grace5.0版本手册第三部分

列表布局

样式介绍

为了列表布局更灵活、更高效，我们没有将其封装为组件而是提供了列表布局样式，这样您可以在开发过程中更便捷地组合出符合您项目要求的列表。

列表结构

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

滑动列表

组件介绍

滑动展开功能按钮的列表组件（此组件最近一次更新时间 : 2021年8月24日14:50 , 请保证框架版本）。

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	750	组件宽度，单位 rpx
msgs	Array	[]	消息数组, 格式见演示代码
btnWidth	Number	160	操作按钮总宽度, 内部按钮自动平分此宽度

组件事件

@scrolltolower 滚动区域触底时触发，用于实现加载更多.

皮肤样式

注意事项

演示代码

UNI 普通版本

可选列表

组件介绍

可选列表可以配置单选、多选，能够配置图标，可以灵活地应用于开发过程中的选择场景。

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	选项数组，格式见演示代码
type	String	’’	radio 单选, checkbox 多选
checkedType	String	right	right - 右侧对钩形式 [ 适合单选 ]，ring - 左侧圆环形式 [ 适合多选 ]
isBorder	Boolean	true	是否展示下边框
borderColor	String	#F6F6F6	边框线条颜色
maxSize	Number	0	多选时最多选择数，0 代表不限制

组件事件

@change : 选中项改变时触发，携带数据已选择数据索引值（多选时为一个索引数组）。

皮肤样式

组件函数

getSelectedIndex 2021-03-01 新增 : 获取组件内部数据中已选中数据的索引，返回数组形式的索引数据，默认为 []，也可以使用返回值长度判断选中数据数量；

演示代码

UNI 普通版本

默认值设置技巧

有些情况下，我们希望组件在页面展示是组件重置选择效果，您可以效仿下面的代码 :

全选列表

布局介绍

使用 gui-select-list 组件为基础实现全选、取消全选、删除数据等功能；请根据项目实际需求进行二次开发，来实现符合您项目需要的全选列表；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

布局代码

UNI 普通版本

树状列表

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
trees	Array	[]	组件列表信息数据
indent	Number	28	每个层级的缩进距离，单位rpx
type	String	text	组件类型, text : 文本展示 , radio : 单选形式, checkbox : 复选形式
isIcon	Boolean	true	文本形式时是否展示横线图标
checkedId	[String, Number]	-1	单选默认选中 id
checkedIds	Array	[]	复选选中的 id 集合
allCanCheck	Boolean	true	是否全部选项都可以点击选择，如果设置false则只有子集才能选择
isFold	Boolean	true	文本模式下是否开启收缩/展开功能 [ 2020.07.27 新增 ]

组件事件

taped
携带数据 : 被点击选项的索引关系，利用它完成 : 1.1 文本形式 : 获取点击数据 1.2 选择形式 : 获取点击数据更新选中 id

演示说明

演示代码为您封装好了选项获取相关的函数，可以方便地获取选中信息，同时也是非常不错的递归函数学习资料（:演示代码实现了多种模式的切换，您在应用时选择一种即可，代码会简化很多;文本形式下点击项目前面的图标进行层级收缩及展示；

皮肤样式

演示代码

UNI 普通版本

竖向拖拽排序

竖向拖动排序介绍

封装为组件在使用时反而不灵活，所以使用页面布局实现;利用手指事件完成拖拽及拖拽完成后的数据排序功能;因 weex 底层原因暂不支持，请使用 vue 页面完成此功能;

核心事件

onLoad : 模拟 api 请求，并补全数据属性longtap : 长按后才能进行拖拽thStart : 手指滑动开始thMove : 手指滑动thEnd : 拖拽完成对数据进行重新排序

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	×

演示代码

卡片列表

组件介绍

GraceUI 以样式形式提供了卡片列表布局，因为卡片列表布局在实际项目中变化较多，样式方式更灵活，请您看一下相关样式说明，应用时可以在页面上复写相关样式，达到修改的目的。

样式说明

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

布局结构

演示代码

UNI 普通版本

名片卡片

布局介绍

考虑实际开发场景，使用布局实现更方便修改，所以没有进行组件封装；

布局结构

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

注意事项

演示代码

UNI 普通版本

切换导航

组件介绍

gui-switch-navigation 切换导航组件可以快速帮您实现多种形式的分类、状态导航，是一个非常常用、好用的组件;

组件名称

gui-switch-navigation : /graceUI/components/gui-switch-navigation

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx，默认 690 rpx
isCenter	Boolean	false	是否居中布局
currentIndex	Number	0	激活项目的索引
size	Number	120	宽度单位 rpx，为 0 时代表自适应内容宽度
items	Array	[]	导航项目数组形式 : [{id:0, name:‘名称1’},{id:1, name:‘名称2’, …} ]
activeLineBg	String	linear-gradient(to right, #66BFFF,#3388FF)	激活条颜色
activeColor	String	#333333	激活文本颜色
activeLineHeight	String	6rpx	激活条高度
activeLineWidth	String	36rpx	激活条宽度
activeDirection	String	ㅤ	激活条横向对齐模式，默认左 center:居中，flex-end:右
activeFontWeight	Number	700	激活文本加粗属性 : 700 / 900 代表加粗 400 代表普通
color	String	#333333	导航文本颜色
margin	Number	0	右侧间距单位 rpx
textAlign	String	left	文本布局方式
lineHeight	String	50rpx	文本行高
fontSize	String	28rpx	文本大小
activeFontSize	String	28rpx	激活项目文本大小
padding	String	0rpx	横向内间距
activeLineRadius	String	0rpx	激活条圆角尺寸
animatie	Boolean	true	切换时使用使用动画 [ nvue 暂不支持动画效果 ]
scorllAnimation	Boolean	true	是否产生滚动动画
tipsStyle	String	vue background-color:#FF0000; padding:0 10rpx; color:#FFFFFF; font-size:22rpx nvue background-color:#FF0000; padding-left:10rpx; padding-right:10rpx; color:#FFFFFF; font-size:22rpx	提示信息样式，如需修改请使用条件编译兼容 nvue

组件事件

@change=“” 点击导航进行切换时会激活 change 事件，并传递对应的索引值;

导航数据格式

组件说明

1 :size=“0” 代表自适应内容宽度，选中项目基于 scroll-into-view 属性实现展示位置切换动画（无法居中）。 2 后端 api 数据格式不匹配是请转换数据格式，参考： https://www.graceui.com/v5/info/10154-0.html

演示代码

UNI 普通版本

切换导航·多行模式

组件介绍

gui-switch-navigation2 多行切换导航组件可以快速帮您实现多种形式的分类、状态导航，是一个非常常用、好用的组件;

组件名称

gui-switch-navigation2 : /graceUI/组件目录/gui-switch-navigation2

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx
isCenter	Boolean	false	项目整体居中
currentIndex	Number	0	选中项目索引
size	Number	138	选项宽度，单位 rpx
fontSize	String	28rpx	文本尺寸
activeFontSize	String	28rpx	激活后文本尺寸
lineHeight	Number	52	导航标题行高，单位 rpx
fontSizeSmall	String	22rpx	描述文本尺寸
lineHeightSamll	Number	28rpx	描述文本行高
items	Array	[]	导航选项数组，格式: [{title:‘’, desc:’’},……]
color	String	#333333	导航文本默认颜色
descColor	String	#999999	描述文本默认颜色
activeColor	String	#3688FF	激活文本颜色
scorllAnimation	Boolean	true	是否产生滚动动画

演示代码

UNI 普通版本

、

局部选项卡

布局介绍

局部选项卡使用 gui-switch-navigation 组件 + swiper 组件实现;局部选项卡应该固定高度来避免选项切换引起的页面抖动（:通过 gui-switch-navigation 组件的属性可以修改选项卡标签，手册地址 : https://www.graceui.com/v5/info/10029-50.html

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

全屏选项卡

布局介绍

全屏选项卡经常被应用在项目的入口页面，一般使用切换导航+轮播组件实现，GraceUI 为您提供了基础布局，请掌握布局原理，然后灵活运用。

实现步骤

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

分段器组件

组件介绍

gui-segmented-control 分段切换组件适用于分类切换、状态切换等场景，可以对数据进行筛选，也可以配合轮播组件使用达到滑动切换的目的，您也可以把它当成 switch 组件来使用哦 ~

组件名称

gui-segmented-control : /graceUI/组件目录/gui-segmented-control

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	切换项目数据, 格式 : [‘项目1’,‘项目2’,……]
current	Number	0	当前选择项目的索引
borderRadius	String	6rpx	组件圆角设置

皮肤样式

演示代码

UNI 普通版本

折叠面板

布局介绍

折叠面板可以用于动态展示类似结构的某个项目，可以展示更多的列表信息。因封装组件反而不灵活，所以以样式形式实现。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

竖向切换

布局介绍

竖向区域切换布局实现了点击切换导航跳转到页面具体位置的功能，同时当页面滚动时会自动识别对应的切换导航。

布局原理

1 uni-app vue 版本 1.1 页面核心元素布局使用包裹; 1.2 当页面滚动时根据的 top 值获取应该激活的切换导航; 1.3 当点击切换导航时计算的高度决定页面滚动位置;
2 基于 weex 的 2.1 nvue 无法控制页面滚动条，使用页面主体使用 list 及 cell 布局; 2.2 页面核心元素布局使用包裹; 1.2 当页面滚动时根据的 top 值获取应该激活的切换导航; 1.3 当点击切换导航时根据的索引滚动到对应位置;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

分类切换

布局介绍

1、点击分类切换到对应商品; 2、右侧产品列表滑动自动切换左侧对应分类; 3、搜索商品关键字并展示; 4、建议使用场景商品量不大的外卖、点餐、无人商店等应用；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

滚动区域

样式介绍

滚动区域为原生组件，但使用时需要一些样式支持，GraceUI 提供基础样式，为您的使用提供便利 :
横向滚动 : 使用 .gui-scroll-x 及 .gui-scroll-x-items 修饰滚动区域及滚动项目;
竖向滚动 : 规划滚动区域及滚动项目的高度即可;
宽度、高度属性请跟据项目需求在样式中重写，详见演示代码;
scroll-view 组件手册 : https://uniapp.dcloud.io/component/scroll-view

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

进度横向滚动

组件介绍

基于滚动区域组件封装的带有滚动进度条的横向滚动组件。

组件名称

gui-progress-scrollview : /graceUI/组件目录/gui-progress-scrollview

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	700	组件宽度
progressWidth	Number	200	进度条宽度，值为 0 时关闭进度块展示
progressHeight	Number	10	进度条高度
progressRadius	Number	10	进度条圆角尺寸
progressBG	String	#D1D1D1	进度条背景色
progressBarWidth	Number	60	进度块宽度
progressBarBG	String	#008AFF	进度块背景色
progressPosition	String	start	进度块位置，默认 start : 左侧、center : 居中、end : 右侧

组件事件

scrolling : 滚动区域滚动时触发，携带参数 : 滚地区宽度, 滚动位置, 进度值 0 - 100；scrolltolower : 滚动区域滚动到最右侧触发；scrolltoupper : 滚动区域滚动到最左侧触发；

演示代码

UNI 普通版本

滚动公告

组件介绍

gui-speaker 滚动公告组件，以 swiper 组件为基础，可以用于展示多条公告的动画切换。

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	公告项目数据，格式 : { title: “标题”, url: “../跳转路径”, opentype: “页面打开方式”} 跳转功能使用 navigator 实现，手册 : https://uniapp.dcloud.io/component/navigator
current	Number	0	默认展示的选项
vertical	Boolean	false	是否竖向切换
interval	Number	5000	切换间隔时间
styles	String	overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx;	核心区域样式，请通过属性来修改

演示代码

UNI 普通版本

无缝滚动

组件介绍

无缝滚动适合一条较长的文本公告滚动展示的场景，使用 css 动画完成滚动效果。组件提供了插槽，滚动内容及样式可以自定义。nvue 平台使用 BindingX 实现滚动动画；

组件名称

gui-scroll-message : /graceUI/组件目录/gui-scroll-message

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
speed nvue 专有属性	Number	12	滚动过程时间，单位秒，数值越大滚动越慢
distance nvue 专有属性 2021.03.23 新增	Number	800	滚动距离，请跟据内容长度进行调整

演示代码

UNI 普通版本

无缝滚动·卡片模式

组件介绍

横向无缝滚动，实现了循环滚动，内部为一个图片+一个遮罩形式的标题；如果组件本身数据格式或者布局不能满足您的项目需要，您可以复制一个自己命名为自己的，对复制的自己进行进一步修改，并使用；

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx
itemWidth	Number	345	项目宽度，单位 rpx
itemHeight	Number	200	项目高度，单位 rpx
itemMargin	Number	10	项目右侧间距，单位 rpx
items	Array	[]	项目数据，格式见演示代码
duration	Number	25	滚动事件，数组越小滚动越快

组件事件

itemTap : 滚动项目被点击时触发，携带数据 : 完整的被点击项目数据{对象形式}；

演示代码

UNI 普通版本

竖向滚动公告

组件介绍

GraceUI 竖向滚动公告组件实现了竖向消息循环展示功能，能够识别用户滚动行为实现合理的滚动机制、能够动态添加消息；

组件名称

gui-scrollitems-y : /graceUI/组件目录/gui-scrollitems-y

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
height	String	480rpx	滚动区域高度
imgStyle	String	width:88rpx; height:88rpx; border-radius:6rpx; margin-top:5rpx; margin-right:28rpx;’	左侧图片样式
textStyle	String	font-size:28rpx; color:#2B2E3D; line-height:38rpx;	右侧文本样式
msgWidth	String	570rpx	右侧文本区域宽度 ( 等于外层宽度 - 图片宽度 - 30rpx )
duration	Number	6000	消息切换间隔时间
items	Array	[]	消息数组，格式见演示代码，

组件方法

addItem : 添加消息对象 , 格式见演示代码；

演示代码

UNI 普通版本

轮播组件

组件名称

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

重要说明

01 组件宽度高度算法 ( 所有轮播图的宽高比应该是一样的哦 ) 组件宽度 = 外层元素宽度如 700rpx 组件高度 = 轮播图高度 / 轮播图宽度 * 组件宽度，如轮播图片为 500 px * 225 px, 那么 : 组件高度 = 225 / 500 * 700 = 315 rpx
02 请参考演示代码利用属性配置出各种形式的轮播组件;

组件属性

属性名称	类型	默认值	作用
width	Number	750	组件宽度，单位 rpx
height	Number	300	组件高度，单位 rpx
swiperItems	Array	[]	轮播项目数组，格式见演示代码
borderRadius	String	10rpx	图片圆角尺寸
indicatorBarHeight	Number	68	进度圆点或标题文本高度，单位 rpx
indicatorBarBgColor	String	rgba(0,0,0,0)	进度圆点或标题文本背景颜色
indicatorWidth	Number	18	进度圆点宽度，单位 rpx
indicatorActiveWidth	Number	18	进度圆点激活后宽度，单位 rpx
indicatorHeight	Number	18	进度圆点高度，单位 rpx
indicatorRadius	Number	18	进度圆点圆角尺寸，单位 rpx
indicatorColor	String	rgba(255, 255, 255, 0.6)	进度圆点默认颜色
indicatorActiveColor	String	#3688FF	进度圆点激活后颜色
indicatorType	String	dot	none : 不展示圆点, dot : 可修饰的圆点, number : 数值+文本形式
indicatorPosition	String	absolute	圆点定位方式,赋值 relative 可以实现圆点在轮播图片下方
indicatorDirection	String	center	圆点点横向对齐方式，默认 center 居中, flex-start 左对齐, flex-end 右对齐
spacing	Number	50	轮播项目间距 [ nvue 不支持 ]
padding	Number	26	非激活项目的缩小间距 [ nvue 不支持 ]
interval	Number	5000	自动轮播间隔时间
autoplay	Boolean	true	是否自动播放
currentIndex	Number	0	当前激活项目索引
opacity	Number	0.66	非激活项目透明度
titleColor	String	#FFFFFF	标题文本颜色
titleSize	String	28rpx	标题文本大小
imgMode 2022.02.23 新增	String	widthFix	内部图片组件的图片裁剪、缩放的模式

组件事件

@swiperchange
轮播选项切换时触发，携带参数 : 当前轮播项目的索引值。
02 @taped 当选项数据的 opentype 为 click 时，用户点击选项触发并携带当前点击选项的索引值;

演示代码

UNI 普通版本

滚动主体布局

布局介绍

利用定位 + 滚动区域布局，滚动区域与页面滚动相结合的一种主体滚动布局效果；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

全屏Loading

组件介绍

GraceUI 全屏 Loading 组件可以遮住页面，并在居中位置展示 Loading 动画，您可以在各类加载场景使用它。gui-page 页面组件内置了此组件，可以利用 page 组件的 isLoading 属性控制动画展示|关闭。nvue 端使用 BindingX 实现 Loading 动画。

组件名称

gui-page-loading : /graceUI/组件目录/gui-page-loading

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件方法

样式修改

您可以通过修改皮肤样式来修改 gui-page-loading 组件的遮罩背景及动画圆点样式：
/* 全屏 Loading 背景颜色 */
.gui-page-loading-bg{background-color:rgba(255,255,255,0.88);}
/* 圆点颜色 */
.gui-page-loading-color{background-color:#2B2E3D;}

演示代码

UNI 普通版本

下拉刷新·基于页面组件

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
refreshText	Array	[‘继续下拉刷新’,‘松开手指开始刷新’,‘数据刷新中’,‘数据已刷新’]	刷新过程中展示的文本
refreshBgColor	Array	[‘#FFFFFF’,‘#FFFFFF’,‘#FFFFFF’,‘#63D2BC’]	刷新过程中组件的背景颜色
refreshColor	Array	[‘rgba(69, 90, 100, 0.6)’,‘rgba(69, 90, 100, 0.6)’,‘#63D2BC’,‘#FFFFFF’]	刷新过程中组件的文本颜色
refreshFontSize	String	26rpx	组件文本尺寸

事件绑定

使用 gui-refresh 组件 + 滚动区域（自动铺满屏幕）实现下拉刷新时，需要将滚动区域的手指事件传递给 gui-refresh 组件，touchstart() 参数 : 滚动区域 touchstart 事件的返回数据;touchmove() 参数 : 滚动区域 touchmove 事件的返回数据;touchend() 参数 : 滚动区域 touchend 事件的返回数据;
以上数据使用 gui-page 组件来实现刷新时组件已经自动处理，自定义模式请请参考自定义模式代码；

组件函数

endload : 用于停止组件的加载动画并关闭加载组件；

组件事件

reload : 组件展示加载时触发，可以触发事件时完成刷新业务逻辑；

注意事项

利用 gui-page 组件实现下拉刷新，属性全部添加到 gui-page 组件上；gui-page 组件添加 :refresh=“true” 属性开启下拉刷新；gui-page 组件添加 @reload=“reload” 事件监听、实现下拉刷新数据刷新逻辑；gui-page 组件添加 @scroll=“bodyScroll” 可以监听滚动区域滚动事件及滚动值；

演示代码

UNI 普通版本

基于页面组件的加载更多

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
loadMoreText	Array	[’‘,’更多数据加载中’, ‘已加载全部数据’,‘暂无数据’]	加载过程中展示的文本
loadMoreColor	Array	[‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.8)’, ‘rgba(69, 90, 100, 0.6)’]	加载过程中组件的文本颜色
loadMoreFontSize	String	26rpx	组件文本尺寸
status 2021.02.20 新增	Number	0	初始化加载状态 0 准备加载 1 加载中 2 加载到底 3 为空展示

组件方法

loading() 开启加载动画，用于加载过程；stoploadmore() 停止加载动画，准备下一次加载；nomore() 加载到底，不能进行下一次加载；empty() 第一次加载数据为空，不能进行下一次加载；hide() 关闭组件；

组件事件

@tapme : 组件被点击时触发给父级；

注意事项

利用 gui-page 组件实现加载更多，属性全部添加到 gui-page 组件上;gui-page 组件添加 :loadmore=“true” 属性开启加载更多;gui-page 组件添加 @loadmorefun=“getdata” 事件监听、实现数据加载逻辑;

演示代码

UNI 普通版本

基于页面组件的刷新加载

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

自定义模式刷新加载

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

原生模式的刷新加载

演示介绍

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

细节提示

完整代码

UNI 普通版本

弹层组件

组件介绍

gui-popup 组件可以实现在页面的中间、顶部、底部、左侧、右侧以动画形式展示一个弹层。

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	String	580rpx	核心区域宽度( 居中、左、右有效 )
bgColor	String	rgba(0, 0, 0, 0.7)	遮罩层背景颜色
position	String	center	核心区域位置，center：居中、top：顶部、 bottom：底部、left：左侧、right：右侧
canCloseByShade	Boolean	true	点击遮罩层是否关闭组件
zIndex	Number	99999	组件 z-index 值
top	Number	0	组件 top 值，单位 px
duration 2021.10.19 新增	Number	280	组件动画时长

组件方法

open : 展示组件；close : 关闭组件；

组件事件

@open : 组件展示时触发；@close : 组件关闭时触发；

演示代码

UNI 普通版本

头部消息框

组件介绍

GraceUI 头部消息框组件可以用于操作过程提示，您可以通过插槽实现各种自定义形式的消息框；

组件名称

gui-top-message : /graceUI/组件目录/gui-top-message

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
duration	Number	2000	消息展示时间，单位毫秒
customNav 2021.04.23 新增	Boolean	false	调用组件的页面是否使用自定义头部导航

演示代码

UNI 普通版本

模态对话框

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	String	580rpx	组件宽度
bodyStyle	String	background-color:#FFFFFF; border-radius:6rpx;	消息框主体样式
isCloseBtn	Boolean	true	是否展示关闭按钮
closeBtnStyle	String	color:#2B2E3D; font-size:28rpx;	关闭按钮样式
isTitle	Boolean	true	是否展示标题
title	String	’’	标题文本
titleStyle	String	line-height:100rpx; font-size:28rpx; font-weight:700; color:#2B2E3D;	标题样式
canCloseByShade	Boolean	true	点击遮罩层能否关闭组件
zIndex 2021.08.24 新增	Number	99	弹出层 z-index 值

组件方法

open() 打开对话框close() 关闭对话框

组件事件

@open 打开对话框时触发 2021.08.10 新增@close 关闭对话框时触发 2021.08.10 新增

演示代码

UNI 普通版本

操作表组件

组件介绍

gui-action-sheet 组件类似 uni.showActionSheet，uni.showActionSheet 对操作项目有限制，可以使用 gui-action-sheet 组件更灵活实现底部操作列表功能。

组件名称

gui-action-sheet : /graceUI/组件目录/gui-action-sheet

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	680	核心菜单区域宽度
height	Number	500	选项列表滚动区域高度
borderRadius	String	10rpx	核心菜单圆角尺寸
zIndex	Number	99	组件 z-index 值
title	String	’’	组件标题
titleColor	String	#2B2E3D	组件标题颜色
items	Array	[]	选择列表数据
listColor	String	#008AFF	选择列表本文颜色
listLineHeight	String	95rpx	选择项目列表行高
listFontSize	String	28rpx	选择项目列表文本大小
cancelBtnName	String	取消	取消按钮文本
cancelBtnColor	String	#rgba(69, 90, 100, 0.6)	取消按钮颜色
isCancelBtn	Boolean	true	是否展示取消按钮
canCloseByShade	Boolean	false	点击遮罩层能否关闭组件

演示代码

UNI 普通版本

右侧菜单组件

组件介绍

固定在页面右下角的动态展开菜单，利用插槽实现菜单布局，可以灵活地实现符合项目需要的布局；

组件名称

gui-right-menus : /graceUI/组件目录/gui-right-menus.vue

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔ [ 无动画 ]

组件属性

属性名称	类型	默认值	作用
styles	String	right:20rpx;bottom:200rpx;z-index:999;width:100rpx;	组件主体样式，可以更根据项目要求灵活设置

组件插槽

menus-more : 功能按钮插槽，默认隐藏，点击主插槽展示； menus-primary : 核心按钮插槽，点击打开功能按钮插槽；说明 : 如果不需要动态展示隐藏功能插槽（按钮默认展示），可以不实现 menus-more ，把点击元素全部放进 menus-primary 插槽，加上点击事件 ( @tap=点击事件) 即可；

演示代码

UNI 普通版本

弹出菜单

组件名称

gui-popup-menu : /graceUI/组件目录/gui-popup-menu

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

平台差异

nvue 使用是需要动态计算菜单按钮的定位值，方法见演示代码；nvue 平台请在页面最后放置弹出层元素或组件；

组件属性

属性名称	类型	默认值	作用
menuWidth	String	258rpx	菜单宽度
background	String	rgba(0,0,0, 0.3)	遮罩层背景色( 非 nvue 平台有效 )
zIndex	Number	99	组件 z-index 值 ( 非 nvue 平台有效 )
isArrow	Boolean	true	是否展示箭头 ( 非 nvue 平台有效 )
arrowDirection	String	right	箭头位置 [ left - 左, center - 居中, right - 右 ] ( 非 nvue 平台有效 )
arrowMargin	String	0 15rpx	箭头间距 ( 非 nvue 平台有效 )

组件方法

open() 展示组件close() 关闭组件setTop(top) 设置组件 top 值，参数 top 值（nvue 平台使用）；setRight(right) 设置组件 right 值，参数 right 值（nvue 平台使用）；

演示代码

UNI 普通版本

表单元素

组件介绍

我们给您提供了基础的表单布局（横向、竖向），底层使用原生的表单元素使逻辑更加清楚、可控；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

演示代码

UNI 普通版本

提交按钮

组件介绍

提交按钮组件专为表单提交打造，组件本身提供了交互动画、成功提示、失败提示等数据提交相关的过程展示。提交按钮依然使用原生按钮为基础，但对原生按钮进行了隐藏，实现了多平台按钮样式统一的目标。

组件名称

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

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
titleClass	String	gui-sbutton-text	按钮标题颜色名称
loaingPointClass	String	gui-sbutton-loading-point	按钮加载圆点样式名称
baseClass	String	gui-sbutton	按钮基础样式名称，用于规划尺寸圆角等基础样式
defaultClass	String	gui-sbutton-default	按钮默认样式
loadingClass	String	gui-sbutton-loading	按钮数据交互时加载样式
successClass	String	gui-sbutton-success	提交成功时按钮样式
failClass	String	gui-sbutton-fail	提交失败是按钮样式

样式说明

以上样式都保存在框架皮肤样式内，皮肤样式内同时还提供了修改按钮样式的演示，请按照要求部署皮肤和修改文件（请仔细观看群文件框架部署视频教程）。

组件插槽

按钮默认展示元素提交成功展示元素提交失败展示元素原生按钮原生（真正起到表单提交作用，但元素会被透明化）

演示代码

UNI 普通版本

表单验证

组件介绍

GraceUI 内置了表单验证工具，经过大量用户的使用和反馈已经非常成熟；注意事项此验证工具于 2021.12.23 大幅度更新，优化验证规则、添加更多验证方法，请下载新版本框架保证代码版本~

使用流程

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

验证规则

类型	功能	规则参数举例
string	字符串长度检查	如 : 5, 100
contain	必须包含指定的字符串	如 : grace
notContain	不能包含指定的字符串	如 : grace
inArray	必须是指定数组的元素	如 : [‘男’,‘女’]
notInArray	不能是指定数组的元素	如 : [1,2,3]
int	整数及长度检查	如 : 1, 8
intBetween	整数区间检查	如：100,999
between	数值区间检查 ( 小数或整数 )	如：-500, 22
doubleBetween	小数区间检查	如：1, 88
doubleLength	小数及小数位数检查	如：2,3
gt	大于某个数值	如：100
gtAndSame	大于等于某个数值	如：100
lt	小于某个数值	如：100
ltAndSame	小于等于某个数值	如：100
same	等于某个值	如：100 或 grace
notSame	不等于某个值	如：100
samewith	等于某个元素	数据键名称
email	邮件地址检查	无需参数
phone	手机号码检查	无需参数
url	url 地址检查	无需参数
zipcode	邮编检查	无需参数
idCard	身份证检查	无需参数
reg	正则表达检查	自定义正则表达式，如 ^

使用说明

演示代码

UNI 普通版本

字数控制

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本