fix: 修改slider组件文档

Author: alec1815

docs/components/slider/index.md

@@ -1,56 +1,82 @@
 # Slider 滑动输入条
 
-滑动输入条
+滑动输入条。
 
 ### 何时使用
 
-当用户需要在数值区间内进行选择时使用
+当用户需要在数值区间内进行选择时使用。
 
 ### 基本用法
 
-<br />
+:::demo
+
+```vue
 <d-slider :min="minValue" :max="maxValue" v-model='inputValue'></d-slider>
-<br />
+<script>
+ import { defineComponent, ref } from 'vue'
 
-### 带有输入框的滑动组件
+ export default defineComponent({
+ setup() {
+ const inputValue = ref(0);
+ const minValue = ref(0);
+ const maxValue = ref(100);
 
-<br />
-<d-slider :min="minValue" :max="maxValue" v-model='inputValue2' showInput></d-slider>
-<br />
+ return {
+ inputValue,
+ maxValue,
+ minValue
+ };
+ },
+ });
+</script>
+```
 
-### 可设置 Step 的滑动组件
-<br />
-<d-slider :min="minValue" :max="maxValue" v-model='inputValue3' :step="step"></d-slider>
+:::
 
-<br />
+### 带有输入框的滑动组件
 
-```html
-<template>
+:::demo
 
-<d-slider :min="minValue" :max="maxValue" v-model="inputValue"></d-slider>
+```vue
+<d-slider :min="minValue" :max="maxValue" v-model='inputValue' showInput></d-slider>
+<script>
+ import { defineComponent, ref } from 'vue'
 
-<d-slider :min="minValue" :max="maxValue" v-model="inputValue2" showInput></d-slider>
+ export default defineComponent({
+ setup() {
+ const inputValue = ref(0);
+ const minValue = ref(0);
+ const maxValue = ref(100);
 
-<d-slider :min="minValue" :max="maxValue" v-model="inputValue3" :step="step"></d-slider>
+ return {
+ inputValue,
+ maxValue,
+ minValue
+ };
+ },
+ });
+</script>
+```
+
+:::
 
-</template>
-<script lang="ts">
- import { defineComponent, ref } from "vue";
+### 可设置 Step 的滑动组件
+:::demo
+
+```vue
+<d-slider :min="minValue" :max="maxValue" v-model="inputValue" showInput :step="step"></d-slider>
+<script>
+ import { defineComponent, ref } from 'vue'
 
  export default defineComponent({
  setup() {
-
- const inputValue = ref(12);
- const inputValue2 = ref(15);
- const inputValue3 = ref(5);
- const minValue = ref(2);
- const maxValue = ref(50);
+ const inputValue = ref(0);
+ const minValue = ref(0);
+ const maxValue = ref(100);
  const step = ref(4);
 
  return {
  inputValue,
- inputValue2,
- inputValue3
  maxValue,
  minValue,
  step
@@ -59,19 +85,16 @@
  });
 </script>
 ```
+:::
 
 ### 禁止输入态
 
-<br />
-<d-slider :min="minValue" :max="maxValue" :disabled="true" v-model='disabledValue'></d-slider>
-<br />
+:::demo
 
-```html
-<template>
+```vue
 <d-slider :min="minValue" :max="maxValue" :disabled="true" v-model='disabledValue'></d-slider>
-</template>
-<script lang="ts">
- import { defineComponent, ref } from "vue";
+<script>
+ import { defineComponent, ref } from 'vue'
 
  export default defineComponent({
  setup() {
@@ -88,31 +111,7 @@
  });
 </script>
 ```
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-export default defineComponent({
- setup() {
- const disabledValue = ref(5);
- const inputValue = ref(12);
- const inputValue2 = ref(15);
- const inputValue3 = ref(5);
- const minValue = ref(2);
- const maxValue = ref(50);
- const step = ref(4);
- 
- return {
- disabledValue,
- inputValue,
- inputValue2,
- inputValue3,
- maxValue,
- minValue,
- step
- }
- }
-})
-</script>
+:::
 
 ### API
 
@@ -122,6 +121,6 @@ d-slider 参数
 | --------- | ------- | ----- | ------------------------------------------------------------------- | ---- |
 | max | number | 100 | 可选，滑动输入条的最大值 |[基本用法](#基本用法) |
 | min | number | 0 | 可选，滑动输入条的最小值 |[基本用法](#基本用法) |
-| step | number | 1 | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[基本用法](#可设置Step的滑动组件) |
-| disabled | boolean | false | 可选，值为 true 时禁止用户输入   |[基本用法](#禁止输入态) |
-| showInput | boolean | false | 可选，值为 true 显示输入框  |[基本用法](#带有输入框的滑动组件)  |
+| showInput | boolean | false | 可选，值为 true 显示输入框   |[带有输入框的滑动组件](#带有输入框的滑动组件)  |
+| step  | number | 1 | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[可设置 Step 的滑动组件](#可设置Step的滑动组件)  |
+| disabled | boolean | false | 可选，值为 true 时禁止用户输入 |[禁止输入态](#禁止输入态) |