Refactor: 重构 Slider 组件

package.json

@@ -13,6 +13,7 @@
     "url": "/tdesign-mobile-vue.git"
   },
   "scripts": {
+    "start": "npm run dev",
     "prepare": "husky install .husky",
     "dev": "cd site && cross-env NODE_ENV=development vite",
     "dev:debug": "cd site && cross-env NODE_ENV=development vite --debug",
@@ -167,7 +168,7 @@
     "typescript": "^4.5.2",
     "vite": "^2.7.2",
     "vite-plugin-tdoc": "^2.0.1",
-    "vue": "^3.2.4",
+    "vue": "^3.2.33",
     "vue-eslint-parser": "^8.0.1",
     "vue-router": "4.0.11",
     "vue-tsc": "^0.29.8",

site/docs.config.js

@@ -154,6 +154,12 @@ export default {
           path: '/mobile-vue/components/search',
           component: () => import('@/search/search.md'),
         },
+        {
+          title: 'Slider 滑动选择器',
+          name: 'slider',
+          path: '/mobile-vue/components/slider',
+          component: () => import('@/slider/slider.md'),
+        },
         {
           title: 'Fab 悬浮按钮',
           name: 'fab',

site/styles/mobile/components.less

@@ -64,7 +64,6 @@
   .slider-demo {
     background-color: #fff;
     padding: 12px 16px;
-    max-height: 69px;
   }
 
   .stepper-demo {

src/hooks/useVModel.ts

@@ -0,0 +1,51 @@
+import { ref, Ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
+
+export type ChangeHandler = (value: any, ...args: any[]) => void;
+
+export default function useVModel<T>(
+  value: Ref<T>,
+  modelValue: Ref<T>,
+  defaultValue: T,
+  onChange?: ChangeHandler,
+  propName = 'value',
+  // emit 和 eventName 用于支持 v-model 和 xxx.sync 语法糖
+): [Ref<T>, ChangeHandler] {
+  const { emit } = getCurrentInstance() as ComponentInternalInstance;
+  const internalValue = ref<T>() as Ref<T>;
+  internalValue.value = defaultValue;
+
+  // 受控模式 v-model:propName
+  if (typeof value.value !== 'undefined') {
+    return [
+      value,
+      (newValue, ...args) => {
+        emit?.(`update:${propName}`, newValue, ...args);
+        onChange?.(newValue, ...args);
+      },
+    ];
+  }
+
+  // 受控模式:modelValue v-model
+  if (typeof modelValue.value !== 'undefined') {
+    return [
+      modelValue,
+      (newValue, ...args) => {
+        emit?.(`update:modelValue`, newValue, ...args);
+        onChange?.(newValue, ...args);
+      },
+    ];
+  }
+
+  // 非受控模式
+  return [
+    internalValue,
+    (newValue, ...args) => {
+      internalValue.value = newValue;
+      onChange?.(newValue, ...args);
+    },
+  ];
+}
+
+// emits name
+export const UPDATE_MODEL = 'update:modelValue';
+export const UPDATE_VALUE = 'update:value';

src/slider/demos/base.vue

@@ -1,29 +1,9 @@
 <template>
-  <div class="cell-base">
-    <t-cell-group title="基础滑动选择器">
-      <t-cell label="选择器标题">
-        <t-slider v-model="value" @change="onChange"> </t-slider>
-      </t-cell>
-      <t-cell label="禁用选择器">
-        <t-slider v-model="value" disabled> </t-slider>
-      </t-cell>
-    </t-cell-group>
-  </div>
+  <t-slider v-model="value" />
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const value = ref(60);
-    function onChange($event: number | number[]) {
-      console.log(`change to ${$event}`);
-    }
-    return {
-      value,
-      onChange,
-    };
-  },
-});
+const value = ref(60);
 </script>

src/slider/demos/disable.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="section">
+    <t-slider :default-value="60" disabled />
+  </div>
+  <div class="section">
+    <t-slider :default-value="30" show-extreme-value :min="30" disabled />
+  </div>
+  <div class="section">
+    <t-slider :default-value="50" :marks="marks" disabled />
+  </div>
+  <div class="section">
+    <t-slider :default-value="[30, 80]" range disabled />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const marks = ref({ 0: '小', 50: '中', 100: '大' });
+</script>
+
+<style lang="less" scoped>
+.section {
+  // display: flex;
+  align-items: center;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  & + .section {
+    margin-top: 16px;
+  }
+}
+</style>

src/slider/demos/mark.vue

@@ -1,27 +1,16 @@
 <template>
-  <div class="cell-base">
-    <t-cell-group title="带刻度滑动选择器">
-      <t-cell label="选择器标题">
-        <t-slider v-model="value" :marks="marks"> </t-slider>
-      </t-cell>
-      <t-cell label="禁用选择器">
-        <t-slider v-model="value" disabled :marks="marks"> </t-slider>
-      </t-cell>
-    </t-cell-group>
-  </div>
+  <t-slider v-model="value" :marks="marks" />
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const value = ref(50);
-    const marks = ref({ 0: '小', 50: '中', 100: '大' });
-    return {
-      value,
-      marks,
-    };
-  },
-});
+const value = ref(50);
+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>

