Ant Design Vue项目(2)

790 阅读1分钟

VUE项目实战

Ant Design Vue项目

第二步(整体布局)

整体布局

  1. 使用Ant Design Vue组件,定义了布局组件,可以利用他进行全部布局,官网链接可以瞅瞅

    [www.antdv.com/components/…]:

    1. Layout布局
    2. menu导航栏
  2. 安装插件

    npm install ant-design-vue --save
    
  3. 在main.js中引入:

    import Antd from 'ant-design-vue'
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd)
    
  4. 就可以使用Ant Design Vue啦

设计布局

  1. 新建layout文件夹

  2. 一般的布局结构如下,设计的也是这样子的布局:

image.png

  1. 代码可以在官网进行参考,我根据自己的喜好改的如下:

    <template>
      <a-layout id="components-layout-demo-top-side-2">
        <a-layout-header class="header"
          :style="{backgroundColor:'pink'}"
        >
          <div class="logo" />
          <a-menu
            theme="light"
            mode="horizontal"
            :default-selected-keys="['2']"
            :style="{ lineHeight: '64px',float:'right',backgroundColor:'pink'}"
          >
            <a-menu-item key="1">
              我的
            </a-menu-item>
            <a-menu-item key="2">
              消息
            </a-menu-item>
            <a-menu-item key="3">
              退出
            </a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout>
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
              mode="inline"
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              :style="{ height: '100%', borderRight: 0 }"
            >
              <a-sub-menu key="sub1">
                <span slot="title"><a-icon type="user" />首页</span>
                <a-menu-item key="1">
                  vue
                </a-menu-item>
                <a-menu-item key="2">
                  react
                </a-menu-item>
                <a-menu-item key="3">
                  layui
                </a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <span slot="title"><a-icon type="laptop" />行业使用</span>
                <a-menu-item key="5">
                  医疗
                </a-menu-item>
                <a-menu-item key="6">
                  教育
                </a-menu-item>
                <a-menu-item key="7">
                  司法
                </a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3">
                <span slot="title"><a-icon type="notification" />个人产品</span>
                <a-menu-item key="9">
                  AI
                </a-menu-item>
                <a-menu-item key="10">
                  输入法
                </a-menu-item>
                <a-menu-item key="11">
                  智能识别
                </a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding:24px 24px 24px 24px"> 
            <a-layout-content
              :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '100vh' }"
            >
            内容是不一样的呀
              <router-view></router-view>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      data() {
        return {
          collapsed: false,
        };
      },
    };
    </script>
    
    <style>
    body,html{
      margin: 0;
    }
    
    #app{
      margin: 0;
      padding: 0;
    }
    
    #components-layout-demo-top-side-2 .logo {
      width: 120px;
      height: 31px;
      background: rgba(255, 255, 255, 0.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
    
    a-menu-item{
      padding: 0;
    }
    
    </style>
    

总结

  • 顶部导航高度的范围计算公式为:48+8n
  • 侧边导航宽度的范围计算公式:200+8n