vue element的若干问题
源代码地址:https://github.com/taylorchen709/vue-admin
1.解决导航折叠,开启后,开启不全的问题
在Home.vue里,v-show="!collapsed"改成v-if="!collapsed"。
2.解决mock数据和真实数据的切换问题
把main.js中下面两行注释掉
import Mockfrom './mock'
Mock.bootstrap();
3.单击空白处,对话框消失(不用点击关闭按钮)
把下面代码修改:
旧:<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
新:<el-dialog title="编辑" :visible.sync="addFormVisible">
close-on-click-modal="false" 就是点击空白关闭无效的意思
4.改变原有样式,弹出框在右边,上下撑满
<el-dialog title="編集" :visible.sync="editFormVisible" top="0px">
top="0px"为顶到字上层
<style lang="scss">
.el-dialog{
position:fixed; //相对于浏览器窗口进行定位, 滚动条消失
height:100%;
width:600px; //固定写死宽度,这样在浏览器大小变动的时候,弹出框宽度不变
left:calc(100% -600px); //关键在此,计算。减去宽度的一半
}
</style>
5.更新本地"element-ui"包的版本
# npm ls element-ui 查看本地element-ui的版本号
#手动修改修改package.json中包的版本号。1.2.8→2.4.7
#npm update element-ui 更新element-ui的版本号。
#如果有需要,在main.js中修改,element-ui的index.css的依赖路径