全部章节 >>>>

---

文章目录

二、布局组件

三、按钮和全局提示组件

四、表格组件

总结：

---

一、Ant Design of Vue框架

1、Ant Design介绍

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁金服体验技术部经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系Ant Design。

基于“确定”和“自然”的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

Ant Design设计体系由四个方面组成：

2、Ant Design of Vue安装

Ant Design of Vue是Ant Design的Vue实现，开发和服务于企业级后台产品。

主要特点

支持环境

Ant Design of Vue是Ant Design的Vue实现，开发和服务于企业级后台产品。、

安装

3、Ant Design of Vue组件使用

Ant Design of Vue组件基本格式如下：

组件必须添加到Vue的容器标签中，这样组件才能被渲染。

示例：添加输入框组件和按钮组件，但单击按钮组件时，显示全局消息提示框。

HTML代码:

 
提交  
 

JavaScript代码:

var vm = new Vue({el: "#app",data: {userName: ""},methods: {doSubmit: function () {this.$message.info("欢迎您！" + this.userName);}},})
 

 
提交
 

4、实践练习

二、布局组件

1、布局组件介绍

Ant Design of Vue中的布局组件主要协助进行页面级整体布局。

布局组件包含三个设计原则:

Ant Design通过网格体系来实现视觉体系的秩序。网格的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。

2、布局组件使用

组件概述：

Layout组件：布局容器，其下可嵌套Header组件、Sider组件、Content组件、Footer组件或Layout组件本身，可以放在任何父容器中。

语法如下所示：

…
 

Header组件：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

….… 
 
 

Sider组件：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

….…
 
 

Content组件：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

….… 
 
 

Footer组件：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

….…
 
 

布局采用HTML5的flex布局实现。

组件属性和事件

Layout组件、Header组件、Footer组件和Content组件的属性相同，如下面表所示。

属性说明class表示class样式style指定样式hasSider表示子元素里有Sider，一般不用指定。

Sider组件的属性如下表所示。

属性说明breakpoint触发响应式布局的断点class表示class样式collapsed表示当前收起状态collapsedWidth默认值为80，表示收缩宽度，设置为0会出现特殊triggercollapsible默认值为false，表示是否可收起defaultCollapsed默认值为false，表示是否默认收起reverseArrow默认值为false，表示是翻转折叠提示箭头的方向，当Sider在右边时可以使用style指定样式theme默认值为dark，表示主题颜色，只有两个值light和darktrigger表示自定义trigger，设置为null时隐藏width默认值为200，表示宽度

布局组件可用的事件如表所示

事件说明collapse展开-收起时的回调函数breakpoint触发响应式布局断点时的回调函数

示例：

 
上中下三栏布局
HeaderContentFooter
上中下带左边栏布局
HeaderSiderContentFooter
上中下带右边栏布局
HeaderContentSiderFooter
左导航栏带上中下布局
SiderHeaderContentFooter
 

3、导航菜单组件使用

航菜单组件是为页面和功能提供导航的菜单列表。导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。

一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。导航菜单的

语法如下所示：

菜单项子菜单项
 
 

导航菜单组件常用属性如下面表:

属性说明defaultOpenKeys表示初始展开的SubMenu菜单项key数组defaultSelectedKeys表示初始选中的菜单项key数组mode默认值是vertical，表示菜单类型，现在支持垂直（vertical）、水平（horizontal）和内嵌模式（inline）三种。multiple默认值是false，表示是否允许多选selectable默认值是true，表示是否允许选中theme默认值是light，表示主题颜色，只有light和dark颜色disabled表示是否禁用key表示唯一标志title表示设置收缩时展示的悬浮标题

示例：使用导航菜单组件创建CMS的系统设置的垂直菜单。

网站设置网站信息备案信息SEO信息二维码数据设置状态数据类别数据
 
 

 
网站设置网站信息备案信息SEO信息二维码数据设置状态数据类别数据
 

4、面包屑组件使用

面包屑组件（Breadcrumb）用来显示当前页面在系统层级结构中的位置，并能向上返回。在以下情况下使用面包屑组件：

面包屑组件语法如下所示

导航项导航项
 
 

示例：使用面包屑组件实现栏目详情的路径。

首页栏目管理栏目详情
 
 

示例：

 
首页栏目管理栏目详情
 

5、实践练习

三、按钮和全局提示组件

1、全局提示组件使用

全局提示组件用于全局展示操作反馈信息。在以下情况下使用全局提示组件：

// 成功消息
 $message.success(content, [duration], onClose)
 

// 错误消息
 $message.error(content, [duration], onClose)
 

// 信息消息
 $message.info(content, [duration], onClose)
 

// 警告消息
 $message.warn(content, [duration], onClose)
 

// 加载消息
 $message.loading(content, [duration], onClose)
 

全局提示组件提供了一些静态方法，语法如下所示：

全局提示方法的参数

参数说明content提示内容duration自动关闭的延时，单位秒。设为0时不自动关闭。onClose关闭时触发的回调函数

2、按钮组件使用

按钮组件用于开始一个即时操作。一般用于标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

按钮组件的属性如下：

属性说明disabled表示按钮失效状态ghost表示幽灵按钮，即是否使按钮背景透明。htmlType设置button原生的type值，可选值请参考HTML标准icon设置按钮的图标类型loading设置按钮载入状态shape设置按钮形状，可选值为circle或者不设size设置按钮大小，可选值为small（小）、large（大）或者不设type设置按钮类型，可选值为primary、dashed或danger

按钮组件的事件如下：

事件说明click点击按钮时的回调

 
主按钮次按钮虚线按钮危险按钮
搜索加载...
 

3、实践练习

四、表格组件

1、表格组件介绍

表格组件用于展示行列数据。一般在以下情况下使用：

表格组件包含的常用属性如表所示：

属性说明bordered是否展示外边框和列边框childrenColumnName指定树形结构的列名columns表格列的配置描述dataSource数据数组defaultExpandAllRows初始时，是否展开所有行defaultExpandedRowKeys默认展开的行showHeader是否显示表头size正常或迷你类型title表格标题scroll设置横向或纵向滚动，也可用于指定滚动区域的宽和高

表格组件包含的常用事件如表所示：

事件说明expandedRowsChange展开的行变化时触发函数change分页、排序及筛选变化时触发函数expand点击展开图标时触发函数

2、表格组件使用

使用表格组件需要首选设置表格列的数据，其中列的属性如下表所示

属性说明align设置列内容的对齐方式left、rigt和center，默认值是leftcolSpan表头列合并，当设置为0时，表示不渲染列合并dataIndex列数据在数据项中对应的key，此属性是必须设置属性keyVue需要的key，如果已经设置了唯一的dataIndex，可以忽略这个属性title列头显示文字width列宽度slots使用columns时，可以通过该属性配置支持slot的属性，如slots: { filterIcon: “XXX”}scopedSlots使用columns时，可以通过该属性配置支持slot-scope的属性，如scopedSlots: { customRender: “XXX”}

示例：

 
删除
 

3、实践练习

总结：