手把手教你用jsx封装Vue中的复杂组件（网易云音乐实战项目需求）

HitenDev 发布于2019-08-26 10:28 / 2161人阅读

摘要：终极解决方案所以我们要统一环境，直接使用渲染我们的组件，文档可以参照音乐标题歌手专辑时长省去一些细节注意需要放在中，的透传也不要忘了，这样我们在外部想使用的一些属性和事件才比较方便。

背景介绍

最近在做vue高仿网易云音乐的项目，在做的过程中发现音乐表格这个组件会被非常多的地方复用，而且需求比较复杂的和灵活。

预览地址 源码地址 图片预览

歌单详情

播放列表

搜索高亮

需求分析

它需要支持：

hideColumns参数，自定义需要隐藏哪些列。

highLightText，传入字符串，数据中命中的字符串高亮。

首先看一下我们平常的table写法。

这是官网的写法，假设我们传入了 hideColumns: ["index", "name"]，我们需要在模板里隐藏的话`

这种代码非常笨，所以我们肯定是接受不了的，我们很自然的联想到平常用v-for循环，能不能套用在这个需求上呢。
首先在data里定义columns

data() {
    return {
      columns: [{
        prop: "index",
        label: "",
        width: "50"
      }, {
        prop: "artistsText",
        label: "歌手"
      }, {
        prop: "albumName",
        label: "专辑"
      }, {
        prop: "durationSecond",
        label: "时长",
        width: "100",
      }]
    }
}

然后我们在computed中计算hideColumns做一次合并

  computed: {
    showColumns() {
      const { hideColumns } = this
      return this.columns.filter(column => {
        return !this.hideColumns.find((prop) => prop === column.prop)
      })
    },
  },

那么模板里我们就可以简写成

注意 v-bind="column" 这行，相当于把column中的所有属性混入到table-column中去，是一个非常简便的方法。

script配合template的解决方案

这样需求看似解决了，很美好。

但是我们忘了非常重要的一点，slotScopes这个东西！

比如音乐时长我们需要format一下，

但是我们现在把columns都写到script里了，和template分离开来了，我暂时还不知道有什么方法能把sciprt里写的模板放到template里用，所以先想到一个可以解决问题的方法。就是在template里加一些判断。

又一次的需求看似解决了，很美好。

高亮文字匹配需求分析

但是新需求又来了！！根据传入的 highLightText 去高亮某些文字，我们分析一下需求

鸡你太美这个歌名，我们在搜索框输入鸡你
我们需要把

鸡你太美

转化为

  
    鸡你
    太美

我们在template里找到音乐标题这行，写下这端代码：

methods: {
    genHighlight(text) {
       return xxx
    }
}

我发现无从下手了, 因为jsx最终编译成的是return vnode的方法，genHighlight执行以后返回的是vnode，但是你不能直接把vnode放到template里去。

jsx终极解决方案

所以我们要统一环境，直接使用jsx渲染我们的组件，文档可以参照

babel-plugin-transform-vue-jsx

vuejs/jsx

data() {
    const commonHighLightSlotScopes = {
      scopedSlots: {
        default: (scope) => {
          return (
            {this.genHighlight(scope.row[scope.column.property])}
          )
        }
      }
    }
    return {
      columns: [{
        prop: "name",
        label: "音乐标题",
        ...commonHighLightSlotScopes
      }, {
        prop: "artistsText",
        label: "歌手",
         ...commonHighLightSlotScopes
      }, {
        prop: "albumName",
        label: "专辑",
        ...commonHighLightSlotScopes
      }, {
        prop: "durationSecond",
        label: "时长",
        width: "100",
        scopedSlots: {
          default: (scope) => {
            return (
              {this.$utils.formatTime(scope.row.durationSecond)}
            )
          }
        }
      }]
    }
  },
  methods: {
    genHighlight(title = "") {
      ...省去一些细节
      const titleSpan = matchIndex > -1 ? (
        
          {beforeStr}
          {hitStr}
          {afterStr}
        
      ) : title;
      return titleSpan;
    },
  },
 render() {
    const tableAttrs = {
      attrs: this.$attrs,
      on: {
        ...this.$listeners,
        ["row-click"]: this.onRowClick
      },
      props: {
        ["table-cell-class-name"]: this.tableCellClassName,
        data: this.songs
      },
      style: { width: "99.9%" }
    }
    return this.songs.length ? (
      
        {this.showColumns.map((column, index) => {
          const { scopedSlots, ...columnProps } = column
          return (
            
            
          )
        })}
      
    ) : null
 }

注意$listeners需要放在on中，attrs的透传也不要忘了，这样我们在外部想使用el-table的一些属性和事件才比较方便。
可以看到代码中模板的部分少了很多重复的判断，维护性和扩展性都更强了，jsx可以说是复杂组件的终极解决方案。

私有云 idc机房托管教你用手把手教你做图像识别教你用阿里云开我的世界服务器手把手教你阿里云服务器搭建商城

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106233.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
手把手教你用Vue.js封装Form组件

摘要：到此，和组件的代码如下在组件中设置了数组来保存组件中的表单实例，方便接下来获取表单实例来判断各个表单的校验情况并在生命周期中就绑定两个监听事件和用于添加和移除表单实例。前言：在日常使用vue开发WEB项目中，经常会有提交表单的需求。我们可以使用 iview 或者 element 等组件库来完成相关需求；但我们往往忽略了其中的实现逻辑，如果想深入了解其中的实现细节，本文章从0到1，手...

gitmilk 2019-08-23 14:25 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0