更新记录

1.0.5（2024-06-12） 下载此版本

修复vue3中代码报错问题

1.0.4（2024-03-18） 下载此版本

flx: 1.0.3

1.0.3（2024-03-18） 下载此版本

新增布局方设置

平台兼容性

cl-cell 单元格

基础功能

• 该组件需要搭配cell-group使用
• 通过title设置左侧标题，value设置右侧内容
• 通过icon字段设置图标

• 体验地址

  http://qiaozhen.labizhuanzhuan.cn/cl-cell

基础使用

<cl-cell-group title="基础使用">
    <cl-cell title="账号与安全" icon="person"></cl-cell>
    <cl-cell title="隐私设置" icon="locked"></cl-cell>
    <cl-cell title="主题色" icon="color"></cl-cell>
    <cl-cell title="QQ号码" icon="qq" value="1321589787" ></cl-cell>
    <cl-cell title="邮箱号码" icon="mail-open" value="1321589787@qq.com"></cl-cell>
</cl-cell-group>

高级使用(自定义)

<cl-cell-group title="高级使用 (自定义)" :titleStyle="{'margin-top': '50rpx'}">

    <cl-cell title="uniapp代码提示" :isLink="false" :border="false">
        <template #icon>
            <image src="../../static/logo.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        </template>

        <template #value>
            <switch checked style="transform:scale(0.8)" />
        </template>

        <template #label>uni-app在手，做啥都不愁</template>
    </cl-cell>

    <cl-cell title="跳转到我的页面" label="默认是navigateTo方式跳转" url="/pages/mine/mine" :border="false"></cl-cell>

    <cl-cell title="清除缓存" label="清除缓存记得加延时函数" value="100.13kb" name="user" @onItem="onItem" :border="false"></cl-cell>

    <cl-cell title="设置" icon="gear-filled" right-icon="paperplane-filled" icon-color="rgb(253 109 250)" :titleStyle="{'color': 'rgb(253 109 250)'} " :border="false"></cl-cell>

    <cl-cell title="纵向显示" direction="column">
        <template #value>
            <!-- 自定义内容 -->
        </template>
    </cl-cell>

</cl-cell-group>

单独使用

单独使用样式是经典款

<cl-cell title="朴素"></cl-cell>
<cl-cell title="瀑布"></cl-cell>

图标示例地址

自定义图标

基于阿里图标库进行扩展

1. 将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。
2. 打开 iconfont.css ,修改 @font-face为url('@/static/iconfont.ttf') format('truetype');
3. 在项目根目录的 App.vue 中，引入上述的 iconfont.css

<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>

4. 在组件中使用

<cl-cell icon="icon-swarm" isCustomize></cl-cell>

API

CellGroup Props

Cell Props

Cell Slot

Cell Event

遇到问题或者讨论 uniapp 加入QQ群 553291781