feat: range组件，功能完善 (#1129)

* feat: range组件功能完善，新增 竖向操作，刻度展示

src/packages/__VUE/range/demo.vue

@@ -46,6 +46,39 @@
         </template>
       </nut-range>
     </nut-cell>
+
+    <h2>垂直方向</h2>
+    <nut-cell class="vertical_div">
+      <view class="div">
+        <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+      </view>
+      <view class="div">
+        <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+      </view>
+    </nut-cell>
+    <h2>刻度标记</h2>
+    <nut-cell class="cell">
+      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="cell">
+      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+
+    <nut-cell class="vertical_div">
+      <view class="div">
+        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+      </view>
+      <view class="div">
+        <nut-range
+          range
+          v-model="value15"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
+      </view>
+    </nut-cell>
   </div>
 </template>
 
@@ -53,7 +86,6 @@
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 import { Toast } from '@/packages/nutui.vue';
-
 const { createDemo } = createComponent('range');
 export default createDemo({
   props: {},
@@ -67,8 +99,23 @@ export default createDemo({
       value6: 40,
       value7: 50,
       value8: 40,
-      value9: 60
+      value9: 60,
+      value10: 20,
+      value11: [20, 80],
+      value12: 60,
+      value13: [20, 80],
+      value14: 60,
+      value15: [20, 80],
+      marks: {
+        0: 0,
+        20: 20,
+        40: 40,
+        60: 60,
+        80: 80,
+        100: 100
+      }
     });
+
     const onChange = (value: number) => Toast.text('当前值：' + value);
     return {
       ...toRefs(state),
@@ -91,4 +138,11 @@ export default createDemo({
   background-color: #ee0a24;
   border-radius: 100px;
 }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
 </style>

src/packages/__VUE/range/doc.md

@@ -275,6 +275,112 @@ export default {
 </script>
 ```
 :::
+
+:::demo
+```html
+<style>
+
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
+</style>
+<template>
+  <nut-cell class="vertical_div">
+    <div class="div">
+      <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+    </div>
+    <div class="div">
+      <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+    </div>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value10 = ref(20);
+    const value11 = ref([20,80]);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+:::demo
+```html
+<style>
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
+</style>
+<template>
+  <div >
+    <nut-cell class="cell">
+      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="cell">
+      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="vertical_div">
+      <div class="div">
+        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+      </div>
+      <div class="div">
+        <nut-range
+          range
+          v-model="value15"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
+      </div>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value12 = ref(20);
+    const value13 = ref([20,80]);
+    const marks=ref({
+      0: 0,
+      20: 20,
+      40: 40,
+      60: 60,
+      80: 80,
+      100: 100
+    });
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
+
+
   ## API
   
   ### Props
@@ -287,11 +393,13 @@ export default {
 | min | 最小值 | Number、String | `0` |
 | step | 步长 | Number、String | `1` |
 | disabled | 是否禁用滑块 | Boolean | `false` |
+| vertical | 是否竖向展示 | Boolean | `false` |
 | hidden-range | 是否隐藏范围值 | Boolean | `false` |
 | hidden-tag | 是否隐藏标签 | Boolean | `false` |
 | active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
 | inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
 | button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
+| marks | 刻度标示 | Object{key:number} | {} |
 
   
 ### Events

src/packages/__VUE/range/index.scss

@@ -2,7 +2,7 @@
   display: flex;
   position: relative;
   width: 100%;
-  height: 3px;
+  height: 4px;
   align-items: center;
   .min,
   .max {
@@ -10,12 +10,83 @@
     color: $range-tip-font-color;
     user-select: none;
   }
+  &-vertical {
+    height: 100%;
+    flex-direction: column;
+    padding: 0px 15px;
+    .nut-range {
+      width: 4px;
+      height: 100%;
+      &-button {
+        &-wrapper,
+        &-wrapper-right {
+          position: absolute;
+          top: initial;
+          bottom: 0px;
+          left: 50%;
+          right: initial;
+          transform: translate3d(-50%, 50%, 0);
+        }
+
+        &-wrapper-left {
+          top: 0px;
+          left: 50%;
+          right: initial;
+          transform: translate3d(-50%, -50%, 0);
+        }
+      }
+      .number {
+        transform: translate3d(100%, 0, 0);
+      }
+      &-vertical {
+        margin: 10px 0px;
+      }
+      &-mark {
+        position: absolute;
+        width: 100%;
+        right: 50%;
+        overflow: visible;
+        font-size: 12px;
+        height: 100%;
+        top: initial;
+        width: 36px;
+        padding: 0px;
+      }
+
+      &-mark-text {
+        width: 20px;
+        position: absolute;
+        display: inline-block;
+        line-height: 16px;
+        color: #999;
+        text-align: center;
+        word-break: keep-all;
+        user-select: none;
+        transform: translateY(-50%);
+        &-active {
+          .nut-range-tick {
+            background: $range-bar-bg-color;
+          }
+        }
+      }
+      &-tick {
+        position: absolute;
+        top: 0px;
+        left: 30px;
+        width: 11px;
+        height: 11px;
+        margin-left: -0px;
+        border-radius: 50%;
+        background-color: $range-bg-color-tick;
+      }
+    }
+  }
 }
 .nut-range {
   display: block;
   position: relative;
   width: 100%;
-  height: 3px;
+  height: 4px;
   background-color: $range-bg-color;
   border-radius: 2px;
   cursor: pointer;
@@ -89,7 +160,43 @@
       cursor: not-allowed;
     }
   }
+
   &-show-number {
     margin: 0 15px;
   }
+
+  &-mark {
+    position: absolute;
+    width: 100%;
+    overflow: visible;
+    top: 50%;
+    font-size: 12px;
+    padding-top: 14px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    line-height: 16px;
+    color: #999;
+    text-align: center;
+    word-break: keep-all;
+    user-select: none;
+    transform: translateX(-50%);
+    &-active {
+      .nut-range-tick {
+        background: $range-bar-bg-color;
+      }
+    }
+  }
+  &-tick {
+    position: absolute;
+    top: -20px;
+    width: 11px;
+    height: 11px;
+    // margin-left: -11px;
+    left: 0px;
+    border-radius: 50%;
+    background-color: $range-bg-color-tick;
+  }
 }

src/packages/__VUE/range/index.taro.vue

@@ -1,7 +1,13 @@
 <template>
-  <view class="nut-range-container">
+  <view :class="containerClasses">
     <view class="min" v-if="!hiddenRange">{{ +min }}</view>
     <view ref="root" :id="'root-' + refRandomId" :style="wrapperStyle" :class="classes" @click.stop="onClick">
+      <view class="nut-range-mark" v-if="marksList.length > 0">
+        <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
+          {{ marks }}
+          <span class="nut-range-tick" :style="tickStyle(marks)"></span>
+        </span>
+      </view>
       <view class="nut-range-bar" :style="barStyle">
         <template v-if="range">
           <view
@@ -12,6 +18,7 @@
               'nut-range-button-wrapper-left': index == 0,
               'nut-range-button-wrapper-right': index == 1
             }"
+            :catch-move="true"
             :tabindex="disabled ? -1 : 0"
             :aria-valuemin="+min"
             :aria-valuenow="curValue(index)"
@@ -46,6 +53,7 @@
             :aria-valuenow="curValue()"
             :aria-valuemax="+max"
             aria-orientation="horizontal"
+            :catch-move="true"
             @touchstart.stop.prevent="
               (e) => {
                 onTouchStart(e);
@@ -87,6 +95,14 @@ export default create({
     activeColor: String,
     inactiveColor: String,
     buttonColor: String,
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    marks: {
+      type: Object,
+      default: {}
+    },
     hiddenRange: {
       type: Boolean,
       default: false
@@ -124,6 +140,16 @@ export default create({
     const dragStatus = ref<'start' | 'draging' | ''>();
     const touch = useTouch();
 
+    const marksList = computed(() => {
+      const { marks, max, min } = props;
+      const marksKeys = Object.keys(marks);
+      const range = Number(max) - Number(min);
+      const list = marksKeys
+        .map(parseFloat)
+        .sort((a, b) => a - b)
+        .filter((point) => point >= min && point <= max);
+      return list;
+    });
     const scope = computed(() => Number(props.max) - Number(props.min));
 
     const classes = computed(() => {
@@ -131,10 +157,17 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-vertical`]: props.vertical,
         [`${prefixCls}-show-number`]: !props.hiddenRange
       };
     });
-
+    const containerClasses = computed(() => {
+      const prefixCls = 'nut-range-container';
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-vertical`]: props.vertical
+      };
+    });
     const wrapperStyle = computed(() => {
       return {
         background: props.inactiveColor
@@ -166,14 +199,68 @@ export default create({
     };
 
     const barStyle = computed<CSSProperties>(() => {
+      if (props.vertical) {
+        return {
+          height: calcMainAxis(),
+          top: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? 'none' : undefined
+        };
+      } else {
+        return {
+          width: calcMainAxis(),
+          left: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? 'none' : undefined
+        };
+      }
+    });
+    const markClassName = (mark: any) => {
+      const classPrefix = 'nut-range-mark';
+      const { modelValue, max, min } = props;
+      let lowerBound: any = Number(min);
+      let upperBound: any = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue as any;
+        lowerBound = left;
+        upperBound = right;
+      } else {
+        upperBound = modelValue;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
       return {
-        width: calcMainAxis(),
-        left: calcOffset(),
-        background: props.activeColor,
-        transition: dragStatus.value ? 'none' : undefined
+        [`${classPrefix}-text`]: true,
+        [`${classPrefix}-text-active`]: isActive
+      };
+    };
+    const marksStyle = (mark: any) => {
+      const { max, min, vertical } = props;
+      let style: any = {
+        left: `${((mark - Number(min)) / scope.value) * 100}%`
+      };
+      if (vertical) {
+        style = {
+          top: `${((mark - Number(min)) / scope.value) * 100}%`
+        };
+      }
+      return style;
+    };
+    const tickStyle = (mark: any) => {
+      const { modelValue, max, min } = props;
+      let lowerBound: any = Number(min);
+      let upperBound: any = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue as any;
+        lowerBound = left;
+        upperBound = right;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
+      let style: any = {
+        background: !isActive ? props.inactiveColor : props.activeColor
       };
-    });
 
+      return style;
+    };
     const format = (value: number) => {
       const { min, max, step } = props;
       value = Math.max(+min, Math.min(value, +max));
@@ -213,8 +300,14 @@ export default create({
 
       const { min, modelValue } = props;
       const rect = await useTaroRect(root, Taro);
-      const delta = (event as any).touches[0].clientX - rect.left;
-      const total = rect.width;
+      let delta = (event as any).touches[0].clientX - rect.left;
+      let total = rect.width;
+      console.log(delta);
+      console.log(total);
+      if (props.vertical) {
+        delta = (event as any).touches[0].clientY - rect.top;
+        total = rect.height;
+      }
       const value = Number(min) + (delta / total) * scope.value;
       if (isRange(modelValue)) {
         const [left, right] = modelValue;
@@ -244,6 +337,8 @@ export default create({
       }
 
       dragStatus.value = 'start';
+      event.stopPropagation();
+      event.preventDefault();
     };
 
     const onTouchMove = async (event: TouchEvent) => {
@@ -259,22 +354,25 @@ export default create({
       dragStatus.value = 'draging';
 
       const rect = await useTaroRect(root, Taro);
-      const delta = touch.deltaX.value;
-      const total = rect.width;
-      const diff = (delta / total) * scope.value;
-
+      let delta = touch.deltaX.value;
+      let total = rect.width;
+      let diff = (delta / total) * scope.value;
+      if (props.vertical) {
+        delta = touch.deltaY.value;
+        total = rect.height;
+        diff = (delta / total) * scope.value;
+      }
       if (isRange(startValue)) {
         (currentValue as number[])[buttonIndex.value] = startValue[buttonIndex.value] + diff;
       } else {
         currentValue = startValue + diff;
       }
       updateValue(currentValue);
-
       event.stopPropagation();
       event.preventDefault();
     };
 
-    const onTouchEnd = () => {
+    const onTouchEnd = (event: TouchEvent) => {
       if (props.disabled) {
         return;
       }
@@ -283,15 +381,15 @@ export default create({
         emit('drag-end');
       }
       dragStatus.value = '';
+      event.stopPropagation();
+      event.preventDefault();
     };
 
     const curValue = (idx?: number) => {
       const value = typeof idx === 'number' ? (props.modelValue as number[])[idx] : props.modelValue;
       return value;
     };
-
     const refRandomId = Math.random().toString(36).slice(-8);
-
     return {
       root,
       classes,
@@ -305,6 +403,11 @@ export default create({
       barStyle,
       curValue,
       buttonIndex,
+      containerClasses,
+      markClassName,
+      marksStyle,
+      marksList,
+      tickStyle,
       refRandomId
     };
   }

src/packages/__VUE/range/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <view class="nut-range-container">
+  <view :class="containerClasses">
     <view class="min" v-if="!hiddenRange">{{ +min }}</view>
     <view ref="root" :style="wrapperStyle" :class="classes" @click.stop="onClick">
+      <view class="nut-range-mark" v-if="marksList.length > 0">
+        <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
+          {{ marks }}
+          <span class="nut-range-tick" :style="tickStyle(marks)"></span>
+        </span>
+      </view>
       <view class="nut-range-bar" :style="barStyle">
         <template v-if="range">
           <view
@@ -82,10 +88,19 @@ export default create({
       type: Boolean,
       default: false
     },
+
     disabled: Boolean,
     activeColor: String,
     inactiveColor: String,
     buttonColor: String,
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    marks: {
+      type: Object,
+      default: {}
+    },
     hiddenRange: {
       type: Boolean,
       default: false
@@ -123,6 +138,16 @@ export default create({
     const dragStatus = ref<'start' | 'draging' | ''>();
     const touch = useTouch();
 
+    const marksList = computed(() => {
+      const { marks, max, min } = props;
+      const marksKeys = Object.keys(marks);
+      const range = Number(max) - Number(min);
+      const list = marksKeys
+        .map(parseFloat)
+        .sort((a, b) => a - b)
+        .filter((point) => point >= min && point <= max);
+      return list;
+    });
     const scope = computed(() => Number(props.max) - Number(props.min));
 
     const classes = computed(() => {
@@ -130,10 +155,17 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-vertical`]: props.vertical,
         [`${prefixCls}-show-number`]: !props.hiddenRange
       };
     });
