按部就班VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼

時間 2020-09-12

標籤按部就班 vue+element vue element 前端應用開發使用組件封裝簡化界面代碼欄目軟件設計简体版

原文原文鏈接

VUE+Element 前端應用，比較不錯的一點就是界面組件化，咱們能夠根據重用的指導方針，把界面內容拆分爲各個不一樣的組合，每個模塊能夠是一個組件，也能夠是多個組件的綜合體，並且這一個過程很是方便。組件封裝的目的就是爲了可以更加便捷、快速的進行業務功能的開發。組件（component）是vue的最強大功能之一，組件能夠實現一些相似功能的複用及與其它業務邏輯的解耦。本篇隨筆介紹前端框架中經常使用到的一些組件封裝處理，用於簡化界面、隱藏實現細節的目的。html

一、組件封裝的須要

在咱們開發一個主要界面的時候，通常須要排列不少內容，各個部分的內容可能會在其餘界面上比較常見，那麼這些若是是簡單的使用原始的Element界面組件，以及簡單的複製處理的話，頁面代碼比較臃腫，並且隨着不斷的複製過去使用，各部分的界面又不在統一了。這個時候若是把那些相同的功能，抽象出來抽離成組件，經過組件引用方式就會顯得格外省事了。前端

在Winform開發中，咱們知道有不少常見的用戶自定義控件，就是對常規界面內容的一些通用部分進行封裝，拖動過來便可使用。如今VUE+Element 前端應用的組件開發也很容易，把界面代碼和Vue的控制邏輯JS代碼組合一塊兒造成一個小組件，經過使用Prop的方式傳入所需參數，由組件內部控制界面的展現邏輯及事件處理，那麼界面調用組件的時候就很是簡潔，這樣咱們主頁面上的代碼量就下降很多，也方便代碼的維護。vue

例如對於常規的字典下拉列表，咱們但願綁定一個字典類型就能夠實現系統的下拉列表的顯示，那麼咱們能夠封裝這個常見的界面內容爲一個字典組件。node

還有對於樹列表及其過濾實現等常規的處理，咱們也能夠經過簡單的封裝，實現樹列表的展現，這樣咱們傳入對應的樹列表數據便可呈現所須要的樹狀列表內容。web

另外，還有一種狀況，是界面內容太多，咱們把它按內容劃分爲不一樣的界面組件，而後頁面進行獨立的維護，主界面直接一行代碼便可集成所需的內容板塊，極大減小主界面的代碼鋪陳。後端

例如：對於權限系統中的每一個角色，除了包含基本信息外，還會包含擁有的權限（功能控制點）、包含用戶，以及擁有的菜單，其中權限是用來控制界面元素，如操做按鈕的顯示的，而擁有的菜單，則是用戶以指定帳號登陸系統後，得到對應角色的菜單，而後構建對應的訪問入口的。角色界面模塊UML類圖以下所示。前端框架

那麼對應界面元素上，咱們就應該以不一樣的Tab來展現這些信息，每一個Tab內容部分就能夠做爲一個獨立的界面組件來開發。app

在好比，組織機構裏面添加成員和添加角色的操做UML圖。echarts

其中添加成員、添加角色，涉及界面的列表數據展現以及對應的添加展現操做，獨立一個界面組件仍是比較方便的，並且添加成員，在角色維護模塊裏面也須要用到，那麼能夠兼容兩個場景來設計組件模塊。框架

二、界面組件的封裝處理

在VUE+Element 的前端場景中，想要封裝好一個組件，通常要熟練掌握的三個技能：一、父組件傳值到子組件（props）二、子組件傳值到父組件（$emit）三、插槽使用（slot）。對於一個獨立的組件，props是用來爲組件內部注入核心內容；$emit用來使這個組件經過一些操做來融入其它組件中。

咱們來詳細分析下前面介紹的組件場景。

對於字典模塊來講，通常若是須要實現和系統字典模塊裏面的Api對接，並展現對應字典類型的下拉列表，實現代碼以下所示。

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="請選擇">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

而後在JS邏輯裏面使用字典的API獲取對應數據，而後綁定到typeList屬性上面便可。這樣的邏輯若是每一個用到字典的地方都須要這樣處理，代碼顯然比較臃腫，並且使用組件封裝更方便。

