提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧

參數客製

展示客製化參數的效果。

src\components\slider-stubborn\examples\custom-prop.vue

<template>
  <div class="flex flex-col w-full border border-gray-300 p-8 gap-10">
    <slider-stubborn
      v-model="value"
      disabled
      :max-thumb-length="thumbMaxLength / 4"
      thumb-color="#ff8d36"
      class="w-full z-[999]"
    />

    <slider-stubborn
      v-model="value"
      disabled
      :max-thumb-length="thumbMaxLength / 2"
      :thumb-size="40"
      class="w-full z-[999]"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import SliderStubborn from '../slider-stubborn.vue';

import { useWindowSize } from '@vueuse/core';

const { width, height } = useWindowSize()

const value = ref(50);

const thumbMaxLength = computed(() =>
  Math.min(width.value, height.value)
);
</script>

在文件中引入範例。

docs\components\slider-stubborn\index.md

...

<script setup>
...
import CustomProp from '../../../src/components/slider-stubborn/examples/custom-prop.vue'
</script>

...

### 參數客製

樣式可隨意調整

<custom-prop/>

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

...

超軟 Q！~(≧∀≦)~

鱈魚：「我還想不到可以展示甚麼範例，留給大家發揮了。੭ ˙ᗜ˙ )੭」

路人：「還有這樣的喔！╭(°A ,°`)╮」

最後讓我們補充一下原理簡介。

docs\components\slider-stubborn\index.md

...

## 原理

使用 svg path 實現拉長與彎曲彈性效果。

::: danger 注意！Σ(ˊДˋ;)
請不要將 overflow 設定為 hidden，否則握把拉長時會被裁切
:::

...

總結

• 新增「參數客製」範例，展示客製化參數的效果

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

GitLab - D26