@tanzhenxing/zx-descriptions NPM

ZxDescriptions 描述列表

列表形式展示多个字段，基于 Element Plus 的 Descriptions 组件设计。

基础用法

<template>
  <zx-descriptions title="用户信息">
    <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
    <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    <zx-descriptions-item label="居住地">苏州市</zx-descriptions-item>
    <zx-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </zx-descriptions-item>
    <zx-descriptions-item label="联系地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </zx-descriptions-item>
  </zx-descriptions>
</template>

带边框

<template>
  <zx-descriptions title="用户信息" :column="3" border>
    <template #extra>
      <el-button type="primary">操作</el-button>
    </template>
    <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
    <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    <zx-descriptions-item label="居住地">苏州市</zx-descriptions-item>
    <zx-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </zx-descriptions-item>
    <zx-descriptions-item label="联系地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </zx-descriptions-item>
  </zx-descriptions>
</template>

不同尺寸

<template>
  <div>
    <zx-descriptions title="大尺寸" size="large" border>
      <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
      <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    </zx-descriptions>
    
    <zx-descriptions title="默认尺寸" size="default" border>
      <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
      <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    </zx-descriptions>
    
    <zx-descriptions title="小尺寸" size="small" border>
      <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
      <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    </zx-descriptions>
  </div>
</template>

垂直列表

<template>
  <zx-descriptions title="垂直列表" direction="vertical" border>
    <zx-descriptions-item label="用户名">kooriookami</zx-descriptions-item>
    <zx-descriptions-item label="手机号">18100000000</zx-descriptions-item>
    <zx-descriptions-item label="居住地">苏州市</zx-descriptions-item>
  </zx-descriptions>
</template>

自定义样式

<template>
  <zx-descriptions title="自定义样式列表" :column="3" border>
    <zx-descriptions-item
      label="用户名"
      label-align="right"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
    >
      kooriookami
    </zx-descriptions-item>
    <zx-descriptions-item label="手机号" label-align="right" align="center">
      18100000000
    </zx-descriptions-item>
    <zx-descriptions-item label="居住地" label-align="right" align="center">
      苏州市
    </zx-descriptions-item>
  </zx-descriptions>
</template>

<style scoped>
:deep(.my-label) {
  background: #f0f9ff !important;
}
:deep(.my-content) {
  background: #fef2f2;
}
</style>

ZxDescriptions API

属性

属性名	说明	类型	可选值	默认值
border	是否带有边框	boolean	—	false
column	一行 Descriptions Item 的数量	number	—	3
direction	排列的方向	string	horizontal / vertical	horizontal
size	列表的尺寸	string	large / default / small	default
title	标题文本，显示在左上方	string	—	—
extra	操作区文本，显示在右上方	string	—	—
label-width	每一列的标签宽度	string / number	—	—

插槽

插槽名	说明
default	自定义默认内容
title	自定义标题，显示在左上方
extra	自定义操作区，显示在右上方

ZxDescriptionsItem API

属性

属性名	说明	类型	可选值	默认值
label	标签文本	string	—	—
span	列的数量	number	—	1
rowspan	单元格应该跨越的行数	number	—	1
width	列的宽度	string / number	—	—
min-width	列的最小宽度	string / number	—	—
label-width	列标签宽	string / number	—	—
align	列的内容对齐方式	string	left / center / right	left
label-align	列的标签对齐方式	string	left / center / right	—
class-name	列的内容自定义类名	string	—	—
label-class-name	列标签自定义类名	string	—	—

插槽

插槽名	说明
default	自定义默认内容
label	自定义标签

安装和使用

全局安装

import { createApp } from 'vue'
import ZxDescriptions from './components/zx-descriptions'

const app = createApp({})
app.use(ZxDescriptions)

按需引入

import { ZxDescriptions, ZxDescriptionsItem } from './components/zx-descriptions'

export default {
  components: {
    ZxDescriptions,
    ZxDescriptionsItem
  }
}

特性

✅ 支持带边框和无边框两种样式
✅ 支持水平和垂直两种排列方向
✅ 支持三种尺寸（large、default、small）
✅ 支持自定义列宽度和对齐方式
✅ 支持跨行和跨列
✅ 支持自定义样式类名
✅ 支持插槽自定义内容
✅ 响应式设计，适配不同屏幕尺寸

版本

当前版本：1.0.0

descriptions 描述列表描述列表

@tanzhenxing/zxui

1.0.2

1 month ago

1.0.0

2 months ago