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
公众号:【明金同学】