V2AS问路
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
阅读原文时间：2022年01月21日阅读：4

全部章节 >>>>

文章目录

一、栅格组件

在多数业务情况下，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，在现代浏览器下有效

示例：基本栅格布局效果

<!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>

二、输入组件

输入框组件是通过鼠标或键盘输入内容，是最基础的表单域的包装。一般在以下情况使用：

  • 需要用户输入表单域内容时。
  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

属性

说明

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>

选择器组件实现下拉选择功能。一般应用的情况是：

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于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>

单选框组件用于在多个备选项中选中单个状态。

和选择器之间的区别是，单选框所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

单选框组件包括两个部分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>

三、表单组件

表单组件是具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框和下拉选择框等元素。表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。表单组件还提供了以下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>

四、树形组件

树形组件是按树形呈现数据。

文件夹、组织架构、生物分类以及国家地区等都可以使用树形组件呈现。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

树形组件的常用属性

属性

说明

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>

示例：

总结：

Ant Design of Vue的栅格化系统特点是

  • 通过row在水平方向建立一组column（简写col）。
  • 内容应当放置于col内，并且，只有col可以作为row的直接元素。
  • 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
  • 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。

使用选择器组件的情况是

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于5项），建议直接将选项平铺。

表单组件提供了以下3种排列方式：

  • 水平排列：标签和表单控件水平排列（默认）。
  • 垂直排列：标签和表单控件上下垂直排列。
  • 行内排列：表单项水平行内排列。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

vue~封装一个文本框添加与删除的组件
数据可视化【原创】vue复合数字形式展示
Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数

4

Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例

5

分享vue ui时间组件用法

6

（几乎）完美实现 el-table 列宽自适应