數據驅動，快速開發組件（ElementUI篇）

enrecul101 發布于2019-08-26 13:39 / 2991人閱讀

摘要：基于這種思路，那留給我們的只有兩步，組件設計和數據設計。關于組件的相關邏輯，可能要在文章里面一次性說清楚，還是需要費很大的精力，不過希望數據驅動的思想能夠讓之前沒有體會到這種開發樂趣的小伙伴們有到新的想法。

在日常開發中，我們肯定不止一次碰到重復的業務代碼，明明功能相似，但總沒思路去把它封裝成組件。關于封裝組件，希望這篇文章能帶給大家新的思路，去更高效的完成日常開發。（注：例子都是基于ElementUI, 但思路都是一樣的）

示例地址-> https://www.lyh.red/admin

代碼地址

數據驅動

構建頁面：設計數據結構（綁定value，綁定事件，相關屬性）-> 生成dom -> dom綁定相關

監聽事件：操作UI -> 觸發事件 -> 更新數據 -> 更新UI

數據驅動是基于數據觸發的，在編寫業務的時候，只需要編寫好組件的dom結構，之后我們便可以不用再去關心dom層，只需要關心數據就ok。
基于這種思路，那留給我們的只有兩步，組件設計和數據設計。

先看看效果

搜索欄配置以及生成效果

      // 過濾相關配置
      filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "賬戶", value: "account"},
          {type: "input", label: "用戶名", value: "name"},
          // {type: "select", label: "創建人", value: "create_user"},
          // {type: "date", label: "創建時間", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

表格配置以及生成效果

      // 表格相關
      tableInfo: {
        refresh: false,
        initCurpage: false,
        data: [],
        fieldList: [
          {label: "賬號", value: "account"},
          {label: "用戶名", value: "name"},
          {label: "性別", value: "sex", width: 80, list: "sexList"},
          {label: "賬號類型", value: "type", width: 100, list: "accountTypeList"},
          {label: "狀態", value: "status", width: 90, list: "statusList"},
          {label: "創建人", value: "create_user"},
          {label: "創建時間", value: "create_time", minWidth: 180},
          {label: "更新人", value: "update_user"},
          {label: "更新時間", value: "update_time", minWidth: 180}
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "180",
          btList: [
            {label: "編輯", type: "", icon: "el-icon-edit", event: "update", show: true},
            {label: "刪除", type: "danger", icon: "el-icon-delete", event: "delete", show: true}
          ]
        }
      }

dom配置和完整頁面

封裝一個搜索欄（功能欄）組件 根據需求設計數據結構

參數設計

搜索參數query，比如要查詢的參數有賬號，名字。

dom相關屬性設計

首先要考慮dom的類型，和顯示，這是基本的，還有擴展類型，比如事件可以設置event屬性，是否顯示設置show屬性，這些是比較通用的。
而基于不同類型的dom，如果是input，select，datetime類型的dom，作為一個承載數據的容器，則需要一個value屬性去和query中的屬性名對上，除此之外不同類型的dom還有不同的特定屬性，比如select需要提供對應的list，datetime需要相關的pickersOptions去限制時間范圍，如果是按鈕，比如el-button,則可以設置icon，按鈕相關type。

最終實現：

filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "賬戶", value: "account"},
          {type: "input", label: "用戶名", value: "name"},
          // {type: "select", label: "創建人", value: "create_user"},
          // {type: "date", label: "創建時間", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

循環的dom列表

設計dom結構

先考慮設計的這個dom需要什么屬性

比如dom是el-input，一個輸入框，可以設置是否禁止disabled，可以設置是否可清空clearable，v-model要綁定的數據，設置dom的class名，設置dom綁定的事件。
比如dom是el-select，除了上面這些屬性，我們還需要這個元素可循環的list

最終dom結構為：

    
      
      
      
      
      
      
        
      
      
      
      
      
      
      
      
      {{item.label}}

事件的處理

事件怎么綁定在dom上

綁定事件，可以在數據結構中給dom設置一個event屬性，比如說是查詢search，在dom結構中我們可以設計一個中間層函數去處理，比如：


      {{item.label}}

中間層函數接收事件類型，然后統一處理。

組件中的函數，外部怎么處理

我覺得組件的話，就承載一個去重復的作用，將所以重復的事情去除就可以，像如果是表格，表單，功能欄類似這種可能顯示重復但是事件多變性的組件，我們則可以考慮將它們的事件派發到業務相關頁面處理，組件保持去除重復的工作，簡單干凈明了就好了。
將事件全部交給父級處理：

    // 綁定的相關事件
    handleEvent (evnet) {
      this.$emit("handleEvent", evnet)
    },
    // 派發按鈕點擊事件
    handleClickBt (event, data) {
      this.$emit("handleClickBt", event, data)
    }

封裝一個tree組件

