1、安装环境
vue快速学习03、ant-design-Node.js文档类资源-CSDN下载
包含内容：antd.min.css、antd.min.js、vue.min.js。
备注：引入顺序
<!-- vue_css环境 --> <link rel="stylesheet" href="css/antd.min.css"> <!-- vue环境 --> <script src="js/vue.min.js"></script> <!-- antd环境 --> <script src="js/antd.min.js"></script>
2、a-button&a-icon
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <!-- 视图层 --> <div id="app"> <a-button type="primary">默认</a-button> <a-button type="danger">默认</a-button> <a-button size="small">默认</a-button> <a-button size="large">默认</a-button> <a-button shape="circle">默认</a-button> <a-button shape="round">默认</a-button> <a-button loading>默认</a-button> <a-button disabled>默认</a-button> <a-button ghost>默认</a-button> <a-button htmlType="type">默认</a-button> <a-icon type="message"></a-icon> <a-icon type="edit"></a-icon> <a-icon type="block"></a-icon> <a-icon type="key"></a-icon> <a-icon type="wifi"></a-icon> <a-icon type="wechat"></a-icon> <a-icon type="qq" style="font-size: 3rem;"></a-icon> <a-icon type="taobao"></a-icon> <a-icon type="zhihu"></a-icon> <a-icon type="ie"></a-icon> <a-icon type="book"></a-icon> </div> <!-- vue环境 --> <script src="js/vue.min.js"></script> <!-- antd环境 --> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app" }) </script> </body> </html>
3、message消息提示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <p>请输入用户名： <a-input type="text" v-model="userName" placeholder="请输入用户名" /></p> <p> <a-button type="danger" v-on:click="test">点击测试</a-button> </p> </div> <!-- 引入vue环境 --> <script src="js/vue.min.js"></script> <!-- antd环境 --> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app", data: { userName: "" }, methods: { test: function() { this.$message.success("操作成功" + this.userName); this.$message.error("错误提示" + this.userName); this.$message.info("信息提示" + this.userName); this.$message.warning("异常提示" + this.userName); this.$message.loading("等待" + this.userName); } } }) </script> </body> </html>
4、a-layout布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> <style> .ant-layout-sider-children { color: white; } .ant-layout-header { color: white; } .ant-layout-content { background-color: aqua; height: 100px; } .ant-layout-footer { color: white; background-color: black; } </style> </head> <body> <div id="app"> <!-- 左上中下结构 --> <a-layout> <a-layout-sider>标题</a-layout-sider> <a-layout> <a-layout-header>头部</a-layout-header> <a-layout-content>身子</a-layout-content> <a-layout-footer>脚</a-layout-footer> </a-layout> </a-layout> <hr/> <a-layout> <a-layout> <a-layout-header>头部</a-layout-header> </a-layout> <a-layout> <a-layout-sider>菜单</a-layout-sider> <a-layout-content>身子</a-layout-content> </a-layout> <a-layout-footer>脚</a-layout-footer> </a-layout> <hr/> <a-layout> <a-layout> <a-layout-header>头部</a-layout-header> </a-layout> <a-layout> <a-layout-content>身子</a-layout-content> <a-layout-sider>菜单</a-layout-sider> </a-layout> <a-layout-footer>脚</a-layout-footer> </a-layout> <hr/> <a-layout> <a-layout-header>头</a-layout-header> <a-layout-content>身子</a-layout-content> <a-layout-footer>脚</a-layout-footer> </a-layout> </div> <!-- 引入vue --> <script src="js/vue.min.js"></script> <!-- antd --> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app" }) </script> </body> </html>
5、a-menu菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <a-menu style="width:50%" mode="inline" theme="dark"> <a-menu-item>银行金库</a-menu-item> <a-sub-menu> <a-menu-item>库尔勒金库</a-menu-item> <a-sub-menu> <a-menu-item>南库</a-menu-item> <a-menu-item>北库</a-menu-item> </a-sub-menu> <a-menu-item>咸阳金库</a-menu-item> </a-sub-menu> <a-menu-item>包袋单位</a-menu-item> <a-sub-menu> <a-menu-item>50元纸币/包袋100万</a-menu-item> <a-menu-item>100元纸币/包袋200万</a-menu-item> </a-sub-menu> </a-menu> <hr/> <!-- 面包屑 --> <a-breadcrumb> <a-breadcrumb-item>首页</a-breadcrumb-item> <a-breadcrumb-item>导航</a-breadcrumb-item> <a-breadcrumb-item>母婴用品</a-breadcrumb-item> <a-breadcrumb-item>尿不湿</a-breadcrumb-item> <a-breadcrumb-item>婴幼儿尿不湿</a-breadcrumb-item> <a-breadcrumb-item>婴幼儿拉拉裤</a-breadcrumb-item> </a-breadcrumb> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app" }) </script> </body> </html>
6、a-button-group
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app" style="width:30%;height:60vh;margin:50px auto"> <div> <p> <a-input type="text" v-model="showText" placeholder="0" style="border:1px solid black;text-align: right" /> </p> </div> <div style="width:90%;margin:0px auto"> <p> <a-button-group style="width:100%"> <a-button style="width:33%" type="danger" v-on:click="inN(7)">7</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(8)">8</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(9)">9</a-button> </a-button-group> </p> <p> <a-button-group style="width:100%"> <a-button style="width:33%" type="danger" v-on:click="inN(4)">4</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(5)">5</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(6)">6</a-button> </a-button-group> </p> <p> <a-button-group style="width:100%"> <a-button style="width:33%" type="danger" v-on:click="inN(1)">1</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(2)">2</a-button> <a-button style="width:33%" type="danger" v-on:click="inN(3)">3</a-button> </a-button-group> </p> <p> <a-button-group style="width:100%"> <a-button style="width:33%" type="danger" v-on:click="inN(0)">0</a-button> <a-button style="width:33%" type="danger" v-on:click="ysf('+')">+</a-button> <a-button style="width:33%" type="danger" v-on:click="ysf('-')">-</a-button> </a-button-group> </p> <p> <a-button type="primary" style="width:100%" v-on:click="result">=</a-button> </p> <p> <a-button type="primary" style="width:100%" v-on:click="resetNu">C</a-button> </p> </div> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app", data: { showText: "", logYsf: "", cache: 0 }, methods: { inN: function(o) { this.showText += o + ""; }, ysf: function(o) { //运算符 this.cache = this.showText; this.showText = 0; this.logYsf = o; }, result: function() { if (this.logYsf == "+") { this.showText = parseInt(this.showText) + parseInt(this.cache); } else if (this.logYsf == "-") { this.showText = parseInt(this.cache) - parseInt(this.showText); } this.$message.success("计算成功"); }, resetNu: function() { this.cache = ""; this.showText = 0; this.logYsf = ""; } } }) </script> </body> </html>
7、a-row&a-col
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <a-row style="background-color: skyblue;"> <a-col :span="12" style="background-color: hotpink;height: 5vh;"></a-col> <a-col :span="12"></a-col> </a-row> <hr/> <a-row style="background-color: skyblue;"> <a-col :span="2" style="background-color: hotpink;height: 5vh;"></a-col> <a-col :span="6" style="background-color: blue;height: 5vh;"></a-col> <a-col :span="5"></a-col> <a-col :span="3" style="background-color: hotpink;height: 5vh;"></a-col> <a-col :span="8" style="background-color: blue;height: 5vh;"></a-col> </a-row> <hr/> <a-row> <a-row> <a-col :span="24" style="background-color: red;height: 5vh;"></a-col> </a-row> <a-row> <a-col :span="4" style="background-color: gray;height: 25vh;"></a-col> <a-col :span="20" style="background-color: yellow;height: 25vh;"></a-col> </a-row> <a-row> <a-col :span="24" style="background-color: blue;height: 5vh;"></a-col> </a-row> </a-row> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app" }) </script> </body> </html>
8、a-input、a-textarea、a-input-number、a-radio-group、a-rate、a-select、a-spin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <a-input style="text-align: right" prefix="￥" suffix="元"></a-input> <a-input-search></a-input-search><br/> <a-textarea></a-textarea> <a-input-number></a-input-number> <a-input-number size="large"></a-input-number> <a-input-number size="small"></a-input-number> <a-radio-group> <a-radio :value="1">男</a-radio> <a-radio :value="0">女</a-radio> </a-radio-group> <a-rate :default-value="2.5" allow-half></a-rate> <a-select default-value="汉族" style="width:100px"> <a-select-option key="1" value="1" disabled>汉族</a-select-option> <a-select-option key="1" value="2">傣族</a-select-option> </a-select> <a-spin></a-spin> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app" }) </script> </body> </html>
9、rules
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <!-- 如果未初始化过form无法使用 --> <a-form :form="form"> <a-form-item label="用户名"> <!-- 验证的书写格式--> <a-input v-decorator="['userName', { rules: [{ required: true, message: '用户名不能为空!' }] } ]" /> </a-form-item> </a-form> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app", beforeCreate() { //1、初始化创建form this.form = this.$form.createForm(this); } }) </script> </body> </html>
10、a-tree
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <a-tree v-bind="attrs"></a-tree> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app", data: { attrs: { treeData: [{ title: "新闻一部", key: "new1", children: [{ title: "新华社消息", key: "new1-1" }, { title: "路透社消息", key: "new1-2" }, { title: "路透社消息", key: "new1-3" }] }, { title: "新闻二部", key: "new2", children: [{ title: "新华社消息", key: "new2-1" }, { title: "路透社消息", key: "new2-2" }, { title: "路透社消息", key: "new2-3" }] }, ] } } }) </script> </body> </html>
11、a-table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/antd.min.css"> </head> <body> <div id="app"> <a-table v-bind="attrs" :columns="columns"> <!-- slot-scope="text"是传递值的方式 --> <td> <span slot="id" slot-scope="text"> <a-button type="danger" v-on:click="del(text)">删除</a-button> </span> </td> </a-table> </div> <script src="js/vue.min.js"></script> <script src="js/antd.min.js"></script> <script> new Vue({ el: "#app", data: { columns: [{ title: "编号", //显示的名称 dataIndex: "id", //绑定的数据, key: "id", //关键字 align: "center", //位置 width: "50px", //设置宽度 }, { title: "姓名", //显示的名称 dataIndex: "name", //绑定的数据, key: "name", //关键字 align: "center", //位置 width: "100px" //设置宽度 }, { title: "详情", //显示的名称 dataIndex: "info", //绑定的数据, key: "info", //关键字 align: "center", //位置 width: "150px" //设置宽度 },{ title: "操作", //显示的名称 dataIndex: "id", //绑定的数据, key: "id", //关键字 align: "center", //位置 width: "50px", //设置宽度 scopedSlots: { //声明功能 customRender: "id" } } ], attrs: { dataSource: [{ id: 1, name: "李春梦", info: "管钱的，百度2班大管家。" }, { id: 2, name: "杨建强", info: "百度2班大班长，争取大创拿个金奖回来。" }, { id: 3, name: "王泽细", info: "政委，一个身负重担的精致女子。" }, { id: 4, name: "李勇", info: "虽然不是班委，但是很好用。话少，活好。" }], rowkey: "id" }, }, methods: { del: function(o) { for (var index = 0; index < this.attrs.dataSource.length; index++) { const element = this.attrs.dataSource[index]; if (element.id == o) { this.attrs.dataSource.splice(index, 1); } } this.$message.success("删除成功"); } } }) </script> </body> </html>
基础操作演示完毕，有需要可以自己去搜索antd的全部功能。
