Browse Source

fix: countdown restTime didn't pass 2s to 1s (#906)

* fix: countDown倒计时组件剩余2s直接变为0s
yangxiaolu1993 4 years ago
parent
commit
3d614598fe

+ 11 - 14
src/packages/__VUE/address/index.vue

@@ -23,13 +23,12 @@
 
       <!-- 请选择 -->
       <view class="custom-address" v-if="privateType == 'custom'">
-        <view class="region-tab">
+        <view class="region-tab" ref="tabRegion">
           <view
             class="tab-item"
             :class="[index == tabIndex ? 'active' : '']"
             v-for="(item, key, index) in selectedRegion"
             :key="index"
-            :ref="key"
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }}</view>
@@ -63,13 +62,12 @@
 
       <!-- 请选择 -->
       <view class="custom-address" v-else-if="privateType == 'custom2'">
-        <view class="region-tab">
+        <view class="region-tab" ref="tabRegion">
           <view
             class="tab-item"
             :class="[index == tabIndex ? 'active' : '']"
             v-for="(item, key, index) in selectedRegion"
             :key="index"
-            :ref="key"
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }}</view>
@@ -125,7 +123,7 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
+import { reactive, ref, toRefs, watch, nextTick, computed, Ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('address');
 interface RegionData {
@@ -223,12 +221,8 @@ export default create({
   setup(props: any, { emit }) {
     const regionLine = ref<null | HTMLElement>(null);
 
-    const tabItemRef = reactive({
-      province: ref<null | HTMLElement>(null),
-      city: ref<null | HTMLElement>(null),
-      country: ref<null | HTMLElement>(null),
-      town: ref<null | HTMLElement>(null)
-    });
+    const tabRegion: Ref<any> = ref(null);
+
     const showPopup = ref(props.visible);
     const privateType = ref(props.type);
     const tabIndex = ref(0);
@@ -316,8 +310,11 @@ export default create({
     };
     // 移动下面的红线
     const lineAnimation = () => {
-      const name = (tabItemRef as any)[tabName.value[tabIndex.value]];
+      console.log('滑动红线');
+
       nextTick(() => {
+        const name = tabRegion.value && tabRegion.value.getElementsByClassName('active')[0];
+
         if (name) {
           const distance = name.offsetLeft;
 
@@ -519,14 +516,14 @@ export default create({
       getTabName,
       nextAreaList,
       regionLine,
+      tabRegion,
       lineDistance,
       changeRegionTab,
       selectedExist,
       clickOverlay,
       handClose,
       handleElevatorItem,
-      ...toRefs(props),
-      ...toRefs(tabItemRef)
+      ...toRefs(props)
     };
   }
 });

+ 3 - 22
src/packages/__VUE/countdown/demo.vue

@@ -31,16 +31,9 @@
     <h2>控制开始和暂停的倒计时</h2>
 
     <nut-cell>
-      <nut-countdown
-        :endTime="end"
-        :paused="paused"
-        @on-paused="onpaused"
-        @on-restart="onrestart"
-      />
+      <nut-countdown :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{
-          paused ? 'start' : 'stop'
-        }}</nut-button>
+        <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
       </div>
     </nut-cell>
 
@@ -70,19 +63,7 @@
 </template>
 
 <script lang="ts">
-import {
-  toRefs,
-  onMounted,
-  onUnmounted,
-  reactive,
-  computed,
-  CSSProperties,
-  onActivated,
-  onDeactivated,
-  ref,
-  watch,
-  h
-} from 'vue';
+import { toRefs, onMounted, onUnmounted, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('countdown');
 export default createDemo({

+ 2 - 3
src/packages/__VUE/countdown/index.vue

@@ -74,8 +74,6 @@ export default create({
   emits: ['input', 'on-end', 'on-restart', 'on-paused', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    console.log('componentName', componentName);
-
     const state = reactive({
       restTime: 0,
       p: 0,
@@ -166,7 +164,8 @@ export default create({
         if (!props.paused) {
           let restTime = end - (Date.now() - state.p + diffTime);
           state.restTime = restTime;
-          if (restTime < delay) {
+
+          if (restTime < 0) {
             state.restTime = 0;
             emit('on-end');
             clearInterval(state.timer as any);

+ 3 - 3
src/packages/__VUE/infiniteloading/doc.md

@@ -19,7 +19,7 @@
 ### 基础用法
 
 ```html
-<ul class="infiniteUl" id="scroll">
+<ul class="infiniteUl" id="scroll"  style='height: 300px;'>
     <nut-infiniteloading
         containerId = 'scroll'
         :use-window='false'
@@ -60,7 +60,7 @@ setup() {
 ### 下拉刷新
 
 ```html
-<ul class="infiniteUl" id="refreshScroll">
+<ul class="infiniteUl" id="refreshScroll" style='height: 300px;'>
   <nut-infiniteloading
     pull-icon="JD"
     container-id="refreshScroll"
@@ -118,7 +118,7 @@ setup() {
 ### 自定义加载文案
 
 ```html
-<ul class="infiniteUl" id="customScroll">
+<ul class="infiniteUl" id="customScroll" style='height: 300px;'>
     <nut-infiniteloading
         container-id = 'customScroll'
         :use-window='false'