官网

Ant Design of Vue - Ant Design Vue (antdv.com)

注意

  1. a-modal 弹框的 z-index 为 1000

组件【63】

https://1x.antdv.com/components/

通用【2】

button 按钮

icon 图标

  • 基础图标：直接使用
  • 自定义图标：利用 Icon 组件封装一个可复用的自定义图标
  • 使用 iconfont.cn 图标

布局【3】

Grid 栅格

基础栅格
  • 从堆叠到水平排列
  • 使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内

Layout 布局

Space 间距 设置组件之间的间距

导航【7】

Affix 固钉

  • 将页面元素钉在可视范围

a-alert 文本提示

a-spin 加载效果

a-tooltip 提示

a-table 数据表格

  • 如果要让 a-table 组件不显示分页组件，可以设置属性 :pagination="false"

a-select 下拉选择

*

a-radio-group 单选

  • a-radio
  • a-radio-button

a-checkbox-group 多选

  • a-checkbox

a-switch 开关选择器

a-cascader 级联选择

1
[{label, value, children:[]}]

a-date-picker 选择年份、年月、年月日、年月日时分秒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="queryParam.year"
                style="width: 100%"
                :open="yearShowOne"
                :allowClear="false"
                @openChange="openYearChangeOne"
                @panelChange="panelYearChangeOne"
              />

<a-month-picker placeholder="Select month" @change="onChange" />

<a-date-picker valueFormat="YYYY-MM-DD"  v-model="model.birthday"/>

<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="model.punchTime" />

onChange (date, dateString) {
	console.log(date, dateString);
	this.queryParam.year = date.getFullYear()
	this.queryParam.month = date.getMonth() + 1
},

a-range-picker 选择日期时间段

1
2
3
4
5
<a-range-picker @change="onChange" />

onChange(date, dateString) {
	console.log(date, dateString);
},

a-slider 滑动型输入器，展示当前值或可选范围

a-transfer 双栏穿梭选择框