Press Next

# MatchUserList

User list component with flexible button configuration and operations, integrated with infinite scroll loading and empty state display. Uses configuration-driven design without hardcoded business states.

# Features

  • πŸ‘₯ Flexible Configuration - Define operation buttons freely through button configuration array for each user
  • πŸ“œ Infinite Scroll - Based on PressList component, automatically loads more data
  • 🎯 Unified Events - Single button-click event handles all button operations
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • πŸ“± Empty State - Built-in empty state display
  • ⚑ High Performance - Optimized list rendering

# Use Cases

  • Team member management list
  • Friend request list
  • User review list
  • Member invitation list
  • Any scenario that requires user list

# Import

import PressMatchUserList from 'press-next/press-match-user-list/press-match-user-list';

# Code Demo

# Basic Usage

<template>
  <PressMatchUserList
    :list="userList"
    :loading="loading"
    :finished="finished"
    @button-click="handleButtonClick"
    @load-more="handleLoadMore"
  />
</template>

<script setup lang="ts">
import PressMatchUserList from 'press-next/press-match-user-list/press-match-user-list.vue';

const userList = [
  {
    userInfo: {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: 'Zhang San',
      tags: [
        { icon: 'https://example.com/icon.png', name: 'Honor of Kings' }
      ],
      id: '001'
    },
    buttons: [
      { key: 'ignore', text: 'Ignore', type: 'default' },
      { key: 'pass', text: 'Pass', type: 'primary' }
    ]
  }
];

const loading = ref(false);
const finished = ref(false);

// Unified button click handling
const handleButtonClick = (button, userInfo, item, index) => {
  console.log('Button clicked:', button.key, 'User:', userInfo.name);
  
  switch (button.key) {
    case 'ignore':
      console.log('Ignore user');
      break;
    case 'pass':
      console.log('Pass user');
      break;
    case 'transfer':
      console.log('Transfer captain');
      break;
    case 'kick':
      console.log('Kick user');
      break;
  }
};

const handleLoadMore = () => {
  console.log('Load more data');
  // Load data logic
};
</script>

# Button Configuration for Different Scenarios

<template>
  <PressMatchUserList
    :list="userList"
    @button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
const userList = [
  // Pending user
  {
    userInfo: {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: 'Pending User',
      id: '001'
    },
    buttons: [
      { key: 'ignore', text: 'Ignore', type: 'default' },
      { key: 'pass', text: 'Pass', type: 'primary' }
    ]
  },
  // Passed user
  {
    userInfo: {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: 'Passed User',
      id: '002'
    },
    buttons: [
      { key: 'passed', text: 'Passed', type: 'default', disabled: true }
    ]
  },
  // Team management
  {
    userInfo: {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: 'Team Member',
      id: '003'
    },
    buttons: [
      { key: 'transfer', text: 'Transfer Captain', type: 'default' },
      { key: 'kick', text: 'Kick Out', type: 'danger' }
    ]
  }
];

const handleButtonClick = (button, userInfo) => {
  console.log(`${button.text} - ${userInfo.name}`);
};
</script>

# Custom Text and Style

<template>
  <PressMatchUserList
    :list="userList"
    :loading="loading"
    :finished="finished"
    empty-text="No user information"
    finish-text="All users displayed"
    custom-class="custom-user-list"
    @button-click="handleButtonClick"
    @load-more="handleLoadMore"
  />
</template>

<style>
.custom-user-list {
  --pmul-bg-color: #f5f5f5;
}
</style>

# API

# Props

Parameter Description Type Default
list User list data UserListItem[] []
loading Whether in loading state boolean false
finished Whether loading finished boolean false
empty-text Empty state text string 'No data'
finish-text Finish loading text string 'No more'
image Empty state image string -
custom-class Custom CSS class string ''

# UserListItem Data Structure

interface UserListItem {
  userInfo: UserInfo;      // User information
  buttons: ButtonConfig[]; // Button configuration list
}

# UserInfo Data Structure

// Tag interface
interface Tag {
  icon?: string; // Tag icon (optional)
  name: string;  // Tag name
}

// User information interface
interface UserInfo {
  avatar?: string;       // User avatar (optional)
  name: string;          // User name
  tags?: Tag[];          // Tags list (optional)
  description?: string;  // User description (optional)
  id?: string;           // User ID (optional)
}

# ButtonConfig Data Structure

interface ButtonConfig {
  key: string;           // Button unique identifier
  text: string;          // Button text
  type?: ButtonType;     // Button type
  plain?: boolean;       // Whether plain button
  size?: ButtonSize;     // Button size
  openType?: string;     // WeChat open capability
  disabled?: boolean;    // Whether disabled
}

type ButtonType = 'primary' | 'default' | 'info' | 'warning' | 'danger';
type ButtonSize = 'normal' | 'large' | 'small' | 'mini';

# Events

Event Description Parameters
load-more Triggered when scrolled to bottom -
button-click Triggered when button clicked (button: ButtonConfig, userInfo: UserInfo, item: UserListItem, index: number)
image-error Triggered when avatar loading fails (userInfo: UserInfo, item: UserListItem, index: number)

# Notes

# Usage Recommendations

  1. Button Configuration: Each user item can configure different buttons through the buttons array
  2. Event Handling: Use unified button-click event, distinguish operations by button.key
  3. Load More: Control loading state through loading and finished properties
  4. Empty State: Automatically displays empty state component when list is empty
  5. Avatar and Tags: Both avatar and tags.icon fields are optional, not displayed if not provided

# Design Philosophy

This component uses configuration-driven design philosophy:

  • No Hardcoded Business States: Define operations freely through buttons configuration array
  • Unified Event Handling: Single button-click event handles all button operations
  • Flexible Extension: Can add, delete, or modify button configurations at any time

# Performance Optimization

  • Use virtual list to optimize large data rendering
  • Use finished property properly to avoid duplicate loading
  • Image lazy loading improves first screen performance

# Compatibility

  • Supports Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Supports WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

# Style Variables

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Color System

Name Default Description
--pmul-bg-color $color-surface-default Background color

← MatchWatchItem β†’