vue element的若干问题

2018-09-21  本文已影响0人  kourim

源代码地址: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的依赖路径

上一篇下一篇

猜你喜欢

热点阅读