fix(Slider): fix styling errors in hidden element

src/popup/demos/base.vue

@@ -3,13 +3,32 @@
     <t-button v-for="p in placement" :key="p" block variant="outline" theme="primary" size="large" @click="onClick(p)">
       {{ p.text }}
     </t-button>
-    <t-popup v-model="visible" :placement="currentPlacement" destroy-on-close style="padding: 100px" />
+    <t-popup v-model="visible" :placement="currentPlacement" destroy-on-close style="padding: 100px 0">
+      <t-slider :default-value="rangeValue" range @change="onChange" />
+      <div style="height: 20px"></div>
+      <t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" />
+    </t-popup>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue';
 
+const rangeValue = ref([30, 70]);
+
+function onChange($event: number | number[]) {
+  console.log(`change to ${$event}`);
+}
+
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+};
+
 const visible = ref(false);
 const placement = [
   { value: 'top', text: '顶部弹出' },

src/slider/slider.tsx

@@ -1,5 +1,6 @@
 import { ref, toRefs, computed, reactive, defineComponent, watch, onMounted } from 'vue';
 import isFunction from 'lodash/isFunction';
+import { useIntersectionObserver } from '@vueuse/core';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
@@ -252,6 +253,17 @@ export default defineComponent({
     };
 
     onMounted(() => {
+      init();
+    });
+
+    const { stop } = useIntersectionObserver(rootRef, ([{ isIntersecting }], observerElement) => {
+      if (isIntersecting) {
+        stop();
+        init();
+      }
+    });
+
+    const init = () => {
       getInitialStyle();
 
       if (props.range) {
@@ -265,7 +277,7 @@ export default defineComponent({
       if (props.marks) {
         handleMask(props.marks);
       }
-    });
+    };
 
     const readerMinText = () => {
       if (!props.showExtremeValue) {