手把手教你用jsx封裝Vue中的復雜組件（網易云音樂實戰(zhàn)項目需求）

HitenDev 發(fā)布于2019-08-26 10:28 / 2271人閱讀

摘要：終極解決方案所以我們要統(tǒng)一環(huán)境，直接使用渲染我們的組件，文檔可以參照音樂標題歌手專輯時長省去一些細節(jié)注意需要放在中，的透傳也不要忘了，這樣我們在外部想使用的一些屬性和事件才比較方便。

背景介紹

最近在做vue高仿網易云音樂的項目，在做的過程中發(fā)現(xiàn)音樂表格這個組件會被非常多的地方復用，而且需求比較復雜的和靈活。

預覽地址 源碼地址 圖片預覽

歌單詳情

播放列表

搜索高亮

需求分析

它需要支持：

hideColumns參數(shù)，自定義需要隱藏哪些列。

highLightText，傳入字符串，數(shù)據中命中的字符串高亮。

首先看一下我們平常的table寫法。

這是官網的寫法，假設我們傳入了 hideColumns: ["index", "name"]，我們需要在模板里隱藏的話`

這種代碼非常笨，所以我們肯定是接受不了的，我們很自然的聯(lián)想到平常用v-for循環(huán)，能不能套用在這個需求上呢。
首先在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一下，

但是我們現(xiàn)在把columns都寫到script里了，和template分離開來了，我暫時還不知道有什么方法能把sciprt里寫的模板放到template里用，所以先想到一個可以解決問題的方法。就是在template里加一些判斷。

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

高亮文字匹配需求分析

但是新需求又來了！！根據傳入的 highLightText 去高亮某些文字，我們分析一下需求

雞你太美這個歌名，我們在搜索框輸入雞你
我們需要把

雞你太美

轉化為

  
    雞你
    太美

我們在template里找到音樂標題這行，寫下這端代碼：

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

我發(fā)現(xiàn)無從下手了, 因為jsx最終編譯成的是return vnode的方法，genHighlight執(zhí)行以后返回的是vnode，但是你不能直接把vnode放到template里去。

jsx終極解決方案

所以我們要統(tǒng)一環(huán)境，直接使用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 = "") {
      ...省去一些細節(jié)
      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可以說是復雜組件的終極解決方案。

云服務器 GPU云服務器教你用手把手教你做圖像識別教你用阿里云開我的世界服務器手把手教你阿里云服務器搭建商城

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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
庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創(chuàng)辦的使命是讓你及時的了解開發(fā)中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發(fā)工程師）本文原創(chuàng)，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0
手把手教你用Vue.js封裝Form組件

摘要：到此，和組件的代碼如下在組件中設置了數(shù)組來保存組件中的表單實例，方便接下來獲取表單實例來判斷各個表單的校驗情況并在生命周期中就綁定兩個監(jiān)聽事件和用于添加和移除表單實例。前言：在日常使用vue開發(fā)WEB項目中，經常會有提交表單的需求。我們可以使用 iview 或者 element 等組件庫來完成相關需求；但我們往往忽略了其中的實現(xiàn)邏輯，如果想深入了解其中的實現(xiàn)細節(jié)，本文章從0到1，手...

gitmilk 2019-08-23 14:25 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0