精华内容
下载资源
问答
  • Vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具
  • vue、Layout 布局、Layout 属性、vue Layout 全部布局、vue Layout 全部属性

    设计规则

    协助进行页面级整体布局。

    尺寸

    一级导航项偏左靠近 logo 放置,辅助菜单偏右放置。

    • 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px
    • 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px
    • 顶部导航高度的范围计算公式为:48+8n
    • 侧边导航宽度的范围计算公式:200+8n

    交互

    • 一级导航和末级的导航需要在可视化的层面被强调出来;
    • 当前项应该在呈现上优先级最高;
    • 当导航收起的时候,当前项的样式自动赋予给它的上一个层级;
    • 左侧导航栏的收放交互同时支持手风琴和全展开的样式,根据业务的要求进行适当的选择。

    视觉

    导航样式上需要根据信息层级合理的选择样式:

    • 大色块强调

    建议用于底色为深色系时,当前页面父级的导航项。

    • 高亮火柴棍

    当导航栏底色为浅色系时使用,可用于当前页面对应导航项,建议尽量在导航路径的最终项使用。

    • 字体高亮变色

    从可视化层面,字体高亮的视觉强化力度低于大色块,通常在当前项的上一级使用。

    • 字体放大

    12px14px 是导航的标准字号,14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

    组件概述

    Layout:布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。
    Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
    Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout中。
    Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout中。

    代码演示

    1.基本结构

    在这里插入图片描述
    典型的页面布局。

    <template>
      <div id="components-layout-demo-basic">
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout-content>Content</a-layout-content>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout>
            <a-layout-sider>Sider</a-layout-sider>
            <a-layout-content>Content</a-layout-content>
          </a-layout>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout>
            <a-layout-content>Content</a-layout-content>
            <a-layout-sider>Sider</a-layout-sider>
          </a-layout>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-sider>Sider</a-layout-sider>
          <a-layout>
            <a-layout-header>Header</a-layout-header>
            <a-layout-content>Content</a-layout-content>
            <a-layout-footer>Footer</a-layout-footer>
          </a-layout>
        </a-layout>
      </div>
    </template>
    <style>
    #components-layout-demo-basic {
      text-align: center;
    }
    #components-layout-demo-basic .ant-layout-header,
    #components-layout-demo-basic .ant-layout-footer {
      background: #7dbcea;
      color: #fff;
    }
    #components-layout-demo-basic .ant-layout-footer {
      line-height: 1.5;
    }
    #components-layout-demo-basic .ant-layout-sider {
      background: #3ba0e9;
      color: #fff;
      line-height: 120px;
    }
    #components-layout-demo-basic .ant-layout-content {
      background: rgba(16, 142, 233, 1);
      color: #fff;
      min-height: 120px;
      line-height: 120px;
    }
    #components-layout-demo-basic > .ant-layout {
      margin-bottom: 48px;
    }
    #components-layout-demo-basic > .ant-layout:last-child {
      margin: 0;
    }
    </style>
    

    2.自定义触发器

    在这里插入图片描述
    要使用自定义触发器,可以设置 :trigger="null" 来隐藏默认设定。

    <template>
      <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider
          :trigger="null"
          collapsible
          v-model="collapsed"
        >
          <div class="logo" />
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span>nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span>nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span>nav 3</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-header style="background: #fff; padding: 0">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="()=> collapsed = !collapsed"
            />
          </a-layout-header>
          <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
            Content
          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      data(){
        return {
          collapsed: false,
        }
      },
    }
    </script>
    <style>
    #components-layout-demo-custom-trigger .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color .3s;
    }
    
    #components-layout-demo-custom-trigger .trigger:hover {
      color: #1890ff;
    }
    
    #components-layout-demo-custom-trigger .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    3.顶部-侧边布局-通栏

    在这里插入图片描述
    同样拥有顶部导航及侧边栏,区别是两边未留边距,多用于应用型的网站。

    <template>
      <a-layout id="components-layout-demo-top-side-2">
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout>
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
              mode="inline"
              :defaultSelectedKeys="['1']"
              :defaultOpenKeys="['sub1']"
              :style="{ height: '100%', borderRight: 0 }"
            >
              <a-sub-menu key="sub1">
                <span slot="title"><a-icon type="user" />subnav 1</span>
                <a-menu-item key="1">option1</a-menu-item>
                <a-menu-item key="2">option2</a-menu-item>
                <a-menu-item key="3">option3</a-menu-item>
                <a-menu-item key="4">option4</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <span slot="title"><a-icon type="laptop" />subnav 2</span>
                <a-menu-item key="5">option5</a-menu-item>
                <a-menu-item key="6">option6</a-menu-item>
                <a-menu-item key="7">option7</a-menu-item>
                <a-menu-item key="8">option8</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3">
                <span slot="title"><a-icon type="notification" />subnav 3</span>
                <a-menu-item key="9">option9</a-menu-item>
                <a-menu-item key="10">option10</a-menu-item>
                <a-menu-item key="11">option11</a-menu-item>
                <a-menu-item key="12">option12</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
              <a-breadcrumb-item>Home</a-breadcrumb-item>
              <a-breadcrumb-item>List</a-breadcrumb-item>
              <a-breadcrumb-item>App</a-breadcrumb-item>
            </a-breadcrumb>
            <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
              Content
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      data () {
        return {
          collapsed: false,
        }
      },
    }
    </script>
    
    <style>
    #components-layout-demo-top-side-2 .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
    </style>
    

    4.顶部-侧边布局

    在这里插入图片描述
    拥有顶部导航及侧边栏的页面,多用于展示类网站。

    <template>
      <a-layout id="components-layout-demo-top-side">
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
              <a-menu
                mode="inline"
                :defaultSelectedKeys="['1']"
                :defaultOpenKeys="['sub1']"
                style="height: 100%"
              >
                <a-sub-menu key="sub1">
                  <span slot="title"><a-icon type="user" />subnav 1</span>
                  <a-menu-item key="1">option1</a-menu-item>
                  <a-menu-item key="2">option2</a-menu-item>
                  <a-menu-item key="3">option3</a-menu-item>
                  <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                  <span slot="title"><a-icon type="laptop" />subnav 2</span>
                  <a-menu-item key="5">option5</a-menu-item>
                  <a-menu-item key="6">option6</a-menu-item>
                  <a-menu-item key="7">option7</a-menu-item>
                  <a-menu-item key="8">option8</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                  <span slot="title"><a-icon type="notification" />subnav 3</span>
                  <a-menu-item key="9">option9</a-menu-item>
                  <a-menu-item key="10">option10</a-menu-item>
                  <a-menu-item key="11">option11</a-menu-item>
                  <a-menu-item key="12">option12</a-menu-item>
                </a-sub-menu>
              </a-menu>
            </a-layout-sider>
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
              Content
            </a-layout-content>
          </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    
    <style>
    #components-layout-demo-top-side .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
    </style>
    

    5.上中下布局

    在这里插入图片描述
    最基本的『上-中-下』布局。
    一般主导航放置于页面的顶端,从左自右依次为:logo、一级导航项、辅助菜单(用户、设置、通知等)。通常将内容放在固定尺寸(例如:1200px)内,整个页面排版稳定,不受用户终端显示器影响;上下级的结构符合用户上下浏览的习惯,也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率,但在纵向空间上会有一些牺牲。此外,由于导航栏水平空间的限制,不适合那些一级导航项很多的信息结构。

    <template>
      <a-layout id="components-layout-demo-top" class="layout">
        <a-layout-header>
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-top .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 24px 16px 0;
      float: left;
    }
    </style>
    

    6.响应式布局

    在这里插入图片描述
    Layout.Sider 支持响应式布局。

    说明:配置 breakpoint 属性即生效,视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度,若将 collapsedWidth 设置为零,会出现特殊 trigger。

    <template>
      <a-layout id="components-layout-demo-responsive">
        <a-layout-sider
          breakpoint="lg"
          collapsedWidth="0"
          @collapse="onCollapse"
          @breakpoint="onBreakpoint"
        >
          <div class="logo" />
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span class="nav-text">nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span class="nav-text">nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span class="nav-text">nav 3</span>
            </a-menu-item>
            <a-menu-item key="4">
              <a-icon type="user" />
              <span class="nav-text">nav 4</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-header :style="{ background: '#fff', padding: 0 }" />
          <a-layout-content :style="{ margin: '24px 16px 0' }">
            <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
              content
            </div>
          </a-layout-content>
          <a-layout-footer style="textAlign: center">
            Ant Design ©2018 Created by Ant UED
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      methods: {
        onCollapse(collapsed, type) {
          console.log(collapsed, type);
        },
        onBreakpoint(broken) {
          console.log(broken);
        }
      }
    }
    </script>
    
    <style>
    #components-layout-demo-responsive .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    7.固定侧边栏

    在这里插入图片描述
    当内容较长时,使用固定侧边栏可以提供更好的体验。

    <template>
      <a-layout id="components-layout-demo-fixed-sider">
        <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
          <div class="logo"></div>
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span class="nav-text">nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span class="nav-text">nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span class="nav-text">nav 3</span>
            </a-menu-item>
            <a-menu-item key="4">
              <a-icon type="bar-chart" />
              <span class="nav-text">nav 4</span>
            </a-menu-item>
            <a-menu-item key="5">
              <a-icon type="cloud-o" />
              <span class="nav-text">nav 5</span>
            </a-menu-item>
            <a-menu-item key="6">
              <a-icon type="appstore-o" />
              <span class="nav-text">nav 6</span>
            </a-menu-item>
            <a-menu-item key="7">
              <a-icon type="team" />
              <span class="nav-text">nav 7</span>
            </a-menu-item>
            <a-menu-item key="8">
              <a-icon type="shop" />
              <span class="nav-text">nav 8</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout :style="{ marginLeft: '200px' }">
          <a-layout-header :style="{ background: '#fff', padding: 0 }" />
          <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
            <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
              ...
              <br />
              Really
              <br />...<br />...<br />...<br />
              long
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />
              content
            </div>
          </a-layout-content>
          <a-layout-footer :style="{ textAlign: 'center' }">
            Ant Design ©2018 Created by Ant UED
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-fixed-sider .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    8.固定头部

    在这里插入图片描述
    一般用于固定顶部导航,方便页面切换。

    <template>
      <a-layout id="components-layout-demo-fixed">
        <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
          <a-breadcrumb :style="{ margin: '16px 0' }">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-fixed .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 24px 16px 0;
      float: left;
    }
    </style>
    

    9.侧边布局

    在这里插入图片描述
    侧边两列式布局。页面横向空间有限时,侧边导航可收起。
    侧边导航在页面布局上采用的是左右的结构,一般主导航放置于页面的左侧固定位置,辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应,能提高横向空间的使用率,但是整个页面排版不稳定。侧边导航的模式层级扩展性强,一、二、三级导航项目可以更为顺畅且具关联性的被展示,同时侧边导航可以固定,使得用户在操作和浏览中可以快速的定位和切换当前位置,有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

    API

    <Layout>
      <Header>header</Header>
      <Layout>
        <Sider>left sidebar</Sider>
        <Content>main content</Content>
        <Sider>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>
    

    Layout 布局容器

    参数说明类型默认值
    class容器 classstring-
    style指定样式object-
    hasSider表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动boolean-

    Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

    Layout.Sider 侧边栏

    参数说明类型默认值
    breakpoint触发响应式布局的断点Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }-
    class容器 classstring-
    collapsed(v-model)当前收起状态boolean-
    collapsedWidth收缩宽度,设置为 0 会出现特殊 triggernumber80
    collapsible是否可收起booleanfalse
    defaultCollapsed是否默认收起booleanfalse
    reverseArrow翻转折叠提示箭头的方向,当 Sider 在右边时可以使用booleanfalse
    style指定样式object|string-
    theme主题颜色string: light darkdark
    trigger自定义 trigger,设置为 null 时隐藏 triggerstring|slot-
    width宽度number|string200

    事件

    事件名称说明回调参数
    collapse展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}
    breakpoint触发响应式布局断点时的回调(broken) => {}

    breakpoint width

    {
    xs: ‘480px’,
    sm: ‘576px’,
    md: ‘768px’,
    lg: ‘992px’,
    xl: ‘1200px’,
    xxl: ‘1600px’,
    }

    展开全文
  • vue布局生成器 vue-ads-layout (vue-ads-layout) This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. And each of those 4 ...

    vue布局生成器

    vue-ads-layout (vue-ads-layout)

    This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. And each of those 4 components can be placed as a fixed component.

    这是一个vue组件库,用于创建默认的Web应用程序布局。 您可以创建工具栏,页脚,左右抽屉。 并且这四个组件中的每个组件都可以作为固定组件放置。

    The left and right drawers can be minified or hidden by buttons or by resizing the window (responsive design)

    可以通过按钮或调整窗口大小来缩小或隐藏左右抽屉(响应式设计)

    I also added two default buttons to hide and minify the drawers.

    我还添加了两个默认按钮来隐藏和缩小抽屉。

    安装 (Installation)

    You can install the package via npm or yarn.

    您可以通过npm或yarn安装软件包。

    NPM (NPM)

    npm install vue-ads-layout --save

    npm install vue-ads-layout --save

    (YARN)

    yarn add vue-ads-layout

    yarn add vue-ads-layout

    用法 (Usage)

    Here you can find a simple example on how to use this layout component.

    在这里,您可以找到有关如何使用此布局组件的简单示例。

    <template>
        <div id="app">
            <vue-ads-layout :full-bar="true">
                <vue-ads-bar
                    slot="toolbar"
                    :fixed="true"
                    class="bg-red"
                >
                    <vue-ads-menu-button slot="first" :hidden="hiddenLeft" @toggle="hideLeft"></vue-ads-menu-button>
                    <vue-ads-menu-button slot="last" :hidden="hiddenRight" @toggle="hideRight"></vue-ads-menu-button>
                </vue-ads-bar>
                <vue-ads-bar
                    slot="footer"
                    :fixed="false"
                    :footer="true"
                    class="bg-purple"
                >
                </vue-ads-bar>
                <vue-ads-drawer
                    slot="left-drawer"
                    :minified="minifiedLeft"
                    :hidden="hiddenLeft"
                    :fixed="true"
                    @minify="minifyLeft"
                    @hide="hideLeft"
                    class="bg-yellow"
                >
                    <vue-ads-minify-button slot="bottom" :minified="minifiedLeft" @toggle="minifyLeft"></vue-ads-minify-button>
                </vue-ads-drawer>
                <vue-ads-drawer
                    slot="right-drawer"
                    :minified="minifiedRight"
                    :hidden="hiddenRight"
                    :fixed="false"
                    @minify="minifyRight"
                    @hide="hideRight"
                    class="bg-blue"
                >
                    <vue-ads-minify-button slot="bottom" :right="true" :minified="minifiedRight" @toggle="minifyRight"></vue-ads-minify-button>
                </vue-ads-drawer>
                
                My content
                
            </vue-ads-layout>
        </div>
    </template>
    
    <script>
    import './node_modules/@fortawesome/fontawesome-free/css/all.css';
    
    import './node_modules/vue-ads-layout/dist/vue-ads-layout.css';
    
    import { VueAdsLayout, VueAdsBar, VueAdsDrawer, VueAdsMenuButton, VueAdsMinifyButton } from 'vue-ads-layout';
    
    export default {
        name: 'app',
    
        components: {
            VueAdsMinifyButton,
            VueAdsMenuButton,
            VueAdsDrawer,
            VueAdsBar,
            VueAdsLayout,
        },
    
        data () {
            return {
                minifiedLeft: false,
                minifiedRight: false,
                hiddenLeft: false,
                hiddenRight: false,
            };
        },
    
        methods: {
            minifyLeft (minified) {
                this.minifiedLeft = minified;
            },
    
            hideLeft (hidden) {
                this.hiddenLeft = hidden;
            },
    
            minifyRight (minified) {
                this.minifiedRight = minified;
            },
    
            hideRight (hidden) {
                this.hiddenRight = hidden;
            },
        },
    };
    </script>

    组件 (Components)

    VueAdsLayout (VueAdsLayout)

    This is the base component. All the other components need to be nested in this one by slots.

    这是基本组件。 所有其他组件都需要通过插槽嵌套在此组件中。

    物产 (Properties)
    • full-bar: (type: boolean) If true, a horizontal layout is created, where the bars overlap the drawers.

      full-bar(type:boolean)如果为true,则创建水平布局,其中的条与抽屉重叠。


      If false, a vertical layout is created, where the drawers overlap the bars.
      如果为false,则创建垂直布局,其中抽屉与条形图重叠。

    范本 (Templates)
    工具栏 (toolbar)

    The toolbar template is used to define the top bar. Use the VueAdsBar component for it.

    工具栏模板用于定义顶部栏。 使用VueAdsBar组件。

    <vue-ads-bar slot="toolbar"></vue-ads-bar>

    The footer template is used to define the footer. Use the VueAdsBar component for it with the footer option = true.

    页脚模板用于定义页脚。 将VueAdsBar组件用于页脚选项= true。

    <vue-ads-bar slot="footer" :footer="true"></vue-ads-bar>
    左抽屉/右抽屉 (left-drawer / right drawer)

    The left/right-drawer template is used to define the left/right drawer. Use the VueAdsDrawer component for it.

    左/右抽屉模板用于定义左/右抽屉。 使用VueAdsDrawer组件。

    <vue-ads-drawer slot="left-drawer"></vue-ads-drawer>
    <vue-ads-drawer slot="right-drawer"></vue-ads-drawer>
    默认 (default)

    This is the most important template. Here you place your application content.

    这是最重要的模板。 在这里放置您的应用程序内容。

    Just add it as a child element between the vue-ads-layout tags.

    只需将其添加为vue-ads-layout标签之间的子元素即可。

    VueAdsBar (VueAdsBar)

    The bar component is used to create a toolbar and a footer.

    条形组件用于创建工具栏和页脚。

    物产 (Properties)
    • fixed: (type: boolean, default: false) Indicates if the bar is positioned fixed.

      fixed :( 类型:布尔值,默认值:false)指示栏是否固定。

    • height: (type: number, default: 16) If you want to increase the default height, add this option.

      height :( 类型:数字,默认值:16)如果要增加默认高度,请添加此选项。


      Only use the valid, numeric
      仅使用有效的数字

      Tailwindcss height options

      Tailwindcss高度选项

    • footer: (type: boolean, default: false) Indicates if the bar is a footer.

      footer :( 类型:布尔值,默认值:false)指示栏是否为页脚。

    范本 (Templates)

    There are 2 possibilities for using the bar templates:

    使用条形模板有两种可能性:

    • overriding the default template with a custom template.

      用自定义模板覆盖默认模板。

    • use the predefined 3 column template: first, middle, last.

      使用预定义的3列模板: firstmiddlelast


      This method uses the flex css style, where the middle template has a flex-grow attribute.
      此方法使用flex css样式,其中中间模板具有flex-grow属性。

    For example if you want to use the VueAdsMenuButton buttons on the left/right position of the bar, use the following templates.

    例如,如果您想使用工具栏左/右位置上的VueAdsMenuButton按钮,请使用以下模板。

    <vue-ads-menu-button slot="first" :hidden="hiddenLeft" @toggle="hideLeft"></vue-ads-menu-button>
    <vue-ads-menu-button slot="last" :hidden="hiddenRight" @toggle="hideRight"></vue-ads-menu-button>

    VueAdsDrawer (VueAdsDrawer)

    The drawer component is used to create a drawers on the left and right side of your screen.

    抽屉组件用于在屏幕的左侧和右侧创建抽屉。

    物产 (Properties)
    • fixed: (type: boolean, default: false) Indicates if the drawer is positioned fixed.

      fixed :( 类型:布尔值,默认值:false)指示抽屉是否固定。

    • width: (type: number, default: 64) If you want to increase the default width, add this option.

      width :( 类型:数字,默认值:64)如果要增加默认宽度,请添加此选项。


      Only use the valid, numeric
      仅使用有效的数字

      Tailwindcss width options

      Tailwindcss宽度选项

    • minified-width: (type: number, default: 16) If you want to increase the minified width, add this option.

      minified-width :( 类型:数字,默认值:16)如果要增加最小宽度,请添加此选项。


      Only use the valid, numeric
      仅使用有效的数字

      Tailwindcss width options

      Tailwindcss宽度选项

    • minified: (type: boolean, default: false) Indicates if the drawer is minified.

      minified :( 类型:布尔值,默认值:false)指示抽屉是否缩小。

    • hidden: (type: boolean, default: false) Indicates if the drawer is hidden.

      hidden(type:boolean,default:false)指示抽屉是否隐藏。

    • responsive-minified: (type: array, default: ['all', 'sm']) A list of all Tailwindcss screen sizes

      responsive-minified :( 类型:数组,默认值:['all','sm'])所有Tailwindcss屏幕尺寸的列表


      where the drawer has to be minified.
      必须缩小抽屉的地方。

    • responsive-hidden: (type: array, default: ['all']) A list of all Tailwindcss screen sizes

      responsive-hidden :( 类型:数组,默认值:['all'])所有Tailwindcss屏幕尺寸的列表


      where the drawer has to be hidden.
      抽屉必须隐藏的地方。

    大事记 (Events)
    • minify: Emitted if the drawer is minified.

      minify :如果抽屉变小则发射。

      • minified: minified(type: boolean) Indicates if the drawer is minified.(type:boolean)指示抽屉是否被缩小。
    • hide: Emitted if the drawer is hidden.

      hide :如果抽屉是隐藏的,则发出。

      • hidden: hidden(type: boolean) Indicates if the drawer is hidden.(type:boolean)指示抽屉是否隐藏。
    范本 (Templates)

    There are 2 possibilities for using the drawer templates:

    有两种使用抽屉模板的可能性:

    • overriding the default template with a custom template.

      用自定义模板覆盖默认模板。

    • use the predefined 2 rows template: top, bottom.

      使用预定义的2行模板: topbottom


      This method uses the flex css style, where the top template has a flex-grow attribute.
      此方法使用flex css样式,其中顶部模板具有flex-grow属性。

    All the slots (default, top and bottom) are scoped with the following variables:

    所有插槽(默认,顶部和底部)的作用域均包含以下变量:

    • fixed: (type: boolean) Indicates if the drawer is positioned fixed.

      fixed(type:boolean)指示抽屉是否固定。

    • minified: (type: boolean) Indicates if the drawer is minified.

      minified(type:boolean)指示抽屉是否被缩小。

    • hidden: (type: boolean) Indicates if the drawer is hidden.

      hidden(type:boolean)指示抽屉是否隐藏。

    • hidden: (type: boolean) Indicates if the drawer is hidden.

      hidden(type:boolean)指示抽屉是否隐藏。

    • width: (type: number) the current numeric tailwindcss width

      width(type:number)当前数值的tailwindcss宽度

    For example if you want to use the VueAdsMinifyButton on the bottom of the bar to minify it, use the following template.

    例如,如果您要使用工具栏底部的VueAdsMinifyButton来缩小尺寸,请使用以下模板。

    <vue-ads-minify-button slot="bottom" :minified="minifiedLeft" @toggle="minifyLeft"></vue-ads-minify-button>

    VueAdsMenuButton (VueAdsMenuButton)

    A menu button that can be used to open or close the drawers.

    可以用来打开或关闭抽屉的菜单按钮。

    If you want to use the font awesome icons, don't forget to import the css library. It's a dependency of this library so it's automatically installed.

    如果要使用字体真棒图标,请不要忘记导入css库。 它是该库的依赖项,因此会自动安装。

    物产 (Properties)
    • hidden: (type: boolean, required) Indicates if the linked drawer is hidden or not.

      hidden :( 类型:布尔值,必需)指示链接的抽屉是否隐藏。

    大事记 (Events)
    • toggle: Emitted if the button is clicked.

      toggle :如果单击按钮,则发射。

      • hidden: hidden(type: boolean) Indicates if the drawer is hidden.(type:boolean)指示抽屉是否隐藏。
    范本 (Templates)

    You can add a default template to override the default icon.

    您可以添加默认模板以覆盖默认图标。

    <vue-ads-menu-button :hidden="false">
       <i class="fa fa-check"></i>
    </vue-ads-menu-button>

    VueAdsMinifyButton (VueAdsMinifyButton)

    A minify button that can be used to minify the drawers.

    缩小按钮,可用于缩小抽屉。

    If you want to use the font awesome icons, don't forget to import the css library. It's a dependency of this library so it's automatically installed.

    如果要使用字体真棒图标,请不要忘记导入css库。 它是该库的依赖项,因此会自动安装。

    物产 (Properties)
    • minified: (type: boolean, required) Indicates if the linked drawer is minified or not.

      minified :( 类型:布尔值,必需)指示链接的抽屉是否已缩小。

    • right: (type: boolean, default: false) Indicates if the button is used for the right drawer.

      right :( 类型:布尔值,默认值:false)指示按钮是否用于右侧抽屉。


      If so the arrows are flipped.
      如果是这样,则将箭头翻转。

    大事记 (Events)
    • toggle: Emitted if the button is clicked.

      toggle :如果单击按钮,则发射。

      • minified: minified(type: boolean) Indicates if the drawer is minified.(type:boolean)指示抽屉是否被缩小。
    范本 (Templates)

    You can add a default template to override the default icon.

    您可以添加默认模板以覆盖默认图标。

    <vue-ads-minify-button :minified="false">
       <i class="fa fa-check"></i>
    </vue-ads-minify-button>

    测试中 (Testing)

    Needs to be done. You can run all the test (currently zero) by executing the following command.

    需要做的。 您可以通过执行以下命令来运行所有测试(当前为零)。

    npm run test:unit

    翻译自: https://vuejsexamples.com/a-vue-plugin-to-quickly-generate-a-webapplication-layout/

    vue布局生成器

    展开全文
  • Vue Layout布局

    2020-08-04 09:47:45
    Layout 布局 * * *Row AttributesCol Attributes * * *

    Layout 布局    
    Container 布局容器
    CSS 常用样式 水平居中 水平垂直居中 Container布局

    Row Attributes

    Col Attributes


    1、通过 row 和 col组件,并通过 span 属性实现布局 (一行中 col 的 span 加起来不能超过24)

    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

    2、row 提供 gutter 属性指定列间隙 (一行中 col 的 span 加起来不能超过24)

    <el-row :gutter="20"><el-row>

    3、col 组件中 offset 属性可以实现列偏移

    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

    4、通过 flex 布局实现分栏对齐, 同时可以使用 justify 属性设置一行居中,靠右或者间隔显示(justify = start, center, end, space-between, space-around )

    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    5、响应式布局。五个响应尺寸:xs、sm、md、lg 和 xl

    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    6、样式1

     

    <template>
      <div class="app-container">
        <div>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-card style="margin-bottom:20px;">
                <div slot="header" class="clearfix">
                  <span>About me</span>
                </div>
                
                <div class="user-profile">
                  <div class="box-center">
                    <!-- <pan-thumb
                      :image="user.avatar"
                      :height="'100px'"
                      :width="'100px'"
                      :hoverable="false"
                    >
                      <div>Hello</div>角色1 角色2
                    </pan-thumb> -->
                  </div>
                  <div class="box-center">
                    <div class="user-name text-center">123</div>
                    <div class="user-role text-center text-muted">角色</div>
                  </div>
                </div>
    
                <div class="user-bio">
                  <div class="user-education user-bio-section">
                    <div class="user-bio-section-header">
                      <svg-icon icon-class="education" />
                      <span>Education</span>
                    </div>
                    <div class="user-bio-section-body">
                      <div class="text-muted">JS in Computer Science from the University of Technology</div>
                    </div>
                  </div>
    
                  <div class="user-skills user-bio-section">
                    <div class="user-bio-section-header">
                      <svg-icon icon-class="skill" />
                      <span>Skills</span>
                    </div>
                    <div class="user-bio-section-body">
                      <div class="progress-item">
                        <span>Vue</span>
                        <el-progress :percentage="70" />
                      </div>
                      <div class="progress-item">
                        <span>JavaScript</span>
                        <el-progress :percentage="18" />
                      </div>
                      <div class="progress-item">
                        <span>Css</span>
                        <el-progress :percentage="12" />
                      </div>
                      <div class="progress-item">
                        <span>ESLint</span>
                        <el-progress :percentage="100" status="success" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
    
            <el-col :span="18" :xs="24">
              <el-card>
                <el-tabs v-model="activeTab">
                  <el-tab-pane label="Activity" name="activity">
                    <activity />
                  </el-tab-pane>
                  <el-tab-pane label="Timeline" name="timeline">
                    <timeline />
                  </el-tab-pane>
                  <el-tab-pane label="Account" name="account">
                    <account :user="user" />
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    
    <script>
    import { mapGetters } from "vuex";
    
    export default {
      name: "Profile",
      data() {
        return {};
      },
      computed: {},
      created() {},
      methods: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .box-center {
      margin: 0 auto;
      display: table;
    }
    
    .text-muted {
      color: #777;
    }
    
    .user-profile {
      .user-name {
        font-weight: bold;
      }
    
      .box-center {
        padding-top: 10px;
      }
    
      .user-role {
        padding-top: 10px;
        font-weight: 400;
        font-size: 14px;
      }
    
      .box-social {
        padding-top: 30px;
    
        .el-table {
          border-top: 1px solid #dfe6ec;
        }
      }
    
      .user-follow {
        padding-top: 20px;
      }
    }
    
    .user-bio {
      margin-top: 20px;
      color: #606266;
    
      span {
        padding-left: 4px;
      }
    
      .user-bio-section {
        font-size: 14px;
        padding: 15px 0;
    
        .user-bio-section-header {
          border-bottom: 1px solid #dfe6ec;
          padding-bottom: 10px;
          margin-bottom: 10px;
          font-weight: bold;
        }
      }
    }
    </style>
    

    7、样式2  【el-row,el-col】

    <template>
      <div class="app-container">
        <div class="container">
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-card style="margin-bottom:20px;"></el-card>
            </el-col>
    
            <el-col :span="12" :xs="24">
              <el-card>
                <el-tabs v-model="activeTab">
                  <el-tab-pane label="Activity" name="activity">
                    <activity />
                  </el-tab-pane>
                  <el-tab-pane label="Timeline" name="timeline">
                    <timeline />
                  </el-tab-pane>
                  <el-tab-pane label="Account" name="account">
                    <account :user="user" />
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
    
            <el-col :span="6" :xs="24">
              <el-card style="margin-bottom:20px;"></el-card>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <div class="app-contianer" style="padding:10px">
                  <el-row :gutter="40" class="panel-group">
                    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                        <div class="card-panel-icon-wrapper icon-people">
                          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                          <div class="card-panel-text">New Visits</div>
                          <count-to
                            :start-val="0"
                            :end-val="102400"
                            :duration="2600"
                            class="card-panel-num"
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                      <div class="card-panel" @click="handleSetLineChartData('messages')">
                        <div class="card-panel-icon-wrapper icon-message">
                          <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                          <div class="card-panel-text">Messages</div>
                          <count-to
                            :start-val="0"
                            :end-val="81212"
                            :duration="3000"
                            class="card-panel-num"
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                      <div class="card-panel" @click="handleSetLineChartData('purchases')">
                        <div class="card-panel-icon-wrapper icon-money">
                          <svg-icon icon-class="money" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                          <div class="card-panel-text">Purchases</div>
                          <count-to
                            :start-val="0"
                            :end-val="9280"
                            :duration="3200"
                            class="card-panel-num"
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
                        <div class="card-panel-icon-wrapper icon-shopping">
                          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                          <div class="card-panel-text">Shoppings</div>
                          <count-to
                            :start-val="0"
                            :end-val="13600"
                            :duration="3600"
                            class="card-panel-num"
                          />
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    
    <script>
    import CountTo from 'vue-count-to'
    import { mapGetters } from "vuex";
    
    export default {
      name: "Profile",
      components: {
        CountTo
      },
      data() {
        return {};
      },
      computed: {},
      created() {},
      methods: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .container {
      width: 1170px;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    
    .box-center {
      margin: 0 auto;
      display: table;
    }
    
    .text-muted {
      color: #777;
    }
    
    .user-profile {
      .user-name {
        font-weight: bold;
      }
    
      .box-center {
        padding-top: 10px;
      }
    
      .user-role {
        padding-top: 10px;
        font-weight: 400;
        font-size: 14px;
      }
    
      .box-social {
        padding-top: 30px;
    
        .el-table {
          border-top: 1px solid #dfe6ec;
        }
      }
    
      .user-follow {
        padding-top: 20px;
      }
    }
    
    .user-bio {
      margin-top: 20px;
      color: #606266;
    
      span {
        padding-left: 4px;
      }
    
      .user-bio-section {
        font-size: 14px;
        padding: 15px 0;
    
        .user-bio-section-header {
          border-bottom: 1px solid #dfe6ec;
          padding-bottom: 10px;
          margin-bottom: 10px;
          font-weight: bold;
        }
      }
    }
    
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    
    .bg-purple-dark {
      background: #99a9bf;
    }
    
    .panel-group {
      margin-top: 18px;
    
      .card-panel-col {
        margin-bottom: 32px;
      }
    
      .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);
    
        &:hover {
          .card-panel-icon-wrapper {
            color: #fff;
          }
    
          .icon-people {
            background: #40c9c6;
          }
    
          .icon-message {
            background: #36a3f7;
          }
    
          .icon-money {
            background: #f4516c;
          }
    
          .icon-shopping {
            background: #34bfa3;
          }
        }
    
        .icon-people {
          color: #40c9c6;
        }
    
        .icon-message {
          color: #36a3f7;
        }
    
        .icon-money {
          color: #f4516c;
        }
    
        .icon-shopping {
          color: #34bfa3;
        }
    
        .card-panel-icon-wrapper {
          float: left;
          margin: 14px 0 0 14px;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }
    
        .card-panel-icon {
          float: left;
          font-size: 48px;
        }
    
        .card-panel-description {
          float: right;
          font-weight: bold;
          margin: 26px;
          margin-left: 0px;
    
          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }
    
          .card-panel-num {
            font-size: 20px;
          }
        }
      }
    }
    
    @media (max-width: 550px) {
      .card-panel-description {
        display: none;
      }
    
      .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;
    
        .svg-icon {
          display: block;
          margin: 14px auto !important;
          float: none !important;
        }
      }
    }
    </style>
    

    8、样式3 【el-container】

    <template>
      <div class="app-container">
        <div class="container">
          <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </div>
      </div>
    </template>
    
    <script>
    import { mapGetters } from "vuex";
    
    export default {
      name: "Profile",
      data() {
        return {};
      },
      computed: {},
      created() {},
      methods: {},
    };
    </script>
    
    <style>
    .container {
      width: 1170px;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    
    .el-header,
    .el-footer {
      background-color: #b3c0d1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #d3dce6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #e9eef3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    </style>
    

    *
    *
    *

    展开全文
  • 文章目录基本布局 基本布局

    基本布局

    上-中-下 布局
    在这里插入图片描述

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
    

    上-左右-下 布局
    在这里插入图片描述

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-sider>Sider</a-layout-sider>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
    

    左-上中下 布局
    在这里插入图片描述

    <a-layout>
      <a-layout-sider>Sider</a-layout-sider>
      <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout-content>Content</a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
    

    常用属性

    Layout.Sider

    属性说明默认
    breakpoint触发响应式布局的断点({ 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' })
    collapsed(v-model)当前收起状态
    collapsible是否可收起false
    defaultCollapsed是否默认收起false
    theme主题颜色light/darkdark

    常用事件

    • collapse 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发
    • breakpoint 触发响应式布局断点时的回调

    说明:

    • 左边区域一般放置Menu菜单,若应用型网站菜单过多也可以在Header上再设置一个菜单;
    • Layout.Sider支持响应式布局:配置 breakpoint属性即生效,视窗宽度小于 breakpointSider 缩小为 collapsedWidth宽度,若将 collapsedWidth设置为零,会出现特殊 trigger
    • 当内容较长时,使用固定侧边栏可以提供更好的体验:a-layout-sider设置为fixed定位;
    • 若想头部固定,可以设置a-layout-headerfixed定位

    经典布局:
    在这里插入图片描述

    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="logo" />
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">nav 1</a-menu-item>
          <a-menu-item key="2">nav 2</a-menu-item>
          <a-menu-item key="3">nav 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" />subnav 1</span>
              <a-menu-item key="1">option1</a-menu-item>
              <a-menu-item key="2">option2</a-menu-item>
              <a-menu-item key="3">option3</a-menu-item>
              <a-menu-item key="4">option4</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="laptop" />subnav 2</span>
              <a-menu-item key="5">option5</a-menu-item>
              <a-menu-item key="6">option6</a-menu-item>
              <a-menu-item key="7">option7</a-menu-item>
              <a-menu-item key="8">option8</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
          >
            Content
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
    
    展开全文
  • Vue-Layout(可视化布局

    千次阅读 2020-08-15 17:08:47
    什么是 Vue-Layout ? vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具 源码地址:https://github.com/jaweii/Vue-Layout 怎么使用 Vue-Layout ?
  • 样式如图 最上边是搜索条件与操作按钮,中间是查询结果表格,下边是分页,要在浏览器大小改变时控件可以折行,但是不能被其他层遮盖,需要动态... Layout = "~/Views/Shared/_vueLayout.cshtml"; } <script sr...
  • 但它主要管理简单的布局以及“状态”:根据需要显示和隐藏每个组件子元素: .cloudinary-video-item { position: relative; } .cloudinary-video-item > div { position: absolute; top: 0; left: 0; } .cloudinary-...

空空如也

空空如也

1
收藏数 8
精华内容 3
热门标签
关键字:

vuelayout布局

vue 订阅