Vue实现一个边框组件Aside

①在element-ui中选定布局方式

<el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main><router> //路由引入</el-main></el-container>
</el-container>

②写aside方面

用组件component，在文件components中写vue文件，注意template

template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu>
</template><style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}</style><script>export default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}</script>

在Main.vue中引入这个值

import CommonAside from '../components/CommonAside.vue'//在组件中引入components: {CommonAside}

最后在这个组件应该在的地方使用这个组件

 <el-aside width="200px"><CommonAside /></el-aside>

遇到报错：element-ui按需引入报错 Error: Cannot find module ‘babel-preset-es2015‘
解决方案：

npm install babel-plugin-component -D

添加babelrc文件

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
————————————————
版权声明：本文为CSDN博主「Oliver尹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zy21131437/article/details/108029284

Vue实现一个边框组件Aside相关推荐

vue 开发一个按钮组件
最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法 ...
pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签 ...
使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
用vue 编写一个日历组件（非常详细-让日历简单起来）
相信有不少小伙伴和我一样一提到日历就脑壳疼,然后去网上搜索好用的日历组件,如element-ui什么的,但是日历毕竟是别人开发出来的, 和自己家ui设计出来的功能样式毕竟不能100%相似,所以这个时候 ...
从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
vue封装一个日历组件
图示封装的组件的代码如下 <template><div class="calendar"><div c ...
学习笔记Vue（十四）—— 用vue写一个日历组件
先看一下实现的效果: 实现日历的逻辑: 先写出日历的大致结构,分两个部分,头部和主体部分,日历先显示6排7列,总共42个数字,按从1到42来显示: <div class="every- ...
vue封装一个弹幕组件
说在前面

Vue实现一个边框组件Aside

①在element-ui中选定布局方式

②写aside方面

Vue实现一个边框组件Aside相关推荐

最新文章

热门文章