SimpleList 简易列表

SimpleList是一个功能丰富的列表组件，支持基础显示、单选、多选模式，并可配置虚拟列表以处理大量数据，同时提供自定义渲染能力。

导入

import SimpleList from '@/components/list/SimpleList.vue';

使用方法

基础用法

简单的列表展示，点击时触发itemClick事件。

<template>
  <SimpleList 
    :data="data"
    @itemClick="(item) => toast.info('点击了：' + item)"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SimpleList from '@/components/list/SimpleList.vue';
import Toast from '@/components/feedback/Toast.vue';

const toast = ref();
const data = [
  'Robert Davis',
  'Sandra Allen',
  'Charles Davis',
  'Michael Brown',
  'Joseph Miller',
  'Carol Allen',
  'Deborah Hernandez',
  'Michael Jones',
  'Amy Clark',
  'Daniel Robinson'
];
</script>

单选择式

列表项右侧显示单选框，每次只能选择一项。

<template>
  <SimpleList 
    :data="data"
    mode="single-check"
  />
</template>

多选模式

列表项右侧显示多选框，可以选择多项。

<template>
  <SimpleList 
    :data="data"
    mode="mulit-check"
  />
</template>

自定义渲染

通过itemContent插槽自定义列表项的内容。

<template>
  <SimpleList 
    :data="data"
  >
    <template #itemContent="{ item, index }">
      <FlexCol>
        <Text>Index: {{index}}</Text>
        <Text :color="index % 2 === 0 ? 'danger' : 'success'">
          {{ item }}
        </Text>
      </FlexCol>
    </template>
  </SimpleList>
</template>

<script setup lang="ts">
import SimpleList from '@/components/list/SimpleList.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
</script>

虚拟列表

当数据量较大时，可以启用虚拟列表模式以提升性能。

<template>
  <SimpleList 
    :data="largeData"
    :virtual="true"
    :innerStyle="{
      height: '80vh',
    }"
    @itemClick="(item) => toast.info('点击了：' + item)"
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import SimpleList from '@/components/list/SimpleList.vue';
import Toast from '@/components/feedback/Toast.vue';

const toast = ref();
const data = [
  'Robert Davis',
  'Sandra Allen',
  'Charles Davis',
  'Michael Brown',
  'Joseph Miller'
];

// 生成大量数据用于虚拟列表演示
const largeData = computed(() => {
  let result = [];
  for (let i = 0; i < 100; i++) {
    result = result.concat(data);
  }
  return result;
});
</script>

API 参考

Props

名称	说明	类型	必填	默认值
virtual	是否使用虚拟列表	boolean	-	false
virtualItemHeight	虚拟列表条目高度(px)	number	-	40
itemStyle	条目的自定义样式	ViewStyle	-	-
textStyle	条目文字的自定义样式	TextStyle	-	-
checkedItemStyle	选中的条目的自定义样式	ViewStyle	-	-
checkedTextStyle	选中的条目文字的自定义样式	TextStyle	-	-
emptyText	空数据时显示的文字	string	-	-
data	源数据	Array<T>	是	-
dataKey	数据项的唯一键名，用于vue循环优化	string	-	-
dataDisplayProp	显示数据的prop，如果为空，则尝试直接把数据当string显示	string	-	-
colorProp	控制数据条目颜色的字段名称，为空则使用默认颜色	string	-	-
disabledProp	控制是否禁用数据条目的字段名称，为空则不禁用	string	-	-
mode	列表的选择模式 * select 点击选择模式 * single-check 单选选择模式 * mulit-check 多选选择模式	'select' | 'single-check' | 'mulit-check'	-	'select'
checkProps	当列表显示选择框时，选择框的自定义属性	CheckBoxDefaultButtonProps	-	{borderColor: 'border.cell', checkColor: 'white', color: 'primary', size: 40, iconSize: mode === 'single-check' ? 10 : 16, type: mode === 'single-check' ? 'radio' : 'icon', disabled: false}
checkedItems	当用使用选择框模式时，默认选中条目	Array<T>	-	[]
innerStyle	内部容器样式	ViewStyle	-	-

Slots

名称	说明
itemContent	自定义列表项内容，接收item和index参数
empty	空数据时的内容插槽
inner	内部容器插槽，可用于在列表前后添加内容

Events

名称	说明	参数
itemClick	点击列表项事件	item: T, index: number
selectedItemChanged	选中项改变事件，仅在选择模式下触发	selectedItems: T[]

主题变量

变量名	类型	默认值	说明
SimpleListItemPaddingVertical	number	20	列表项垂直内边距
SimpleListItemPaddingHorizontal	number	35	列表项水平内边距
SimpleListItemFontSize	number	28	列表项字体大小
SimpleListItemBorderTopWidth	number	0	列表项顶部边框宽度
SimpleListItemBorderBottomWidth	number	2	列表项底部边框宽度
SimpleListItemBorderColor	string	border.cell	列表项边框颜色
SimpleListItemColor	string	text.content	列表项文字颜色
SimpleListItemBackgroundColor	string	white	列表项背景颜色
SimpleListItemTextFontSize	number	28	列表项文字字体大小
SimpleListItemTextFontWeight	string	normal	列表项文字字体粗细
SimpleListItemTextColor	string	text.content	列表项文字颜色
SimpleListItemCheckedTextFontSize	number	28	选中状态列表项文字字体大小
SimpleListItemCheckedTextFontWeight	string	bold	选中状态列表项文字字体粗细
SimpleListItemCheckedTextColor	string	primary	选中状态列表项文字颜色
SimpleListItemPressedColor	string	pressed.white	列表项按下时的背景颜色