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怎么沉淀业务公共组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。