在后臺管理頁面樹狀組件用到次數實在太多了，靜態的樹數據加載，動態的樹數據懶加載，左鍵點擊事件，右鍵點擊事件等等，封裝之后，哼哼，誰用誰知道，一個字，爽。

設計屬性

其實就是將elementui中的大部分用上的tree屬性加上，然后再設計一部分讓組件更加好用的屬性，部分舉個例子。

屬性	類型	描述
lazy	Boolean	是否懶加載
lazyInfo	Array	懶加載相關數據
loadInfo	Object	正常相關數據
rightClick	Boolean	是否需要右鍵菜單
rightMenuList	Array	右鍵菜單列表

懶加載數據和正常加載數據結構的詳細設計

    /**
     * 懶加載相關數據
     * key -> 唯一標識 label -> 顯示 type -> 類型 api -> 接口 params -> 參數 leaf -> 是否葉子節點
     */
    lazyInfo: {
      type: Array,
      default: () => {
        return [
          {
            key: "id",
            label: "name",
            type: "",
            api: () => {},
            params: {key: "", value: "", type: "url"}, // url/query->{data: [{key: "", value: "", default: ""}] type: "query"}
            leaf: true
          }
        ]
      }
    },
    /**
     * 正常加載相關
     */
    loadInfo: {
      key: "id",
      label: "name",
      api: () => {},
      params: {key: "", value: "", type: "url"} // url/query->{data: [{key: "", value: "", default: ""}] type: "query"}
    },

事件處理

事件處理同樣是需要派發到父級處理，以保證組件的可復用性，通過中間件將樹組件的相關事件派發搭到父級。

實現效果

懶加載樹組件相關數據配置：

      // 樹相關信息
      treeInfo: {
        refresh: false,
        refreshLevel: 0,
        nodeKey: "key",
        lazy: true,
        type: 0, // 省市區類型
        lazyInfo: [
          {
            key: "id",
            label: "name",
            type: 1,
            api: getAllApi,
            params: {key: "pid", value: 1, type: "url"}
          },
          {
            key: "id",
            label: "name",
            type: 2,
            api: getAllApi,
            params: {key: "pid", value: "", type: "url"},
            leaf: true
          }
        ],
        rightMenuList: []
      },

懶加載樹dom結構：

  
    
    
    
    
      {{item.name}}

實現效果：

總結

本文以后臺管理頁面為例，一般后臺管理頁面常用到的tree, table, form, dialog, 搜索欄已經全部做成了可復用的組件，只需要配置好相關數據，引入組件即可使用。
關于組件的相關邏輯，可能要在文章里面一次性說清楚，還是需要費很大的精力，不過希望數據驅動的思想能夠讓之前沒有體會到這種開發樂趣的小伙伴們有到新的想法。

GPU云服務器云服務器大數據開發組件 intel快速存儲驅動數據庫快速開發數據庫快速開發平臺

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109248.html

To Be Simple，基于elementUI的功能擴展組件系列1之Table篇

摘要：項目地址前言結合日常開發，封裝常用功能，提高開發效率。通用顯示效果支持類型類型文本鏈接文檔圖片用法相關屬性屬性參數說明類型可選值默認值動畫效果的列的配置對象，更多細節請參見列屬性。項目地址：tbs-ve-template 前言結合日常開發，封裝常用功能，提高開發效率。讓程序猿兄弟姐妹們也有時間約約女票，逗逗男票，做做自己想做的事情，不要天天在辦公室造輪子！ 1.通用Table 思路...

superPershing 2019-08-23 18:02 評論0 收藏0
封裝框架的實踐

摘要：最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于和封裝的框架，集成數據存儲字體圖標庫拓展語言網絡請求等模塊，為了讓業務開發更專注于數據驅動。最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于vue和elementUI封裝的框架，集成數據存儲localforage、字體圖標庫font-awesome、css拓展語言scss、網絡請求axios等模塊，為了讓業...

Dogee 2019-08-23 13:57 評論0 收藏0
基于Vue,ElementUI開發的一款表單設計器

摘要：介紹基于開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來工具地址地址特性可視化配置頁面提供柵格布局，并采用實現對齊一鍵預覽配置的效果一鍵生成配置數據一鍵生成代碼，立即可運行提供自定義組件滿足用戶自定義介紹基于Vue,ElementUI開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來工具地址：http://to...

DandJ 2019-08-23 12:13 評論0 收藏0
Vue+ElementUI: 手把手教你做一個audio組件

摘要：不顯示下載不顯示靜音不顯示音量條不顯示進度條只能播放一個不要快進按鈕例如父組件這樣回雪月花青春一點點語法大多數時候，我們希望頁面上播放一個音頻時，其他音頻可以暫停。可以把一個類數組轉化成數組，這個是我常用的。 showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343); 目的本項目的目的是教你如...

U2FsdGVkX1x 2019-08-22 11:19 評論0 收藏0