更新记录
0.0.1(2023-06-06)
基于Vue3和TypeScript开发的 Cell 单元格组件。
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.11 app-vue | × | √ | √ | × | × | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
组件库官方文档:fant-mini-plus
组件库提供更多vue3组件,比单独引入更加强大
Cell 单元格
单元格为列表中的单个展示项。
代码演示
基础用法
Cell
使用。
<hd-cell title="我是单元格" placeholder="单元格的内容"></hd-cell>
展示图标
通过 icon
属性在标题左侧展示图标。
<hd-cell title="单元格" icon="ic_address_fill" />
设置 value,
设置 value
时,默认向左对齐,且支持插槽自定义value。
<hd-cell value="内容" />
<hd-cell value="内容" is-link>
<!-- 使用 title 插槽来自定义标题 -->
<template #value>
<span class="custom-value">内容</span>
</template>
</hd-cell>
展示箭头
设置 is-link
属性后会在单元格右侧显示箭头。
<hd-cell title="单元格" is-link />
<hd-cell title="单元格" is-link value="内容" />
内容超出省略
提供 ellipsis
属性,控制超出一行最大宽度后是否省略,默认true
<hd-cell title="我是单元格" :ellipsis="false" isLink></hd-cell>
下划线
通过 hasLine
属性可以让 Cell
展示下划线,默认为 false
。
<hd-cell title="单元格" value="内容" hasLine/>
Props
Name | Description | Type | Required | Default | |
---|---|---|---|---|---|
icon | 左侧图标名称,等同于 Icon 组件的 name 属性 |
String |
false |
- | |
title | 左侧标题 | String |
false |
- | |
value | 右侧内容 | String |
false |
- | |
label | 标题下方的描述信息 | String |
false |
- | |
align | 右侧内容的对齐方式,可选值为 "left" | "right" | 'left' / 'right' |
false |
left |
isLink | 是否展示右侧箭头并开启点击反馈 | Boolean |
false |
false | |
clickable | 是否开启点击反馈 | Boolean |
false |
false | |
hasLine | 是否有下划线 | Boolean |
false |
false | |
ellipsis | 是否超出省略 | Boolean |
false |
true | |
placeholder | 占位文字 | String |
false |
- | |
required | 是否显示表单必填星号 | Boolean |
false |
false |
Events
Event Name | Description | Parameters |
---|---|---|
click | 单元格被点击时触发,仅在isLink为true的情况下生效 | - |
Slots
Name | Description | Default Slot Content |
---|---|---|
value | 自定义单元格内容 | - |
联系方式
有不明白或者建议可以扫码交流