src/slider/demos/mobile.vue

@@ -4,48 +4,58 @@
     <p class="summary">滑动滑块来选择一个数值，在具体场景中也可以增加来刻度和展示数值来方便用户使用</p>
     <tdesign-demo-block title="01 类型" summary="基础滑动选择器">
       <div class="slider-demo">
-        <t-slider v-model="value" @change="onChange"> </t-slider>
+        <BaseDemo />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="带数值滑动选择器">
       <div class="slider-demo">
-        <t-slider v-model="value1" show-value> </t-slider>
+        <ValueDemo />
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="起始非零滑动选择器">
+      <div class="slider-demo">
+        <t-slider :default-value="30" :min="30" show-extreme-value> </t-slider>
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="带刻度滑动选择器">
       <div class="slider-demo">
-        <t-slider v-model="value2" :marks="marks"> </t-slider>
+        <MarkDemo />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="区间滑动选择器">
       <div class="slider-demo">
-        <t-slider v-model="rangeValue" show-value range @change="onChange"> </t-slider>
+        <RangeDemo />
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block title="02 状态" summary="滑动选择器禁用状态">
+      <div class="slider-demo">
+        <DisableDemo />
       </div>
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import BaseDemo from './base.vue';
+import MarkDemo from './mark.vue';
+import ValueDemo from './value.vue';
+import RangeDemo from './range.vue';
+import DisableDemo from './disable.vue';
 
-export default defineComponent({
-  setup() {
-    const value = ref(60);
-    const value1 = ref(60);
-    const value2 = ref(50);
-    const marks = ref({ 0: '小', 50: '中', 100: '大' });
-    const rangeValue = ref([30, 70]);
-    function onChange($event: number | number[]) {
-      console.log(`change to ${$event}`);
-    }
-    return {
-      value,
-      value1,
-      value2,
-      rangeValue,
-      marks,
-      onChange,
-    };
-  },
-});
+const value = ref(60);
+const value1 = ref(60);
+const value2 = ref(50);
+const marks = ref({ 0: '小', 50: '中', 100: '大' });
+const rangeValue = ref([30, 70]);
+
+function onChange($event: number | number[]) {
+  console.log(`change to ${$event}`);
+}
 </script>
+
+<style scoped>
+.tdesign-mobile-demo {
+  background: #fff;
+}
+</style>

src/slider/demos/range.vue

@@ -1,29 +1,13 @@
 <template>
-  <div class="cell-base">
-    <t-cell-group title="区间滑动选择器">
-      <t-cell label="选择器标题">
-        <t-slider v-model="rangeValue" show-value range @change="onChange"> </t-slider>
-      </t-cell>
-      <t-cell label="禁用选择器">
-        <t-slider v-model="rangeValue" range disabled> </t-slider>
-      </t-cell>
-    </t-cell-group>
-  </div>
+  <t-slider v-model="rangeValue" show-value range @change="onChange" />
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const rangeValue = ref([30, 80]);
-    function onChange($event: number | number[]) {
-      console.log(`change to ${$event}`);
-    }
-    return {
-      rangeValue,
-      onChange,
-    };
-  },
-});
+const rangeValue = ref([30, 80]);
+
+function onChange($event: number | number[]) {
+  console.log(`change to ${$event}`);
+}
 </script>

src/slider/demos/value.vue

@@ -1,25 +1,9 @@
 <template>
-  <div class="cell-base">
-    <t-cell-group title="带数字滑动选择器">
-      <t-cell label="选择器标题">
-        <t-slider v-model="value" show-value> </t-slider>
-      </t-cell>
-      <t-cell label="禁用选择器">
-        <t-slider v-model="value" disabled show-value> </t-slider>
-      </t-cell>
-    </t-cell-group>
-  </div>
+  <t-slider v-model="value" show-value />
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const value = ref(60);
-    return {
-      value,
-    };
-  },
-});
+const value = ref(60);
 </script>