更新记录
1.0.8(2025-11-04) 下载此版本
fix: 组件主题
1.0.7(2025-02-18) 下载此版本
fix: 删除多余依赖项,纯享版
1.0.6(2024-08-06) 下载此版本
修改文档
查看更多平台兼容性
uni-app(4.43)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
r-divider
r-divider 分割线组件,用于将内容分隔为多个区域。
示例
<template>
<r-config-provider>
<view style="padding: 20rpx">
<view style="padding: 20rpx 0">基础用法</view>
<r-divider />
<view style="padding: 20rpx 0">展示文本 </view>
<r-divider>文本</r-divider>
<view style="padding: 20rpx 0">内容位置 </view>
<r-divider content-position="left">文本</r-divider>
<r-divider content-position="right">文本</r-divider>
<view style="padding: 20rpx 0">虚线 </view>
<r-divider dashed>文本</r-divider>
<view style="padding: 20rpx 0">自定义样式 </view>
<r-divider
:customStyle="{
color: '#1989fa',
borderColor: '#1989fa',
padding: '0 16px',
}"
>
文本
</r-divider>
<view style="padding: 20rpx 0">垂直 </view>
<r-divider vertical />
文本
<r-divider vertical dashed />
文本
<r-divider vertical :hairline="false" />
文本
<r-divider vertical :customStyle="{ borderColor: '#1989fa' }" />
</view>
</r-config-provider>
</template>
API
Props
| 名称 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| dashed | 是否使用虚线 | Boolean | false | true |
| hairline | 是否使用 0.5px 线 | Boolean | false | true |
| contentPosition | 内容位置 | String | center |
left right |
| vertical | 是否使用垂直 | Boolean | false | true |
Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| default | 自内容页码 | - |
更多组件,请前往rainui

收藏人数:
https://gitee.com/uv86e/rainui.git
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 1864
赞赏 11
下载 11014102
赞赏 1800
赞赏
京公网安备:11010802035340号