更新记录
0.0.1(2023-06-07)
一个基于Vue3和TypeScript开发的 divider 分割线组件,用于将内容分隔为多个区域。
平台兼容性
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组件,比单独引入更加强大
Divider 分割线
用于将内容分隔为多个区域。
代码演示
基础用法
分割线中间自定义内容。
<hd-divider>文本内容</hd-divider>
<hd-divider><text>文本内容</text></hd-divider>
分割线颜色
通过borderColor
属性来控制分割线颜色。
<hd-divider borderColor="#FC2C4A">文本内容</hd-divider>
细线
通过hairline
属性控制分割线是否是细线,默认false
。
<hd-divider :hairline="true">文本内容</hd-divider>
虚线
通过dashed
属性控制分割线是否是虚线,默认false
。
<hd-divider :dashed="true">文本内容</hd-divider>
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
textColor | 文本颜色 | String |
false |
- |
borderColor | 分割线颜色 | String |
false |
- |
fontSize | 文本字体大小 | String |
false |
- |
hairline | 是否为细线 | Boolean |
false |
默认值是:false |
dashed | 是否为虚线 | Boolean |
false |
默认值是:false |
Slots
Name | Description | Default Slot Content |
---|---|---|
default | 分割线中间自定义内容 | - |
联系方式
有不明白或者建议可以扫码交流