更新记录

1.0.0（2024-05-22） 下载此版本

1.0.0（2024-05-22）

详情列表展示组件，proDetailList

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持label作对其和右对齐
2. 支持对label 和value 的样式做自定义
3. 支持对标题，内容使用插槽
4. 支持对整个详情列表做样式上的定制化

平台兼容性

1.0.0（2024-05-22）

详情列表展示组件，proDetailList

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持label作对其和右对齐
2. 支持对label 和value 的样式做自定义
3. 支持对标题，内容使用插槽
4. 支持对整个详情列表做样式上的定制化

代码示例：

<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

ProRow Props

ProDetailItem Props