elementui源碼學習之仿寫一個el-divider組件

Posted on by

正文

本篇文章記錄仿寫一個el-divider組件細節，從而有助於大傢更好理解餓瞭麼ui對應組件具體工作細節。本文是elementui源碼學習仿寫系列的又一篇文章，後續空閑瞭會不斷更新並仿寫其他組件。源碼在github上，大傢可以拉下來，npm start運行跑起來，結合註釋有助於更好的理解。

github倉庫地址如下：github.com/shuirongshu…

組件需求分析

關於分割線的組件，一般使用的場景有：

  • 分割線之水平分割（如：段落與段落之間分隔）
  • 水平分割線加上文字描述（文字描述位置一般是位於分割線的左側、居中、右側）
  • 分割類型之垂直分割（橫向的行內文字與文字之間的分割）
  • 分割線樣式類型（solid分割線或dashed分割線或dotted分割線）

因為垂直分割距離不夠，所以垂直分割沒有文字描述

組件中用到的知識點

函數式組件

我們知道，一個函數，其實就是一個加工流水線，我們入參，經過函數的加工以後，得到return加工後的結果。

對於組件而言，其實也可以當做一個函數（函數式組件），我們傳遞參數，組件props接收，然後組件再根據傳參的不同，渲染出對應的樣式效果。

這種方式和原來的我們使用組件的方式其實差不多，隻不過更加精簡，畢竟隻考慮接收參數，沒有生命周期、this實例之類的。所以函數式組件的渲染效率會比普通組件高。

所以有些情況下，使用函數式組件效率會更高

函數式組件的兩種定義方式

比如，通過傳參方式去渲染文字，可以有以下兩種方式

方式一：render函數定義

<script>
export default {
  functional: true, // 一定要指明是函數式組件
  props: {
    bookName: {
      type: String,
      default: "鬥破蒼穹",
    },
  },
  // context上下文，有點像this的意思。但不一樣
  render: function (createElement, context) {
    // 創建一個h3標簽，標簽內容是上下文對象中的props中的bookName字段  
    return createElement("h3", {}, context.props.bookName);
  },
};
</script>

方式二：template定義

<!-- 模板標簽上加上functional關鍵字表明是函數式組件 -->
<template functional>
  <div>
    <h3>{{ props.bookName }}</h3>
  </div>
</template>
<script>
  export default {
    props: {
      bookName: {
        type: String,
        default: "鬥破蒼穹",
      },
    },
  }
</script>

關於函數式組件的具體細節，詳情見官方文檔：cn.vuejs.org/v2/guide/re…

這裡為什麼要提到函數式組件呢？因為el-divider組件就是使用函數式組件進行封裝的（因為組件隻是做分割線條的展示，所以不需要有this實例，生命周期之類的）

故：為瞭提升渲染效率，這裡使用函數式組件

使用函數式組件的情況大致有以下：

  • 隻做展示的組件，畢竟沒啥邏輯操作相關
  • 高階組件的操作
  • 循環中也可以考慮使用
  • 整體來說，函數式組件還是比較靈活的

解決一像素太粗的問題

先看一下問題圖

隻需要給對應dom元素稍微縮放一下即可：

transform: scaleY(0.95); 或 transform: scaleX(0.95);

組件封裝

el-divider組件整體還是比較簡單的，主要是函數式組件的參數使用細節

組件封裝的效果圖

組件封裝的代碼

使用的代碼

<template>
  <div class="wrap">
    <h3>實線solid靠左</h3>
    <my-divider class="staticClass_must_hava" content-position="left"
      >早上好</my-divider
    >
    <h3>實線solid居中</h3>
    <my-divider content-position="center">中午好</my-divider>
    <h3>實線solid靠右</h3>
    <my-divider content-position="right">下午好</my-divider>
    <h3>虛線dashed靠左</h3>
    <my-divider lineType="dashed" content-position="left">早上好</my-divider>
    <h3>虛線dashed居中</h3>
    <my-divider lineType="dashed" content-position="center">中午好</my-divider>
    <h3>虛線dashed靠右</h3>
    <my-divider lineType="dashed" content-position="right">下午好</my-divider>
    <h3>圓點dotted靠左</h3>
    <my-divider lineType="dotted" content-position="left">早上好</my-divider>
    <h3>圓點dotted居中</h3>
    <my-divider lineType="dotted" content-position="center">中午好</my-divider>
    <h3>圓點dotted靠右</h3>
    <my-divider lineType="dotted" content-position="right">下午好</my-divider>
    <h3>豎向分割線</h3>
    <span>早上好</span>
    <my-divider direction="vertical"></my-divider>
    <span>中午好</span>
    <my-divider direction="vertical"></my-divider>
    <span>下午好</span>
  </div>
