详解Vue后台管理系统开发日常总结(组件PageHeader)


Posted in Javascript onNovember 01, 2019

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

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

详解Vue后台管理系统开发日常总结(组件PageHeader)

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

使用方式
<router-back class="router-back" text="详情" />
组件封装代码片段
<template>
 <div>
  <a
   href="javascript:void(0)" rel="external nofollow" 
   :title="title"
   size="15px"
   class="font-icon arrow-left"
   @click="back"
   v-if="!disableRoute"
  ></a>
  <span
   v-show="text.length > 0 && !disableRoute"
   class="vertical-line"
  ></span>
  <span class="text">{{ text }}</span>
 </div>
</template>
<script>
export default {
 name: 'router-back',
 props: {
  text: {
   type: String,
   default: _ => ''
  },
  url: {
   type: [String, Number],
   default: _ => -1
  },
  title: {
   type: String,
   default: _ => '返回'
  },
  disableRoute: {
   type: Boolean,
   default: _ => false
  }
 },
 methods: {
  back () {
   if (typeof this.url === 'number') return this.$router.go(this.url)
   return this.$router.push(this.url)
  }
 }
}
</script>

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

不多废话,先看实际效果图:

详解Vue后台管理系统开发日常总结(组件PageHeader)

注意:截图是在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 = (
   <div class="page-header__back">
    <el-button
     type="text"
     class="page-header__action"
     icon="el-icon-back"
     onClick={this.goBack}
    />
    <span class="page-header__separator mx__m" />
   </div>
  )

  const Header = (
   <div class="page-header-wrap">
    <div class="page-header__main">
     {this.withPath && Back}

     <div class="page-header__title">
      {(this.title || this.$slots.title) && (
       <div
        class={`page-header-title__main ${this.isBottom ? '' : 'fl'}`}
       >
        {this.$slots.title ? this.$slots.title : this.title}
       </div>
      )}

      {(this.subTitle || this.$slots.subTitle) && (
       <div
        class={`page-header-title__sub ${
         this.isBottom ? 'lh__14' : 'fl ml__s'
        }`}
       >
        {this.$slots.subTitle ? this.$slots.subTitle : this.subTitle}
       </div>
      )}
     </div>
    </div>
    {this.$slots.action && (
     <div class={`page-header__aside ${this.isBottom ? 'lh__72' : ''}`}>
      {this.$slots.action}
     </div>
    )}
   </div>
  )

  const TabHeader = (
   <div class="page-header-wrap--tab">
    <div class="page-header-tab__main">
     <el-tabs v-model={this.curTab}>
      {this.options.map(option => (
       <el-tab-pane label={option.title} name={option.field} />
      ))}
     </el-tabs>
    </div>

    {this.$slots.extra && (
     <div class="page-header-tab__extra">{this.$slots.extra}</div>
    )}
   </div>
  )

  return (
   <div class={`page-header ${this.isBottom ? 'pt__20' : 'py__20'}`}>
    {this.withTab ? TabHeader : Header}
   </div>
  )
 }
}

export default PageHeader

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

由于代码在处理选项卡时,并没有对额外的插槽extra作处理,所以在使用时需要在对应的标签上模拟一下<el-tabs/>下面的线。这里直接使用了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 (
   <div>
    <el-row>
     <PageHeader title="标题"/>
    </el-row>
    <el-row>
     <PageHeader title="标题 + 默认回退" withPath={true}/>
     <PageHeader title="标题 + 指定回退路径" withPath={true} path="/4/dashboard"/>
    </el-row>
    <el-row>
     <PageHeader title="标题 + 右边描述" subTitle="我是页面标题描述文字,默认显示在标题右边"/>
     <PageHeader title="标题 + 下边描述" subTitle="我是页面标题描述文字,指定显示在标题下边" position="bottom"/>
     <PageHeader
      title="标题 + 回退 + 右边描述"
      withPath={true}
      subTitle="我是页面标题描述文字,默认显示在标题右边"
     />
     <PageHeader
      title="标题 + 回退 + 下边描述"
      withPath={true}
      subTitle="我是页面标题描述文字,指定显示在标题下边"
      position="bottom"
     />
    </el-row>
    <el-row>
     <PageHeader>
      <template slot="title">
       标题插槽示例
       <i class="el-icon-milk-tea"/>
       <strike style="color: #ff8e00">Yah!</strike>
      </template>
     </PageHeader>
     <PageHeader title="标题描述插槽示例">
      <template slot="subTitle">
       我是页面标题描述文字
       <i class="el-icon-milk-tea"/>
       <strike style="color: #ff8e00">Yah!</strike>
      </template>
     </PageHeader>
     <PageHeader title="标题栏右则附加操作按钮示例">
      <template slot="action">
       <el-button type="primary">保存</el-button>
      </template>
     </PageHeader>
     <PageHeader title="标题栏右则附加操作按钮示例2" subTitle="我是页面标题描述文字">
      <template slot="action">
       <el-button class="btn-link" type="text">页面跳转锚点</el-button>
      </template>
     </PageHeader>
     <PageHeader
      withPath={true}
      title="标题栏右则附加操作按钮示例3"
      subTitle="我是页面标题描述文字"
      position="bottom">
      <template slot="action">
       <el-button type="primary">保存</el-button>
      </template>
     </PageHeader>
    </el-row>
    <el-row>
     <h3>Tab选项卡标题示例</h3>
     <div>选项卡功能比较单一,只支持Element-ui默认的水平显示</div>
     <PageHeader
      withTab={true}
      activeTab={this.tabActive}
      options={this.tabOptions}
      onTabChange={this.onTabChange}
     />
    </el-row>
    <el-row>
     <h3>选项卡 + 标题右边附加操作按钮</h3>
     <PageHeader
      withTab={true}
      activeTab={this.tabActive}
      options={this.tabOptions}
      onTabChange={this.onTabChange}
     >
      <template slot="extra">
       <PageHeaderAction>
        <el-button
         type="primary"
         size="small"
         icon="el-icon-plus"
         onClick={this.onCreate}
        >
         新建
        </el-button>
       </PageHeaderAction>
      </template>
     </PageHeader>
    </el-row>
   </div>
  )
 }
}

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

最后:写这个的目的是为了在工作中有所积累,写了几年业务系统,发现并没有留下什么,以文章的方式记录是一种不错的方式,希望能养成好习惯,坚持写作,在写的时候思考提升自我。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中window.event事件用法详解
Dec 11 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python如何发送与接收大型数组
2020/08/07 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Python 实现集合Set的示例
2020/12/21 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
应届本科生推荐信范文
2013/12/25 职场文书
教师自我鉴定范文
2014/03/20 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
信息技术国培研修日志
2015/11/13 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS