Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
文章目录
一、栅格组件
1、栅格组件介绍
在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，Ant Design of Vue将整个设计建议区域按照24等分的原则进行划分。
划分之后的信息区块称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见下图6.1所示。设计部分基于盒子的单位来定制盒子内部的排版规则，以保证视觉层面的舒适感。
栅格组件是布局的栅格化系统，Ant Design of Vue是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。栅格化系统特点：
- 通过row在水平方向建立一组column（简写col）。
- 内容应当放置于col内，并且，只有col可以作为row的直接元素。
- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
- 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。
栅格组件的列属性
| 属性 | 说明 |
|---|---|
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 |
| order | 栅格顺序，flex布局模式下有效 |
| pull | 栅格向左移动格数 |
| push | 栅格向右移动格数 |
| span | 栅格占位格数，为0时相当于display: none |
| xs | 可视区宽度<576px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
| sm | 可视区宽度≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
| md | 可视区宽度≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
| lg | 可视区宽度≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
| xl | 可视区宽度≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
| xxl | 可视区宽度≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 |
栅格组件的行属性
| 属性 | 说明 |
|---|---|
| align | flex布局下的垂直对齐方式：top、middle和bottom |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法{ xs: 8, sm: 16, md: 24} |
| justify | flex布局下的水平排列方式：start、end、center、space-around和space-between |
| type | 布局模式，可选flex，在现代浏览器下有效 |
2、栅格组件使用
示例：基本栅格布局效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app{
text-align: center;
line-height: 50px;
color: white;
}
.acol1{
background-color: #7dbcea;
}
.acol2{
background-color: #108ee9;
}
.arow{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="app">
<a-row class="arow">
<a-col class="acol1" :span="12">col-12</a-col>
<a-col class="acol2" :span="12">col-12</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="8">col-8</a-col>
<a-col class="acol2" :span="8">col-8</a-col>
<a-col class="acol1" :span="8">col-8</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="6">col-6</a-col>
<a-col class="acol2" :span="6">col-6</a-col>
<a-col class="acol1" :span="6">col-6</a-col>
<a-col class="acol2" :span="6">col-6</a-col>
</a-row>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
示例：实现在栅格中的间隔和列偏移效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app {
text-align: center;
line-height: 50px;
color: black;
}
.acol1 {
background-color: #7dbcea;
}
.gutter-box,.acol2{
background-color: #108ee9;
}
.arow {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>列间隔</p>
<div>
<a-row :gutter="16">
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
</a-row>
</div>
<p>列偏移</p>
<div>
<a-row class="arow">
<a-col class="acol1" :span="8">col-8</a-col>
<a-col class="acol2" :span="8" :offset="8">col-8</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="6" :offset="6">col-6 col-offset-6</a-col>
<a-col class="acol2" :span="6" :offset="6">col-6 col-offset-6</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="12" :offset="6">col-12 col-offset-6</a-col>
</a-row>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
3、实践练习
二、输入组件
1、输入框组件使用
输入框组件是通过鼠标或键盘输入内容，是最基础的表单域的包装。一般在以下情况使用：
- 需要用户输入表单域内容时。
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
| 属性 | 说明 |
|---|---|
| addonAfter | 设置带后置标签的输入框 |
| addonBefore | 设置带前置标签的输入框 |
| defaultValue | 输入框默认内容 |
| disabled | 是否禁用状态，默认为false |
| id | 输入框的唯一标示 |
| prefix | 设置带有前缀图标的输入框 |
| size | 输入框大小，标准表单内的输入框大小限制为large。可选值为large、default、small、string和default |
| suffix | 设置带有后缀图标的输入框 |
| type | 声明输入框类型，同原生input标签的type属性一致 |
| value | 输入框内容 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app{
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>订单录入</legend>
<p>
<a-input placeholder="请输入收货人姓名..." v-model="order.name">
<a-icon slot="prefix" type="user" />
</a-input>
</p>
<p>
<a-input placeholder="请输入支付密码..." type="password" v-model="order.password">
<a-icon slot="prefix" type="unlock" />
</a-input>
</p>
<p>
<a-input placeholder="请输入订单总金额..." defaultValue="0.00" v-model="order.price"><span
slot="addonBefore">￥</span><span slot="addonAfter">元</span></a-input>
</p>
<p>
<a-input placeholder="请输入收货地址..." type="textarea" v-model="order.address"></a-input>
</p>
<p>
<a-button type="primary" @click="doSave">保存</a-button>
</p>
</fieldset>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
order: {
name: "",
password: "",
price: "0.00",
adress: ""
}
},
methods: {
doSave: function() {
this.$message.info("订单保存成功！");
}
}
});
</script>
</body>
</html>
2、选择器组件使用
选择器组件实现下拉选择功能。一般应用的情况是：
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
- 当选项少时（少于5项），建议直接将选项平铺。
选择器组件的常用属性
| 属性 | 说明 |
|---|---|
| allowClear | 支持清除 |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在mode为multiple或tags时有效 |
| autoFocus | 默认获取焦点 |
| defaultValue | 指定默认选中的条目 |
| dropdownClassName | 下拉菜单的className属性 |
| allowClear | 支持清除 |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在mode为multiple或tags时有效 |
| autoFocus | 默认获取焦点 |
| defaultValue | 指定默认选中的条目 |
| dropdownClassName | 下拉菜单的className属性 |
选择器组件的常用事件
| 事件 | 说明 |
|---|---|
| blur | 失去焦点的时触发事件 |
| change | 选中option或input的value变化（combobox模式下）时，触发事件 |
| deselect | 取消选中时触发事件，参数为选中项的value（或key）值，仅在multiple或tags模式下生效 |
| focus | 获得焦点时触发事件 |
| search | 文本框值变化时触发事件 |
| select | 被选中时触发事件，参数为选中项的value（或key）值 |
示例：使用选择器实现省市联动功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<h3>省市联动</h3>
<a-select v-model="selectProvince" style="width: 120px" @change="doChange">
<a-select-option v-for="province in provinceData" :key="province">{{province}}
</a-select-option>
</a-select>
<a-select v-model="selectCity" style="width: 120px">
<a-select-option v-for="city in cities" :key="city">{{city}}</a-select-option>
</a-select>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
provinceData: ["湖北", "湖南"],
cityData: {
"湖北": ["武汉", "襄阳", "宜昌"],
"湖南": ["长沙", "岳阳", "永州"],
},
cities: ["武汉", "襄阳", "宜昌"],
selectCity: "武汉",
selectProvince:"湖北"
},
methods: {
doChange: function(value) {
this.cities = this.cityData[value];
this.selectCity = this.cityData[value][0];
}
}
});
</script>
</body>
</html>
3、单选框组件使用
单选框组件用于在多个备选项中选中单个状态。
和选择器之间的区别是，单选框所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
单选框组件包括两个部分Radio（或RadioButton）和RadioGroup，其中RadioGroup用于包裹一组Radio或RadioButton
Radio和RadioGroup包含的属性如下表所示。
Radio的主要属性
| 属性 | 说明 |
|---|---|
| autofocus | 自动获取焦点 |
| checked | 指定当前是否选中 |
| defaultChecked | 初始是否选中 |
| value | 根据value进行比较，判断是否选中 |
RadioGroup的主要属性
| 属性 | 说明 |
|---|---|
| defaultValue | 默认选中的值 |
| disabled | 禁选所有子单选器 |
| name | RadioGroup下所有input[type=“radio”]的name属性 |
| options | 以配置形式设置子元素 |
| size | 大小，只对按钮样式生效，可选值large、default和small |
| value | 用于设置当前选中的值 |
| buttonStyle | RadioButton的风格样式，目前有描边和填色两种风格 |
示例：使用单选框组件实现行星知识测试题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app {
width: 500px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>行星知识测试</h2>
<h4>太阳系中最大的行星是？</h4>
<a-radio-group v-model="result1">
<a-radio-button value="a">金星</a-radio-button>
<a-radio-button value="b">木星</a-radio-button>
<a-radio-button value="c">水星</a-radio-button>
<a-radio-button value="d">火星</a-radio-button>
<a-radio-button value="e">土星</a-radio-button>
</a-radio-group>
<h4>太阳系中离太阳最近的行星是？</h4>
<a-radio-group v-model="result2">
<a-radio value="a">金星</a-radio>
<a-radio value="b">木星</a-radio>
<a-radio value="c">水星</a-radio>
<a-radio value="d">火星</a-radio>
<a-radio value="e">土星</a-radio>
</a-radio-group>
<h4>太阳系中离地球最近的行星是？</h4>
<a-radio-group v-model="result3" :options="items"> </a-radio-group>
<br />
<a-button type="primary" @click="doSubmit">提交</a-button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
items: [{
label: "金星",
value: "a"
}, {
label: "木星",
value: "b"
},{
label: "水星",
value: "c"
},{
label: "火星",
value: "d"
},{
label: "土星",
value: "e"
}],
result1: "",
result2: "",
result3: "",
},
methods: {
doSubmit: function() {
var score = 10;
if (this.result1 == "b") {
score += 30;
}
if (this.result2 == "c") {
score += 30;
}
if (this.result3 == "a") {
score += 30;
}
this.$message.info("您的得分：" + score);
}
}
});
</script>
</body>
</html>
4、实践练习
三、表单组件
1、表单组件使用
表单组件是具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框和下拉选择框等元素。表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。表单组件还提供了以下3种排列方式：
- 水平排列：标签和表单控件水平排列（默认）。
- 垂直排列：标签和表单控件上下垂直排列。
- 行内排列：表单项水平行内排列。
使用Form.create处理表单使其具有自动收集数据并校验的功能。
表单组件基本结构如下所示：
<a-form>
<a-form-item label="输入提示文本">
<a-input v-decorator="[
“字段名”, { rules: [{验证规则,message: "出错提示"}] }
]" />
</a-form-item>
</a-form>
其中，< a-form-item/>表示表单域（Form.Item）。
一个表单域放一个被v-decorator属性装饰过的子元素，当有多个被装饰过的子元素时，help属性、required属性和validateStatus属性无法自动生成。
表单域的属性
| 属性 | 说明 |
|---|---|
| colon | 配合label属性使用，表示是否显示label后面的冒号 |
| extra | 额外的提示信息，和help类似，当需要错误信息和提示同时出现时，可以使用这个属性 |
| hasFeedback | 配合validateStatus属性使用，展示校验状态图标，建议只配合输入框组件使用 |
| help | 提示信息，如不设置，则会根据校验规则自动生成 |
| label | label标签的文本 |
| labelCol | label标签布局，同组件，设置span和offset值，如{span: 3, offset: 12}或sm:{span: 3, offset: 12} |
| required | 是否必填，如不设置，则会根据校验规则自动生成 |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：success、warning、error和validating |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<a-form :form="form" @submit="doSubmit">
<a-form-item label="邮件地址">
<a-input v-decorator="[
'email',{
rules:[{
type:'email',message:'邮件地址格式不正确！',
},{
required:true,message:'邮件地址不能为空！'
}]
}
]" />
</a-form-item>
<a-form-item label="登录密码">
<a-input v-decorator="[
'password',{
rules:[{
required:true,message:'登录密码不能为空！'
}]
}
]" type="password" />
</a-form-item>
<a-form-item label="确认密码">
<a-input v-decorator="[
'confirm',{
rules:[{
required:true,message:'确认密码不能为空！'
},{
validator:compareToFirstPassword,
}]
}
]" type="password" />
</a-form-item>
<a-form-item label="昵称">
<a-input v-decorator="[
'nickname',{
rules:[{
required:true,message:'昵称不能为空！',whitespance:true
}]
}
]" />
</a-form-item>
<a-form-item>
<a-checkbox v-decorator="['agreement', {valuePropName: 'checked' }]">
我已同意 <a href="">《系统使用授权协议》</a>
</a-checkbox>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">注册</a-button>
</a-form-item>
</a-form>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
beforeCreate() {
this.form = this.$form.createForm(this);
},
methods: {
doSubmit(e) {
var _this = this;
e.preventDefault(); //取消事假的默认动作
this.form.validateFieldsAndScroll(function(err, values) {
if (!err) {
_this.$message.info("用户注册成功")
console.log("表单中值", "values")
}
});
},
compareToFirstPassword(rule, value, callback) {
var form = this.form;
if (value && value !== form.getFieldValue("password")) {
callback("密码输入不一致！")
} else {
callback();
}
}
},
});
</script>
</body>
</html>
2、实践练习
四、树形组件
1、树形组件使用
树形组件是按树形呈现数据。
文件夹、组织架构、生物分类以及国家地区等都可以使用树形组件呈现。
使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
树形组件的常用属性
| 属性 | 说明 |
|---|---|
| treeData | 树形组件数据源 |
| autoExpandParent | 是否自动展开父节点 |
| checkable | 节点前添加Checkbox复选框 |
| defaultCheckedKeys | 默认选中复选框的树节点 |
| defaultExpandAll | 默认展开所有树节点 |
| disabled | 设置树是否禁用 |
| draggable | 设置节点是否可拖拽 |
| multiple | 设置是否支持点选多个节点 |
| showIcon | 设置是否展示树节点标题前的图标 |
| showLine | 设置是否展示连接线 |
树形组件的常用事件
| 事件 | 说明 |
|---|---|
| check | 点击复选框触发 |
| dragstart | 开始拖拽时触发 |
| dragend | 结束拖拽时触发 |
| expand | 展开/收起节点时触发 |
| load | 节点加载完毕时触发 |
| rightClick | 在树节点上点击右键触发 |
| select | 点击树节点触发 |
树节点的属性
| 属性 | 说明 |
|---|---|
| disableCheckbox | 禁用树节点的复选框 |
| disabled | 禁用树节点 |
| icon | 设置自定义图标 |
| key | 树节点的唯一标示 |
| selectable | 设置节点是否可被选中 |
| title | 树节点标题 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<a-tree checkable v-bind="attrs" @select="this.onSelect" @check="this.onCheck"> </a-tree>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
attrs: {
treeData: [{
//节点对象数组，可以包含子节点
title: "国内新闻",
key: "new1",
children: [{
title: "社会新闻",
key: "new1-1"
}, {
title: "社会新闻",
key: "new1-2"
}]
},
{
title: "国内新闻",
key: "new2",
children: [{
title: "社会新闻",
key: "new2-1"
}, {
title: "社会新闻",
key: "new2-2"
}]
}
],
defaultExpandedKeys: ["new1", "new2"],
defaultCheckedKeys: ["new1-2", "new2-2"]
}
},
methods: {
onSelect(selectedKeys, info) {
console.log("selected", selectedKeys, info)
},
onCheck(checkedKeys, info) {
console.log("onCheck", checkedKeys, info)
},
}
});
</script>
</body>
</html>
示例：
2、实践练习
总结：
Ant Design of Vue的栅格化系统特点是
- 通过row在水平方向建立一组column（简写col）。
- 内容应当放置于col内，并且，只有col可以作为row的直接元素。
- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
- 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。
使用选择器组件的情况是
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
- 当选项少时（少于5项），建议直接将选项平铺。
表单组件提供了以下3种排列方式：
- 水平排列：标签和表单控件水平排列（默认）。
- 垂直排列：标签和表单控件上下垂直排列。
- 行内排列：表单项水平行内排列。
使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
本文来自博客园，作者：明金同学，转载请注明原文链接：https://www.cnblogs.com/vmuu/p/15663275.html
公众号：【明金同学】