咱們在Componen目錄下建立一個Common目錄，而後在其中添加一個my-dictdata.vue文件，用來封裝字典內容處理的。

若是咱們完成組件的編寫，那麼引用組件只須要一行代碼便可實現相同的功能了。

<my-dictdata v-model="searchForm.ProductType" type-name="商品類型" />

以及在頁面的組件裏面引入這個自定義組件便可。

import myDictdata from '@/components/Common/my-dictdata'
export default {
  components: { myDictdata },

若是爲了簡便，也能夠在main.js裏面統一全局引入。

這樣相對於使用原始的Element界面組件，既有界面代碼，又有JS代碼，這樣的一行代碼就實現功能，顯得很是簡潔。

爲了瞭解其中的奧祕，咱們對組件的開發過程進行簡單的瞭解，其中組件界面部分的代碼以下所示，和上面的差很少。

<template>
  <el-select v-model="svalue" filterable clearable placeholder="請選擇">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    >
      <span style="float: left;color:yello;">
        <i class="el-icon-tickets" style="color:blue;" />
        {{ item.Text }}
      </span>
    </el-option>
  </el-select>
</template>

而後在JS部分引入字典操做的Api類，以及定義Prop屬性typeName，以下所示。

並對傳入Model值進行監控

咱們在Mounted的實現裏面，增長對字典數據的請求綁定，以下所示。

對於樹形列表

通常來講它的使用代碼以下所示。

仍是能夠感受比較臃腫，若是放到主頁面裏面，會佔用不少代碼行，維護起來也不方便，並且樹列表也是一個常見的界面展現內容，能夠經過簡單的封裝進行減小主頁面的代碼量。

一樣咱們能夠經過封裝一個樹列表組件

咱們能夠在my-tree.vue裏面定義不少常見的的Prop屬性，以方便調用的時候傳入對應的值來改變界面的呈現。

這樣主界面調用組件來實現功能的時候，只須要一行界面代碼便可。

<myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />

相應的處理得到treedata的操做，是下面的函數

    getTree() { // 樹列表數據獲取
      var param = {
        SkipCount: 0,
        MaxResultCount: 1000,
        Tag: 'web' // Web端專用
      }
      menu.GetAll(param).then(data => {
        this.treedata = [];// 樹列表清空
        var list = data.result.items
        if (list) {
          // 使用getJsonTree函數，實現對二維錶轉換爲嵌套樹對象集合
          var newTreedata = getJsonTree(list, {
            id: 'id',
            pid: 'pid',
            children: 'children',
            label: 'name'
          });
          this.treedata = newTreedata
        }
      });
    },

而對於部分頁面組件的方式，這種通常不是很通用的組件，通常咱們能夠把它放在同一個目錄上的Components目錄裏面，以下是權限模塊裏面用到的一些界面內容組件封裝。

完成添加成員、添加角色的界面組件後，咱們就能夠在組織機構界面裏面引入使用。

角色管理，咱們也依據這個來對模塊的內容進行劃分，不一樣業務設計不一樣的界面組件，最後整合一塊兒使用便可。

<el-dialog title="查看信息" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
  <el-col>
    <el-tabs value="basicPage" type="border-card">
      <el-tab-pane name="basicPage" label="基本信息">
        <el-form ref="viewForm" :model="viewForm" label-width="120px">
          <el-form-item label="角色名">
            <el-input v-model="viewForm.name" disabled />
          </el-form-item>
          <el-form-item label="角色顯示名">
            <el-input v-model="viewForm.displayName" disabled />
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="viewForm.description" type="textarea" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane name="permitPage" label="權限">
        <rolefunction ref="rolefunction" :role-id="selectRoleId" />
      </el-tab-pane>

      <el-tab-pane name="userPage" label="用戶">
        <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
      </el-tab-pane>

      <el-tab-pane name="menuPage" label="菜單">
        <rolemenu ref="rolemenu" :role-id="selectRoleId" />
      </el-tab-pane>
    </el-tabs>
  </el-col>
  <div slot="footer" class="dialog-footer">
    <el-button type="success" @click="closeDialog">關閉</el-button>
  </div>
</el-dialog>