fix(range): taro env 多个Range 组件滑动值异常 #648

src/packages/__VUE/range/demo.vue

@@ -10,12 +10,7 @@
     </nut-cell>
     <h2>指定范围</h2>
     <nut-cell class="cell">
-      <nut-range
-        v-model="value3"
-        :max="10"
-        :min="-10"
-        @change="onChange"
-      ></nut-range>
+      <nut-range v-model="value3" :max="10" :min="-10" @change="onChange"></nut-range>
     </nut-cell>
     <h2>设置步长</h2>
     <nut-cell class="cell">
@@ -47,7 +42,7 @@
     <nut-cell class="cell">
       <nut-range v-model="value9" @change="onChange">
         <template #button>
-          <div class="custom-button">{{ value10 }}</div>
+          <div class="custom-button">{{ value9 }}</div>
         </template>
       </nut-range>
     </nut-cell>
@@ -57,7 +52,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
-import { Toast } from '../toast';
+import { Toast } from '@/packages/nutui.vue';
 
 const { createDemo } = createComponent('range');
 export default createDemo({
@@ -72,8 +67,7 @@ export default createDemo({
       value6: 40,
       value7: 50,
       value8: 40,
-      value9: 60,
-      value10: 50
+      value9: 60
     });
     const onChange = (value: number) => Toast.text('当前值：' + value);
     return {

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

@@ -1,7 +1,7 @@
 <template>
   <view class="nut-range-container">
     <view class="min" v-if="!hiddenRange">{{ +min }}</view>
-    <view ref="root" id="root" :style="wrapperStyle" :class="classes" @click.stop="onClick">
+    <view ref="root" :id="'root-' + refRandomId" :style="wrapperStyle" :class="classes" @click.stop="onClick">
       <view class="nut-range-bar" :style="barStyle">
         <template v-if="range">
           <view
@@ -290,6 +290,8 @@ export default create({
       return value;
     };
 
+    const refRandomId = Math.random().toString(36).slice(-8);
+
     return {
       root,
       classes,
@@ -302,7 +304,8 @@ export default create({
       ...toRefs(props),
       barStyle,
       curValue,
-      buttonIndex
+      buttonIndex,
+      refRandomId
     };
   }
 });

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

@@ -10,12 +10,7 @@
     </nut-cell>
     <h2>指定范围</h2>
     <nut-cell class="cell">
-      <nut-range
-        v-model="value3"
-        :max="10"
-        :min="-10"
-        @change="onChange"
-      ></nut-range>
+      <nut-range v-model="value3" :max="10" :min="-10" @change="onChange"></nut-range>
     </nut-cell>
     <h2>设置步长</h2>
     <nut-cell class="cell">
@@ -47,7 +42,7 @@
     <nut-cell class="cell">
       <nut-range v-model="value9" @change="onChange">
         <template #button>
-          <div class="custom-button">{{ value10 }}</div>
+          <div class="custom-button">{{ value9 }}</div>
         </template>
       </nut-range>
     </nut-cell>
@@ -68,8 +63,7 @@ export default {
       value6: 40,
       value7: 50,
       value8: 40,
-      value9: 60,
-      value10: 50
+      value9: 60
     });
     const onChange = (value: number) => console.log('当前值：' + value);
     return {