feat(Slider): add readonly prop

src/slider/README.md

@@ -160,6 +160,7 @@ export default {
 | inactive-color | Inactive color of bar | _string_ | `#e5e5e5` |
 | range | Whether to enable dual thumb mode | _boolean_ | `false` |
 | disabled | Whether to disable slider | _boolean_ | `false` |
+| readonly `v3.0.5` | Whether to be readonly | _boolean_ | `false` |
 | vertical | Whether to display slider vertically | _boolean_ | `false` |
 
 ### Events

src/slider/README.zh-CN.md

@@ -166,6 +166,7 @@ export default {
 | inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` |
 | range | 是否开启双滑块模式 | _boolean_ | `false` |
 | disabled | 是否禁用滑块 | _boolean_ | `false` |
+| readonly `v3.0.5` | 是否为只读状态 | _boolean_ | `false` |
 | vertical | 是否垂直展示 | _boolean_ | `false` |
 
 ### Events

src/slider/index.tsx

@@ -22,6 +22,7 @@ export default createComponent({
   props: {
     range: Boolean,
     disabled: Boolean,
+    readonly: Boolean,
     vertical: Boolean,
     barHeight: [Number, String],
     buttonSize: [Number, String],
@@ -134,7 +135,7 @@ export default createComponent({
     const onClick = (event: MouseEvent) => {
       event.stopPropagation();
 
-      if (props.disabled) {
+      if (props.disabled || props.readonly) {
         return;
       }
 
@@ -161,7 +162,7 @@ export default createComponent({
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (props.disabled || props.readonly) {
         return;
       }
 
@@ -178,7 +179,7 @@ export default createComponent({
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      if (props.disabled) {
+      if (props.disabled || props.readonly) {
         return;
       }
 
@@ -205,7 +206,7 @@ export default createComponent({
     };
 
     const onTouchEnd = () => {
-      if (props.disabled) {
+      if (props.disabled || props.readonly) {
         return;
       }
 
@@ -235,7 +236,7 @@ export default createComponent({
         <div
           role="slider"
           class={bem(getClassName())}
-          tabindex={props.disabled ? -1 : 0}
+          tabindex={props.disabled || props.readonly ? -1 : 0}
           aria-valuemin={+props.min}
           aria-valuenow={currentValue}
           aria-valuemax={+props.max}

src/slider/test/index.spec.js

@@ -91,6 +91,31 @@ test('should not allow to click slider when disabled', async () => {
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
 });
 
+test('should not allow to drag slider when readonly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 50, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should not allow to click slider when readonly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
 test('should allow to drag vertical slider', () => {
   const restoreMock = mockRect(true);