發想

設計一個停用時握把會被拉長的滑動條。

類似這樣。( ´ ▽ ` )ﾉ

規格

外觀設計

1. 需要有軌道與握把
2. 可設定握把顏色與尺寸
3. 可設定軌道樣式

功能需求

1. 包含 input range 基本功能
2. 當按鈕狀態為 disabled 時，拉動握把，會讓握把往拉動方向變長
3. 被拉長的握把會隨著長度變細
4. 被拉長後會有 Q 彈的慣性效果
5. 可指定握把最大長度

建立檔案

現在讓我們建立元件與文件檔案吧，檔案結構如下。

.
├─ docs        
│  └─ components
│     └─ slider-stubborn
│        └─ index.md           // 介紹元件並展示 examples 內容
└─ src
   └─ components
      └─ slider-stubborn
         ├─ examples           // examples 列舉此元件的各種範例
         ├─ └─ basic-usage.vue // 元件基本用法範例
         └─ slider-stubborn.vue    // 元件主體

元件內容

首先是 Vue 元件的部份，很單純，就是先預留 Vue SFC 內容。

src\components\slider-stubborn\slider-stubborn.vue

<template>
  <div class="">
    固執的滑動條
  </div>
</template>

<script setup lang="ts">
// #region Props
interface Props { }
// #endregion Props
const props = withDefaults(defineProps<Props>(), {});

// #region Emits
const emit = defineEmits<{}>();
// #endregion Emits
</script>

<style scoped lang="sass">
</style>

基本使用範例內容很單純。

src\components\slider-stubborn\examples\basic-usage.vue

<template>
  <div class="flex flex-col gap-4 w-full border border-gray-300 p-6">
    <slider-stubborn />
  </div>
</template>

<script setup lang="ts">
import SliderStubborn from '../slider-stubborn.vue';
</script>

元件介紹

最後是元件介紹部分，先加入固定的基本內容。

docs\components\slider-stubborn\index.md

---
description: 停用時絕不妥協的滑動條。( ・ิω・ิ)
---

<script setup>
import BasicUsage from '../../../src/components/slider-stubborn/examples/basic-usage.vue'
</script>

# 固執的滑動條

停用時絕不妥協的滑動條。( ・ิω・ิ)

## 使用範例

### 基本用法

當狀態為 disabled 時，拉動握把會越拉越長，還會越拉越緊。ᕕ( ﾟ ∀。)ᕗ

<basic-usage/>

::: details 查看範例原始碼
<<< ../../../src/components/slider-stubborn/examples/basic-usage.vue
:::

## 原理

文字文字文字文字文字

## API

### Props

<<< ../../../src/components/slider-stubborn/slider-stubborn.vue/#Props

### Emits

<<< ../../../src/components/slider-stubborn/slider-stubborn.vue/#Emits

導航

最後一步就是在 sidebar 中加入頁面連結。

docs\.vitepress\config.mts

...
export default defineConfig({
  ...
  themeConfig: {
    ...
    sidebar: [
      ...
      {
        text: '元件',
        link: '/components/',
        items: [
          {
            text: '按鈕',
            ...
          },
          {
            text: '滑動條',
            items: [
              { text: '固執的滑動條', link: '/components/slider-stubborn/' },
            ]
          },
          ...
        ]
      },
    ],
    ...
  }
})

接下來讓我們開始開發元件吧！( •̀ ω •́ )✧

總結

• 分析「固執的滑動條」的規格
• 建立元件與文件檔案

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D23