Browse Source

fix(components): modify ts type

Drjingfubo 3 years ago
parent
commit
5f3bce4de4

+ 12 - 10
src/packages/__VUE/actionsheet/index.taro.vue

@@ -1,12 +1,5 @@
 <template>
-  <nut-popup
-    :visible="visible"
-    :isWrapTeleport="isWrapTeleport"
-    position="bottom"
-    round
-    @click-overlay="close"
-    :closeOnClickOverlay="closeAbled"
-  >
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
@@ -39,9 +32,18 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { computed, useSlots } from 'vue';
+import type { PropType } from 'vue';
 const { componentName, create } = createComponent('actionsheet');
 import Popup from '../popup/index.taro.vue';
 import { popupProps } from '../popup/props';
+export interface menuItems {
+  disable: boolean;
+  loading: boolean;
+  color: string;
+  name: string;
+  subname: string;
+  [x: string]: string | boolean;
+}
 export default create({
   components: {
     [Popup.name]: Popup
@@ -77,7 +79,7 @@ export default create({
       default: ''
     },
     menuItems: {
-      type: Array,
+      type: Array as PropType<menuItems[]>,
       default: () => []
     },
     closeAbled: {
@@ -96,7 +98,7 @@ export default create({
       };
     });
 
-    const isHighlight = (item: { [x: string]: string }) => {
+    const isHighlight = (item: { [x: string]: string | boolean }) => {
       return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : '';
     };
 

+ 11 - 2
src/packages/__VUE/actionsheet/index.vue

@@ -39,9 +39,18 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { computed, useSlots } from 'vue';
+import type { PropType } from 'vue';
 import { popupProps } from '../popup/props';
 import Popup from '../popup/index.vue';
 const { componentName, create } = createComponent('actionsheet');
+export interface menuItems {
+  disable: boolean;
+  loading: boolean;
+  color: string;
+  name: string;
+  subname: string;
+  [x: string]: string | boolean;
+}
 export default create({
   components: {
     [Popup.name]: Popup
@@ -77,7 +86,7 @@ export default create({
       default: ''
     },
     menuItems: {
-      type: Array,
+      type: Array as PropType<menuItems[]>,
       default: () => []
     },
     isWrapTeleport: {
@@ -100,7 +109,7 @@ export default create({
       };
     });
 
-    const isHighlight = (item: { [x: string]: string }) => {
+    const isHighlight = (item: { [x: string]: string | boolean }) => {
       return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : '';
     };
 

+ 1 - 1
src/packages/__VUE/circleprogress/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes" :style="{ height: radius * 2 + 'px', width: radius * 2 + 'px' }">
+  <div :class="classes" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
     <div :style="style"></div>
     <div class="nut-circleprogress__text">
       <slot></slot>

+ 8 - 3
src/packages/__VUE/circleprogress/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes" :style="{ height: radius * 2 + 'px', width: radius * 2 + 'px' }">
+  <div :class="classes" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
     <svg viewBox="0 0 100 100">
       <defs>
         <linearGradient :id="refRandomId" x1="100%" y1="0%" x2="0%" y2="0%">
@@ -30,7 +30,12 @@
 import { computed, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { isObject } from '@/packages/utils/util';
+import type { PropType } from 'vue';
 const { componentName, create } = createComponent('circleprogress');
+export interface stopArr {
+  key: string;
+  value: string;
+}
 export default create({
   props: {
     progress: {
@@ -46,7 +51,7 @@ export default create({
       default: 50
     },
     strokeLinecap: {
-      type: String,
+      type: String as PropType<CanvasLineCap>,
       default: 'round'
     },
     color: {
@@ -98,7 +103,7 @@ export default create({
       }
       let color = props.color;
       const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
-      let stopArr: object[] = [];
+      let stopArr: stopArr[] = [];
       colorArr.map((item) => {
         let obj = {
           key: '',

+ 6 - 4
src/packages/__VUE/ecard/index.taro.vue

@@ -33,7 +33,11 @@
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import InputNumber from '../inputnumber/index.taro.vue';
+import type { PropType } from 'vue';
 const { componentName, create, translate } = createComponent('ecard');
+export interface dataList {
+  price: string | number;
+}
 export default create({
   components: {
     [InputNumber.name]: InputNumber
@@ -48,10 +52,8 @@ export default create({
       default: ''
     },
     dataList: {
-      type: [Object, Array],
-      default: () => {
-        return [];
-      }
+      type: Array as PropType<dataList[]>,
+      default: () => []
     },
     cardAmountMin: {
       type: Number,

+ 6 - 4
src/packages/__VUE/ecard/index.vue

@@ -35,7 +35,11 @@ import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('ecard');
 import InputNumber from '../inputnumber/index.vue';
+import type { PropType } from 'vue';
 
+export interface dataList {
+  price: string | number;
+}
 export default create({
   components: {
     [InputNumber.name]: InputNumber
@@ -50,10 +54,8 @@ export default create({
       default: ''
     },
     dataList: {
-      type: [Object, Array],
-      default: () => {
-        return [];
-      }
+      type: Array as PropType<dataList[]>,
+      default: () => []
     },
     cardAmountMin: {
       type: Number,

+ 7 - 3
src/packages/__VUE/numberkeyboard/index.taro.vue

@@ -79,6 +79,10 @@ import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } fro
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.taro.vue';
 const { create, translate } = createComponent('numberkeyboard');
+export interface keys {
+  id: number | string;
+  type: string;
+}
 export default create({
   components: {
     [Popup.name]: Popup
@@ -127,7 +131,7 @@ export default create({
   },
   emits: ['input', 'delete', 'close', 'update:value'],
   setup(props, { emit }) {
-    const clickKeyIndex: Ref<string | undefined> = ref(undefined);
+    const clickKeyIndex: Ref<string | undefined | number> = ref(undefined);
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
     function defaultKey() {
@@ -147,7 +151,7 @@ export default create({
     }
 
     function getBasicKeys() {
-      const keys: any = [];
+      const keys: keys[] = [];
       for (let i = 1; i <= 9; i++) {
         keys.push({ id: i, type: 'number' });
       }
@@ -196,7 +200,7 @@ export default create({
       }
     );
 
-    function onTouchstart(item: { id: string; type: string }, event: TouchEvent) {
+    function onTouchstart(item: { id: string | number; type: string }, event: TouchEvent) {
       event.stopPropagation();
       clickKeyIndex.value = item.id;
       if (item.type == 'number' || item.type == 'custom') {

+ 10 - 6
src/packages/__VUE/numberkeyboard/index.vue

@@ -19,6 +19,8 @@
       <div class="nut-number-keyboard__body">
         <div class="nut-number-keyboard__keys">
           <div
+            v-for="item of keysList"
+            :key="'key' + item.id"
             :class="[
               'nut-key__wrapper',
               {
@@ -26,8 +28,6 @@
                   item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
               }
             ]"
-            v-for="item of keysList"
-            :key="'key' + item.id"
           >
             <div
               :class="[
@@ -57,7 +57,7 @@
             <div
               :class="['nut-key', { active: clickKeyIndex == 'delete' }]"
               @touchstart="(event) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
-              @touchmove="(event) => onTouchMove({ id: 'delete', type: 'delete' }, event)"
+              @touchmove="(event) => onTouchMove(event)"
               @touchend="onTouchEnd"
             >
               <img
@@ -81,6 +81,10 @@ import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } fro
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.vue';
 const { create, translate } = createComponent('numberkeyboard');
+export interface keys {
+  id: number | string;
+  type: string;
+}
 export default create({
   components: {
     [Popup.name]: Popup
@@ -137,7 +141,7 @@ export default create({
   },
   emits: ['input', 'delete', 'close', 'update:value'],
   setup(props, { emit }) {
-    const clickKeyIndex: Ref<string | undefined> = ref(undefined);
+    const clickKeyIndex: Ref<string | undefined | number> = ref(undefined);
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
     function defaultKey() {
@@ -157,7 +161,7 @@ export default create({
     }
 
     function getBasicKeys() {
-      const keys: Array<unknown> = [];
+      const keys: keys[] = [];
       for (let i = 1; i <= 9; i++) {
         keys.push({ id: i, type: 'number' });
       }
@@ -206,7 +210,7 @@ export default create({
       }
     );
 
-    function onTouchstart(item: { id: string; type: string }, event: TouchEvent) {
+    function onTouchstart(item: { id: string | number; type: string }, event: TouchEvent) {
       event.stopPropagation();
       clickKeyIndex.value = item.id;
       if (item.type == 'number' || item.type == 'custom') {

+ 2 - 2
src/packages/__VUE/tabbaritem/index.vue

@@ -12,7 +12,7 @@
         <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num" v-if="num && num <= 99">
           {{ num }}
         </view>
-        <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
+        <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num >= 100">{{
           '99+'
         }}</view>
       </template>
@@ -79,7 +79,7 @@ export default create({
     },
     num: {
       // 页签右上角的数字角标
-      type: String,
+      type: [String, Number],
       default: ''
     },
     activeImg: {

+ 1 - 1
src/packages/__VUE/toast/index.taro.vue

@@ -104,7 +104,7 @@ export default create({
   },
   emits: ['update:visible', 'closed'],
   setup(props, { emit }) {
-    let timer;
+    let timer: number | null | undefined;
     const clearTimer = () => {
       if (timer) {
         clearTimeout(timer);

+ 4 - 4
src/packages/__VUE/video/index.vue

@@ -37,7 +37,7 @@
               transform: `translate3d(${videoSet.progress.current}px, -50%, 0)`
             }"
             @touchmove.stop.prevent="touchSlidMove($event)"
-            @touchstart.stop="touchSlidSrart($event)"
+            @touchstart.stop="touchSlidSrart()"
             @touchend.stop="touchSlidEnd($event)"
           >
             <div class="nut-video-controller__ball-move"></div>
@@ -57,7 +57,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, reactive, ref, toRefs, watch, nextTick, onMounted } from 'vue';
+import { computed, reactive, ref, toRefs, watch, nextTick, onMounted, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { throttle } from '@/packages/utils/throttle';
 const { create, translate } = createComponent('video');
@@ -130,7 +130,7 @@ export default create({
       },
       showTouchMask: false
     });
-    const root = ref(null);
+    const root = ref(null) as Ref;
     const isDisabled = computed(() => {
       return props.options.disabled;
     });
@@ -221,7 +221,7 @@ export default create({
               getLoadTime();
             });
             // 监听播放进度
-            (state.videoElm as any).addEventListener('timeupdate', throttle(getPlayTime, 1000, 1));
+            (state.videoElm as any).addEventListener('timeupdate', throttle(getPlayTime, 1000));
             // 监听结束
             (state.videoElm as any).addEventListener('ended', playEnded);
             emit('play', state.videoElm);