• vue快速学习03、ant-design

    vue快速学习03、ant-design

    目录

    vue快速学习03、ant-design

    1、安装环境

    2、a-button&a-icon

    3、message消息提示

    4、a-layout布局

    5、a-menu菜单

    6、a-button-group

    7、a-row&a-col

    8、a-input、a-textarea、a-input-number、a-radio-group、a-rate、a-select、a-spin

    9、rules

    10、a-tree

    11、a-table

    1、安装环境

    vue快速学习03、ant-design-Node.js文档类资源-CSDN下载

    包含内容：antd.min.css、antd.min.js、vue.min.js。

    备注：引入顺序

    1. <!-- vue_css环境 -->
    2. <link rel="stylesheet" href="css/antd.min.css">
    3. <!-- vue环境 -->
    4. <script src="js/vue.min.js"></script>
    5. <!-- antd环境 -->
    6. <script src="js/antd.min.js"></script>

    2、a-button&a-icon

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <!-- 视图层 -->
    14.     <div id="app">
    15.         <a-button type="primary">默认</a-button>
    16.         <a-button type="danger">默认</a-button>
    17.         <a-button size="small">默认</a-button>
    18.         <a-button size="large">默认</a-button>
    19.         <a-button shape="circle">默认</a-button>
    20.         <a-button shape="round">默认</a-button>
    21.         <a-button loading>默认</a-button>
    22.         <a-button disabled>默认</a-button>
    23.         <a-button ghost>默认</a-button>
    24.         <a-button htmlType="type">默认</a-button>
    25.         <a-icon type="message"></a-icon>
    26.         <a-icon type="edit"></a-icon>
    27.         <a-icon type="block"></a-icon>
    28.         <a-icon type="key"></a-icon>
    29.         <a-icon type="wifi"></a-icon>
    30.         <a-icon type="wechat"></a-icon>
    31.         <a-icon type="qq" style="font-size: 3rem;"></a-icon>
    32.         <a-icon type="taobao"></a-icon>
    33.         <a-icon type="zhihu"></a-icon>
    34.         <a-icon type="ie"></a-icon>
    35.         <a-icon type="book"></a-icon>
    36.     </div>
    37.     <!-- vue环境 -->
    38.     <script src="js/vue.min.js"></script>
    39.     <!-- antd环境 -->
    40.     <script src="js/antd.min.js"></script>
    41.     <script>
    42.         new Vue({
    43.             el: "#app"
    44.         })
    45.     </script>
    46. </body>
    47.  
    48. </html>

    3、message消息提示

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <p>请输入用户名：
    15.             <a-input type="text" v-model="userName" placeholder="请输入用户名" /></p>
    16.         <p>
    17.             <a-button type="danger" v-on:click="test">点击测试</a-button>
    18.         </p>
    19.     </div>
    20.     <!-- 引入vue环境 -->
    21.     <script src="js/vue.min.js"></script>
    22.     <!-- antd环境 -->
    23.     <script src="js/antd.min.js"></script>
    24.     <script>
    25.         new Vue({
    26.             el: "#app",
    27.             data: {
    28.                 userName: ""
    29.             },
    30.             methods: {
    31.                 test: function() {
    32.                     this.$message.success("操作成功" + this.userName);
    33.                     this.$message.error("错误提示" + this.userName);
    34.                     this.$message.info("信息提示" + this.userName);
    35.                     this.$message.warning("异常提示" + this.userName);
    36.                     this.$message.loading("等待" + this.userName);
    37.                 }
    38.             }
    39.         })
    40.     </script>
    41. </body>
    42.  
    43. </html>

    4、a-layout布局

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10.     <style>
    11.         .ant-layout-sider-children {
    12.             color: white;
    13.         }
    14.         
    15.         .ant-layout-header {
    16.             color: white;
    17.         }
    18.         
    19.         .ant-layout-content {
    20.             background-color: aqua;
    21.             height: 100px;
    22.         }
    23.         
    24.         .ant-layout-footer {
    25.             color: white;
    26.             background-color: black;
    27.         }
    28.     </style>
    29. </head>
    30.  
    31. <body>
    32.     <div id="app">
    33.         <!-- 左上中下结构 -->
    34.         <a-layout>
    35.             <a-layout-sider>标题</a-layout-sider>
    36.             <a-layout>
    37.                 <a-layout-header>头部</a-layout-header>
    38.                 <a-layout-content>身子</a-layout-content>
    39.                 <a-layout-footer>脚</a-layout-footer>
    40.             </a-layout>
    41.         </a-layout>
    42.         <hr/>
    43.         <a-layout>
    44.             <a-layout>
    45.                 <a-layout-header>头部</a-layout-header>
    46.             </a-layout>
    47.             <a-layout>
    48.                 <a-layout-sider>菜单</a-layout-sider>
    49.                 <a-layout-content>身子</a-layout-content>
    50.             </a-layout>
    51.             <a-layout-footer>脚</a-layout-footer>
    52.         </a-layout>
    53.         <hr/>
    54.         <a-layout>
    55.             <a-layout>
    56.                 <a-layout-header>头部</a-layout-header>
    57.             </a-layout>
    58.             <a-layout>
    59.                 <a-layout-content>身子</a-layout-content>
    60.                 <a-layout-sider>菜单</a-layout-sider>
    61.             </a-layout>
    62.             <a-layout-footer>脚</a-layout-footer>
    63.         </a-layout>
    64.         <hr/>
    65.         <a-layout>
    66.             <a-layout-header>头</a-layout-header>
    67.             <a-layout-content>身子</a-layout-content>
    68.             <a-layout-footer>脚</a-layout-footer>
    69.         </a-layout>
    70.     </div>
    71.     <!-- 引入vue -->
    72.     <script src="js/vue.min.js"></script>
    73.     <!-- antd -->
    74.     <script src="js/antd.min.js"></script>
    75.     <script>
    76.         new Vue({
    77.             el: "#app"
    78.         })
    79.     </script>
    80. </body>
    81.  
    82. </html>

    5、a-menu菜单

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <a-menu style="width:50%" mode="inline" theme="dark">
    15.             <a-menu-item>银行金库</a-menu-item>
    16.             <a-sub-menu>
    17.                 <a-menu-item>库尔勒金库</a-menu-item>
    18.                 <a-sub-menu>
    19.                     <a-menu-item>南库</a-menu-item>
    20.                     <a-menu-item>北库</a-menu-item>
    21.                 </a-sub-menu>
    22.                 <a-menu-item>咸阳金库</a-menu-item>
    23.             </a-sub-menu>
    24.             <a-menu-item>包袋单位</a-menu-item>
    25.             <a-sub-menu>
    26.                 <a-menu-item>50元纸币/包袋100万</a-menu-item>
    27.                 <a-menu-item>100元纸币/包袋200万</a-menu-item>
    28.             </a-sub-menu>
    29.         </a-menu>
    30.         <hr/>
    31.         <!-- 面包屑 -->
    32.         <a-breadcrumb>
    33.             <a-breadcrumb-item>首页</a-breadcrumb-item>
    34.             <a-breadcrumb-item>导航</a-breadcrumb-item>
    35.             <a-breadcrumb-item>母婴用品</a-breadcrumb-item>
    36.             <a-breadcrumb-item>尿不湿</a-breadcrumb-item>
    37.             <a-breadcrumb-item>婴幼儿尿不湿</a-breadcrumb-item>
    38.             <a-breadcrumb-item>婴幼儿拉拉裤</a-breadcrumb-item>
    39.         </a-breadcrumb>
    40.  
    41.     </div>
    42.     <script src="js/vue.min.js"></script>
    43.     <script src="js/antd.min.js"></script>
    44.     <script>
    45.         new Vue({
    46.             el: "#app"
    47.         })
    48.     </script>
    49. </body>
    50.  
    51. </html>

    6、a-button-group

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app" style="width:30%;height:60vh;margin:50px auto">
    14.         <div>
    15.             <p>
    16.                 <a-input type="text" v-model="showText" placeholder="0" style="border:1px solid black;text-align: right" />
    17.             </p>
    18.         </div>
    19.         <div style="width:90%;margin:0px auto">
    20.             <p>
    21.                 <a-button-group style="width:100%">
    22.                     <a-button style="width:33%" type="danger" v-on:click="inN(7)">7</a-button>
    23.                     <a-button style="width:33%" type="danger" v-on:click="inN(8)">8</a-button>
    24.                     <a-button style="width:33%" type="danger" v-on:click="inN(9)">9</a-button>
    25.                 </a-button-group>
    26.             </p>
    27.             <p>
    28.                 <a-button-group style="width:100%">
    29.                     <a-button style="width:33%" type="danger" v-on:click="inN(4)">4</a-button>
    30.                     <a-button style="width:33%" type="danger" v-on:click="inN(5)">5</a-button>
    31.                     <a-button style="width:33%" type="danger" v-on:click="inN(6)">6</a-button>
    32.                 </a-button-group>
    33.             </p>
    34.             <p>
    35.                 <a-button-group style="width:100%">
    36.                     <a-button style="width:33%" type="danger" v-on:click="inN(1)">1</a-button>
    37.                     <a-button style="width:33%" type="danger" v-on:click="inN(2)">2</a-button>
    38.                     <a-button style="width:33%" type="danger" v-on:click="inN(3)">3</a-button>
    39.                 </a-button-group>
    40.             </p>
    41.             <p>
    42.                 <a-button-group style="width:100%">
    43.                     <a-button style="width:33%" type="danger" v-on:click="inN(0)">0</a-button>
    44.                     <a-button style="width:33%" type="danger" v-on:click="ysf('+')">+</a-button>
    45.                     <a-button style="width:33%" type="danger" v-on:click="ysf('-')">-</a-button>
    46.                 </a-button-group>
    47.             </p>
    48.             <p>
    49.                 <a-button type="primary" style="width:100%" v-on:click="result">=</a-button>
    50.             </p>
    51.             <p>
    52.                 <a-button type="primary" style="width:100%" v-on:click="resetNu">C</a-button>
    53.             </p>
    54.         </div>
    55.     </div>
    56.     <script src="js/vue.min.js"></script>
    57.     <script src="js/antd.min.js"></script>
    58.     <script>
    59.         new Vue({
    60.             el: "#app",
    61.             data: {
    62.                 showText: "",
    63.                 logYsf: "",
    64.                 cache: 0
    65.             },
    66.             methods: {
    67.                 inN: function(o) {
    68.                     this.showText += o + "";
    69.                 },
    70.                 ysf: function(o) { //运算符
    71.                     this.cache = this.showText;
    72.                     this.showText = 0;
    73.                     this.logYsf = o;
    74.                 },
    75.                 result: function() {
    76.                     if (this.logYsf == "+") {
    77.                         this.showText = parseInt(this.showText) + parseInt(this.cache);
    78.                     } else if (this.logYsf == "-") {
    79.                         this.showText = parseInt(this.cache) - parseInt(this.showText);
    80.                     }
    81.                     this.$message.success("计算成功");
    82.                 },
    83.                 resetNu: function() {
    84.                     this.cache = "";
    85.                     this.showText = 0;
    86.                     this.logYsf = "";
    87.                 }
    88.  
    89.             }
    90.         })
    91.     </script>
    92. </body>
    93.  
    94. </html>

    7、a-row&a-col

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <a-row style="background-color: skyblue;">
    15.             <a-col :span="12" style="background-color: hotpink;height: 5vh;"></a-col>
    16.             <a-col :span="12"></a-col>
    17.         </a-row>
    18.         <hr/>
    19.         <a-row style="background-color: skyblue;">
    20.             <a-col :span="2" style="background-color: hotpink;height: 5vh;"></a-col>
    21.             <a-col :span="6" style="background-color: blue;height: 5vh;"></a-col>
    22.             <a-col :span="5"></a-col>
    23.             <a-col :span="3" style="background-color: hotpink;height: 5vh;"></a-col>
    24.             <a-col :span="8" style="background-color: blue;height: 5vh;"></a-col>
    25.         </a-row>
    26.         <hr/>
    27.         <a-row>
    28.             <a-row>
    29.                 <a-col :span="24" style="background-color: red;height: 5vh;"></a-col>
    30.             </a-row>
    31.             <a-row>
    32.                 <a-col :span="4" style="background-color: gray;height: 25vh;"></a-col>
    33.                 <a-col :span="20" style="background-color: yellow;height: 25vh;"></a-col>
    34.             </a-row>
    35.             <a-row>
    36.                 <a-col :span="24" style="background-color: blue;height: 5vh;"></a-col>
    37.             </a-row>
    38.         </a-row>
    39.     </div>
    40.     <script src="js/vue.min.js"></script>
    41.     <script src="js/antd.min.js"></script>
    42.     <script>
    43.         new Vue({
    44.             el: "#app"
    45.         })
    46.     </script>
    47. </body>
    48.  
    49. </html>

    8、a-input、a-textarea、a-input-number、a-radio-group、a-rate、a-select、a-spin

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <a-input style="text-align: right" prefix="￥" suffix="元"></a-input>
    15.         <a-input-search></a-input-search><br/>
    16.         <a-textarea></a-textarea>
    17.         <a-input-number></a-input-number>
    18.         <a-input-number size="large"></a-input-number>
    19.         <a-input-number size="small"></a-input-number>
    20.         <a-radio-group>
    21.             <a-radio :value="1">男</a-radio>
    22.             <a-radio :value="0">女</a-radio>
    23.         </a-radio-group>
    24.         <a-rate :default-value="2.5" allow-half></a-rate>
    25.         <a-select default-value="汉族" style="width:100px">
    26.             <a-select-option key="1" value="1" disabled>汉族</a-select-option>
    27.             <a-select-option key="1" value="2">傣族</a-select-option>
    28.         </a-select>
    29.         <a-spin></a-spin>
    30.     </div>
    31.     <script src="js/vue.min.js"></script>
    32.     <script src="js/antd.min.js"></script>
    33.     <script>
    34.         new Vue({
    35.             el: "#app"
    36.         })
    37.     </script>
    38. </body>
    39.  
    40. </html>

    9、rules

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <!-- 如果未初始化过form无法使用 -->
    15.         <a-form :form="form">
    16.             <a-form-item label="用户名">
    17.                 <!-- 验证的书写格式-->
    18.                 <a-input v-decorator="['userName',
    19.                 { rules: [{ required: true, message: '用户名不能为空!' }] } ]" />
    20.             </a-form-item>
    21.         </a-form>
    22.  
    23.     </div>
    24.     <script src="js/vue.min.js"></script>
    25.     <script src="js/antd.min.js"></script>
    26.     <script>
    27.         new Vue({
    28.             el: "#app",
    29.             beforeCreate() { //1、初始化创建form
    30.                 this.form = this.$form.createForm(this);
    31.             }
    32.         })
    33.     </script>
    34. </body>
    35.  
    36. </html>

    10、a-tree

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <a-tree v-bind="attrs"></a-tree>
    15.     </div>
    16.     <script src="js/vue.min.js"></script>
    17.     <script src="js/antd.min.js"></script>
    18.     <script>
    19.         new Vue({
    20.             el: "#app",
    21.             data: {
    22.                 attrs: {
    23.                     treeData: [{
    24.                         title: "新闻一部",
    25.                         key: "new1",
    26.                         children: [{
    27.                             title: "新华社消息",
    28.                             key: "new1-1"
    29.                         }, {
    30.                             title: "路透社消息",
    31.                             key: "new1-2"
    32.                         }, {
    33.                             title: "路透社消息",
    34.                             key: "new1-3"
    35.                         }]
    36.                     }, {
    37.                         title: "新闻二部",
    38.                         key: "new2",
    39.                         children: [{
    40.                             title: "新华社消息",
    41.                             key: "new2-1"
    42.                         }, {
    43.                             title: "路透社消息",
    44.                             key: "new2-2"
    45.                         }, {
    46.                             title: "路透社消息",
    47.                             key: "new2-3"
    48.                         }]
    49.                     }, ]
    50.  
    51.                 }
    52.             }
    53.         })
    54.     </script>
    55. </body>
    56.  
    57. </html>

    11、a-table

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <a-table v-bind="attrs" :columns="columns">
    15.             <!--  slot-scope="text"是传递值的方式 -->
    16.             <td>
    17.                 <span slot="id" slot-scope="text">
    18.                     <a-button type="danger" v-on:click="del(text)">删除</a-button>
    19.                 </span>
    20.             </td>
    21.         </a-table>
    22.     </div>
    23.     <script src="js/vue.min.js"></script>
    24.     <script src="js/antd.min.js"></script>
    25.     <script>
    26.         new Vue({
    27.             el: "#app",
    28.             data: {
    29.                 columns: [{
    30.                     title: "编号", //显示的名称
    31.                     dataIndex: "id", //绑定的数据,
    32.                     key: "id", //关键字
    33.                     align: "center", //位置
    34.                     width: "50px", //设置宽度
    35.                 }, {
    36.                     title: "姓名", //显示的名称
    37.                     dataIndex: "name", //绑定的数据,
    38.                     key: "name", //关键字
    39.                     align: "center", //位置
    40.                     width: "100px" //设置宽度
    41.                 }, {
    42.                     title: "详情", //显示的名称
    43.                     dataIndex: "info", //绑定的数据,
    44.                     key: "info", //关键字
    45.                     align: "center", //位置
    46.                     width: "150px" //设置宽度
    47.                 },{
    48.                     title: "操作", //显示的名称
    49.                     dataIndex: "id", //绑定的数据,
    50.                     key: "id", //关键字
    51.                     align: "center", //位置
    52.                     width: "50px", //设置宽度
    53.                     scopedSlots: { //声明功能
    54.                         customRender: "id"
    55.                     }
    56.                 }
    57.                 ],
    58.                 attrs: {
    59.                     dataSource: [{
    60.                         id: 1,
    61.                         name: "李春梦",
    62.                         info: "管钱的，百度2班大管家。"
    63.                     }, {
    64.                         id: 2,
    65.                         name: "杨建强",
    66.                         info: "百度2班大班长，争取大创拿个金奖回来。"
    67.                     }, {
    68.                         id: 3,
    69.                         name: "王泽细",
    70.                         info: "政委，一个身负重担的精致女子。"
    71.                     }, {
    72.                         id: 4,
    73.                         name: "李勇",
    74.                         info: "虽然不是班委，但是很好用。话少，活好。"
    75.                     }],
    76.                     rowkey: "id"
    77.                 },
    78.             },
    79.             methods: {
    80.                 del: function(o) {
    81.                     for (var index = 0; index < this.attrs.dataSource.length; index++) {
    82.                         const element = this.attrs.dataSource[index];
    83.                         if (element.id == o) {
    84.                             this.attrs.dataSource.splice(index, 1);
    85.                         }
    86.                     }
    87.                     this.$message.success("删除成功");
    88.                 }
    89.             }
    90.         })
    91.     </script>
    92. </body>
    93.  
    94. </html>

    基础操作演示完毕，有需要可以自己去搜索antd的全部功能。

  • 相关阅读:
    【Angular1】基础使用及各类方法
    [职场] 求职如何设置预期 #笔记#经验分享
    12.面试题——Spring Boot
    Jetson Nano上jtop（jetson_stats.service）不能运行
    用Python来开发安卓程序：(1)BeeWare安卓开发环境的搭建
    视频怎么消除人声？一款视频去人声软件，轻松去除视频人声
    万宾科技智能井盖传感器，预防城市道路安全
    企业如何做源代码保护措施
    Linux性能优化方案
    调试 Mahony 滤波算法的思考 10
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/125450680