From af0349a46be76dcb60dc12fd555c0ea2da189e09 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Thu, 3 Nov 2022 16:48:03 +0800
Subject: [PATCH] docs(slider): update docs and demo (#458)

* fix(slider): update docs and demo

* docs(slider): update docs and demo

* fix(slider): update snap
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 547 +++++++-----------
 src/slider/__test__/demo.test.jsx             |   4 +
 src/slider/demos/base.vue                     |   5 +-
 src/slider/demos/disable.vue                  |  33 +-
 src/slider/demos/mark.vue                     |   8 +-
 src/slider/demos/mobile.vue                   |  16 +-
 src/slider/demos/title.vue                    |  18 +
 src/slider/demos/unZero.vue                   |   3 +
 src/slider/demos/value.vue                    |   2 +-
 9 files changed, 257 insertions(+), 379 deletions(-)
 create mode 100644 src/slider/demos/title.vue
 create mode 100644 src/slider/demos/unZero.vue

diff --git a/src/slider/__test__/__snapshots__/demo.test.jsx.snap b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
index 8af47150b..77599182f 100644
--- a/src/slider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,13 +15,13 @@ exports[`Slider > Slider baseVue demo works fine 1`] = `
     <!-- 滑块长度 -->
     <div
       class="t-slider__track"
-      style="width: 60%;"
+      style="width: 0%;"
     />
     <!-- 滑块操作 -->
     
     <div
       class="t-slider__handle"
-      style="left: 60%;"
+      style="left: 0%;"
     />
     
     <!-- 刻度内容 -->
@@ -39,200 +39,38 @@ exports[`Slider > Slider baseVue demo works fine 1`] = `
 
 exports[`Slider > Slider disableVue demo works fine 1`] = `
 <div
-  data-v-app=""
+  class="t-slider-wrap t-is-disabled"
 >
-  
+  <!--v-if-->
   <div
-    class="section"
-    data-v-65b1e7f4=""
+    class="t-slider"
   >
+    <!-- 总长度 -->
     <div
-      class="t-slider-wrap t-is-disabled"
-      data-v-65b1e7f4=""
-    >
-      <!--v-if-->
-      <div
-        class="t-slider"
-      >
-        <!-- 总长度 -->
-        <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="width: 60%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 60%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
-        >
-          
-          
-        </div>
-      </div>
-      <div
-        class="t-slider-wrap__value"
-      >
-        60
-      </div>
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="section"
-    data-v-65b1e7f4=""
-  >
+      class="t-slider__bar"
+    />
+    <!-- 滑块长度 -->
     <div
-      class="t-slider-wrap t-is-disabled"
-      data-v-65b1e7f4=""
-    >
-      <!--v-if-->
-      <div
-        class="t-slider"
-      >
-        <!-- 总长度 -->
-        <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="width: 0%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 0%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
-        >
-          
-          
-        </div>
-      </div>
-      <div
-        class="t-slider-wrap__value"
-      >
-        30
-      </div>
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="section"
-    data-v-65b1e7f4=""
-  >
+      class="t-slider__track"
+      style="width: 0%;"
+    />
+    <!-- 滑块操作 -->
+    
     <div
-      class="t-slider-wrap t-is-disabled t-is-mark"
-      data-v-65b1e7f4=""
-    >
-      <!--v-if-->
-      <div
-        class="t-slider"
-      >
-        <!-- 总长度 -->
-        <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="width: 50%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 50%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
-        >
-          
-          <div
-            class="t-slider__mark-text t-is-active"
-            style="left: 0%;"
-          >
-            小
-          </div>
-          <div
-            class="t-slider__mark-text t-is-"
-            style="left: 50%;"
-          >
-            中
-          </div>
-          <div
-            class="t-slider__mark-text t-is-"
-            style="left: 100%;"
-          >
-            大
-          </div>
-          
-        </div>
-      </div>
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="section"
-    data-v-65b1e7f4=""
-  >
+      class="t-slider__handle"
+      style="left: 0%;"
+    />
+    
+    <!-- 刻度内容 -->
     <div
-      class="t-slider-wrap t-is-disabled"
-      data-v-65b1e7f4=""
+      class="t-slider__mark"
     >
-      <!--v-if-->
-      <div
-        class="t-slider"
-      >
-        <!-- 总长度 -->
-        <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="left: 30%; width: 40%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 30%;"
-        />
-        <div
-          class="t-slider__handle"
-          style="left: 70%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
-        >
-          
-          
-        </div>
-      </div>
-      <!--v-if-->
-      <!--v-if-->
+      
+      
     </div>
   </div>
-  
+  <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -306,7 +144,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
     class="summary"
     data-v-98828574=""
   >
-    滑动滑块来选择一个数值，在具体场景中也可以增加来刻度和展示数值来方便用户使用
+    用于选择横轴上的数值、区间、档位
   </p>
   <div
     class="tdesign-mobile-demo-block"
@@ -342,13 +180,13 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
           <!-- 滑块长度 -->
           <div
             class="t-slider__track"
-            style="width: 60%;"
+            style="width: 0%;"
           />
           <!-- 滑块操作 -->
           
           <div
             class="t-slider__handle"
-            style="left: 60%;"
+            style="left: 0%;"
           />
           
           <!-- 刻度内容 -->
@@ -395,13 +233,13 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
           <!-- 滑块长度 -->
           <div
             class="t-slider__track"
-            style="width: 60%;"
+            style="width: 50%;"
           />
           <!-- 滑块操作 -->
           
           <div
             class="t-slider__handle"
-            style="left: 60%;"
+            style="left: 50%;"
           />
           
           <!-- 刻度内容 -->
@@ -415,7 +253,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
         <div
           class="t-slider-wrap__value"
         >
-          60
+          50
         </div>
         <!--v-if-->
       </div>
@@ -469,11 +307,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
             
           </div>
         </div>
-        <div
-          class="t-slider-wrap__value"
-        >
-          30
-        </div>
+        <!--v-if-->
         <!--v-if-->
       </div>
     </div>
@@ -634,160 +468,127 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       class="slider-demo"
       data-v-98828574=""
     >
-      
       <div
-        class="section"
-        data-v-65b1e7f4=""
+        class="t-slider-wrap t-is-disabled"
+        data-v-98828574=""
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-disabled"
-          data-v-65b1e7f4=""
+          class="t-slider"
         >
-          <!--v-if-->
+          <!-- 总长度 -->
           <div
-            class="t-slider"
-          >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 60%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 60%;"
-            />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              
-            </div>
-          </div>
+            class="t-slider__bar"
+          />
+          <!-- 滑块长度 -->
           <div
-            class="t-slider-wrap__value"
-          >
-            60
-          </div>
-          <!--v-if-->
-        </div>
-      </div>
-      <div
-        class="section"
-        data-v-65b1e7f4=""
-      >
-        <div
-          class="t-slider-wrap t-is-disabled"
-          data-v-65b1e7f4=""
-        >
-          <!--v-if-->
+            class="t-slider__track"
+            style="width: 0%;"
+          />
+          <!-- 滑块操作 -->
+          
           <div
-            class="t-slider"
+            class="t-slider__handle"
+            style="left: 0%;"
+          />
+          
+          <!-- 刻度内容 -->
+          <div
+            class="t-slider__mark"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
             
-            <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
             
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              
-            </div>
-          </div>
-          <div
-            class="t-slider-wrap__value"
-          >
-            30
           </div>
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        <!--v-if-->
       </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-98828574=""
+  >
+    <h2
+      class="tdesign-mobile-demo-block__title"
+    >
+      03 规格
+    </h2>
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      无标题滑动选择器
+    </p>
+    
+    <div
+      class="slider-demo"
+      data-v-98828574=""
+    >
       <div
-        class="section"
-        data-v-65b1e7f4=""
+        class="t-slider-wrap"
+        data-v-98828574=""
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-disabled t-is-mark"
-          data-v-65b1e7f4=""
+          class="t-slider"
         >
-          <!--v-if-->
+          <!-- 总长度 -->
           <div
-            class="t-slider"
+            class="t-slider__bar"
+          />
+          <!-- 滑块长度 -->
+          <div
+            class="t-slider__track"
+            style="width: 0%;"
+          />
+          <!-- 滑块操作 -->
+          
+          <div
+            class="t-slider__handle"
+            style="left: 0%;"
+          />
+          
+          <!-- 刻度内容 -->
+          <div
+            class="t-slider__mark"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 50%;"
-            />
-            <!-- 滑块操作 -->
             
-            <div
-              class="t-slider__handle"
-              style="left: 50%;"
-            />
             
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              <div
-                class="t-slider__mark-text t-is-active"
-                style="left: 0%;"
-              >
-                小
-              </div>
-              <div
-                class="t-slider__mark-text t-is-"
-                style="left: 50%;"
-              >
-                中
-              </div>
-              <div
-                class="t-slider__mark-text t-is-"
-                style="left: 100%;"
-              >
-                大
-              </div>
-              
-            </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
+        <!--v-if-->
+        <!--v-if-->
       </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-98828574=""
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      有标题滑动选择器
+    </p>
+    
+    <div
+      class="slider-demo"
+      data-v-98828574=""
+    >
       <div
-        class="section"
-        data-v-65b1e7f4=""
+        class="flex"
+        data-v-98828574=""
       >
+        <span
+          style="width: 120px; margin-right: 10px;"
+        >
+           选择器标题 
+        </span>
         <div
-          class="t-slider-wrap t-is-disabled"
-          data-v-65b1e7f4=""
+          class="t-slider-wrap"
         >
           <!--v-if-->
           <div
@@ -800,17 +601,13 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
             <!-- 滑块长度 -->
             <div
               class="t-slider__track"
-              style="left: 30%; width: 40%;"
+              style="width: 0%;"
             />
             <!-- 滑块操作 -->
             
             <div
               class="t-slider__handle"
-              style="left: 30%;"
-            />
-            <div
-              class="t-slider__handle"
-              style="left: 70%;"
+              style="left: 0%;"
             />
             
             <!-- 刻度内容 -->
@@ -825,7 +622,6 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
           <!--v-if-->
         </div>
       </div>
-      
     </div>
     
   </div>
@@ -881,6 +677,89 @@ exports[`Slider > Slider rangeVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Slider > Slider titleVue demo works fine 1`] = `
+<div
+  class="flex"
+>
+  <span
+    style="width: 120px; margin-right: 10px;"
+  >
+     选择器标题 
+  </span>
+  <div
+    class="t-slider-wrap"
+  >
+    <!--v-if-->
+    <div
+      class="t-slider"
+    >
+      <!-- 总长度 -->
+      <div
+        class="t-slider__bar"
+      />
+      <!-- 滑块长度 -->
+      <div
+        class="t-slider__track"
+        style="width: 0%;"
+      />
+      <!-- 滑块操作 -->
+      
+      <div
+        class="t-slider__handle"
+        style="left: 0%;"
+      />
+      
+      <!-- 刻度内容 -->
+      <div
+        class="t-slider__mark"
+      >
+        
+        
+      </div>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`Slider > Slider unZeroVue demo works fine 1`] = `
+<div
+  class="t-slider-wrap"
+>
+  <!--v-if-->
+  <div
+    class="t-slider"
+  >
+    <!-- 总长度 -->
+    <div
+      class="t-slider__bar"
+    />
+    <!-- 滑块长度 -->
+    <div
+      class="t-slider__track"
+      style="width: 0%;"
+    />
+    <!-- 滑块操作 -->
+    
+    <div
+      class="t-slider__handle"
+      style="left: 0%;"
+    />
+    
+    <!-- 刻度内容 -->
+    <div
+      class="t-slider__mark"
+    >
+      
+      
+    </div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;
+
 exports[`Slider > Slider valueVue demo works fine 1`] = `
 <div
   class="t-slider-wrap"
