更新记录
1.0.0(2024-05-22)
1.0.0(2024-05-22)
详情列表展示组件,proDetailList
注:该版本是基于vue2开发的,所以只支持vue2,后续会升级vue3版本
功能
- 支持label作对其和右对齐
- 支持对label 和value 的样式做自定义
- 支持对标题,内容使用插槽
- 支持对整个详情列表做样式上的定制化
平台兼容性
HbuilderX/cli最低兼容版本 |
3.6.17 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
1.0.0(2024-05-22)
详情列表展示组件,proDetailList
注:该版本是基于vue2开发的,所以只支持vue2,后续会升级vue3版本
功能
- 支持label作对其和右对齐
- 支持对label 和value 的样式做自定义
- 支持对标题,内容使用插槽
- 支持对整个详情列表做样式上的定制化
代码示例:
<template>
<view class="content">
<pro-detail-list :styles="{backgroundColor:'#fff',padding:'20rpx',borderRadius:'10rpx',marginBottom:'20rpx'}" v-for="(item,index) in list" :key="index">
<pro-row :gutter="24" grid="flex">
<pro-detail-item label="" :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
<template slot="title">
这是自定义标题
</template>
<view class="bold-700">{{ item.name || '-' }}</view>
</pro-detail-item>
<pro-detail-item label="" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
<view class="flex justify-end">
<view class="list-btn-text" @click="editEvent(item)">
编辑
</view>
<view class="list-btn-text" @click="deleteEvent(item)">
删除
</view>
</view>
</pro-detail-item>
</pro-row>
<pro-row :gutter="24" grid="flex" :labelStyle="{color:'#606266'}" :valueStyle="{color:'#606266'}">
<pro-detail-item label="年龄" :xs="6" :sm="6" :md="6" :lg="6"
:xl="6">{{ item.age || '--' }}</pro-detail-item>
<pro-detail-item label="性别" :xs="6" :sm="6" :md="6" :lg="6"
:xl="6">{{ item.gender|| '--' }}</pro-detail-item>
<pro-detail-item label="居住地址" :xs="6" :sm="6" :md="6" :lg="6"
:xl="6">{{ item.address || '--' }}</pro-detail-item>
<pro-detail-item label="电话" :xs="6" :sm="6" :md="6" :lg="6"
:xl="6">{{ item.phone || '--' }}</pro-detail-item>
<pro-detail-item label="技能" :xs="6" :sm="6" :md="6" :lg="6"
:xl="6">{{ item.skill || '--' }}</pro-detail-item>
</pro-row>
</pro-detail-list>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
name: '王五',
age: 16,
gender: '男',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
{
name: '李四',
age: 15,
gender: '男',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
{
name: '铁蛋',
age: 19,
gender: '男',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
{
name: '翠花',
age: 20,
gender: '女',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
{
name: '思思',
age: 26,
gender: '女',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
{
name: '喵喵',
age: 29,
gender: '女',
address: '上海路13号',
phone: '133333333',
skill: '打王者'
},
]
}
},
onLoad() {
},
methods: {
deleteEvent(item){
uni.showToast({
icon:'none',
title:'删除'+item.name
})
},
editEvent(item){
uni.showToast({
icon:'none',
title:'编辑'+item.name
})
}
}
}
</script>
<style>
.content {
height:100vh;
padding:20rpx;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
}
.flex {
display: flex;
}
.justify-end {
justify-content: flex-end;
}
.list-btn-text {
font-size: 32rpx;
color: #0055ff;
}
.list-btn-text + .list-btn-text{
margin-left: 20rpx;
}
.bold-700{
font-weight: 700;
}
</style>
API
ProDetailList Props
参数 |
说明 |
类型 |
默认值 |
版本 |
title |
描述列表的标题,显示在最顶部 |
String |
- |
1.0.0 |
layout |
布局模式 |
String |
horizontal <可选 vertical> |
1.0.0 |
styles |
自定义样式 |
Object |
{} |
1.0.0 |
ProRow Props
参数 |
说明 |
类型 |
默认值 |
版本 |
gutter |
栅格间隔,可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24} 。或者使用数组形式同时设置 [水平间距, 垂直间距] (1.5.0 后支持 )。 |
Number |
24 |
1.0.0 |
grid |
布局分布 flex 弹性布局,label的宽度 为auto ,value的宽度自动撑开 normal 常规布局 label 的宽度需要配置 ,value的宽度也需要配置 |
String |
flex |
1.0.0 |
labelWidth |
label的宽度 |
[Number, String] |
- |
1.0.0 |
labelAlign |
label的对其方式,居左,居中,居右 |
String |
right |
1.0.0 |
labelStyle |
label的自定义样式 |
Object |
{} |
1.0.0 |
valueStyle |
value的自定义样式 |
Object |
{} |
1.0.0 |
ProDetailItem Props
参数 |
说明 |
类型 |
默认值 |
版本 |
label |
label标题文字说明 |
String |
- |
1.0.0 |
labelWidth |
label的宽度 |
[Number, String] |
- |
1.0.0 |
labelStyle |
label的自定义样式 |
Object |
{} |
1.0.0 |
valueStyle |
value的自定义样式 |
Object |
{} |
1.0.0 |