-
+    const containerClasses = computed(() => {
+      const prefixCls = 'nut-range-container';
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-vertical`]: props.vertical
+      };
+    });
     const wrapperStyle = computed(() => {
       return {
         background: props.inactiveColor
@@ -165,14 +197,68 @@ export default create({
     };
 
     const barStyle = computed<CSSProperties>(() => {
+      if (props.vertical) {
+        return {
+          height: calcMainAxis(),
+          top: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? 'none' : undefined
+        };
+      } else {
+        return {
+          width: calcMainAxis(),
+          left: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? 'none' : undefined
+        };
+      }
+    });
+    const markClassName = (mark: any) => {
+      const classPrefix = 'nut-range-mark';
+      const { modelValue, max, min } = props;
+      let lowerBound: any = Number(min);
+      let upperBound: any = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue as any;
+        lowerBound = left;
+        upperBound = right;
+      } else {
+        upperBound = modelValue;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
       return {
-        width: calcMainAxis(),
-        left: calcOffset(),
-        background: props.activeColor,
-        transition: dragStatus.value ? 'none' : undefined
+        [`${classPrefix}-text`]: true,
+        [`${classPrefix}-text-active`]: isActive
+      };
+    };
+    const marksStyle = (mark: any) => {
+      const { max, min, vertical } = props;
+      let style: any = {
+        left: `${((mark - Number(min)) / scope.value) * 100}%`
+      };
+      if (vertical) {
+        style = {
+          top: `${((mark - Number(min)) / scope.value) * 100}%`
+        };
+      }
+      return style;
+    };
+    const tickStyle = (mark: any) => {
+      const { modelValue, max, min } = props;
+      let lowerBound: any = Number(min);
+      let upperBound: any = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue as any;
+        lowerBound = left;
+        upperBound = right;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
+      let style: any = {
+        background: !isActive ? props.inactiveColor : props.activeColor
       };
-    });
 
+      return style;
+    };
     const format = (value: number) => {
       const { min, max, step } = props;
       value = Math.max(+min, Math.min(value, +max));
@@ -212,8 +298,12 @@ export default create({
 
       const { min, modelValue } = props;
       const rect = useRect(root);
-      const delta = event.clientX - rect.left;
-      const total = rect.width;
+      let delta = event.clientX - rect.left;
+      let total = rect.width;
+      if (props.vertical) {
+        delta = event.clientY - rect.top;
+        total = rect.height;
+      }
       const value = Number(min) + (delta / total) * scope.value;
       if (isRange(modelValue)) {
         const [left, right] = modelValue;
@@ -258,10 +348,14 @@ export default create({
       dragStatus.value = 'draging';
 
       const rect = useRect(root);
-      const delta = touch.deltaX.value;
-      const total = rect.width;
-      const diff = (delta / total) * scope.value;
-
+      let delta = touch.deltaX.value;
+      let total = rect.width;
+      let diff = (delta / total) * scope.value;
+      if (props.vertical) {
+        delta = touch.deltaY.value;
+        total = rect.height;
+        diff = (delta / total) * scope.value;
+      }
       if (isRange(startValue)) {
         (currentValue as number[])[buttonIndex.value] = startValue[buttonIndex.value] + diff;
       } else {
@@ -300,7 +394,12 @@ export default create({
       ...toRefs(props),
       barStyle,
       curValue,
-      buttonIndex
+      buttonIndex,
+      containerClasses,
+      markClassName,
+      marksStyle,
+      marksList,
+      tickStyle
     };
   }
 });

src/packages/styles/variables.scss

@@ -335,6 +335,7 @@ $infiniteloading-bottom-color: #c8c8c8 !default;
 //range
 $range-tip-font-color: #333333 !default;
 $range-bg-color: rgba($primary-color, 0.5) !default;
+$range-bg-color-tick: #fa958c !default;
 $range-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $range-bar-btn-bg-color: $white !default;
 $range-bar-btn-width: 24px !default;

src/sites/mobile-taro/vue/project.config.json

@@ -1,48 +1,51 @@
 {
-  "miniprogramRoot": "dist/",
-  "projectname": "%40nutui%2Fnutui-taro-mobile",
-  "description": "nutui-taro-vue",
-  "appid": "wxf2b976b67dab3882",
-  "setting": {
-    "urlCheck": true,
-    "es6": false,
-    "enhance": true,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": false,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "miniprogramRoot": "dist/",
+    "projectname": "%40nutui%2Fnutui-taro-mobile",
+    "description": "nutui-taro-vue",
+    "appid": "wxf2b976b67dab3882",
+    "setting": {
+        "urlCheck": true,
+        "es6": false,
+        "enhance": true,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": false,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "lazyloadPlaceholderEnable": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "useIsolateContext": false,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true,
+        "disableUseStrict": false,
+        "minifyWXML": true,
+        "showES6CompileOption": false,
+        "useCompilerPlugins": false
     },
-    "enableEngineNative": false,
-    "useIsolateContext": true,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "showES6CompileOption": false
-  },
-  "compileType": "miniprogram",
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "libVersion": "2.17.3",
-  "condition": {
-    "miniprogram": {}
-  }
+    "compileType": "miniprogram",
+    "simulatorType": "wechat",
+    "simulatorPluginLibVersion": {},
+    "libVersion": "2.17.3",
+    "condition": {
+        "miniprogram": {}
+    }
 }

src/sites/mobile-taro/vue/src/feedback/pages/range/index.vue

@@ -46,6 +46,38 @@
         </template>
       </nut-range>
     </nut-cell>
+    <h2>垂直方向</h2>
+    <nut-cell class="vertical_div">
+      <view class="div">
+        <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+      </view>
+      <view class="div">
+        <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+      </view>
+    </nut-cell>
+    <h2>刻度标记</h2>
+    <nut-cell class="cell">
+      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+    <nut-cell class="cell">
+      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+    </nut-cell>
+
+    <nut-cell class="vertical_div">
+      <view class="div">
+        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+      </view>
+      <view class="div">
+        <nut-range
+          range
+          v-model="value15"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hiddenRange="true"
+        ></nut-range>
+      </view>
+    </nut-cell>
   </div>
 </template>
 
@@ -63,7 +95,21 @@ export default {
       value6: 40,
       value7: 50,
       value8: 40,
-      value9: 60
+      value9: 60,
+      value10: 20,
+      value11: [20, 80],
+      value12: 60,
+      value13: [20, 80],
+      value14: 60,
+      value15: [20, 80],
+      marks: {
+        0: 0,
+        20: 20,
+        40: 40,
+        60: 60,
+        80: 80,
+        100: 100
+      }
     });
     const onChange = (value: number) => console.log('当前值：' + value);
     return {
@@ -87,4 +133,11 @@ export default {
   background-color: #ee0a24;
   border-radius: 100px;
 }
+.vertical_div {
+  height: 180px;
+  padding: 10px;
+  .div {
+    width: 150px;
+  }
+}
 </style>