diff --git a/packages/varlet-ui/src/back-top/BackTop.vue b/packages/varlet-ui/src/back-top/BackTop.vue
index 392af8f6e96..5b9f67473b7 100644
--- a/packages/varlet-ui/src/back-top/BackTop.vue
+++ b/packages/varlet-ui/src/back-top/BackTop.vue
@@ -9,8 +9,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
-import Button from '../button'
-import Icon from '../icon'
+import VarButton from '../button'
+import VarIcon from '../icon'
 import { props } from './props'
 import { isString, easeInOutCubic, throttle, toNumber } from '../utils/shared'
 import { getScrollTop, getScrollLeft, scrollTo } from '../utils/elements'
@@ -19,8 +19,8 @@ import type { Ref } from 'vue'
 export default defineComponent({
   name: 'VarBackTop',
   components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon,
+    VarButton,
+    VarIcon,
   },
   props,
   setup(props) {
diff --git a/packages/varlet-ui/src/cell/Cell.vue b/packages/varlet-ui/src/cell/Cell.vue
index c7ce4fc219d..6d87ace0cc8 100644
--- a/packages/varlet-ui/src/cell/Cell.vue
+++ b/packages/varlet-ui/src/cell/Cell.vue
@@ -24,12 +24,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { props } from './props'
-import Icon from '../icon'
+import VarIcon from '../icon'
 
 export default defineComponent({
   name: 'VarCell',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
 })
diff --git a/packages/varlet-ui/src/collapse-item/CollapseItem.vue b/packages/varlet-ui/src/collapse-item/CollapseItem.vue
index 2eef493c3e7..23bcb881686 100644
--- a/packages/varlet-ui/src/collapse-item/CollapseItem.vue
+++ b/packages/varlet-ui/src/collapse-item/CollapseItem.vue
@@ -38,24 +38,19 @@ import { requestAnimationFrame } from '../utils/elements'
 import { isArray } from '../utils/shared'
 import { useCollapse } from './provide'
 import { props } from './props'
-import Icon from '../icon'
+import VarIcon from '../icon'
 import type { Ref, ComputedRef } from 'vue'
 import type { CollapseItemProvider } from './provide'
 
 export default defineComponent({
   name: 'VarCollapseItem',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
   setup(props) {
     const { index, collapse, bindCollapse } = useCollapse()
 
-    if (!collapse || !bindCollapse || !index) {
-      console.error('[Varlet] Collapse: <var-collapse-item/> must in <var-collapse>')
-      return
-    }
-
     const contentEl: Ref<HTMLDivElement | null> = ref(null)
     const show: Ref<boolean> = ref(false)
     const isShow: Ref<boolean> = ref(false)
diff --git a/packages/varlet-ui/src/collapse-item/provide.ts b/packages/varlet-ui/src/collapse-item/provide.ts
index a20e1183d17..e65e9788e9c 100644
--- a/packages/varlet-ui/src/collapse-item/provide.ts
+++ b/packages/varlet-ui/src/collapse-item/provide.ts
@@ -18,6 +18,10 @@ export function useCollapse() {
   )
   const { index } = useAtParentIndex(COLLAPSE_COUNT_COLLAPSE_ITEM_KEY)
 
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('[Varlet] Collapse: <var-collapse-item/> must in <var-collapse>')
+  }
+
   return {
     index,
     collapse: parentProvider,
diff --git a/packages/varlet-ui/src/date-picker/DatePicker.vue b/packages/varlet-ui/src/date-picker/DatePicker.vue
index 47393f9910c..27dab779f84 100644
--- a/packages/varlet-ui/src/date-picker/DatePicker.vue
+++ b/packages/varlet-ui/src/date-picker/DatePicker.vue
@@ -22,7 +22,7 @@
         <transition
           :name="multiple ? '' : reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'"
         >
-          <div :key="range || multiple || chooseYear + chooseMonth?.index" v-if="type === 'month'">
+          <div :key="chooseYear + chooseMonth?.index" v-if="type === 'month'">
             <slot name="range" :choose="getChoose.chooseRangeMonth" v-if="range">
               {{ getMonthTitle }}
             </slot>
diff --git a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
index 1cf4316e730..1c170780c48 100644
--- a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
+++ b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
@@ -45,7 +45,7 @@ import dayjs from 'dayjs/esm'
 import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter'
 import PanelHeader from './panel-header.vue'
-import Button from '../../button'
+import VarButton from '../../button'
 import { WEEK_HEADER } from '../props'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
@@ -58,7 +58,7 @@ dayjs.extend(isSameOrAfter)
 export default defineComponent({
   name: 'DayPickerPanel',
   components: {
-    [Button.name]: Button,
+    VarButton,
     PanelHeader,
   },
   props: {
@@ -75,7 +75,8 @@ export default defineComponent({
       required: true,
     },
     clickMonth: {
-      type: Function,
+      type: Function as PropType<() => void>,
+      required: true,
     },
     componentProps: {
       type: Object as PropType<ComponentProps>,
diff --git a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
index 7628af43cb6..cb093ca9bca 100644
--- a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
+++ b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
@@ -4,8 +4,8 @@
       <panel-header
         type="month"
         :date="preview"
-        @check-panel="clickYear"
         :disabled="panelBtnDisabled"
+        @check-panel="clickYear"
         @check-date="checkDate"
       />
       <transition :name="reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'">
@@ -37,7 +37,7 @@ import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter'
 import { MONTH_LIST } from '../props'
 import PanelHeader from './panel-header.vue'
-import Button from '../../button'
+import VarButton from '../../button'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
 import type { Ref, ComputedRef, UnwrapRef, PropType } from 'vue'
@@ -49,7 +49,7 @@ dayjs.extend(isSameOrAfter)
 export default defineComponent({
   name: 'MonthPickerPanel',
   components: {
-    [Button.name]: Button,
+    VarButton,
     PanelHeader,
   },
   props: {
@@ -66,7 +66,8 @@ export default defineComponent({
       required: true,
     },
     clickYear: {
-      type: Function,
+      type: Function as PropType<() => void>,
+      required: true,
     },
     componentProps: {
       type: Object as PropType<ComponentProps>,
diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
index 84d85a63ed0..2e89329a043 100644
--- a/packages/varlet-ui/src/date-picker/src/panel-header.vue
+++ b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -28,8 +28,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import Button from '../../button'
-import Icon from '../../icon'
+import VarButton from '../../button'
+import VarIcon from '../../icon'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
 import type { Ref, ComputedRef, PropType } from 'vue'
@@ -38,8 +38,8 @@ import type { Preview, PanelBtnDisabled } from '../props'
 export default defineComponent({
   name: 'PanelHeader',
   components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon,
+    VarButton,
+    VarIcon,
   },
   props: {
     date: {
diff --git a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
index 9a099a5af41..a80f25c2e7c 100644
--- a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
+++ b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Sticky from '../sticky'
+import VarSticky from '../sticky'
 import { computed, defineComponent, ref, Transition } from 'vue'
 import { useIndexBar } from './provide'
 import { props } from './props'
@@ -24,7 +24,7 @@ import type { IndexAnchorProvider } from './provide'
 export default defineComponent({
   name: 'VarIndexAnchor',
   components: {
-    [Sticky.name]: Sticky,
+    VarSticky,
   },
   inheritAttrs: false,
   props,
@@ -36,11 +36,6 @@ export default defineComponent({
     const name: ComputedRef<number | string | undefined> = computed(() => props.index)
     const anchorEl: Ref<HTMLDivElement | RendererNode | null> = ref(null)
 
-    if (!indexBar || !bindIndexBar) {
-      console.error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
-      return
-    }
-
     const { active, sticky, cssMode, stickyOffsetTop, zIndex } = indexBar
     const setOwnTop = () => {
       if (!anchorEl.value) return
diff --git a/packages/varlet-ui/src/index-anchor/provide.ts b/packages/varlet-ui/src/index-anchor/provide.ts
index 2d170cb0c1d..326d124455e 100644
--- a/packages/varlet-ui/src/index-anchor/provide.ts
+++ b/packages/varlet-ui/src/index-anchor/provide.ts
@@ -20,6 +20,10 @@ export function useIndexBar() {
   )
   const { index } = useAtParentIndex(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
 
+  if (!parentProvider || !bindParent) {
+    throw Error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
+  }
+
   return {
     index,
     indexBar: parentProvider,
diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
index a53dc936edd..11b125c752f 100644
--- a/packages/varlet-ui/src/index-bar/IndexBar.vue
+++ b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="var-index-bar" ref="barEl">
     <slot />
-    <ul class="var-index-bar__anchor-list" :style="{ zIndex: zIndex + 2, display: hideList ? 'none' : 'block' }">
+    <ul
+      class="var-index-bar__anchor-list"
+      :style="{ zIndex: toNumber(zIndex) + 2, display: hideList ? 'none' : 'block' }"
+    >
       <li
         v-for="anchorName in anchorNameList"
         :key="anchorName"
@@ -145,6 +148,7 @@ export default defineComponent({
       active,
       zIndex,
       anchorNameList,
+      toNumber,
       scrollTo,
       anchorClick,
     }
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index da5b7ca21bc..e033242b245 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -172,14 +172,14 @@ export default defineComponent({
 
     const normalizeValue = (value: string) => (isNumberValue.value ? toNumber(value) : value)
 
-    const handleFocus = (e: Event) => {
+    const handleFocus = (e: FocusEvent) => {
       isFocus.value = true
 
       props.onFocus?.(e)
       validateWithTrigger('onFocus')
     }
 
-    const handleBlur = (e: Event) => {
+    const handleBlur = (e: FocusEvent) => {
       isFocus.value = false
 
       props.onBlur?.(e)
diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue
index c779f3e4cb3..db27d625b7e 100644
--- a/packages/varlet-ui/src/loading/Loading.vue
+++ b/packages/varlet-ui/src/loading/Loading.vue
@@ -4,8 +4,8 @@
       <span
         class="var-loading__circle-block"
         :style="{
-          width: radius * 2 + 'px',
-          height: radius * 2 + 'px',
+          width: toNumber(radius) * 2 + 'px',
+          height: toNumber(radius) * 2 + 'px',
         }"
       >
         <svg viewBox="25 25 50 50">
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { props } from './props'
+import { toNumber } from '../utils/shared'
 
 export default defineComponent({
   name: 'VarLoading',
@@ -44,6 +45,7 @@ export default defineComponent({
 
     return {
       loadingTypeDict,
+      toNumber,
     }
   },
 })
diff --git a/packages/varlet-ui/src/pagination/Pagination.vue b/packages/varlet-ui/src/pagination/Pagination.vue
index ea462939d8f..9c3f4f1c547 100644
--- a/packages/varlet-ui/src/pagination/Pagination.vue
+++ b/packages/varlet-ui/src/pagination/Pagination.vue
@@ -28,7 +28,7 @@
       v-else
       v-ripple="{ disabled }"
       v-for="(item, index) in pageList"
-      :key="item + index"
+      :key="toNumber(item) + index"
       :item-mode="getMode(item, index)"
       class="var-pagination__item var-elevation--2"
       :class="{
@@ -101,11 +101,11 @@
 </template>
 
 <script lang="ts">
-import Menu from '../menu'
+import VarMenu from '../menu'
 import Ripple from '../ripple'
-import Icon from '../icon'
-import Cell from '../cell'
-import Input from '../input'
+import VarIcon from '../icon'
+import VarCell from '../cell'
+import VarInput from '../input'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { props } from './porps'
 import { isNumber, toNumber } from '../utils/shared'
@@ -116,10 +116,10 @@ import type { Range } from './porps'
 export default defineComponent({
   name: 'VarPagination',
   components: {
-    [Menu.name]: Menu,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [Input.name]: Input,
+    VarMenu,
+    VarIcon,
+    VarCell,
+    VarInput,
   },
   directives: { Ripple },
   props,
@@ -295,6 +295,7 @@ export default defineComponent({
       showMenu,
       clickSize,
       setPage,
+      toNumber,
     }
   },
 })
diff --git a/packages/varlet-ui/src/pagination/porps.ts b/packages/varlet-ui/src/pagination/porps.ts
index ede6b0b95d0..9885a3ae996 100644
--- a/packages/varlet-ui/src/pagination/porps.ts
+++ b/packages/varlet-ui/src/pagination/porps.ts
@@ -35,7 +35,7 @@ export const props = {
     default: false,
   },
   sizeOption: {
-    type: Array,
+    type: Array as PropType<Array<number>>,
     default: () => [10, 20, 50, 100],
   },
   showTotal: {
diff --git a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
index c094e5b097b..a3dbf0530e4 100644
--- a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
+++ b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
+import VarIcon from '../icon'
 import { defineComponent, ref, computed, watch, onMounted } from 'vue'
 import { getParentScroller, getScrollTop } from '../utils/elements'
 import { props } from './props'
@@ -35,7 +35,7 @@ let scroller: HTMLElement | Window = window
 export default defineComponent({
   name: 'VarPullRefresh',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
   setup(props) {
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
index 704c288f47f..b7e75006a5f 100644
--- a/packages/varlet-ui/src/slider/Slider.vue
+++ b/packages/varlet-ui/src/slider/Slider.vue
@@ -4,8 +4,8 @@
       class="var-slider-block"
       :class="[isDisabled ? 'var-slider__disable' : null, errorMessage ? 'var-slider__error' : null]"
       :style="{
-        height: `${3 * thumbSize}px`,
-        margin: `0 ${thumbSize / 2}px`,
+        height: `${3 * toNumber(thumbSize)}px`,
+        margin: `0 ${toNumber(thumbSize) / 2}px`,
       }"
       ref="sliderEl"
       @click="click"
@@ -26,7 +26,7 @@
         :key="item.enumValue"
         :style="{
           left: `${item.value}%`,
-          zIndex: thumbsProps[item.enumValue].active ? 1 : null,
+          zIndex: thumbsProps[item.enumValue].active ? 1 : undefined,
         }"
         @touchstart="start($event, item.enumValue)"
         @touchmove="move($event, item.enumValue)"
@@ -47,8 +47,16 @@
             :class="[thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]"
             :style="{
               background: thumbColor,
-              height: thumbSize ? (thumbsProps[item.enumValue].active ? 3 * thumbSize + 'px' : '0px') : null,
-              width: thumbSize ? (thumbsProps[item.enumValue].active ? 3 * thumbSize + 'px' : '0px') : null,
+              height: thumbSize
+                ? thumbsProps[item.enumValue].active
+                  ? 3 * toNumber(thumbSize) + 'px'
+                  : '0px'
+                : undefined,
+              width: thumbSize
+                ? thumbsProps[item.enumValue].active
+                  ? 3 * toNumber(thumbSize) + 'px'
+                  : '0px'
+                : undefined,
             }"
           ></div>
           <div
@@ -57,8 +65,8 @@
             :style="{
               background: labelColor,
               color: labelTextColor,
-              height: 2 * thumbSize + 'px',
-              width: 2 * thumbSize + 'px',
+              height: 2 * toNumber(thumbSize) + 'px',
+              width: 2 * toNumber(thumbSize) + 'px',
             }"
           >
             <span>{{ item.value }}</span>
@@ -77,7 +85,7 @@ import { useForm } from '../form/provide'
 import { getLeft } from '../utils/elements'
 import { isArray, isNumber, toNumber } from '../utils/shared'
 import { props } from './props'
-import FormDetails from '../form-details'
+import VarFormDetails from '../form-details'
 import type { Ref, ComputedRef, UnwrapRef } from 'vue'
 import type { SliderProvider } from './provide'
 
@@ -106,7 +114,7 @@ type ThumbsListProps = {
 export default defineComponent({
   name: 'VarSlider',
   components: {
-    [FormDetails.name]: FormDetails,
+    VarFormDetails,
   },
   props,
   setup(props) {
@@ -330,6 +338,7 @@ export default defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      toNumber,
       showLabel,
       start,
       move,
diff --git a/packages/varlet-ui/src/snackbar/core.vue b/packages/varlet-ui/src/snackbar/core.vue
index b0ca6f61d21..3ae24d98966 100644
--- a/packages/varlet-ui/src/snackbar/core.vue
+++ b/packages/varlet-ui/src/snackbar/core.vue
@@ -15,9 +15,8 @@
 
 <script lang="ts">
 import { defineComponent, watch, ref, onMounted, computed } from 'vue'
-import Loading from '../loading'
-import Button from '../button'
-import Icon from '../icon'
+import VarLoading from '../loading'
+import VarIcon from '../icon'
 import { useZIndex } from '../context/zIndex'
 import { props } from './props'
 import { useLock } from '../context/lock'
@@ -36,9 +35,8 @@ const ICON_TYPE_DICT: Record<SnackbarType, string> = {
 export default defineComponent({
   name: 'VarSnackbarCore',
   components: {
-    [Loading.name]: Loading,
-    [Button.name]: Button,
-    [Icon.name]: Icon,
+    VarLoading,
+    VarIcon,
   },
   props,
   setup(props) {
diff --git a/packages/varlet-ui/src/snackbar/index.tsx b/packages/varlet-ui/src/snackbar/index.tsx
index 37c9bb8ae64..495c4a4fc73 100644
--- a/packages/varlet-ui/src/snackbar/index.tsx
+++ b/packages/varlet-ui/src/snackbar/index.tsx
@@ -107,8 +107,10 @@ const TransitionGroupHost = {
 
         if (isAllowMultiple) reactiveSnackOptions.position = 'top'
 
+        const position = isAllowMultiple ? 'relative' : 'absolute' // avoid stylelint value-keyword-case error
+
         const style = {
-          position: isAllowMultiple ? 'relative' : 'absolute',
+          position,
           ...getTop(reactiveSnackOptions.position),
         }
 
@@ -124,10 +126,12 @@ const TransitionGroupHost = {
         )
       })
 
+      const zindex = context.zIndex // avoid stylelint value-keyword-case error
+
       return (
         <TransitionGroup
           {...transitionGroupProps}
-          style={{ zIndex: context.zIndex }}
+          style={{ zIndex: zindex }}
           onAfterEnter={opened}
           onAfterLeave={removeUniqOption}
         >
diff --git a/packages/varlet-ui/src/step/Step.vue b/packages/varlet-ui/src/step/Step.vue
index b4e98edb799..de6229036fa 100644
--- a/packages/varlet-ui/src/step/Step.vue
+++ b/packages/varlet-ui/src/step/Step.vue
@@ -34,14 +34,14 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import { props } from './props'
 import { useSteps } from './provide'
-import Icon from '../icon'
-import type { Ref, ComputedRef } from 'vue'
+import VarIcon from '../icon'
+import type { Ref, ComputedRef, ComponentPublicInstance } from 'vue'
 import type { StepProvider } from './provide'
 
 export default defineComponent({
   name: 'VarStep',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
   setup() {
@@ -51,11 +51,6 @@ export default defineComponent({
 
     const { index, steps, bindSteps } = useSteps()
 
-    if (!steps || !bindSteps || !index) {
-      console.error('[Varlet] Steps: <step/> must in <steps>')
-      return
-    }
-
     const { active, length, activeColor, inactiveColor, direction, clickStep } = steps
 
     const isCurrent: ComputedRef<boolean> = computed(() => active.value === index.value)
@@ -67,9 +62,9 @@ export default defineComponent({
 
     const click = () => clickStep(index.value)
 
-    const getRef = (el: HTMLDivElement) => {
+    const getRef = (el: Element | ComponentPublicInstance | null) => {
       if (direction.value === 'horizontal') {
-        main.value = el
+        main.value = el as HTMLDivElement
       }
     }
 
diff --git a/packages/varlet-ui/src/step/provide.ts b/packages/varlet-ui/src/step/provide.ts
index 05d005feba0..5cd4a82c060 100644
--- a/packages/varlet-ui/src/step/provide.ts
+++ b/packages/varlet-ui/src/step/provide.ts
@@ -10,6 +10,10 @@ export function useSteps() {
   const { parentProvider, bindParent } = useParent<StepsProvider, StepProvider>(STEPS_BIND_STEP_KEY)
   const { index } = useAtParentIndex(STEPS_COUNT_STEP_KEY)
 
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('[Varlet] Steps: <step/> must in <steps>')
+  }
+
   return {
     index,
     steps: parentProvider,
diff --git a/packages/varlet-ui/src/switch/Switch.vue b/packages/varlet-ui/src/switch/Switch.vue
index 5488d3c929f..b51c8c254e7 100644
--- a/packages/varlet-ui/src/switch/Switch.vue
+++ b/packages/varlet-ui/src/switch/Switch.vue
@@ -29,7 +29,7 @@
             errorMessage ? 'var-switch__handle-error' : null,
           ]"
         >
-          <var-loading v-if="loading" :radius="size / 2 - 2" />
+          <var-loading v-if="loading" :radius="toNumber(size) / 2 - 2" />
         </div>
       </div>
     </div>
@@ -43,8 +43,8 @@ import { useValidation } from '../utils/components'
 import { toNumber } from '../utils/shared'
 import { useForm } from '../form/provide'
 import { props } from './props'
-import FormDetails from '../form-details'
-import Loading from '../loading'
+import VarFormDetails from '../form-details'
+import VarLoading from '../loading'
 import Ripple from '../ripple'
 import type { ComputedRef } from 'vue'
 import type { SwitchProvider } from './provide'
@@ -61,8 +61,8 @@ type StyleProps = {
 export default defineComponent({
   name: 'VarSwitch',
   components: {
-    [Loading.name]: Loading,
-    [FormDetails.name]: FormDetails,
+    VarLoading,
+    VarFormDetails,
   },
   directives: { Ripple },
   props,
@@ -145,6 +145,7 @@ export default defineComponent({
 
     return {
       switchActive,
+      toNumber,
       styleComputed,
       errorMessage,
       formDisabled: form?.disabled,
diff --git a/packages/varlet-ui/src/time-picker/clock.vue b/packages/varlet-ui/src/time-picker/clock.vue
index 77ece65845a..23c4938ca85 100644
--- a/packages/varlet-ui/src/time-picker/clock.vue
+++ b/packages/varlet-ui/src/time-picker/clock.vue
@@ -169,8 +169,8 @@ export default defineComponent({
       const computedColor = () => {
         if (!isActive(index, inner)) {
           return {
-            backgroundColor: null,
-            color: null,
+            backgroundColor: undefined,
+            color: undefined,
           }
         }
         if (isDisable(hour)) {
@@ -182,7 +182,7 @@ export default defineComponent({
 
         return {
           backgroundColor: props.color,
-          color: null,
+          color: undefined,
         }
       }