<el-button @click="onClick">增加</el-button> z-index: {{ value }} </template> import { PopupManager } from 'element-ui/src/utils/popup' export default { data() { return { value: 0 } }, methods: { onClick() { // 使用 this.value = PopupManager.nextZIndex() } } } 实...
js代码: <!-- --> <template> <el-container> <el-aside width="181px" height="100%" style="background-color: #3a3846"> 证券尊享平台 <el-menu :default-openeds="['1', '5']"> <el-submenu index="1"> <template slot="title"> 首页 </template> </el-submenu> <el-submenu...
二、整体布局 整体布局采用elementui 中Container 布局容器组件实现,如下所示。 整个页面布局页面为main.vue,其中左侧菜单栏部分被封装为一个组件( MenuTree),菜单部分使用elementui 中Menu 菜单组件来实现,其中el-menu当中参数unique-opened为只允许一个展开,参数default-active为默认激活菜单的 index,参数router为在激...
--底部--><el-footer></el-footer></el-container></template> 这样最基本的布局就好了,我们接下来只需要在对应的区域渲染好内容就行,这里最主要的就是使用ElementUI其中的路由功能。 我们将Main.vue里的内容完整给写好,注意看注释: <template><el-container><!--顶部--><el-headerstyle="border-bottom:1p...
</el-container> </template> export default { components: { VpButtonList: () => import('./vp-button-list.vue') }, data() { return { formInline: { user: '', region: '' }, buttonData: [ { text: '按钮名称1', type: '
内容滚动处理:内容区域的高度、宽度自适应铺满,如果内容超出该区域,则显示滚动条,不会导致整个页面出现滚动条。 Footer:底部区域,好像也没啥用,先放这吧! <template> <el-containerstyle="height:100%"> <el-containerclass="main-aside"> <!-- 左侧 :logo+导航菜单 --> ...
这样子可以使得html,body能够铺满整个页面,此时还需要让el-container容器也铺满整个页面,在对应的vue文件中加入如下代码: .el-container { padding: 0; margin: 0; height: 100vh; width:100vw; } 我是做了一个SPA单页Web应用,所以在显示的Index.vue中加入代码: ...
<el-button @click="onClick">增加</el-button> z-index: {{ value }} </template> import { PopupManager }from'element-ui/src/utils/popup' exportdefault{ data() { return{ value: 0 } }, methods: { onClick() { // 使用 this...
}/*整体显示区域布局样式*/.el-container{height:100%; }.el-header,.el-main{padding:0; }/*左边导航栏具体样式*/.el-menu-vertical-demo.el-menu{padding-left:20px;text-align: left;height:100%;padding:0; } el-container >.el-menu-vertical-demo.el-menu{padding:0; }.el-submenu.el-menu-...
<el-button @click="onClick">增加</el-button> z-index: {{ value }} </template> import { PopupManager } from 'element-ui/src/utils/popup' export default { data() { return { value: 0 } }, methods: { onClick() { // 使用...