</template>
<script>
import myDivider from "./myDivider.vue";
export default {
  components: { myDivider },
};
</script>
<style>
.wrap { padding: 24px; }
.staticClass_must_hava { border-bottom: 1px solid #baf !important; }
</style>

封裝的代碼

<template functional>
  <!-- functional關鍵字加上後，即代表為函數式組件，就沒有生命周期、this實例等瞭，故渲染更快，性能更高 -->
  <!-- v-bind和v-on這裡不加也行。畢竟函數式組件個人愚見簡潔建議一些，attrs存放傳遞來的數據，listeners傳遞任何事件監聽器 -->
  <!-- data.staticClass需要加上，否則外層給組件加的class屬性在審查元素的時候不會出現的，相當於沒加   -->
  <div
    v-bind="data.attrs"
    v-on="listeners"
    :class="[data.staticClass, `${props.direction}`, `${props.lineType}`]"
  >
    <!-- 當分割線為水平的時候，且插槽有內容的時候，才渲染對應數據 -->
    <!-- slots()方法返回插槽數據對象，default為默認插槽；相當於this.$slots.default。本系列文章中仿寫一個el-tabs 也提到瞭此知識點  -->
    <div
      v-if="props.direction === 'horizontal' && slots().default"
      :class="['text', `${props.contentPosition}`]"
    >
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "myDivider",
  props: {
    // 分割線的方向，默認水平horizontal（垂直vertical可選）
    direction: {
      type: String,
      default: "horizontal",
      validator(val) {
        return ["horizontal", "vertical"].includes(val);
      },
    },
    // 文本內容位置，默認居中（僅當分割線為水平方向時，才渲染對應內容）
    contentPosition: {
      type: String,
      default: "center",
      validator(val) {
        return ["left", "center", "right"].includes(val);
      },
    },
    // 分割線線條類型，默認實線，可選虛線，圓點線
    lineType: {
      type: String,
      default: "solid",
      validator(val) {
        return ["solid", "dashed", "dotted"].includes(val);
      },
    },
  },
};
</script>
<style lang="less" scoped>
// 水平樣式
.horizontal {
  width: 100%;
  border-bottom: 1px solid #333; // 默認solid分割線樣式
  display: block;
  margin: 12px 0;
  position: relative;
  // 縮放0.95倍可以解決一像素問題（一像素看著比實際粗）橫線Y縮放
  transform: scaleY(0.95);
}
// dashed分割線
.dashed {
  border-bottom: 1px dashed #333;
}
// dotted分割線
.dotted {
  border-bottom: 1px dotted #333;
}
// 垂直樣式
.vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  background-color: #333;
  vertical-align: middle;
  position: relative;
  top: -1px; // 微調一下位置
  // 縮放0.95倍可以解決一像素問題（一像素看著比實際粗）豎線X縮放
  transform: scaleX(0.95);
}
// 文本樣式
.text {
  position: absolute;
  padding: 0 12px;
  color: #333;
  font-size: 14px;
  transform: translateY(-50%); // y軸移動自身的一半，使其垂直方向居中
  background-color: #fff; // 通過背景色和padding去蓋住水平分割線條
}
// 文本靠左
.text.left {
  left: 36px;
}
// 文本靠右
.text.right {
  right: 36px;
}
// 文本居中
.text.center {
  left: 50%;
  // 居中的話，別忘瞭要回正。即XY軸方向都平移自身的一半
  transform: translateX(-50%) translateY(-50%);
}
</style>

以上就是elementui源碼學習之仿寫一個el-divider組件的詳細內容，更多關於elementui仿寫el-divider的資料請關註WalkonNet其它相關文章！

推薦閱讀：