slider-100: 调整示例

pages/component/slider-100/slider-100.uvue

 <template>
   <!-- #ifdef APP -->
   <scroll-view class="page">
-    <!-- #endif -->
+  <!-- #endif -->
     <page-head :title="title"></page-head>
     <view class="flex-row">
       <view class="flex-fill">
@@ -21,13 +21,13 @@
           @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
       </view>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <script>
-  import { ComponentPublicInstance } from 'vue';
+  type SliderRender = (value : number) => void
   export default {
     data() {
       return {
@@ -45,22 +45,18 @@
       updateSliderValue(value : Number) {
         // this.sliderValue = value
 
-        // 跳过vue框架，直接修改原生组件
-        (this.$refs["slider1"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = value
-          item.$callMethod("_onRender")
+        // TODO 跳过vue框架，直接修改原生组件
+        (this.$refs["slider1"]! as Element[]).forEach((item) => {
+          (item.ext['render'] as SliderRender)(value)
         });
-        (this.$refs["slider2"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = value
-          item.$callMethod("_onRender")
+        (this.$refs["slider2"]! as Element[]).forEach((item) => {
+          (item.ext['render'] as SliderRender)(value)
         });
-        (this.$refs["slider3"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = value
-          item.$callMethod("_onRender")
+        (this.$refs["slider3"]! as Element[]).forEach((item) => {
+          (item.ext['render'] as SliderRender)(value)
         });
-        (this.$refs["slider4"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = value
-          item.$callMethod("_onRender")
+        (this.$refs["slider4"]! as Element[]).forEach((item) => {
+          (item.ext['render'] as SliderRender)(value)
         });
       }
     },
@@ -83,4 +79,4 @@
   .slider {
     margin: 1px 0.5px;
   }
-</style>
+</style>
\ No newline at end of file