@@ -896,13 +775,13 @@ exports[`Slider > Slider valueVue demo works fine 1`] = `
     <!-- 滑块长度 -->
     <div
       class="t-slider__track"
-      style="width: 60%;"
+      style="width: 50%;"
     />
     <!-- 滑块操作 -->
     
     <div
       class="t-slider__handle"
-      style="left: 60%;"
+      style="left: 50%;"
     />
     
     <!-- 刻度内容 -->
@@ -916,7 +795,7 @@ exports[`Slider > Slider valueVue demo works fine 1`] = `
   <div
     class="t-slider-wrap__value"
   >
-    60
+    50
   </div>
   <!--v-if-->
 </div>
diff --git a/src/slider/__test__/demo.test.jsx b/src/slider/__test__/demo.test.jsx
index dc354a258..59bb1a104 100644
--- a/src/slider/__test__/demo.test.jsx
+++ b/src/slider/__test__/demo.test.jsx
@@ -8,6 +8,8 @@ import disableVue from '@/slider/demos/disable.vue';
 import markVue from '@/slider/demos/mark.vue';
 import mobileVue from '@/slider/demos/mobile.vue';
 import rangeVue from '@/slider/demos/range.vue';
+import titleVue from '@/slider/demos/title.vue';
+import unZeroVue from '@/slider/demos/unZero.vue';
 import valueVue from '@/slider/demos/value.vue';
 
 const mapper = {
@@ -16,6 +18,8 @@ const mapper = {
   markVue,
   mobileVue,
   rangeVue,
+  titleVue,
+  unZeroVue,
   valueVue,
 };
 
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index aa14586e7..f3ae96178 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -1,12 +1,11 @@
 <template>
-  <t-slider v-model="value" :label="label" :on-change="onChange" />
+  <t-slider v-model="value" :label="false" :on-change="onChange" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const value = ref(60);
-const label = ref(false);
+const value = ref(0);
 const onChange = ($event: number | number[]) => {
   console.log(`change to ${$event}`);
 };
diff --git a/src/slider/demos/disable.vue b/src/slider/demos/disable.vue
index 29c442ea0..f3a2fb2a1 100644
--- a/src/slider/demos/disable.vue
+++ b/src/slider/demos/disable.vue
@@ -1,34 +1,3 @@
 <template>
-  <div class="section">
-    <t-slider :default-value="60" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="30" :min="30" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="50" :label="label" :marks="marks" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="[30, 70]" range disabled />
-  </div>
+  <t-slider :default-value="30" :min="30" disabled :label="false" />
 </template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const marks = ref({ 0: '小', 50: '中', 100: '大' });
-const label = ref(false);
-</script>
-
-<style lang="less" scoped>
-.section {
-  // display: flex;
-  align-items: center;
-  padding-top: 16px;
-  padding-bottom: 16px;
-
-  & + .section {
-    margin-top: 16px;
-  }
-}
-</style>
diff --git a/src/slider/demos/mark.vue b/src/slider/demos/mark.vue
index 04471ed05..01c3c53b9 100644
--- a/src/slider/demos/mark.vue
+++ b/src/slider/demos/mark.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-slider v-model="value" :label="label" :marks="marks" />
+  <t-slider v-model="value" :label="label" :marks="marks" :step="50" />
 </template>
 
 <script lang="ts" setup>
@@ -8,10 +8,4 @@ import { ref } from 'vue';
 const value = ref(50);
 const label = ref(false);
 const marks = ref({ 0: '小', 50: '中', 100: '大' });
-// const marks = ref([0, 50, 100]);
-// const marks = ref({
-//   0: (val: number) => `${val}%`,
-//   50: (val: number) => `${val}%`,
-//   100: (val: number) => `${val}%`,
-// });
 </script>
diff --git a/src/slider/demos/mobile.vue b/src/slider/demos/mobile.vue
index 2446a3594..7a5c2d1a0 100644
--- a/src/slider/demos/mobile.vue
+++ b/src/slider/demos/mobile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tdesign-mobile-demo">
     <h1 class="title">Slider 滑动选择器</h1>
-    <p class="summary">滑动滑块来选择一个数值，在具体场景中也可以增加来刻度和展示数值来方便用户使用</p>
+    <p class="summary">用于选择横轴上的数值、区间、档位</p>
     <tdesign-demo-block title="01 类型" summary="基础滑动选择器">
       <div class="slider-demo">
         <BaseDemo />
@@ -14,7 +14,7 @@
     </tdesign-demo-block>
     <tdesign-demo-block summary="起始非零滑动选择器">
       <div class="slider-demo">
-        <t-slider :default-value="30" :min="30"> </t-slider>
+        <UnZeroDemo />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="带刻度滑动选择器">
@@ -32,6 +32,16 @@
         <DisableDemo />
       </div>
     </tdesign-demo-block>
+    <tdesign-demo-block title="03 规格" summary="无标题滑动选择器">
+      <div class="slider-demo">
+        <BaseDemo />
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="有标题滑动选择器">
+      <div class="slider-demo">
+        <TitleDemo />
+      </div>
+    </tdesign-demo-block>
   </div>
 </template>
 
@@ -41,6 +51,8 @@ import MarkDemo from './mark.vue';
 import ValueDemo from './value.vue';
 import RangeDemo from './range.vue';
 import DisableDemo from './disable.vue';
+import UnZeroDemo from './unZero.vue';
+import TitleDemo from './title.vue';
 </script>
 
 <style scoped>
diff --git a/src/slider/demos/title.vue b/src/slider/demos/title.vue
new file mode 100644
index 000000000..2b88f9592
--- /dev/null
+++ b/src/slider/demos/title.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex">
+    <span :style="{ width: '120px', 'margin-right': '10px' }"> 选择器标题 </span>
+    <t-slider v-model="value" :label="false" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+<style>
+.flex {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/slider/demos/unZero.vue b/src/slider/demos/unZero.vue
new file mode 100644
index 000000000..a6c8b4db0
--- /dev/null
+++ b/src/slider/demos/unZero.vue
@@ -0,0 +1,3 @@
+<template>
+  <t-slider :default-value="30" :min="30" :max="200" :label="false"> </t-slider>
+</template>
diff --git a/src/slider/demos/value.vue b/src/slider/demos/value.vue
index e6ac6488a..13caa0233 100644
--- a/src/slider/demos/value.vue
+++ b/src/slider/demos/value.vue
@@ -5,5 +5,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const value = ref(60);
+const value = ref(50);
 </script>