Ant Design Vue之布局layout

根据业务需要想直接用layout组件，实现如下效果：

然后吧代码复制：

<template><a-layout id="components-layout-demo-custom-trigger"><a-layout-sider v-model="collapsed" :trigger="null" collapsible><div class="logo" /><a-menu theme="dark" mode="inline" :default-selected-keys="['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-iconclass="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 0.3s;
}#components-layout-demo-custom-trigger .trigger:hover {color: #1890ff;
}#components-layout-demo-custom-trigger .logo {height: 32px;background: rgba(255, 255, 255, 0.2);margin: 16px;
}
</style>

设置成全局组件方便调用，在main.js中添加：

然后运行查看结果：

报了这么一大堆错误，再看下文档，发现有个Layout.Sider的api，那就只能再把这个引用，然而不能带.点的，又各种一试各种报错，找了小度搜了一通也没搜到，最后终于自己测试出来方法，哈哈 ~ 也是自己菜了

再运行就不再一片红~

Ant Design Vue之布局layout相关推荐

【Ant Design Vue】之layout布局
文章目录基本布局常用属性常用事件基本布局上-中-下布局 <a-layout><a-layout-header>Header</a-layout-header& ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...

Ant Design Vue之布局layout

Ant Design Vue之布局layout相关推荐

最新文章

热门文章