首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

iviewui-admin框架的一些坑

2019年08月01日 发布 阅读(260) 作者:懒炖

1、 菜单根据路由来生成,左侧菜单一级栏目要如下设置,纠结不。。。一个路由我还得虚拟一个父路由出来,命名都纠结

  1. {
  2. path: '/',
  3. name: '_home',
  4. redirect: '/home',
  5. component: Main,
  6. meta: {
  7. hideInMenu: false,
  8. notCache: true
  9. },
  10. children: [
  11. {
  12. path: '/home',
  13. name: 'home',
  14. meta: {
  15. title: '首页',
  16. notCache: true,
  17. icon: 'md-home'
  18. },
  19. component: () => import('@/view/home/index.vue')
  20. }
  21. ]
  22. }

解决:后台所有路由配置在managechildren里。这样也便于区分一些其他路由,如注册 登录页面,这些页面并不需要登录后才可以访问

  1. export default [
  2. {
  3. path: '/manage',
  4. name: 'manage',
  5. meta: {
  6. title: '后台管理',
  7. hideInBread: true
  8. },
  9. component: Main,
  10. children: [
  11. {
  12. path: 'home',
  13. name: 'home',
  14. meta: {
  15. title: '首页',
  16. sideMenu: true,
  17. icon: 'md-home'
  18. },
  19. component: () => import('@/view/home/index.vue')
  20. },
  21. ]
  22. }
  23. ]

2、 菜单权限控制,iviewui是根据 access:[‘super_admin’, ‘admin’]用户角色来控制的,如下设置路由的access,再根据后台返回的 access,来判断当前路由是否有访问权限。相当于路由是否有权限访问必须提前在前端配置死。不方便后台系统动态配置权限~

  1. {
  2. path: 'level_2_2',
  3. name: 'level_2_2',
  4. meta: {
  5. access: ['super_admin'],
  6. icon: 'md-funnel',
  7. showAlways: true,
  8. title: '二级-2'
  9. },
  10. }

解决

  • 把前端路由名称同步给后台,由后台根据角色返回相应的路由名称列表,再根据当前路由名称是否在后台返回的路由名称列表中,判断当前路由是否有权限。
  • 非左侧菜单的内页由接口层的权限判断值来判断是否有权限
  • 静态的页面,只能在路由里设置角色权限了
  1. {
  2. "code":"00000000",
  3. "msg":"成功",
  4. "data":{
  5. menuName:["home","member"]
  6. }
  7. }

3、Modal弹层的问题:异步提交时,不管点取消还是确定,都会把层关掉,没有回调处理函数
解决

  • 自定义底部按钮,有异步提交时,在回调函数中处理是否关闭弹层

4、tablerender函数,没官方文档可查,点开竟然是收费的链接,估计官方想创点收入

解决 这个不是什么大问题,摸索解决,网上也有资料

5、使用了Mockjs来模拟数据开发,由于Mockjs只用来输出数据,并没有发送真实的请求,调试起来非常麻烦,要使用console.log输出才知道发送的是啥,到底有没有发送请求,有没有重复发送请求等等
解决 更改为Mocker-api做为项目模拟数据输出,直接读取模拟的JSON数据文件

6、省份城市选择插件iview-area(https://github.com/iview/iview-area),通过表单reset()的时候,数据不能清空

解决 通过refs手动清空

  1. this.$refs.area.select = []

7、针对IE的兼容

  • 需要安装babel-polyfill,在main.js里全局引入
    1. import 'babel-polyfill'
  • main.js里的tree-table-vue需要注释掉,这个插件不支持IE11。如果你的项目没有用到它的树状列表,完全可以不引入
    1. // 注释这两行
    2. import TreeTable from 'tree-table-vue'
    3. Vue.use(TreeTable)

  • 上面两点只能解决IE11的问题,IE10怎么办?
    vue.config.js文件里添加如下代码。从下可以看到tree-table-vue,v-org-tree,locale都需要重新编译
    1. // webpack配置
    2. configureWebpack: {
    3. module: {
    4. rules: [
    5. {
    6. test: /\.m?js$/,
    7. // exclude用上面配置的话,默认是过滤不编译node_modules 路径下的文件
    8. // exclude: /(node_modules|bower_components)/,
    9. // include 指定需要编译的文件路径
    10. include: [
    11. resolve('src'),
    12. resolve('node_modules/tree-table-vue/lib'),
    13. resolve('node_modules/v-org-tree/dist'),
    14. resolve('node_modules/iview/src/locale')
    15. ],
    16. use: {
    17. loader: 'babel-loader',
    18. options: {
    19. presets: ['@babel/preset-env']
    20. }
    21. }
    22. }
    23. ]
    24. }
    25. }
  • IE10没问题了,IE9又暴出了AnimationFrame的兼容问题

main.js里添加如下代码:

  1. (function() {
  2. var lastTime = 0
  3. var vendors = ['ms', 'moz', 'webkit', 'o']
  4. for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  5. window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
  6. window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
  7. window[vendors[x] + 'CancelRequestAnimationFrame']
  8. }
  9. if (!window.requestAnimationFrame) {
  10. window.requestAnimationFrame = function(callback, element) {
  11. var currTime = new Date().getTime()
  12. var timeToCall = Math.max(0, 16 - (currTime - lastTime))
  13. var id = window.setTimeout(function() { callback(currTime + timeToCall) },
  14. timeToCall)
  15. lastTime = currTime + timeToCall
  16. return id
  17. }
  18. }
  19. if (!window.cancelAnimationFrame) {
  20. window.cancelAnimationFrame = function(id) {
  21. clearTimeout(id)
  22. }
  23. }
  24. }())

github: https://gist.github.com/paulirish/1579671

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •