更新记录

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使用

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问