slider-100: 调整示例

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

@@ -27,7 +27,7 @@
 </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)
         });
       }
     },