ant-design-vue-pro中的自定义组件：从设计到实现的完整流程

解洲思Ronald

479人浏览 · 2025-10-17 06:21:44

解洲思Ronald · 2025-10-17 06:21:44 发布

ant-design-vue-pro中的自定义组件：从设计到实现的完整流程

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

在现代Web开发中，自定义组件是提升开发效率和界面一致性的关键。ant-design-vue-pro作为基于Vue和Ant Design Vue的企业级中后台前端解决方案，提供了丰富的自定义组件。本文将以AvatarList组件为例，详细介绍在ant-design-vue-pro中自定义组件的完整流程，包括设计思路、实现步骤和使用方法。

组件设计思路

自定义组件的设计应从实际需求出发，明确组件的功能和使用场景。以AvatarList组件为例，其主要用于展示一组用户头像，常见于项目成员列表、团队展示等场景。在设计时，需要考虑以下几点：

功能需求：展示多个用户头像，支持设置头像大小、最大显示数量等。
API设计：定义清晰的组件属性（Props）和事件（Events），方便用户使用。
样式设计：保持与整体UI风格一致，提供不同尺寸的头像样式。

组件实现步骤

1. 创建组件目录结构

在ant-design-vue-pro中，自定义组件通常存放在src/components目录下。以AvatarList组件为例，其目录结构如下：

src/components/AvatarList/
├── Item.jsx          // 头像列表项组件
├── List.jsx          // 头像列表组件
├── index.js          // 组件导出文件
├── index.less        // 组件样式文件
└── index.md          // 组件文档

2. 编写组件代码

List.jsx（列表容器组件）

该文件定义了AvatarList组件的主体结构和逻辑，包括属性定义、渲染方法等。

import './index.less'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import Avatar from 'ant-design-vue/es/avatar'
import Item from './Item.jsx'
import { filterEmpty } from '@/components/_util/util'

const AvatarListProps = {
  prefixCls: PropTypes.string.def('ant-pro-avatar-list'),
  size: {
    validator: val => {
      return typeof val === 'number' || ['small', 'large', 'default'].includes(val)
    },
    default: 'default'
  },
  maxLength: PropTypes.number.def(0),
  excessItemsStyle: PropTypes.object.def({
    color: '#f56a00',
    backgroundColor: '#fde3cf'
  })
}

const AvatarList = {
  __ANT_AVATAR_LIST: true,
  Item,
  name: 'AvatarList',
  props: AvatarListProps,
  render (h) {
    const { prefixCls, size } = this.$props
    const className = {
      [`${prefixCls}`]: true,
      [`${size}`]: true
    }

    const items = filterEmpty(this.$slots.default)
    const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{this.getItems(items)}</ul> : null
    return (
      <div class={className}>
        {itemsDom}
      </div>
    )
  },
  methods: {
    getItems (items) {
      const className = {
        [`${this.prefixCls}-item`]: true,
        [`${this.size}`]: true
      }
      const totalSize = items.length

      if (this.maxLength > 0) {
        items = items.slice(0, this.maxLength)
        items.push((<Avatar size={this.size === 'mini' ? 'small' : this.size} style={this.excessItemsStyle}>{`+${totalSize - this.maxLength}`}</Avatar>))
      }
      return items.map((item) => (
        <li class={className}>{item}</li>
      ))
    }
  }
}

AvatarList.install = function (Vue) {
  Vue.component(AvatarList.name, AvatarList)
  Vue.component(AvatarList.Item.name, AvatarList.Item)
}

export default AvatarList

Item.jsx（列表项组件）

该文件定义了AvatarList.Item组件，用于表示单个头像项。

import PropTypes from 'ant-design-vue/es/_util/vue-types'
import Avatar from 'ant-design-vue/es/avatar'

const AvatarListItemProps = {
  tips: PropTypes.string,
  src: PropTypes.string
}

const AvatarListItem = {
  name: 'AvatarListItem',
  props: AvatarListItemProps,
  render (h) {
    const { tips, src } = this.$props
    return (
      <Avatar title={tips} src={src} />
    )
  }
}

export default AvatarListItem

3. 定义组件样式

在index.less文件中定义组件的样式，确保组件在不同场景下的显示效果。

.ant-pro-avatar-list {
  &-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  &-item {
    margin-right: -8px;
    position: relative;

    .ant-avatar {
      border: 2px solid #fff;
    }

    &.mini .ant-avatar {
      width: 20px;
      height: 20px;
      line-height: 20px;
    }

    &.small .ant-avatar {
      width: 24px;
      height: 24px;
      line-height: 24px;
    }

    &.default .ant-avatar {
      width: 32px;
      height: 32px;
      line-height: 32px;
    }

    &.large .ant-avatar {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
  }
}

4. 导出组件

在index.js文件中导出组件，方便其他模块引用。

import AvatarList from './List.jsx'
import AvatarListItem from './Item.jsx'

AvatarList.Item = AvatarListItem

export default AvatarList

组件使用方法

1. 引入组件

在需要使用AvatarList组件的页面或组件中，通过以下方式引入：

import AvatarList from '@/components/AvatarList'
const AvatarListItem = AvatarList.Item

export default {
  components: {
    AvatarList,
    AvatarListItem
  }
}

2. 在模板中使用

<avatar-list size="mini">
  <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
  <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
  <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
</avatar-list>