javascript怎么沉淀業務公共組件

這篇“javascript怎么沉淀業務公共組件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“javascript怎么沉淀業務公共組件”文章吧。

公共組件與公共業務組件的區別

在開始之前，需要講清楚一個概念，就是公共組件與公共業務組件的區別，顧名思義，公共組件就是類似ANTD、ElemntUI等等提供的組件，這些組件通常實現了常見的交互需求但是無關業務，公共業務組件則不同，公共業務組件是為了實現某類特定需求而對公共組件進行了有機組合，接下來，我們就通過2W1H分析法，來嘗試闡述我們如何進行公共業務組件的設計和沉淀

為什么要沉淀公共業務組件

當一個需求反復在我們的項目中出現，而不同的項目里交互和所要實現的功能基本一致，僅僅是展示和要提交的字段不一樣的時候，我們就需要考慮針對這個需求定制一個公共業務組件了，現在我們有一個這樣的需求，我們希望可以模糊搜索客戶檔案，物料檔案，通過下拉的方式選擇，然后也可以彈窗查看更多的列，然后勾選選擇。如果沒有一個公共的業務組件，那就意味著，我們為了適配物料檔案，需要寫一套代碼，為了適配客戶檔案，又需要寫一套代碼，這么來看，沉淀一個公共的業務組件是合理的，接下來，我們就圍繞這個需求，基于ElementUI來實現一個公共業務組件。

如何沉淀一個公共業務組件

共性需求提取

• 一個可以模糊搜索的下拉框

• 下拉框選項內容是動態的

• 右邊有一個可以進行彈窗的圖標

• 彈窗里的字段是動態的

需求分析

• 模糊搜索的下拉框本身ElementUI就支持

• 下拉選項的內容el-select提供了默認的插槽

• 彈窗圖標el-select沒有提供插槽，需要我們自行實現

• -彈窗字段動態與下拉選項內容動態本質上需要解決的問題是一樣的，就是我們需要一個模板

模糊搜索的下拉框

 <el-select filterable remote :remote-method="querySearch">...</el-select>

• 設計展示模板所需要的屬性

{
    fieldName: 'id', // 后臺字段名
    fieldTitle: 'id', // 展示的字段名
    isLabel: false, // 是否是選擇以后展示在下拉框里的字段
    isValue: false, // 是否是選擇以后要提交給后臺的字段,
    isQuick: false, // 是否參與輸入框的模糊查詢（這是要解決既模糊搜名稱也要模糊搜編碼的需求）
    isSelectShow: false, // 是否在下拉選項內展示當前字段
}

• 設計需要從外部傳入的屬性

props: {
  //是否禁用
 disabled: {
   type: Boolean,
   default: false
 },
 // 是否多選
 multiple: {
   type: Boolean,
   default: null
 },
 // 要解析的模板
 temp: {
 },
 // 傳入的默認值
 defaultVal：{
   type: [String,Number,Array],
   default: null
 }
}

• 根據傳入的模板對模板進行解析處理選項默認插槽 選項由一個不可編輯的模板表頭循環和實際數據循環構成。

<el-select filterable remote :remote-method="querySearch">
// 模板表頭循環
<el-option
    disabled
    label="標題"
    value="title"
    >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        {{ item.fieldTitle }}
      </div>
    </div>
</el-option>
// 真正的數據循環
<el-option
    v-for="(record, index) in tableData"
    :label="record[labelKey]"
    :value="record[valueKey]"
    :key="index"
  >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        <span>
          {{ record[item.fieldName] }}
        </span>
      </div>
    </div>
</el-select>
computed: {
// 需要在選項內展示的列
  selectHeader () {
      return this.temp.filer(v => v.isSelectShow)
  }
}

• 彈窗圖標的實現 我們需要一個容器，提供定位屬性，然后將彈窗圖標與el-select放在容器里，通過:deep 與相鄰元素選擇器，來定義我們的公共業務組件的樣式

 <div class="refer-modal-box">
    <div
      @click.stop.self="showReferModal"
      class="iconfont icon-loadmore cursor loadmore"
    />
    <el-select
    ...
 ...
 .refer-modal-box{
  padding-right: 30px;
  position: relative;
  // 這里top為1px的原因是input高度比總高度低1像素，通過定位來拉伸高度。
  .loadmore{
    width: 30px;
    color: #999;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  // 相鄰元素選擇器定義input樣式，與彈窗圖標一起拼成一個完整邊框
  .loadmore ~ .el-select:deep(input){
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #dcdfe6;
  }
  .loadmore:hover{
    color: #2e79ef;
  }
}

對外暴露的事件

事件我們可以提供一個獲取當前選中值的方法，在組件外通過$refs.referModal.getChecked()來獲取,$refs.組件名可以直接拿到組件的vue實例，當然可以調用聲明在methods內的方法

以上就是關于“javascript怎么沉淀業務公共組件”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。