更新记录
1.1.6(2021-08-31) 下载此版本
内部测试
1.1.5(2021-08-21) 下载此版本
内部测试
1.1.4(2021-08-21) 下载此版本
内部测试
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
Group 分组
分组组件可用于将组件分组,添加间隔,以产生明显的区块,并可以动态设置title属性,例如背景颜色、字体颜色、图标、是否允许折叠,组件名:mftcc-group
。
平台差异说明
如无特殊说明,则全平台可用
组件使用注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 组件需要依赖
sass
插件 ,请自行手动安装 - 组件需要依赖 uni-icons 插件 ,请自行手动安装
- 图标依赖iconfont项目,需要手动全局依赖引入,引入方式推荐使用Font class
-
图标库引入方式
- vue项目-在app.vue的style中引入
- @import url("//at.alicdn.com/t/font**42rfcoxjica.css");
-
安装方式
本组件符合easycom规范,
HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。使用方式
在 template
中使用组件
<mftcc-group :option="option" @fatherMethod="goDetail">
<view>分组内容1</view>
<view>分组内容1</view>
</mftcc-group>
<mftcc-group :option="option1">
<view>分组内容2</view>
<view>分组内容2</view>
</mftcc-group>
<mftcc-group :option="option2">
<view>分组内容3</view>
<view>分组内容3</view>
</mftcc-group>
data() {
return {
option: {
title: '允许折叠', //标题
top: '10', //距离上方的margin/默认为10px
icon: 'icon-user', //图标类型
iconSize: '20', //图标大小/默认为20rpx
iconColor: "#FFB032", //图标颜色
mode: "", //分组类型 card 卡片类型/默认default
isPutAway: true, //是否允许折叠/默认false隐藏
isAdd: true, //是否允许添加/默认false隐藏
addColor: "#FFB032", //添加按钮图标颜色
backgroundColor: "", //标题背景颜色
color: "#FFB032", //字体颜色
},
option1: {
title: '卡片类型允许折叠', //标题
top: '10', //距离上方的margin/默认为10px
icon: 'icon-user', //图标类型
iconSize: '20', //图标大小/默认为20rpx
iconColor: "#00ffff", //图标颜色
mode: "card", //分组类型 card 卡片类型/默认default
isPutAway: true, //是否允许折叠/默认false隐藏
backgroundColor: "", //标题背景颜色
color: "#00ffff", //字体颜色
},
option2: {
title: '不允许折叠', //标题
top: '10', //距离上方的margin/默认为10px
icon: 'icon-user', //图标类型
iconSize: '20', //图标大小/默认为20rpx
iconColor: "#55aaff", //图标颜色
mode: "card", //分组类型 card 卡片类型/默认default
isPutAway: false, //是否允许折叠/默认false隐藏
backgroundColor: "", //标题背景颜色
color: "#55aaff", //字体颜色
},
}
},
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | String | '' | 主标题 |
backgroundColor | String | '' | 标题背景颜色 |
color | String | '' | 标题字体颜色 |
top | Number | 10 | 分组间隔 |
icon | String | '' | 图标类型 , |
iconSize | String | '20' | 图标大小 , |
iconColor | String | '' | 图标颜色 , |
mode | String | 'default' | 模式 ,card 为卡片模式 |
isPutAway | Boolean | false | 是否允许折叠 ,默认不允许 |
isAdd | Boolean | false | 是否显示添加按键 ,默认不允许 |
addColor | String | '' | 添加按钮图标颜色 |
@fatherMethod | function | '' | 配合isAdd使用 |