甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Vue后台管理系统开发的示例分析-创新互联

这篇文章给大家分享的是有关Vue后台管理系统开发的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器，站群服务器，德阳机房托管，海外高防服务器，成都机柜租用，动态拨号VPS，海外云手机，海外云服务器，海外服务器租用托管等。

在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式，而且不同的页面标题还不太一样。虽然有的页面标题栏承载的元素不一样，但是也有通用的部分，经过多个项目的迭代慢慢地总结与积累完善出了一个通用的页面标题组件。

下面是一个最常见的标题设计原型：

Vue后台管理系统开发的示例分析

下面是同事给出的封装方案:

使用方式
组件封装代码片段

无对比就没有伤害，这个封装只是争对了单一的情况，并没有任何扩展性和灵性性，而且在组件方法名称和接收的属性上有待考究。所以我果断弃用这个组件，而选择自己的解决方案，虽然也不是很完美，代码质量上相比也没有什么大的改进，但是自我认为还是可以分享一下。

不多废话，先看实际效果图：

Vue后台管理系统开发的示例分析

注意：截图是在Chrome中缩小后截下的，并不是默认大小。

整个组件是通过Vue组件JSX方式写法来实现的，我的代码质量一般，实现上不一定是最佳的，但是我有点纳闷我一个同事总是说我的多套了一些标签，说：pageHeader还需要优化，减少标签嵌套。下面是实现代码：

import './pageHeader.scss'

const PageHeader = {
 name: 'PageHeader',

 props: {
  // 标题
  title: String,

  // 子标题
  subTitle: String,

  // 返回路径，不适用于带选项卡标题
  path: {
   type: [String, Number],
   default: -1
  },

  // 是否显示回退按钮
  withPath: {
   type: Boolean,
   default: false
  },

  // 子标题显示位置 'right' | 'bottom', 不适用于带选项卡标题
  position: {
   type: String,
   default: 'right'
  },

  // 带选项卡标题开关
  withTab: {
   type: Boolean,
   default: false
  },

  // 选项卡是否引起路由改变
  isRoute: {
   type: Boolean,
   default: false
  },

  // 当前激活选项卡
  activeTab: {
   type: String,
   default: ''
  },

  // 选项卡数据
  options: {
   type: Array,
   default() {
    return [
     {
      title: '',
      field: '',
      path: ''
     }
    ]
   }
  }
 },

 computed: {
  isBottom() {
   return this.position === 'bottom'
  },

  curTab: {
   get: function() {
    return this.activeTab
   },

   set: function(val) {
    if (this.activeTab !== val) {
     if (this.isRoute) {
      this.options.forEach(option => {
       if (option.field === tab) {
        this.$router.push(option.path)
        this.$emit('tabChange', val)
       }
      })
     } else {
      this.$emit('tabChange', val)
     }
    }
   }
  }
 },

 methods: {
  goBack() {
   typeof this.path === 'string'
    ? this.$router.push(this.path)
    : this.$router.go(this.path)
  }
 },

 render(h) {
  const Back = (
   
    
    
   
  )   const Header = (               {this.withPath && Back}             {(this.title || this.$slots.title) && (        
        {this.$slots.title ? this.$slots.title : this.title}        
      )}       {(this.subTitle || this.$slots.subTitle) && (        
        {this.$slots.subTitle ? this.$slots.subTitle : this.subTitle}        
      )}      
    
    {this.$slots.action && (             {this.$slots.action}      
    )}    
  )   const TabHeader = (                      {this.options.map(option => (               ))}                {this.$slots.extra && (      {this.$slots.extra}     )}       )   return (         {this.withTab ? TabHeader : Header}       )  } } export default PageHeader

上面的代码在实现上之前没见有考虑到通过this.$router.go(-1)回到上一个页面，而是直接采用this.$router.push(path)，这种需要传path的方式，后来看了最前面同事写的方案后借鉴过来，改进了一下。这个代码实现很简单没有什么需要讲的，下面是组件使用的实际例子，当然如果能写个单元测试文件来测试组件更好，但是我Jest只停留在入门水平，平时也就写些最简单的assert，然后过代码覆盖率。

由于代码在处理选项卡时，并没有对额外的插槽extra作处理，所以在使用时需要在对应的标签上模拟一下下面的线。这里直接使用了Css-in-js的一种实现styled-components的Vue版vue-styled-components，来实现在JSX中实现类似.vue中样式的scoped功能。但是并不建议用，因为Vue版的没有更新，使用的人也不多，不像React社区那么活跃。

import styled from 'vue-styled-components'
import PageHeader from '~/components/pageHeader'

const PageHeaderAction = styled.div`
 border-bottom: 2px solid #e4e7ed;
 padding-bottom: 6px;
`

const UiPageHeader = {
 name: 'UiPageHeader',
 components: {
  PageHeader
 },

 data() {
  return {
   tabActive: '01',
   tabOptions: [
    {
     title: '我的任务',
     field: '01'
    },
    {
     title: '我的流程',
     field: '02'
    },
    {
     title: '店铺任务',
     field: '03'
    },
    {
     title: '店铺流程',
     field: '04'
    }
   ]
  }
 },

 methods: {
  onTabChange(tab) {
   console.log(tab)
  }
 },

 render(h) {
  return (
   

    
     
    
    
     
     
    
    
     
     
     
     
    
    
     
      
       标题插槽示例
       
       Yah!
      
     
     
      
       我是页面标题描述文字
       
       Yah!
      
     
     
      
       保存
      
     
     
      
       页面跳转锚点
      
     
     
      
       保存
      
     
    
    
     
Tab选项卡标题示例

     
选项卡功能比较单一，只支持Element-ui默认的水平显示

     
    
    
     
选项卡 + 标题右边附加操作按钮

     
      
       
        
         新建
        
       
      
     
    
   

  )
 }
}

export default UiPageHeader
注意：在上面的代码中render()方法中传了个h参考是因为我们的脚手架是公司架构师自己Webpack搞的，如果是用@vue/cli生成的项目是不需要这个参数的。

感谢各位的阅读！关于“Vue后台管理系统开发的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


名称栏目：Vue后台管理系统开发的示例分析-创新互联
网页地址：http://chengdu.cdxwcx.cn/article/dpihse.html

其他资讯