后台框架页使用及二开

页面分为4部分:

  • 1.左侧菜单栏
  • 2.顶部栏
  • 3.tag栏
  • 4.内容页

U4K3PU.png

页面权限：功能按权限显示

hasRolePermission()用于检测当前登录用户是否有权限访问路由。请参考页面中的『缓存清理』功能实现。

图片

页面操作

1.打开新窗口

  2. //方法1.直接调用(兼容性差)
  4. parent.window.__adminOpenNewFrame({
  5.     title: '概览',
  6.     url: '/Main/Index/index'
  7. })
  9. //方法2. 封装后再调用
  10. window.openNewIframe = function (title, url) {
  11.     if (parent.window != window) {
  12.         parent.window.__adminOpenNewFrame({
  13.             title: title,
  14.             url: url
  15.         })
  16.     } else {
  17.         window.location.href = url;
  18.     }
  19. }.bind(this)
  21. //调用
  22. window.openNewIframe('概览','/Main/Index/index');
  24. //方法3 底层实现方法,使用事件触发
  25. const event = new CustomEvent('adminOpenNewFrame', {
  26.   detail: {
  27.     title: '启动父窗口1', 
  28.     url: '/Main/Index/index'
  29.   }
  30. })
  31. window.parent.dispatchEvent(event)
  33. // 方法4(推荐) `/statics/js/ztbcms/ztbcms.js`中已经封装好了，只要引入即可
  34. ztbcms.openNewIframeByUrl('概览', '/Main/Index/index')
  35. ztbcms.openNewIframeByUrl('百度', 'https://baidu.com')
  1. 图标配置

到iconfont.cn选取icon,用的是svg 图片

在dashborad.php 引入js 图片

设置菜单的icon 图片