商家建立小程序流程_详解Vue后台管理体系开发日常总结(组件PageHeader)

  • 栏目:公司新闻 时间:2021-01-06 17:40 分享新闻到:
<返回列表

详解Vue后台管理系统开发日常总结(组件PageHeader)       这篇文章主要介绍了详解Vue后台管理系统开发日常总结(组件PageHeader),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

 router-back text="详情" / 
组件封装代码片段
 template 
 div 
 href="javascript:void(0)" rel="external nofollow" 
 :title="title"
 size="15px"
 @click="back"
 v-if="!disableRoute"
 span
 v-show="text.length 0 !disableRoute"
 /span 
 span {{ text }} /span 
 /div 
 /template 
 script 
export default {
 name: 'router-back',
 pro凡科抠图: {
 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 

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

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

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

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

import './pageHeader.scss'
const PageHeader = {
 name: 'PageHeader',
 pro凡科抠图: {
 // 标题
 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 
 el-button
 type="text"
 icon="el-icon-back"
 this.goBack}
 span / 
 /div 
 const Header = (
 div 
 div 
 {this.withPath Back}
 div 
 {(this.title || this.$slots.title) (
 '' : 'fl'}`}
 {this.$slots.title this.$slots.title : this.title}
 /div 
 {(this.subTitle || this.$slots.subTitle) (
 'lh__14' : 'fl ml__s'
 {this.$slots.subTitle this.$slots.subTitle : this.subTitle}
 /div 
 /div 
 /div 
 {this.$slots.action (
 div 'lh__72' : ''}`} 
 {this.$slots.action}
 /div 
 /div 
 const TabHeader = (
 div 
 div 
 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 {this.$slots.extra} /div 
 /div 
 return (
 div '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-ponents,来实现在JSX中实现类似.vue中样式的scoped功能。但是并不建议用,因为Vue版的没有更新,使用的人也不多,不像React社区那么活跃。

import styled from 'ponents'
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 / 
 strike Yah! /strike 
 /template 
 /PageHeader 
 PageHeader title="标题描述插槽示例" 
 template slot="subTitle" 
 我是页面标题描述文字
 i / 
 strike 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 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"
 this.onCreate}
 /el-button 
 /PageHeaderAction 
 /template 
 /PageHeader 
 /el-row 
 /div 
export default UiPageHeader
注意:在上面的代码中render()方法中传了个h参考是因为我们的脚手架是公司架构师自己Webpack搞的,。

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

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


分享新闻到:

更多阅读

商家建立小程序流程_详解Vue后台管理体系

公司新闻 2021-01-06
详细说明Vue后台管理管理方法系统软件开发设计平时小结(部件PageHeader) 本文关键详细介...
查看全文

线上抽奖小程序_js完成倒计时秒杀效果

公司新闻 2021-01-06
js完成倒数计时限时秒杀实际效果 本文关键为大伙儿详尽详细介绍了js完成倒数计时限时...
查看全文

哪一个抠图软件好用-手机软件开发软件费

公司新闻 2021-01-06
手机上app手机软件开发设计花费为何较为高?在大家的日常生活中,手机上app手机软件的开发...
查看全文
返回全部新闻


区域站点: 南丰县如何建立微信小程序   南宫市自己搭建服务器   囊谦县建立网站   南和县自助建站免费建站平台   南华县如何建立微信小程序   南江县自己搭建服务器   南京市建立网站   南靖县自助建站免费建站平台   南康市如何建立微信小程序   南乐县自己搭建服务器   南陵县建立网站   南宁市自助建站免费建站平台   南平市如何建立微信小程序   南皮县自己搭建服务器   南市区建立网站   南通市自助建站免费建站平台   南投县如何建立微信小程序   南雄市自己搭建服务器   南溪县建立网站   南阳市自助建站免费建站平台   南漳县如何建立微信小程序   南召县自己搭建服务器   南郑县建立网站   那坡县自助建站免费建站平台   那曲县如何建立微信小程序   纳雍县自己搭建服务器   讷河市建立网站   内黄县自助建站免费建站平台   内江市如何建立微信小程序   内丘县自己搭建服务器   内乡县建立网站   嫩江市自助建站免费建站平台   聂荣县如何建立微信小程序   尼玛县自己搭建服务器   尼木县建立网站   宁安市自助建站免费建站平台   宁波市如何建立微信小程序   宁城县自己搭建服务器   宁德市建立网站   宁都县自助建站免费建站平台   宁国市如何建立微信小程序   宁海县自己搭建服务器   宁化县建立网站   宁晋县自助建站免费建站平台   宁陵县如何建立微信小程序   宁明县自己搭建服务器   宁南县建立网站   宁强县自助建站免费建站平台   宁陕县如何建立微信小程序   宁武县自己搭建服务器   宁乡市建立网站   宁阳县自助建站免费建站平台   宁远县如何建立微信小程序   农安县自己搭建服务器   磐安县建立网站   盘锦市自助建站免费建站平台   盘山县如何建立微信小程序   磐石市自己搭建服务器   盘州市建立网站   蓬安县自助建站免费建站平台   澎湖县如何建立微信小程序   蓬莱市自己搭建服务器   彭山县建立网站   蓬溪县自助建站免费建站平台   彭阳县如何建立微信小程序   彭泽县自己搭建服务器   彭州市建立网站   偏关县自助建站免费建站平台   平安县如何建立微信小程序   平昌县自己搭建服务器   平定县建立网站   屏东县自助建站免费建站平台   平度市如何建立微信小程序   平果县自己搭建服务器   平和县建立网站   平湖市自助建站免费建站平台   平江县如何建立微信小程序   平乐县自己搭建服务器   平凉市建立网站   平利县自助建站免费建站平台   平罗县如何建立微信小程序   平陆县自己搭建服务器   屏南县建立网站   平泉市自助建站免费建站平台   屏山县如何建立微信小程序   平顺县自己搭建服务器   平塘县建立网站   平潭县自助建站免费建站平台   平武县如何建立微信小程序   萍乡市自己搭建服务器   平乡县建立网站   平阳县自助建站免费建站平台   平遥县如何建立微信小程序   平阴县自己搭建服务器   平邑县建立网站   平远县自助建站免费建站平台   平舆县如何建立微信小程序   皮山县自己搭建服务器   普安县建立网站   浦北县自助建站免费建站平台   浦城县如何建立微信小程序   普洱市自己搭建服务器   普格县建立网站   浦江县自助建站免费建站平台   普兰县如何建立微信小程序   普宁市自己搭建服务器   莆田市建立网站   迁安市自助建站免费建站平台   乾安县如何建立微信小程序   潜江市自己搭建服务器   潜山市建立网站  

友情链接: 自助免费建站 快速建站 360免费建站永久免 自助建站

Copyright © 2002-2020 建立网站_自助建站免费建站平台_如何建立微信小程序_自己搭建服务器_网站建设空间 版权所有 (网站地图) 备案号:粤ICP备10235580号