手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 開關

Vue3 UI Framework - 開關

為了更好的提升用戶體驗，我們這裡再做一個很常用的開關組件 jeremy-switch

需求分析

開始之前我們先做一個簡單的需求分析

1.switch 組件應分為選中/未被選中，兩種狀態2.可以通過點擊變更選中狀態3.不同的選中狀態有不同的顏色，且有滑塊處於不同的端4.可以指定不同的尺寸5.可以自定義顏色6.可以設置為禁用

那麼可以整理出以下參數表格

參數含義類型可選值默認值value默認選擇狀態booleanfalse / truefalsesize尺寸stringmiddle / small / largemiddlecolor顏色string任意合法顏色值#8c6fefdisabled是否禁用booleanfalse / truefalse骨架

這裡我們可以參考 button 組件，因為 switch 組件具有和 button 組件一樣的」點擊」之功能，所以這裡可以直接使用 button 標籤來實現，然後再用一個 div 來充當滑塊，很容易得到如下骨架：

<template>
  <button
    @click="toggle"
    class="jeremy-swicth"
    :class="{ active: value }"
    :size="size"
    :style="{ '--color': color }"
    :disabled="disabled"
  >
    <div></div>
  </button>
</template>

功能

首先，我們再在 Typescript 中聲明一些需求分析中的屬性：

declare const props: {
  value: boolean;
  size?: "middle" | "small" | "large";
  color: string;
  disabled: boolean;
};
declare const context: SetupContext;

然後，再在 export default 中寫入聲明的參數：

export default {
  install: function (Vue) {
    Vue.component(this.name, this);
  },
  name: "JeremySwitch",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "middle",
    },
    color: {
      type: String,
      default: "#8c6fef",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};

最後，再補全 setup 方法：

  setup(props, context) {
    const toggle = () => {
      context.emit("update:value", !props.value);
    };
    return { toggle };
  },

樣式表

補全層疊樣式表：

<style lang="scss">
@mixin layout($r, $d) {
  $r2: $r - $d;
  display: inline-block;
  position: relative;
  border: none;
  background: #adadad;
  outline: none;
  transition: background-color 250ms;
  cursor: pointer;
  :focus {
    outline: none;
  }
  > div {
    position: absolute;
    background: white;
    border-radius: 50%;
    transition: left 250ms;
    height: $r2;
    width: $r2;
    top: $d/2;
    left: $d/2;
  }
  height: $r;
  width: $r * 2;
  border-radius: $r / 2;
  &.active {
    background: var(--color);
    > div {
      left: calc(100% - #{$r2} - #{$d/2});
    }
  }
}
$r: 20px;
$d: 4px;
.jeremy-swicth[size="small"] {
  @include layout($r, $d);
}
.jeremy-swicth[size="middle"] {
  @include layout($r * 1.5, $d * 1.5);
}
.jeremy-swicth[size="large"] {
  @include layout($r * 2, $d * 2);
}
.jeremy-swicth[disabled] {
  cursor: not-allowed;
}
</style>

運行效果

- End -

推薦閱讀

1.手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 對話框2.手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 按鈕3.手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 文檔頁4.手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 首頁5.手把手教你搭建基於 Vue3 的前端 UI 組件庫 - 頂部邊欄

關注我