From 68aabef30ae118651bde9f8313ae54f152f97bda Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Tue, 26 Jan 2021 09:59:44 +0800
Subject: [PATCH 1/6] feat(switch): add validation

---
 packages/varlet-ui/src/form/example/index.vue | 11 ++-
 packages/varlet-ui/src/styles/var.less        |  2 +-
 packages/varlet-ui/src/switch/Switch.vue      | 87 ++++++++++++++-----
 .../varlet-ui/src/switch/example/index.vue    |  5 +-
 packages/varlet-ui/src/switch/props.ts        |  9 ++
 packages/varlet-ui/src/switch/provide.ts      |  3 +
 packages/varlet-ui/src/switch/switch.less     | 24 +++--
 7 files changed, 110 insertions(+), 31 deletions(-)
 create mode 100644 packages/varlet-ui/src/switch/provide.ts

diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
index 7f0191c61bc..c211dbffe36 100644
--- a/packages/varlet-ui/src/form/example/index.vue
+++ b/packages/varlet-ui/src/form/example/index.vue
@@ -3,14 +3,14 @@
 		<var-input
 			class="mb"
 			placeholder="请输入用户名"
-			:rules="[(v) => !!v || '用户名不能为空!', (v) => (v && v.length > 10) || '用户名不少于10个字!']"
+			:rules="[(v) => !!v || '用户名不能为空!', (v) => (v && v.length > 5) || '用户名不少于5个字!']"
 			v-model="form.username"
 		/>
 		<var-input
 			class="mb"
 			type="password"
 			placeholder="请输入密码"
-			:rules="[(v) => !!v || '密码不能为空!', (v) => (v && v.length > 10) || '密码不少于10个字!']"
+			:rules="[(v) => !!v || '密码不能为空!', (v) => (v && v.length > 5) || '密码不少于5个字!']"
 			v-model="form.password"
 		/>
 		<var-select class="mb" placeholder="请选择部门" v-model="form.department" :rules="[(v) => !!v || '必须选一个部门']">
@@ -51,6 +51,10 @@
 			<var-checkbox :checked-value="3">打游戏</var-checkbox>
 		</var-checkbox-group>
 		<var-radio class="mb" :rules="[(v) => !!v || '您必须确保同意才能提交!']" v-model="form.confirm"> 同意 </var-radio>
+		<p style="display: flex">
+			<span style="margin-right: 8px">透视锁头</span>
+			<var-switch class="mb" :rules="[(v) => !!v || '不开挂你怎么玩']" v-model="form.open" />
+		</p>
 
 		<var-button class="mt" block type="danger" @click="formEl.reset()">清空表单</var-button>
 		<var-button class="mt" block type="warning" @click="formEl.resetValidation()">清空验证</var-button>
@@ -71,6 +75,7 @@ import Checkbox from '../../checkbox'
 import RadioGroup from '../../radio-group'
 import Radio from '../../radio'
 import Button from '../../button'
+import Switch from '../../switch'
 
 export default defineComponent({
 	name: 'FormExample',
@@ -83,6 +88,7 @@ export default defineComponent({
 		[RadioGroup.name]: RadioGroup,
 		[Radio.name]: Radio,
 		[Option.name]: Option,
+		[Switch.name]: Switch,
 		[Button.name]: Button,
 	},
 	setup() {
@@ -92,6 +98,7 @@ export default defineComponent({
 			department: undefined,
 			gender: undefined,
 			confirm: false,
+			open: false,
 			group: [],
 			skill: [],
 			like: [],
diff --git a/packages/varlet-ui/src/styles/var.less b/packages/varlet-ui/src/styles/var.less
index 23209df30a0..dd210196f92 100644
--- a/packages/varlet-ui/src/styles/var.less
+++ b/packages/varlet-ui/src/styles/var.less
@@ -15,6 +15,6 @@
 @color-info: #0097a7;
 @color-success: #43a047;
 @color-warning: #ff6f00;
-@color-danger: #e53935;
+@color-danger: #ed5f59;
 @color-background-base: #f5f5f5;
 @color-font-md: #888;
diff --git a/packages/varlet-ui/src/switch/Switch.vue b/packages/varlet-ui/src/switch/Switch.vue
index edb6a255f2e..bc0cdbbf950 100644
--- a/packages/varlet-ui/src/switch/Switch.vue
+++ b/packages/varlet-ui/src/switch/Switch.vue
@@ -1,34 +1,43 @@
 <template>
-	<div
-		class="var-switch"
-		:class="`var-switch ${disabled ? ' var-switch__disable' : ''}`"
-		@click="switchActive"
-		:style="styleComputed.switch"
-	>
+	<div class="var-switch">
 		<div
-			:style="styleComputed.track"
-			:class="`var-switch__track${modelValue ? ' var-switch__track-active' : ''}`"
-		></div>
-		<div
-			class="var-switch__ripple"
-			:style="styleComputed.ripple"
-			v-ripple="{
-				disabled: !ripple || disabled || loading,
-			}"
+			class="var-switch-block"
+			:class="[disabled || formDisabled ? 'var-switch__disable' : null]"
+			@click="switchActive"
+			:style="styleComputed.switch"
 		>
 			<div
-				:style="styleComputed.handle"
-				:class="`var-switch__handle var-elevation--2${modelValue ? ' var-switch__handle-active' : ''}`"
+				:style="styleComputed.track"
+				class="var-switch__track"
+				:class="[modelValue ? 'var-switch__track-active' : null, errorMessage ? 'var-switch__track-error' : null]"
+			></div>
+			<div
+				class="var-switch__ripple"
+				:style="styleComputed.ripple"
+				v-ripple="{
+					disabled: !ripple || disabled || loading || formDisabled,
+				}"
 			>
-				<var-loading v-if="loading" :radius="size / 2 - 2" />
+				<div
+					:style="styleComputed.handle"
+					class="var-switch__handle var-elevation--2"
+					:class="[modelValue ? 'var-switch__handle-active' : null, errorMessage ? 'var-switch__handle-error' : null]"
+				>
+					<var-loading v-if="loading" :radius="size / 2 - 2" />
+				</div>
 			</div>
 		</div>
+		<var-form-details :error-message="errorMessage" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ComputedRef, computed } from 'vue'
+import { defineComponent, ComputedRef, computed, nextTick } from 'vue'
+import { useParent, useValidation } from '../utils/components'
+import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
+import { SwitchProvider } from './provide'
 import { props } from './props'
+import FormDetails from '../form-details'
 import Loading from '../Loading'
 import Ripple from '../ripple'
 
@@ -45,10 +54,20 @@ export default defineComponent({
 	name: 'VarSwitch',
 	components: {
 		[Loading.name]: Loading,
+		[FormDetails.name]: FormDetails,
 	},
 	directives: { Ripple },
 	props,
 	setup(props) {
+		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SwitchProvider>(
+			FORM_BIND_FORM_ITEM_KEY
+		)
+		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+		const validate = () => v(props.rules, props.modelValue)
+
+		const validateWithTrigger = () => nextTick(() => vt(['onChange'], 'onChange', props.rules, props.modelValue))
+
 		const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
 			const switchWidth = +props.size * 2
 			const switchHeight = +props.size * 1.2
@@ -62,7 +81,7 @@ export default defineComponent({
 				},
 				ripple: {
 					left: props.modelValue ? `${+props.size / 2}px` : `-${+props.size / 2}px`,
-					color: props.modelValue ? props.closeColor || '#999' : props.color || '',
+					color: props.modelValue ? props.color || '' : props.closeColor || '#999',
 					width: `${+props.size * 2}px`,
 					height: `${+props.size * 2}px`,
 				},
@@ -70,7 +89,7 @@ export default defineComponent({
 					height: `${switchHeight * 0.6}px`,
 					width: `${switchWidth - 2}px`,
 					borderRadius: `${switchWidth / 3}px`,
-					filter: props.modelValue ? 'opacity(.6)' : 'brightness(.6)',
+					filter: props.modelValue || errorMessage?.value ? 'opacity(.6)' : 'brightness(.6)',
 					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
 				},
 				switch: {
@@ -82,14 +101,38 @@ export default defineComponent({
 
 		const switchActive = () => {
 			props.onClick?.()
-			if (props.disabled || props.loading) return
+			if (
+				props.disabled ||
+				props.loading ||
+				props.readonly ||
+				formProvider?.disabled.value ||
+				formProvider?.readonly.value
+			)
+				return
 			props.onChange?.(!props.modelValue)
 			props['onUpdate:modelValue']?.(!props.modelValue)
+			validateWithTrigger()
 		}
 
+		const reset = () => {
+			props['onUpdate:modelValue']?.(false)
+			resetValidation()
+		}
+
+		const switchProvider: SwitchProvider = {
+			reset,
+			validate,
+			resetValidation,
+		}
+
+		bindForm?.(switchProvider)
+
 		return {
 			switchActive,
 			styleComputed,
+			errorMessage,
+			formDisabled: formProvider?.disabled,
+			formReadonly: formProvider?.readonly,
 		}
 	},
 })
diff --git a/packages/varlet-ui/src/switch/example/index.vue b/packages/varlet-ui/src/switch/example/index.vue
index 24baa20ec7b..72bb97be395 100644
--- a/packages/varlet-ui/src/switch/example/index.vue
+++ b/packages/varlet-ui/src/switch/example/index.vue
@@ -4,7 +4,8 @@
 		<div class="var-switch__example-block">
 			<var-switch v-model="value" />
 			<var-switch v-model="value" :ripple="false" color="green" />
-			<var-switch v-model="value1" disable />
+			<var-switch v-model="value1" disabled />
+			<var-switch v-model="value3" readonly />
 		</div>
 	</div>
 	<div>
@@ -56,11 +57,13 @@ export default defineComponent({
 		const value = ref(true)
 		const value1 = ref(true)
 		const value2 = ref(false)
+		const value3 = ref(true)
 
 		return {
 			value,
 			value1,
 			value2,
+			value3,
 		}
 	},
 })
diff --git a/packages/varlet-ui/src/switch/props.ts b/packages/varlet-ui/src/switch/props.ts
index acce675daf8..c5e4d8ff265 100644
--- a/packages/varlet-ui/src/switch/props.ts
+++ b/packages/varlet-ui/src/switch/props.ts
@@ -1,3 +1,5 @@
+import { PropType } from 'vue'
+
 export const props = {
 	modelValue: {
 		type: Boolean,
@@ -6,6 +8,10 @@ export const props = {
 		type: Boolean,
 		default: false,
 	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
 	loading: {
 		type: Boolean,
 		default: false,
@@ -23,6 +29,9 @@ export const props = {
 		type: [String, Number],
 		default: 20,
 	},
+	rules: {
+		type: Array as PropType<Array<(v: boolean) => any>>,
+	},
 	ripple: {
 		type: Boolean,
 		default: true,
diff --git a/packages/varlet-ui/src/switch/provide.ts b/packages/varlet-ui/src/switch/provide.ts
new file mode 100644
index 00000000000..72c3c94964d
--- /dev/null
+++ b/packages/varlet-ui/src/switch/provide.ts
@@ -0,0 +1,3 @@
+import { Validation } from '../form/provide'
+
+export type SwitchProvider = Validation
diff --git a/packages/varlet-ui/src/switch/switch.less b/packages/varlet-ui/src/switch/switch.less
index 57e650d8b26..c316dccd2d6 100644
--- a/packages/varlet-ui/src/switch/switch.less
+++ b/packages/varlet-ui/src/switch/switch.less
@@ -5,11 +5,15 @@
 @var-switch-normal-height: 24px;
 
 .var-switch {
-	position: relative;
-	display: inline-flex;
-	cursor: pointer;
-	align-items: center;
-	justify-content: center;
+	display: inline-block;
+
+	&-block {
+		position: relative;
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+		justify-content: center;
+	}
 
 	&__disable {
 		filter: opacity(0.6);
@@ -23,7 +27,12 @@
 		&-active {
 			background-color: @color-primary;
 		}
+
+		&-error {
+			background-color: @color-danger !important;
+		}
 	}
+
 	&__ripple {
 		position: absolute;
 		display: flex;
@@ -34,6 +43,7 @@
 		overflow: hidden;
 		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 	}
+
 	&__handle {
 		border-radius: 50%;
 		background-color: white;
@@ -45,5 +55,9 @@
 		&-active {
 			background-color: @color-primary;
 		}
+
+		&-error {
+			background-color: @color-danger !important;
+		}
 	}
 }

From a6c4e602814ad94d73fcac8c7b606c179e5996ac Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Tue, 26 Jan 2021 17:39:33 +0800
Subject: [PATCH 2/6] feat(slider): add validation

---
 packages/varlet-ui/src/form/example/index.vue |   5 +-
 packages/varlet-ui/src/slider/Slider.vue      | 243 +++++++++++-------
 .../varlet-ui/src/slider/example/index.vue    |   4 +
 packages/varlet-ui/src/slider/props.ts        |  19 ++
 packages/varlet-ui/src/slider/provide.ts      |   3 +
 packages/varlet-ui/src/slider/slider.less     |  54 +++-
 packages/varlet-ui/varlet.config.js           |   7 +
 7 files changed, 232 insertions(+), 103 deletions(-)
 create mode 100644 packages/varlet-ui/src/slider/provide.ts

diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
index c211dbffe36..dd200693605 100644
--- a/packages/varlet-ui/src/form/example/index.vue
+++ b/packages/varlet-ui/src/form/example/index.vue
@@ -55,7 +55,7 @@
 			<span style="margin-right: 8px">透视锁头</span>
 			<var-switch class="mb" :rules="[(v) => !!v || '不开挂你怎么玩']" v-model="form.open" />
 		</p>
-
+		<var-slider class="mb" :rules="[(v) => v >= 35 || '前戏不好看！！']" v-model="form.slider" />
 		<var-button class="mt" block type="danger" @click="formEl.reset()">清空表单</var-button>
 		<var-button class="mt" block type="warning" @click="formEl.resetValidation()">清空验证</var-button>
 		<var-button class="mt" block type="success" @click="formEl.validate()">触发验证</var-button>
@@ -76,6 +76,7 @@ import RadioGroup from '../../radio-group'
 import Radio from '../../radio'
 import Button from '../../button'
 import Switch from '../../switch'
+import Slider from '../../slider'
 
 export default defineComponent({
 	name: 'FormExample',
@@ -89,6 +90,7 @@ export default defineComponent({
 		[Radio.name]: Radio,
 		[Option.name]: Option,
 		[Switch.name]: Switch,
+		[Slider.name]: Slider,
 		[Button.name]: Button,
 	},
 	setup() {
@@ -99,6 +101,7 @@ export default defineComponent({
 			gender: undefined,
 			confirm: false,
 			open: false,
+			slider: 10,
 			group: [],
 			skill: [],
 			like: [],
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
index 1d95f47904e..2145bfb053b 100644
--- a/packages/varlet-ui/src/slider/Slider.vue
+++ b/packages/varlet-ui/src/slider/Slider.vue
@@ -1,105 +1,120 @@
 <template>
-	<div
-		:class="{
-			'var-slider': true,
-			'var-slider-disable': disabled,
-		}"
-		ref="sliderEl"
-		@click="click"
-	>
+	<div class="var-slider">
 		<div
-			class="var-slider__track"
+			class="var-slider-block"
+			:class="[disabled || formDisabled ? 'var-slider__disable' : null, errorMessage ? 'var-slider__error' : null]"
 			:style="{
-				background: trackColor,
+				height: `${3 * thumbSize}px`,
+				margin: `0 ${thumbSize / 2}px`,
 			}"
+			ref="sliderEl"
+			@click="click"
 		>
-			<div class="var-slider__track-fill" :style="getFillStyle"></div>
-		</div>
-		<div
-			class="var-slider__thumb"
-			:style="{
-				left: `${range ? modelValue[0] : modelValue}%`,
-			}"
-			@touchstart="start($event, 1)"
-			@touchmove="move($event, 1)"
-			@touchend="end(1)"
-			@touchcancel="end(1)"
-		>
-			<div
-				class="var-slider__thumb-block"
-				:style="{
-					background: thumbColor,
-				}"
-			></div>
-			<div
-				:class="{
-					'var-slider__thumb-ripple': true,
-					'var-slider__thumb-ripple-active': thumbProps1.active,
-				}"
-				:style="{
-					background: thumbColor,
-				}"
-			></div>
 			<div
-				:class="{
-					'var-slider__thumb-label': true,
-					'var-slider__thumb-label-active': showLabel1,
-				}"
+				class="var-slider__track"
 				:style="{
-					background: labelColor,
-					color: labelTextColor,
+					background: trackColor,
+					height: trackHeight + 'px',
 				}"
 			>
-				<span>{{ range ? modelValue[0] : modelValue }}</span>
+				<div class="var-slider__track-fill" :style="getFillStyle"></div>
 			</div>
-		</div>
-		<div
-			class="var-slider__thumb"
-			v-if="range"
-			:style="{
-				left: `${range && modelValue[1]}%`,
-			}"
-			@touchstart="start($event, 2)"
-			@touchmove="move($event, 2)"
-			@touchend="end(2)"
-			@touchcancel="end(2)"
-		>
 			<div
-				class="var-slider__thumb-block"
-				:style="{
-					background: thumbColor,
-				}"
-			></div>
-			<div
-				:class="{
-					'var-slider__thumb-ripple': true,
-					'var-slider__thumb-ripple-active': thumbProps2.active,
-				}"
+				class="var-slider__thumb"
 				:style="{
-					background: thumbColor,
+					left: `${range ? modelValue[0] : modelValue}%`,
 				}"
-			></div>
+				@touchstart="start($event, 1)"
+				@touchmove="move($event, 1)"
+				@touchend="end(1)"
+				@touchcancel="end(1)"
+			>
+				<div
+					class="var-slider__thumb-block"
+					:style="{
+						background: thumbColor,
+						height: thumbSize + 'px',
+						width: thumbSize + 'px',
+					}"
+				></div>
+				<div
+					class="var-slider__thumb-ripple"
+					:class="[thumbProps1.active ? 'var-slider__thumb-ripple-active' : null]"
+					:style="{
+						background: thumbColor,
+						height: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
+						width: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
+					}"
+				></div>
+				<div
+					class="var-slider__thumb-label"
+					:class="[showLabel1 ? 'var-slider__thumb-label-active' : null]"
+					:style="{
+						background: labelColor,
+						color: labelTextColor,
+						height: 2 * thumbSize + 'px',
+						width: 2 * thumbSize + 'px',
+					}"
+				>
+					<span>{{ range ? modelValue[0] : modelValue }}</span>
+				</div>
+			</div>
+
 			<div
-				:class="{
-					'var-slider__thumb-label': true,
-					'var-slider__thumb-label-active': showLabel2,
-				}"
+				class="var-slider__thumb"
+				v-if="range"
 				:style="{
-					background: labelColor,
-					color: labelTextColor,
+					left: `${range && modelValue[1]}%`,
 				}"
+				@touchstart="start($event, 2)"
+				@touchmove="move($event, 2)"
+				@touchend="end(2)"
+				@touchcancel="end(2)"
 			>
-				<span>{{ range && modelValue[1] }}</span>
+				<div
+					class="var-slider__thumb-block"
+					:style="{
+						background: thumbColor,
+						height: thumbSize + 'px',
+						width: thumbSize + 'px',
+					}"
+				></div>
+				<div
+					class="var-slider__thumb-ripple"
+					:class="[thumbProps2.active ? 'var-slider__thumb-ripple-active' : null]"
+					:style="{
+						background: thumbColor,
+						height: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
+						width: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
+					}"
+				></div>
+				<div
+					class="var-slider__thumb-label"
+					:class="[showLabel2 ? 'var-slider__thumb-label-active' : null]"
+					:style="{
+						background: labelColor,
+						color: labelTextColor,
+						height: 2 * thumbSize + 'px',
+						width: 2 * thumbSize + 'px',
+					}"
+				>
+					<span>{{ range && modelValue[1] }}</span>
+				</div>
 			</div>
 		</div>
+		<var-form-details :error-message="errorMessage" :style="{ marginLeft: thumbSize / 2 + 'px', marginTop: 0 }" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, onMounted, computed, ComputedRef, reactive, UnwrapRef } from 'vue'
+import { defineComponent, Ref, ref, onMounted, computed, ComputedRef, reactive, UnwrapRef, nextTick, watch } from 'vue'
+import { useParent, useValidation } from '../utils/components'
+import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 import { getLeft } from '../utils/elements'
 import { isArray, isNumber } from '../utils/shared'
-import { props } from './props'
+import { props, ValidateTriggers } from './props'
+import { SliderProvider } from './provide'
+import FormDetails from '../form-details'
 
 type ThumbProps = {
 	startPosition: number
@@ -110,10 +125,23 @@ type ThumbProps = {
 
 export default defineComponent({
 	name: 'VarSlider',
+	components: {
+		[FormDetails.name]: FormDetails,
+	},
 	props,
 	setup(props) {
+		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SliderProvider>(
+			FORM_BIND_FORM_ITEM_KEY
+		)
+		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+		const validate = () => v(props.rules, props.modelValue)
+		const validateWithTrigger = (trigger: ValidateTriggers) =>
+			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
 		const sliderEl: Ref<HTMLDivElement | null> = ref(null)
 		const maxWidth: Ref<number> = ref(0)
+		const isScroll: Ref<boolean> = ref(false)
 		const thumbProps1: UnwrapRef<ThumbProps> = reactive({
 			startPosition: 0,
 			currentLeft: 0,
@@ -180,6 +208,7 @@ export default defineComponent({
 					props.onInput?.(curValue)
 					props['onUpdate:modelValue']?.(curValue)
 				}
+				validateWithTrigger('onInput')
 			}
 		}
 
@@ -194,8 +223,9 @@ export default defineComponent({
 		}
 
 		const start = (event: TouchEvent, type: number) => {
-			if (props.disabled || props.readonly) return
+			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
 			props.onStart?.()
+			isScroll.value = true
 			if (type === 1) {
 				thumbProps1.startPosition = event.touches[0].clientX
 			} else {
@@ -204,7 +234,14 @@ export default defineComponent({
 		}
 
 		const move = (event: TouchEvent, type: number) => {
-			if (props.disabled || props.readonly) return
+			if (
+				props.disabled ||
+				props.readonly ||
+				formProvider?.disabled.value ||
+				formProvider?.readonly.value ||
+				!isScroll.value
+			)
+				return
 			let moveDistance: number
 
 			if (type === 1) {
@@ -220,7 +257,7 @@ export default defineComponent({
 		}
 
 		const end = (type: number) => {
-			if (props.disabled || props.readonly) return
+			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
 			let curValue: number
 			let rangeValue: Array<number> = []
 			if (type === 1) {
@@ -240,11 +277,13 @@ export default defineComponent({
 			} else {
 				props.onChange?.(curValue)
 			}
+			validateWithTrigger('onChange')
+			isScroll.value = false
 			props.onEnd?.()
 		}
 
 		const click = (event: MouseEvent) => {
-			if (props.disabled || props.readonly) return
+			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
 			if ((event.target as HTMLDivElement).closest('.var-slider__thumb')) return
 			const offset = event.clientX - getLeft(event.currentTarget as HTMLDivElement)
 			const type = getType(offset)
@@ -284,20 +323,43 @@ export default defineComponent({
 			return true
 		}
 
+		const setProps = (modelValue = props.modelValue, step = props.step) => {
+			if (props.range && isArray(modelValue)) {
+				thumbProps1.percentValue = modelValue[0] / +step
+				thumbProps2.percentValue = modelValue[1] / +step
+				thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
+				thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
+			} else if (isNumber(modelValue)) {
+				thumbProps1.currentLeft = (modelValue / +step) * unitWidth.value
+			}
+		}
+
+		watch([() => props.modelValue, () => props.step], ([modelValue, step]) => {
+			if (!stepValidator() || !valueValidator() || isScroll.value) return
+			setProps(modelValue as number | number[], step as string | number)
+		})
+
 		onMounted(() => {
 			if (!stepValidator() || !valueValidator()) return
 
 			maxWidth.value = (sliderEl.value as HTMLDivElement).offsetWidth
-			if (props.range && isArray(props.modelValue)) {
-				thumbProps1.percentValue = props.modelValue[0] / +props.step
-				thumbProps2.percentValue = props.modelValue[1] / +props.step
-				thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
-				thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
-			} else if (isNumber(props.modelValue)) {
-				thumbProps1.currentLeft = (props.modelValue / +props.step) * unitWidth.value
-			}
+			setProps()
 		})
 
+		const reset = () => {
+			const resetValue = props.range ? [0, 0] : 0
+			props['onUpdate:modelValue']?.(resetValue)
+			resetValidation()
+		}
+
+		const sliderProvider: SliderProvider = {
+			reset,
+			validate,
+			resetValidation,
+		}
+
+		bindForm?.(sliderProvider)
+
 		return {
 			sliderEl,
 			thumbProps1,
@@ -305,6 +367,9 @@ export default defineComponent({
 			showLabel1,
 			showLabel2,
 			getFillStyle,
+			formDisabled: formProvider?.disabled,
+			formReadonly: formProvider?.readonly,
+			errorMessage,
 			start,
 			move,
 			end,
diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
index d0f012ce5d6..da51c2ad692 100644
--- a/packages/varlet-ui/src/slider/example/index.vue
+++ b/packages/varlet-ui/src/slider/example/index.vue
@@ -19,6 +19,10 @@
 		<app-type>只读</app-type>
 		<var-slider :step="1" v-model="value3" readonly />
 	</div>
+	<div>
+		<app-type>不同大小</app-type>
+		<var-slider v-model="value1" track-height="6" thumb-size="20" range />
+	</div>
 	<div>
 		<app-type>不同样式</app-type>
 		<var-slider
diff --git a/packages/varlet-ui/src/slider/props.ts b/packages/varlet-ui/src/slider/props.ts
index 29cc9fc21c5..bca0372a647 100644
--- a/packages/varlet-ui/src/slider/props.ts
+++ b/packages/varlet-ui/src/slider/props.ts
@@ -1,5 +1,7 @@
 import { PropType } from 'vue'
 
+export type ValidateTriggers = 'onChange' | 'onInput'
+
 function labelValidator(label: string) {
 	return ['always', 'normal', 'never'].includes(label)
 }
@@ -47,6 +49,14 @@ export const props = {
 		type: String,
 	},
 
+	trackHeight: {
+		type: [String, Number],
+	},
+
+	thumbSize: {
+		type: [String, Number],
+	},
+
 	disabled: {
 		type: Boolean,
 		default: false,
@@ -57,6 +67,15 @@ export const props = {
 		default: false,
 	},
 
+	rules: {
+		type: Array as PropType<Array<(v: any) => any>>,
+	},
+
+	validateTrigger: {
+		type: Array as PropType<Array<ValidateTriggers>>,
+		default: ['onInput'],
+	},
+
 	onChange: {
 		type: Function,
 	},
diff --git a/packages/varlet-ui/src/slider/provide.ts b/packages/varlet-ui/src/slider/provide.ts
new file mode 100644
index 00000000000..28716442c86
--- /dev/null
+++ b/packages/varlet-ui/src/slider/provide.ts
@@ -0,0 +1,3 @@
+import { Validation } from '../form/provide'
+
+export type SliderProvider = Validation
diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
index 08bdc64e49d..9fa3275a84b 100644
--- a/packages/varlet-ui/src/slider/slider.less
+++ b/packages/varlet-ui/src/slider/slider.less
@@ -1,16 +1,17 @@
 @import '../styles/var';
 
 .var-slider {
-	display: flex;
-	align-items: center;
-	position: relative;
-	flex: 1;
-	user-select: none;
-	min-height: 32px;
-	margin-left: 8px;
-	margin-right: 8px;
-
-	&-disable {
+	&-block {
+		display: flex;
+		align-items: center;
+		position: relative;
+		flex: 1;
+		user-select: none;
+		height: 36px;
+		margin: 0 6px;
+	}
+
+	&__disable {
 		filter: opacity(0.6);
 	}
 
@@ -37,8 +38,7 @@
 			width: 12px;
 			height: 12px;
 			border-radius: 50%;
-			left: -6px;
-			top: -6px;
+			transform: translate(-50%, -50%);
 			background-color: @color-primary;
 		}
 
@@ -85,8 +85,36 @@
 			}
 
 			&-active {
-				transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);
+				transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);
+			}
+		}
+	}
+
+	&__error {
+		.var-slider__track {
+			background: lighten(@color-danger, 25%) !important;
+
+			&-fill {
+				background-color: @color-danger !important;
 			}
 		}
+
+		.var-slider__thumb {
+			&-block {
+				background-color: @color-danger !important;
+			}
+
+			&-ripple {
+				background-color: @color-danger !important;
+			}
+
+			&-label {
+				background-color: @color-danger !important;
+			}
+		}
+	}
+
+	.var-form-details {
+		margin-left: 6px;
 	}
 }
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index 7c4292de1f3..a3e22f5626d 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -186,6 +186,13 @@ module.exports = {
 				},
 				doc: 'switch',
 			},
+			{
+				text: {
+					zh_CN: 'Slider 滑块',
+					en_US: 'slider',
+				},
+				doc: 'slider',
+			},
 		],
 		language: 'zh_CN',
 	},

From 8c308cd436531f75fe8e0220fd58f471e4cbb53f Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 28 Jan 2021 00:10:40 +0800
Subject: [PATCH 3/6] chore: modify tab to space

---
 .prettierrc | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index ea4cfc26811..b3977820d61 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,5 @@
 {
   "printWidth": 120,
-  "useTabs": true,
   "singleQuote": true,
   "semi": false
 }

From cdd7584a340a18241e9995391973657101305d07 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 28 Jan 2021 00:34:33 +0800
Subject: [PATCH 4/6] fix(expansion-panels): add matchIndex and watch
 modelValue to update

---
 .../src/expansion-panel/ExpansionPanel.vue    | 215 +++++++++---------
 .../varlet-ui/src/expansion-panel/provide.ts  |   7 +-
 .../src/expansion-panels/ExpansionPanels.vue  | 157 ++++++++-----
 .../src/expansion-panels/example/index.vue    | 131 ++++++-----
 .../varlet-ui/src/expansion-panels/props.ts   |  34 +--
 .../varlet-ui/src/expansion-panels/provide.ts |   6 +-
 6 files changed, 294 insertions(+), 256 deletions(-)

diff --git a/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue b/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
index 59c965893e3..37ccb32c0aa 100644
--- a/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
+++ b/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
@@ -1,35 +1,35 @@
 <template>
-	<div
-		:class="{
-			'var-expansion-panel': true,
-			'var-expansion-panel__active': offset && isOpen,
-			'var-expansion-panel__disable': disabled,
-		}"
-	>
-		<div class="var-expansion-panel-header" @click="toggle()">
-			<div class="var-expansion-panel-header__title">
-				<slot name="title">{{ title }}</slot>
-			</div>
-			<div class="var-expansion-panel-header__icon">
-				<slot name="icon">
-					<var-icon
-						:name="icon"
-						:transition="400"
-						:class="{
-							'var-expansion-panel-header__icon': true,
-							'var-expansion-panel-header__open': isOpen && icon === 'chevron-down',
-							'var-expansion-panel-header__disable': disabled,
-						}"
-					/>
-				</slot>
-			</div>
-		</div>
-		<div class="var-expansion-panel-content" v-show="show" ref="contentEl" @transitionend="transitionend">
-			<div class="var-expansion-panel__wrap">
-				<slot></slot>
-			</div>
-		</div>
-	</div>
+  <div
+    :class="{
+      'var-expansion-panel': true,
+      'var-expansion-panel__active': offset && isShow,
+      'var-expansion-panel__disable': disabled,
+    }"
+  >
+    <div class="var-expansion-panel-header" @click="toggle()">
+      <div class="var-expansion-panel-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="var-expansion-panel-header__icon">
+        <slot name="icon">
+          <var-icon
+            :name="icon"
+            :transition="400"
+            :class="{
+              'var-expansion-panel-header__icon': true,
+              'var-expansion-panel-header__open': isShow && icon === 'chevron-down',
+              'var-expansion-panel-header__disable': disabled,
+            }"
+          />
+        </slot>
+      </div>
+    </div>
+    <div class="var-expansion-panel-content" v-show="show" ref="contentEl" @transitionend="transitionend">
+      <div class="var-expansion-panel__wrap">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -38,103 +38,98 @@ import { requestAnimationFrame } from '../utils/elements'
 import { isArray } from '../utils/shared'
 import { useParent, useAtParentIndex } from '../utils/components'
 import {
-	EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
-	EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
-	ExpansionPanelsProvider,
+  EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
+  EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
+  ExpansionPanelsProvider,
 } from '../expansion-panels/provide'
 import { ExpansionPanelProvider } from './provide'
 import { props } from './props'
 import Icon from '../icon'
 
 export default defineComponent({
-	name: 'VarExpansionPanel',
-	components: {
-		[Icon.name]: Icon,
-	},
-	props,
-	setup(props) {
-		const { parentProvider: ExpansionPanelsProvider, bindParent } = useParent<
-			ExpansionPanelsProvider,
-			ExpansionPanelProvider
-		>(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
-		const { index } = useAtParentIndex(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
+  name: 'VarExpansionPanel',
+  components: {
+    [Icon.name]: Icon,
+  },
+  props,
+  setup(props) {
+    const { parentProvider: ExpansionPanelsProvider, bindParent } = useParent<
+      ExpansionPanelsProvider,
+      ExpansionPanelProvider
+    >(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
+    const { index } = useAtParentIndex(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
 
-		if (!ExpansionPanelsProvider || !bindParent || !index) {
-			throw Error('<var-expansion-panel/> must in <var-expansion-panels>')
-		}
+    if (!ExpansionPanelsProvider || !bindParent || !index) {
+      throw Error('<var-expansion-panel/> must in <var-expansion-panels>')
+    }
 
-		const contentEl: Ref<HTMLDivElement | null> = ref(null)
-		const show: Ref<boolean> = ref(false)
-		const isOpen: Ref<boolean> = ref(false)
-		const isLock: Ref<boolean> = ref(false)
-		const { active, offset, updateItem } = ExpansionPanelsProvider
+    const contentEl: Ref<HTMLDivElement | null> = ref(null)
+    const show: Ref<boolean> = ref(false)
+    const isShow: Ref<boolean> = ref(false)
+    const { active, offset, updateItem } = ExpansionPanelsProvider
 
-		const name: ComputedRef<number | string | undefined> = computed(() => props.name)
+    const name: ComputedRef<number | string | undefined> = computed(() => props.name)
 
-		const init = (accordion: boolean) => {
-			if (!active.value || (accordion && isArray(active.value))) return
-			const isShow = isArray(active.value)
-				? (active.value as Array<number | string | undefined>).includes(props.name)
-				: active.value === props.name
-			toggle(isShow, true)
-		}
+    const init = (accordion: boolean, show: boolean) => {
+      if (active.value === undefined || (accordion && isArray(active.value)) || show === isShow.value) return
+      isShow.value = show
+      toggle(true)
+    }
 
-		const toggle = (isShow?: boolean, initOrAccordion?: boolean) => {
-			if (isLock.value || props.disabled || isOpen.value === isShow) return
-			isLock.value = true
-			isOpen.value = isShow === undefined ? !isOpen.value : isShow
-			if (!initOrAccordion) updateItem(props.name, isOpen.value)
-		}
+    const toggle = (initOrAccordion?: boolean) => {
+      if (props.disabled) return
+      if (!initOrAccordion) {
+        updateItem(props.name || index.value, !isShow.value)
+      }
+    }
 
-		const openPanel = () => {
-			if (!contentEl.value) return
-			show.value = true
-			nextTick(() => {
-				const { offsetHeight } = contentEl.value as HTMLDivElement
-				;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
-				requestAnimationFrame(() => {
-					;(contentEl.value as HTMLDivElement).style.height = offsetHeight + 'px'
-				})
-			})
-		}
+    const openPanel = () => {
+      if (!contentEl.value) return
+      ;(contentEl.value as HTMLDivElement).style.height = ''
+      show.value = true
+      nextTick(() => {
+        const { offsetHeight } = contentEl.value as HTMLDivElement
+        ;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
+        requestAnimationFrame(() => {
+          ;(contentEl.value as HTMLDivElement).style.height = offsetHeight + 'px'
+        })
+      })
+    }
 
-		const closePanel = () => {
-			if (!contentEl.value) return
-			;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
-		}
+    const closePanel = () => {
+      if (!contentEl.value) return
+      ;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
+    }
 
-		const transitionend = () => {
-			if (!isOpen.value) {
-				show.value = false
-				;(contentEl.value as HTMLDivElement).style.height = ''
-			}
-			isLock.value = false
-		}
+    const transitionend = () => {
+      if (!isShow.value) {
+        show.value = false
+        ;(contentEl.value as HTMLDivElement).style.height = ''
+      }
+    }
 
-		const expansionPanelProvider: ExpansionPanelProvider = {
-			index,
-			name,
-			init,
-			toggle,
-		}
+    const expansionPanelProvider: ExpansionPanelProvider = {
+      index,
+      name,
+      init,
+    }
 
-		bindParent(expansionPanelProvider)
+    bindParent(expansionPanelProvider)
 
-		watch(isOpen, (value) => {
-			if (value) openPanel()
-			else closePanel()
-		})
+    watch(isShow, (value) => {
+      if (value) openPanel()
+      else closePanel()
+    })
 
-		return {
-			show,
-			isOpen,
-			offset,
-			toggle,
-			contentEl,
-			closePanel,
-			transitionend,
-		}
-	},
+    return {
+      show,
+      isShow,
+      offset,
+      toggle,
+      contentEl,
+      transitionend,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/expansion-panel/provide.ts b/packages/varlet-ui/src/expansion-panel/provide.ts
index 9c1efe3b766..86d828e4a4d 100644
--- a/packages/varlet-ui/src/expansion-panel/provide.ts
+++ b/packages/varlet-ui/src/expansion-panel/provide.ts
@@ -1,8 +1,7 @@
 import { ComputedRef } from 'vue'
 
 export interface ExpansionPanelProvider {
-	index: ComputedRef<number>
-	name: ComputedRef<string | number | undefined>
-	init(accordion: boolean): void
-	toggle(isShow?: boolean, initOrAccordion?: boolean): void
+  index: ComputedRef<number>
+  name: ComputedRef<string | number | undefined>
+  init(accordion: boolean, show: boolean): void
 }
diff --git a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
index 43097aa89be..816b9468b0b 100644
--- a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
+++ b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
@@ -1,77 +1,122 @@
 <template>
-	<div class="var-expansion-panels">
-		<slot></slot>
-	</div>
+  <div class="var-expansion-panels">
+    <slot></slot>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, nextTick, watch } from 'vue'
 import { useChildren, useAtChildrenCounter } from '../utils/components'
 import {
-	EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
-	EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
-	ExpansionPanelsProvider,
+  EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
+  EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
+  ExpansionPanelsProvider,
 } from './provide'
 import { ExpansionPanelProvider } from '../expansion-panel/provide'
 import { props } from './props'
 import { isArray } from '../utils/shared'
 
 export default defineComponent({
-	name: 'VarExpansionPanels',
-	props,
-	setup(props) {
-		const active: ComputedRef<number | string | Array<number | string> | undefined> = computed(() => props.modelValue)
-		const offset: ComputedRef<boolean> = computed(() => props.offset)
-		const { bindChildren, childProviders: ExpansionPanelProvider } = useChildren<
-			ExpansionPanelsProvider,
-			ExpansionPanelProvider
-		>(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
-		const { length } = useAtChildrenCounter(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
+  name: 'VarExpansionPanels',
+  props,
+  setup(props) {
+    const active: ComputedRef<number | string | Array<number | string> | undefined | null> = computed(
+      () => props.modelValue
+    )
+    const offset: ComputedRef<boolean> = computed(() => props.offset)
+    const { bindChildren, childProviders: expansionPanelProviders } = useChildren<
+      ExpansionPanelsProvider,
+      ExpansionPanelProvider
+    >(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
+    const { length } = useAtChildrenCounter(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
 
-		const checkValue = () => {
-			if (!props.accordion && !isArray(props.modelValue)) {
-				console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be Array')
-			}
-			if (props.accordion && isArray(props.modelValue)) {
-				console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be String or Number')
-			}
-		}
+    const checkValue = () => {
+      if (!props.accordion && !isArray(props.modelValue)) {
+        console.error('[Varlet] ExpansionPanels: type of prop "modelValue" should be an Array')
+        return false
+      }
+      if (props.accordion && isArray(props.modelValue)) {
+        console.error('[Varlet] ExpansionPanels: type of prop "modelValue" should be a String or Number')
+        return false
+      }
+      return true
+    }
 
-		const getValue = (value: number | string | undefined, isExpand: boolean) => {
-			checkValue()
-			if (isExpand) return props.accordion ? value : [...(props.modelValue as Array<string | number>), value]
-			return props.accordion
-				? undefined
-				: (props.modelValue as Array<string | number>).filter((name: string | number) => name !== value)
-		}
+    const getValue = (value: number | string | undefined, isExpand: boolean) => {
+      if (!checkValue()) return
+      if (isExpand) return props.accordion ? value : [...(props.modelValue as Array<string | number>), value]
+      return props.accordion
+        ? null
+        : (props.modelValue as Array<string | number>).filter((name: string | number) => name !== value)
+    }
 
-		const updateItem = (value: number | string | undefined, isExpand: boolean) => {
-			if (props.accordion) {
-				ExpansionPanelProvider.forEach(({ name, toggle }: ExpansionPanelProvider) => {
-					if (value !== name.value) toggle(false, true)
-				})
-			}
-			const modelValue = getValue(value, isExpand)
-			props['onUpdate:modelValue']?.(modelValue)
-			props.onChange?.(modelValue)
-		}
-		const expansionPanelsProvider: ExpansionPanelsProvider = {
-			active,
-			offset,
-			updateItem,
-		}
+    const updateItem = (value: number | string | undefined, isExpand: boolean) => {
+      const modelValue = getValue(value, isExpand)
+      props['onUpdate:modelValue']?.(modelValue)
+      props.onChange?.(modelValue)
+    }
 
-		bindChildren(expansionPanelsProvider)
+    const matchName = (): Array<ExpansionPanelProvider> | ExpansionPanelProvider | undefined => {
+      if (props.accordion) {
+        return expansionPanelProviders.find(({ name }: ExpansionPanelProvider) => props.modelValue === name.value)
+      }
+      return expansionPanelProviders.filter(({ name }: ExpansionPanelProvider) => {
+        if (name.value === undefined) return false
+        return (props.modelValue as Array<string | number>).includes(name.value)
+      })
+    }
 
-		watch(
-			() => length.value,
-			() =>
-				nextTick(() => {
-					checkValue()
-					ExpansionPanelProvider.forEach(({ init }) => init(props.accordion))
-				})
-		)
-	},
+    const matchIndex = (): Array<ExpansionPanelProvider> | ExpansionPanelProvider | undefined => {
+      if (props.accordion) {
+        // console.log(expansionPanelProviders)
+        return expansionPanelProviders.find(({ index, name }: ExpansionPanelProvider) =>
+          name.value === undefined ? props.modelValue === index.value : false
+        )
+      }
+      return expansionPanelProviders.filter(({ index, name }: ExpansionPanelProvider) =>
+        name.value === undefined ? (props.modelValue as Array<string | number>).includes(index.value) : false
+      )
+    }
+
+    const resize = () => {
+      if (!checkValue()) return
+      const matchProviders: Array<ExpansionPanelProvider> | ExpansionPanelProvider | undefined =
+        matchName() || matchIndex()
+      if (
+        (props.accordion && !matchProviders) ||
+        (!props.accordion && !(matchProviders as Array<ExpansionPanelProvider>).length)
+      ) {
+        expansionPanelProviders.forEach((provider) => {
+          provider.init(props.accordion, false)
+        })
+        return
+      }
+      expansionPanelProviders.forEach((provider) => {
+        const isShow = props.accordion
+          ? matchProviders === provider
+          : (matchProviders as Array<ExpansionPanelProvider>).includes(provider)
+        provider.init(props.accordion, isShow)
+      })
+    }
+
+    const expansionPanelsProvider: ExpansionPanelsProvider = {
+      active,
+      offset,
+      updateItem,
+    }
+
+    bindChildren(expansionPanelsProvider)
+
+    watch(
+      () => length.value,
+      () => nextTick().then(resize)
+    )
+
+    watch(
+      () => props.modelValue,
+      () => nextTick().then(resize)
+    )
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/expansion-panels/example/index.vue b/packages/varlet-ui/src/expansion-panels/example/index.vue
index 131406e617a..14c581493cc 100644
--- a/packages/varlet-ui/src/expansion-panels/example/index.vue
+++ b/packages/varlet-ui/src/expansion-panels/example/index.vue
@@ -1,53 +1,53 @@
 <template>
-	<div class="expansion-panels-demo">
-		<div>
-			<app-type>基本使用</app-type>
-			<var-expansion-panels v-model="value" @change="changeHandle">
-				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
-				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
-			</var-expansion-panels>
-		</div>
+  <div class="expansion-panels-demo">
+    <div>
+      <app-type>基本使用</app-type>
+      <var-expansion-panels v-model="value" @change="changeHandle">
+        <var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+        <var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+      </var-expansion-panels>
+    </div>
 
-		<div>
-			<app-type>隐藏边距</app-type>
-			<var-expansion-panels v-model="value" :offset="false">
-				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
-				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
-			</var-expansion-panels>
-		</div>
+    <div>
+      <app-type>隐藏边距</app-type>
+      <var-expansion-panels v-model="value" :offset="false">
+        <var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+        <var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+      </var-expansion-panels>
+    </div>
 
-		<div>
-			<app-type>手风琴模式</app-type>
-			<var-expansion-panels v-model="value1" accordion :offset="false">
-				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
-				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
-			</var-expansion-panels>
-		</div>
+    <div>
+      <app-type>手风琴模式</app-type>
+      <var-expansion-panels v-model="value1" accordion :offset="false" @change="changeHandle">
+        <var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+        <var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+      </var-expansion-panels>
+    </div>
 
-		<div>
-			<app-type>禁用</app-type>
-			<var-button @click="disabled = !disabled" style="margin-bottom: 8px">
-				{{ disabled ? '恢复' : '禁用' }}
-			</var-button>
-			<var-expansion-panels v-model="value1" accordion>
-				<var-expansion-panel title="Item" name="1" :disabled="disabled">hello world</var-expansion-panel>
-				<var-expansion-panel title="Item" name="2" :disabled="disabled">hello world</var-expansion-panel>
-			</var-expansion-panels>
-		</div>
+    <div>
+      <app-type>禁用</app-type>
+      <var-button @click="disabled = !disabled" style="margin-bottom: 8px">
+        {{ disabled ? '恢复' : '禁用' }}
+      </var-button>
+      <var-expansion-panels v-model="value1" accordion @change="changeHandle">
+        <var-expansion-panel title="Item" :name="1" :disabled="disabled">hello world</var-expansion-panel>
+        <var-expansion-panel title="Item" :disabled="disabled">hello world</var-expansion-panel>
+      </var-expansion-panels>
+    </div>
 
-		<div>
-			<app-type>自定义标题</app-type>
-			<var-expansion-panels v-model="value1" accordion>
-				<var-expansion-panel title="Expansion panels" name="1" icon="account-circle">hello world</var-expansion-panel>
-				<var-expansion-panel>
-					<template #title>Title Slot</template>
-					<template #icon>Icon Slot</template>
+    <div>
+      <app-type>自定义标题</app-type>
+      <var-expansion-panels v-model="value1" accordion>
+        <var-expansion-panel title="Expansion panels" name="1" icon="account-circle">hello world</var-expansion-panel>
+        <var-expansion-panel>
+          <template #title>Title Slot</template>
+          <template #icon>Icon Slot</template>
 
-					hello world
-				</var-expansion-panel>
-			</var-expansion-panels>
-		</div>
-	</div>
+          hello world
+        </var-expansion-panel>
+      </var-expansion-panels>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -57,32 +57,31 @@ import ExpansionPanel from '../../expansion-panel'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'ExpansionPanelsExample',
-	components: {
-		[ExpansionPanels.name]: ExpansionPanels,
-		[ExpansionPanel.name]: ExpansionPanel,
-		[Button.name]: Button,
-	},
-	setup() {
-		const disabled = ref(false)
-		const value = ref(['1'])
-		const value1 = ref('1')
-		const changeHandle = (val) => {
-			console.log({ val })
-			console.log(value.value)
-		}
-		return {
-			disabled,
-			value,
-			value1,
-			changeHandle,
-		}
-	},
+  name: 'ExpansionPanelsExample',
+  components: {
+    [ExpansionPanels.name]: ExpansionPanels,
+    [ExpansionPanel.name]: ExpansionPanel,
+    [Button.name]: Button,
+  },
+  setup() {
+    const disabled = ref(false)
+    const value = ref(['1'])
+    const value1 = ref('')
+    const changeHandle = (val) => {
+      console.log(val)
+    }
+    return {
+      disabled,
+      value,
+      value1,
+      changeHandle,
+    }
+  },
 })
 </script>
 
 <style scoped>
 .example {
-	background: antiquewhite;
+  background: antiquewhite;
 }
 </style>
diff --git a/packages/varlet-ui/src/expansion-panels/props.ts b/packages/varlet-ui/src/expansion-panels/props.ts
index ee2d24e8b71..e77466e8923 100644
--- a/packages/varlet-ui/src/expansion-panels/props.ts
+++ b/packages/varlet-ui/src/expansion-panels/props.ts
@@ -1,21 +1,21 @@
 import { PropType } from 'vue'
 
 export const props = {
-	modelValue: {
-		type: [Array, String, Number] as PropType<string | number | Array<string | number>>,
-	},
-	accordion: {
-		type: Boolean,
-		default: false,
-	},
-	onChange: {
-		type: Function,
-	},
-	offset: {
-		type: Boolean,
-		default: true,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    type: [Array, String, Number] as PropType<null | string | number | Array<string | number>>,
+  },
+  accordion: {
+    type: Boolean,
+    default: false,
+  },
+  onChange: {
+    type: Function,
+  },
+  offset: {
+    type: Boolean,
+    default: true,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/expansion-panels/provide.ts b/packages/varlet-ui/src/expansion-panels/provide.ts
index 8cd5ea2b220..8d090420961 100644
--- a/packages/varlet-ui/src/expansion-panels/provide.ts
+++ b/packages/varlet-ui/src/expansion-panels/provide.ts
@@ -1,9 +1,9 @@
 import { ComputedRef } from 'vue'
 
 export interface ExpansionPanelsProvider {
-	active: ComputedRef<number | string | Array<number | string> | undefined>
-	offset: ComputedRef<boolean>
-	updateItem: (value: number | string | undefined, isExpand: boolean) => void
+  active: ComputedRef<number | string | Array<number | string> | undefined | null>
+  offset: ComputedRef<boolean>
+  updateItem: (value: number | string | undefined, isExpand: boolean) => void
 }
 
 export const EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY = Symbol('EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY')

From 01de29cba46d96b579d8d60c882cd4b89618e657 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 28 Jan 2021 01:19:06 +0800
Subject: [PATCH 5/6] style: modify tab to space

---
 package.json                                  |   4 +-
 packages/varlet-cli/site/mobile/App.vue       |  74 +-
 .../site/mobile/components/AppType.vue        |  14 +-
 packages/varlet-cli/site/mobile/main.ts       |   4 +-
 packages/varlet-cli/site/pc/App.vue           | 802 +++++++++---------
 packages/varlet-cli/site/pc/main.ts           |   8 +-
 packages/varlet-cli/src/commands/build.ts     |  16 +-
 packages/varlet-cli/src/commands/compile.ts   |  78 +-
 packages/varlet-cli/src/commands/create.ts    |  48 +-
 packages/varlet-cli/src/commands/dev.ts       |  64 +-
 .../varlet-cli/src/compiler/compileModule.ts  |  90 +-
 .../varlet-cli/src/compiler/compileRoutes.ts  |  84 +-
 .../varlet-cli/src/compiler/compileScript.ts  | 120 +--
 .../varlet-cli/src/compiler/compileStyle.ts   |  54 +-
 .../varlet-cli/src/config/varlet.config.ts    |  10 +-
 .../src/config/webpack.base.config.ts         | 265 +++---
 .../src/config/webpack.dev.config.ts          |  70 +-
 .../src/config/webpack.umd.config.ts          |  54 +-
 packages/varlet-cli/src/less.d.ts             |   6 +-
 packages/varlet-cli/src/shared/constant.ts    |   5 +-
 packages/varlet-cli/src/shared/fsUtils.ts     |  56 +-
 packages/varlet-cli/varlet.default.config.js  |  40 +-
 packages/varlet-eslint-config/index.js        | 126 +--
 packages/varlet-icons/lib/index.js            |  66 +-
 packages/varlet-icons/varlet-icons.config.js  |   8 +-
 packages/varlet-markdown-loader/index.js      |  34 +-
 packages/varlet-touch-emulator/index.js       |  84 +-
 .../varlet-ui/src/badge/example/index.vue     |  56 +-
 packages/varlet-ui/src/badge/props.ts         |  14 +-
 packages/varlet-ui/src/button/Button.vue      |  48 +-
 .../varlet-ui/src/button/example/index.vue    |  32 +-
 packages/varlet-ui/src/button/index.ts        |   2 +-
 packages/varlet-ui/src/button/props.ts        | 128 +--
 .../src/checkbox-group/CheckboxGroup.vue      | 166 ++--
 .../checkbox-group/__tests__/index.spec.js    |   4 +-
 .../src/checkbox-group/example/index.vue      |   8 +-
 .../varlet-ui/src/checkbox-group/index.ts     |   2 +-
 .../varlet-ui/src/checkbox-group/props.ts     |  50 +-
 packages/varlet-ui/src/checkbox/Checkbox.vue  | 226 ++---
 .../varlet-ui/src/checkbox/example/index.vue  |  40 +-
 packages/varlet-ui/src/checkbox/index.ts      |   2 +-
 packages/varlet-ui/src/checkbox/props.ts      |  92 +-
 packages/varlet-ui/src/chip/Chip.vue          |  48 +-
 .../src/chip/__tests__/index.spec.js          |   4 +-
 .../src/chip/chip/__tests__/index.spec.js     |   4 +-
 packages/varlet-ui/src/chip/chip/index.ts     |   2 +-
 packages/varlet-ui/src/chip/chip/props.ts     |  40 +-
 packages/varlet-ui/src/chip/example/index.vue |  46 +-
 packages/varlet-ui/src/chip/index.ts          |   2 +-
 packages/varlet-ui/src/chip/props.ts          |  40 +-
 packages/varlet-ui/src/dialog/Dialog.vue      | 134 +--
 packages/varlet-ui/src/dialog/index.ts        |  50 +-
 packages/varlet-ui/src/dialog/props.ts        | 168 ++--
 .../varlet-ui/src/expansion-panel/index.ts    |   2 +-
 .../varlet-ui/src/expansion-panel/props.ts    |  28 +-
 .../src/expansion-panels/ExpansionPanels.vue  |   1 -
 .../varlet-ui/src/expansion-panels/index.ts   |   2 +-
 .../src/form-details/FormDetails.vue          |   4 +-
 .../src/form-details/example/index.vue        |   8 +-
 packages/varlet-ui/src/form-details/index.ts  |   2 +-
 packages/varlet-ui/src/form-details/props.ts  |  16 +-
 packages/varlet-ui/src/form/Form.vue          |  50 +-
 packages/varlet-ui/src/form/example/index.vue |  74 +-
 packages/varlet-ui/src/form/index.ts          |   2 +-
 packages/varlet-ui/src/form/props.ts          |  16 +-
 packages/varlet-ui/src/icon/Icon.vue          |  70 +-
 packages/varlet-ui/src/icon/example/index.vue | 106 +--
 packages/varlet-ui/src/icon/index.ts          |   2 +-
 packages/varlet-ui/src/icon/props.ts          |  22 +-
 packages/varlet-ui/src/image/Image.vue        |  44 +-
 .../varlet-ui/src/image/example/index.vue     |  32 +-
 packages/varlet-ui/src/image/props.ts         |  84 +-
 .../src/index-anchor/IndexAnchor.vue          |  88 +-
 packages/varlet-ui/src/index-anchor/index.ts  |   2 +-
 packages/varlet-ui/src/index-anchor/props.ts  |   6 +-
 packages/varlet-ui/src/index-bar/IndexBar.vue | 132 +--
 .../varlet-ui/src/index-bar/example/index.vue |  44 +-
 packages/varlet-ui/src/index-bar/index.ts     |   2 +-
 packages/varlet-ui/src/index-bar/props.ts     |  50 +-
 packages/varlet-ui/src/input/Input.vue        | 288 +++----
 .../varlet-ui/src/input/example/index.vue     |  44 +-
 packages/varlet-ui/src/input/props.ts         | 204 ++---
 packages/varlet-ui/src/lazy/index.ts          | 282 +++---
 packages/varlet-ui/src/loading/Loading.vue    |   4 +-
 .../varlet-ui/src/loading/example/index.vue   |   8 +-
 packages/varlet-ui/src/loading/index.ts       |   2 +-
 packages/varlet-ui/src/loading/props.ts       |  46 +-
 packages/varlet-ui/src/menu/Menu.vue          | 118 +--
 packages/varlet-ui/src/menu/index.ts          |   2 +-
 packages/varlet-ui/src/menu/props.ts          |  48 +-
 packages/varlet-ui/src/option/Option.vue      |  92 +-
 .../varlet-ui/src/option/example/index.vue    |   8 +-
 packages/varlet-ui/src/option/index.ts        |   2 +-
 packages/varlet-ui/src/option/props.ts        |  16 +-
 packages/varlet-ui/src/popup/index.ts         |   2 +-
 packages/varlet-ui/src/progress/Progress.vue  |  64 +-
 .../varlet-ui/src/progress/example/index.vue  |  46 +-
 packages/varlet-ui/src/progress/index.ts      |   2 +-
 packages/varlet-ui/src/progress/props.ts      | 102 +--
 .../src/pull-refresh/PullRefresh.vue          | 202 ++---
 .../src/pull-refresh/example/index.vue        |  44 +-
 packages/varlet-ui/src/pull-refresh/index.ts  |   2 +-
 packages/varlet-ui/src/pull-refresh/props.ts  |  74 +-
 .../varlet-ui/src/radio-group/RadioGroup.vue  | 118 +--
 .../src/radio-group/example/index.vue         |   8 +-
 packages/varlet-ui/src/radio-group/index.ts   |   2 +-
 packages/varlet-ui/src/radio-group/props.ts   |  42 +-
 packages/varlet-ui/src/radio/Radio.vue        | 202 ++---
 .../varlet-ui/src/radio/example/index.vue     |  26 +-
 packages/varlet-ui/src/radio/index.ts         |   2 +-
 packages/varlet-ui/src/radio/props.ts         |  92 +-
 packages/varlet-ui/src/rate/Rate.vue          | 148 ++--
 packages/varlet-ui/src/rate/props.ts          | 154 ++--
 .../varlet-ui/src/ripple/example/index.vue    |  16 +-
 packages/varlet-ui/src/ripple/index.ts        | 196 ++---
 packages/varlet-ui/src/select/Select.vue      | 450 +++++-----
 .../varlet-ui/src/select/example/index.vue    |  32 +-
 packages/varlet-ui/src/select/index.ts        |   2 +-
 packages/varlet-ui/src/select/props.ts        | 186 ++--
 packages/varlet-ui/src/skeleton/Skeleton.vue  |   4 +-
 .../varlet-ui/src/skeleton/example/index.vue  |  16 +-
 packages/varlet-ui/src/skeleton/index.ts      |   2 +-
 packages/varlet-ui/src/skeleton/props.ts      |  92 +-
 packages/varlet-ui/src/slider/Slider.vue      | 494 +++++------
 .../varlet-ui/src/slider/example/index.vue    |  72 +-
 packages/varlet-ui/src/slider/index.ts        |   2 +-
 packages/varlet-ui/src/slider/props.ts        | 178 ++--
 packages/varlet-ui/src/snackbar/Snackbar.vue  |  22 +-
 packages/varlet-ui/src/snackbar/core.vue      | 150 ++--
 .../varlet-ui/src/snackbar/example/index.vue  | 380 ++++-----
 packages/varlet-ui/src/snackbar/index.ts      | 282 +++---
 packages/varlet-ui/src/snackbar/props.ts      | 160 ++--
 packages/varlet-ui/src/sticky/Sticky.vue      | 168 ++--
 .../varlet-ui/src/sticky/example/index.vue    |  26 +-
 packages/varlet-ui/src/sticky/index.ts        |   2 +-
 packages/varlet-ui/src/sticky/props.ts        |  26 +-
 packages/varlet-ui/src/switch/Switch.vue      | 142 ++--
 .../varlet-ui/src/switch/example/index.vue    |  32 +-
 packages/varlet-ui/src/switch/index.ts        |   2 +-
 packages/varlet-ui/src/switch/props.ts        |  88 +-
 packages/varlet-ui/src/tab-item/TabItem.vue   |  72 +-
 .../varlet-ui/src/tab-item/example/index.vue  |   8 +-
 packages/varlet-ui/src/tab-item/index.ts      |   2 +-
 packages/varlet-ui/src/tab-item/props.ts      |   6 +-
 packages/varlet-ui/src/tab/Tab.vue            | 110 +--
 packages/varlet-ui/src/tab/example/index.vue  |   8 +-
 packages/varlet-ui/src/tab/index.ts           |   2 +-
 packages/varlet-ui/src/tab/props.ts           |  20 +-
 .../varlet-ui/src/tabs-items/TabsItems.vue    | 156 ++--
 .../src/tabs-items/example/index.vue          |   8 +-
 packages/varlet-ui/src/tabs-items/index.ts    |   2 +-
 packages/varlet-ui/src/tabs-items/props.ts    |  14 +-
 packages/varlet-ui/src/tabs/Tabs.vue          | 198 ++---
 packages/varlet-ui/src/tabs/example/index.vue | 210 ++---
 packages/varlet-ui/src/tabs/index.ts          |   2 +-
 packages/varlet-ui/src/tabs/props.ts          | 124 +--
 packages/varlet-ui/src/utils/components.ts    | 370 ++++----
 packages/varlet-ui/src/utils/elements.ts      |  90 +-
 packages/varlet-ui/src/utils/shared.ts        | 120 +--
 packages/varlet-ui/varlet.config.js           | 404 ++++-----
 160 files changed, 6101 insertions(+), 6124 deletions(-)

diff --git a/package.json b/package.json
index 3bbe1d15006..ce647611616 100644
--- a/package.json
+++ b/package.json
@@ -27,9 +27,9 @@
     }
   },
   "lint-staged": {
-    "*.{ts,tsx,js,vue,scss,less}": "prettier --write",
+    "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,scss}": "stylelint --fix"
+    "*.{vue,css}": "stylelint --fix"
   },
   "eslintConfig": {
     "root": true,
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
index 755c476b730..16767d77414 100644
--- a/packages/varlet-cli/site/mobile/App.vue
+++ b/packages/varlet-cli/site/mobile/App.vue
@@ -1,61 +1,61 @@
 <template>
-	<div>
-		<header>{{ componentName }}</header>
-		<div class="router-view__block">
-			<router-view />
-		</div>
-	</div>
+  <div>
+    <header>{{ componentName }}</header>
+    <div class="router-view__block">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 export default {
-	data() {
-		return {
-			componentName: '',
-		}
-	},
-	watch: {
-		$route(this: any, to: any) {
-			const index = to.path.lastIndexOf('/')
-			const componentName = to.path.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
-			this.componentName = componentName[0]?.toUpperCase() + componentName.slice(1)
-		},
-	},
+  data() {
+    return {
+      componentName: '',
+    }
+  },
+  watch: {
+    $route(this: any, to: any) {
+      const index = to.path.lastIndexOf('/')
+      const componentName = to.path.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
+      this.componentName = componentName[0]?.toUpperCase() + componentName.slice(1)
+    },
+  },
 }
 </script>
 
 <style>
 body {
-	margin: 0;
-	padding: 0;
-	background: white;
-	min-height: 100%;
-	font-family: '微软雅黑 Light', sans-serif;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  margin: 0;
+  padding: 0;
+  background: white;
+  min-height: 100%;
+  font-family: '微软雅黑 Light', sans-serif;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 ::-webkit-scrollbar {
-	display: none;
-	width: 0;
-	background: transparent;
+  display: none;
+  width: 0;
+  background: transparent;
 }
 
 header {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 56px;
-	background-color: #fff;
-	font-weight: 500;
-	font-size: 18px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  background-color: #fff;
+  font-weight: 500;
+  font-size: 18px;
 }
 
 .router-view__block {
-	padding: 0 15px 30px;
+  padding: 0 15px 30px;
 }
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 </style>
diff --git a/packages/varlet-cli/site/mobile/components/AppType.vue b/packages/varlet-cli/site/mobile/components/AppType.vue
index f7977d07c33..c45bd0dcc92 100644
--- a/packages/varlet-cli/site/mobile/components/AppType.vue
+++ b/packages/varlet-cli/site/mobile/components/AppType.vue
@@ -1,21 +1,21 @@
 <template>
-	<div class="app-type">
-		<slot />
-	</div>
+  <div class="app-type">
+    <slot />
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-	name: 'AppType',
+  name: 'AppType',
 })
 </script>
 
 <style lang="less">
 .app-type {
-	padding: 12px 0;
-	color: #888;
-	font-size: 14px;
+  padding: 12px 0;
+  color: #888;
+  font-size: 14px;
 }
 </style>
diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
index d47fd4d538e..207aa3d2c87 100644
--- a/packages/varlet-cli/site/mobile/main.ts
+++ b/packages/varlet-cli/site/mobile/main.ts
@@ -7,8 +7,8 @@ import AppType from './components/AppType.vue'
 import routes from './routes'
 
 const router = createRouter({
-	history: createWebHashHistory(),
-	routes,
+  history: createWebHashHistory(),
+  routes,
 })
 
 const app = createApp(App as any)
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
index a98a3a955ea..0db8420b23a 100644
--- a/packages/varlet-cli/site/pc/App.vue
+++ b/packages/varlet-cli/site/pc/App.vue
@@ -1,426 +1,416 @@
 <template>
-	<div class="varlet-site">
-		<div class="varlet-site-header">
-			<span class="varlet-site-header__logo">
-				<img :src="header.logo" alt="" />
-				<span>{{ title }}</span>
-			</span>
-			<span class="varlet-site-header__nav">
-				<a
-					target="_blank"
-					href="https://github.com/haoziqaq/varlet"
-					class="varlet-site-header__link"
-				>
-					<img src="https://b.yzcdn.cn/vant/logo/github.svg" />
-				</a>
-				<span
-					class="varlet-site-header__version varlet-site-header__cube"
-					@click="isHideVersion = !isHideVersion"
-				>
-					3.6.12
-					<span
-						:class="{
-							'varlet-site-header__version-pop': true,
-							'varlet-site-header__version-pop-hidden': isHideVersion,
-						}"
-					>
-						<span
-							class="varlet-site-header__version-pop-item"
-							v-for="version in versionList"
-						>
-							{{ version }}
-						</span>
-					</span>
-				</span>
-				<button @click="switchLanguage" class="varlet-site-header__cube">
-					{{ header.i18nButton[language] }}
-				</button>
-			</span>
-		</div>
-		<div class="varlet-site-content">
-			<div class="varlet-site-nav">
-				<p v-for="item in menu" class="varlet-site-nav__item">
-					<span v-if="item.isTitle">{{ item.text[language] }}</span>
-					<router-link :to="'/' + language + '/' + item.doc" v-else>
-						{{ item.text[language] }}
-					</router-link>
-				</p>
-			</div>
-			<router-view />
-			<div class="varlet-site-mobile">
-				<iframe :src="`./mobile.html#/${componentName}`"></iframe>
-			</div>
-		</div>
-	</div>
+  <div class="varlet-site">
+    <div class="varlet-site-header">
+      <span class="varlet-site-header__logo">
+        <img :src="header.logo" alt="" />
+        <span>{{ title }}</span>
+      </span>
+      <span class="varlet-site-header__nav">
+        <a target="_blank" href="https://github.com/haoziqaq/varlet" class="varlet-site-header__link">
+          <img src="https://b.yzcdn.cn/vant/logo/github.svg" />
+        </a>
+        <span class="varlet-site-header__version varlet-site-header__cube" @click="isHideVersion = !isHideVersion">
+          3.6.12
+          <span
+            :class="{
+              'varlet-site-header__version-pop': true,
+              'varlet-site-header__version-pop-hidden': isHideVersion,
+            }"
+          >
+            <span class="varlet-site-header__version-pop-item" v-for="version in versionList">
+              {{ version }}
+            </span>
+          </span>
+        </span>
+        <button @click="switchLanguage" class="varlet-site-header__cube">
+          {{ header.i18nButton[language] }}
+        </button>
+      </span>
+    </div>
+    <div class="varlet-site-content">
+      <div class="varlet-site-nav">
+        <p v-for="item in menu" class="varlet-site-nav__item">
+          <span v-if="item.isTitle">{{ item.text[language] }}</span>
+          <router-link :to="'/' + language + '/' + item.doc" v-else>
+            {{ item.text[language] }}
+          </router-link>
+        </p>
+      </div>
+      <router-view />
+      <div class="varlet-site-mobile">
+        <iframe :src="`./mobile.html#/${componentName}`"></iframe>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-	computed: {},
-	data() {
-		return {
-			menu: [],
-			language: '',
-			header: {},
-			componentName: 'button',
-			title: '',
-			versionList: ['2.10.14', '1.x', '3.x'],
-			isHideVersion: true,
-		}
-	},
-	methods: {
-		switchLanguage() {
-			this.language = this.language === 'zh_CN' ? 'en_US' : 'zh_CN'
-			const pathArr = this.$route.fullPath.split('/')
-			const componentName = pathArr[pathArr.length - 1]
-			this.$router.push(`/${this.language}/${componentName}`)
-		},
-	},
-	created() {
-		const _this: any = this
-		const { pc = {}, title } = _this.$config
-		const { description, header = {}, logo, menu = [], language } = pc
-		this.menu = menu
-		this.language = language
-		this.header = header
-		this.title = title
-	},
-	watch: {
-		$route(to, from) {
-			// todo 还需拿取对应组件名的数组进行判断
-			const index = to.path.lastIndexOf('/')
-			this.componentName = to.path.slice(index + 1)
-		},
-	},
+  computed: {},
+  data() {
+    return {
+      menu: [],
+      language: '',
+      header: {},
+      componentName: 'button',
+      title: '',
+      versionList: ['2.10.14', '1.x', '3.x'],
+      isHideVersion: true,
+    }
+  },
+  methods: {
+    switchLanguage() {
+      this.language = this.language === 'zh_CN' ? 'en_US' : 'zh_CN'
+      const pathArr = this.$route.fullPath.split('/')
+      const componentName = pathArr[pathArr.length - 1]
+      this.$router.push(`/${this.language}/${componentName}`)
+    },
+  },
+  created() {
+    const _this: any = this
+    const { pc = {}, title } = _this.$config
+    const { description, header = {}, logo, menu = [], language } = pc
+    this.menu = menu
+    this.language = language
+    this.header = header
+    this.title = title
+  },
+  watch: {
+    $route(to, from) {
+      // todo 还需拿取对应组件名的数组进行判断
+      const index = to.path.lastIndexOf('/')
+      this.componentName = to.path.slice(index + 1)
+    },
+  },
 })
 </script>
 
 <style lang="less">
 body {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 iframe {
-	display: block;
-	width: 100%;
-	height: 100%;
-	border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
 .varlet {
-	&-site {
-		&-header {
-			display: flex;
-			align-items: center;
-			background-color: #001938;
-			color: white;
-			height: 60px;
-			padding: 0 30px;
-			justify-content: space-between;
-			user-select: none;
-
-			&__logo {
-				display: flex;
-				align-items: center;
-
-				img {
-					width: 24px;
-					margin-right: 10px;
-				}
-
-				span {
-					font-size: 22px;
-				}
-			}
-
-			&__nav {
-				display: flex;
-			}
-
-			&__link {
-				img {
-					display: block;
-					width: 26px;
-					height: 26px;
-					margin-right: 24px;
-					transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-					&:hover {
-						transform: scale(1.2);
-					}
-				}
-			}
-
-			&__cube {
-				display: inline-block;
-				padding: 0 12px;
-				color: #fff;
-				font-size: 14px;
-				line-height: 24px;
-				text-align: center;
-				border: 1px solid rgba(255, 255, 255, 0.7);
-				border-radius: 20px;
-				outline: none;
-				cursor: pointer;
-				background: transparent;
-				transition: 0.3s ease-in-out;
-			}
-
-			&__version {
-				margin-right: 24px;
-				position: relative;
-				padding-right: 20px;
-
-				&::after {
-					position: absolute;
-					top: 7px;
-					right: 7px;
-					width: 5px;
-					height: 5px;
-					color: rgba(255, 255, 255, 0.9);
-					border: 1px solid;
-					border-color: transparent transparent currentColor currentColor;
-					transform: rotate(-45deg);
-					content: '';
-				}
-			}
-
-			&__version-pop {
-				position: absolute;
-				top: 30px;
-				right: 0;
-				left: 0;
-				z-index: 99;
-				color: #333;
-				line-height: 36px;
-				text-align: left;
-				background-color: #fff;
-				border-radius: 12px;
-				box-shadow: 0 4px 12px #ebedf0;
-				transform-origin: top;
-				transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-			}
-
-			&__version-pop-hidden {
-				transform: scaleY(0);
-				opacity: 0;
-			}
-
-			&__version-pop-item {
-				padding-left: 12px;
-				display: inline-block;
-				width: 100%;
-				transition: 0.2s;
-
-				&:hover {
-					color: #1989fa;
-				}
-			}
-		}
-
-		&-content {
-			display: flex;
-			background-color: #f7f8fa;
-		}
-
-		&-doc {
-			flex: 1;
-			margin: 30px;
-
-			a {
-				margin: 0 1px;
-				color: #1989fa;
-				text-decoration: none;
-			}
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: #323233;
-				font-weight: normal;
-				line-height: 1.5;
-			}
-
-			h1 {
-				margin: 0 0 30px;
-				font-size: 30px;
-				cursor: default;
-			}
-
-			h2 {
-				margin: 45px 0 20px;
-				font-size: 25px;
-			}
-
-			h3 {
-				margin-bottom: 16px;
-				font-weight: 600;
-				font-size: 18px;
-			}
-
-			p {
-				color: #34495e;
-				font-size: 15px;
-				line-height: 26px;
-			}
-
-			pre {
-				margin: 20px 0 0;
-			}
-
-			code {
-				position: relative;
-				display: block;
-				padding: 16px;
-				overflow-x: auto;
-				color: #58727e;
-				font-weight: 400;
-				font-size: 14px;
-				font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-				line-height: 26px;
-				white-space: pre-wrap;
-				word-wrap: break-word;
-				background-color: #fafafa;
-				border-radius: 16px;
-			}
-
-			p code,
-			li code,
-			table code {
-				display: inline;
-				margin: 0 2px;
-				padding: 2px 5px;
-				font-size: 14px;
-				font-family: inherit;
-				word-break: keep-all;
-				background-color: #f7f8fa;
-				border-radius: 4px;
-				-webkit-font-smoothing: antialiased;
-			}
-
-			table {
-				width: 100%;
-				margin-top: 12px;
-				color: #34495e;
-				font-size: 14px;
-				line-height: 1.5;
-				border-collapse: collapse;
-
-				th {
-					padding: 8px 10px;
-					font-weight: 600;
-					text-align: left;
-
-					&:first-child {
-						padding-left: 0;
-					}
-				}
-
-				td {
-					padding: 8px;
-					border-top: 1px solid #f1f4f8;
-
-					code {
-						white-space: nowrap;
-					}
-
-					&:first-child {
-						padding-left: 0;
-
-						code {
-							margin: 0;
-							padding: 2px 6px;
-							color: #1989fa;
-							font-weight: 600;
-							font-size: 11px;
-							background-color: rgba(25, 137, 250, 0.1);
-							border-radius: 20px;
-						}
-					}
-				}
-
-				em {
-					color: #4fc08d;
-					font-size: 14px;
-					font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-					font-style: normal;
-				}
-			}
-
-			.card {
-				margin-bottom: 24px;
-				padding: 24px;
-				background-color: #fff;
-				border-radius: 12px;
-				box-shadow: 0 8px 12px #ebedf0;
-			}
-		}
-
-		&-nav {
-			padding: 10px 0;
-			flex: 0 0 220px;
-			position: sticky;
-			height: 100vh;
-			top: 0;
-			left: 0;
-			z-index: 1;
-			overflow-y: scroll;
-			background-color: #fff;
-			box-shadow: 0 8px 12px #ebedf0;
-
-			&__item {
-				margin: 0;
-
-				a,
-				span {
-					display: inline-block;
-					margin: 0;
-					padding: 8px 0 8px 30px;
-					line-height: 28px;
-				}
-
-				span {
-					font-weight: 700;
-					font-size: 16px;
-				}
-
-				a {
-					text-decoration: none;
-					font-size: 14px;
-					color: #455a64;
-					transition: color 0.2s;
-
-					&:hover {
-						color: blueviolet;
-					}
-				}
-
-				.router-link-active {
-					color: blueviolet;
-				}
-			}
-		}
-
-		&-mobile {
-			flex: 0 0 360px;
-			top: 30px;
-			position: sticky;
-			margin-top: 30px;
-			margin-right: 30px;
-			height: 85vh;
-			z-index: 1;
-			box-sizing: border-box;
-			overflow: hidden;
-			background: #fafafa;
-			border-radius: 12px;
-			box-shadow: #ebedf0 0 4px 12px;
-		}
-	}
+  &-site {
+    &-header {
+      display: flex;
+      align-items: center;
+      background-color: #001938;
+      color: white;
+      height: 60px;
+      padding: 0 30px;
+      justify-content: space-between;
+      user-select: none;
+
+      &__logo {
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 24px;
+          margin-right: 10px;
+        }
+
+        span {
+          font-size: 22px;
+        }
+      }
+
+      &__nav {
+        display: flex;
+      }
+
+      &__link {
+        img {
+          display: block;
+          width: 26px;
+          height: 26px;
+          margin-right: 24px;
+          transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+          &:hover {
+            transform: scale(1.2);
+          }
+        }
+      }
+
+      &__cube {
+        display: inline-block;
+        padding: 0 12px;
+        color: #fff;
+        font-size: 14px;
+        line-height: 24px;
+        text-align: center;
+        border: 1px solid rgba(255, 255, 255, 0.7);
+        border-radius: 20px;
+        outline: none;
+        cursor: pointer;
+        background: transparent;
+        transition: 0.3s ease-in-out;
+      }
+
+      &__version {
+        margin-right: 24px;
+        position: relative;
+        padding-right: 20px;
+
+        &::after {
+          position: absolute;
+          top: 7px;
+          right: 7px;
+          width: 5px;
+          height: 5px;
+          color: rgba(255, 255, 255, 0.9);
+          border: 1px solid;
+          border-color: transparent transparent currentColor currentColor;
+          transform: rotate(-45deg);
+          content: '';
+        }
+      }
+
+      &__version-pop {
+        position: absolute;
+        top: 30px;
+        right: 0;
+        left: 0;
+        z-index: 99;
+        color: #333;
+        line-height: 36px;
+        text-align: left;
+        background-color: #fff;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px #ebedf0;
+        transform-origin: top;
+        transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+
+      &__version-pop-hidden {
+        transform: scaleY(0);
+        opacity: 0;
+      }
+
+      &__version-pop-item {
+        padding-left: 12px;
+        display: inline-block;
+        width: 100%;
+        transition: 0.2s;
+
+        &:hover {
+          color: #1989fa;
+        }
+      }
+    }
+
+    &-content {
+      display: flex;
+      background-color: #f7f8fa;
+    }
+
+    &-doc {
+      flex: 1;
+      margin: 30px;
+
+      a {
+        margin: 0 1px;
+        color: #1989fa;
+        text-decoration: none;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: #323233;
+        font-weight: normal;
+        line-height: 1.5;
+      }
+
+      h1 {
+        margin: 0 0 30px;
+        font-size: 30px;
+        cursor: default;
+      }
+
+      h2 {
+        margin: 45px 0 20px;
+        font-size: 25px;
+      }
+
+      h3 {
+        margin-bottom: 16px;
+        font-weight: 600;
+        font-size: 18px;
+      }
+
+      p {
+        color: #34495e;
+        font-size: 15px;
+        line-height: 26px;
+      }
+
+      pre {
+        margin: 20px 0 0;
+      }
+
+      code {
+        position: relative;
+        display: block;
+        padding: 16px;
+        overflow-x: auto;
+        color: #58727e;
+        font-weight: 400;
+        font-size: 14px;
+        font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+        line-height: 26px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        background-color: #fafafa;
+        border-radius: 16px;
+      }
+
+      p code,
+      li code,
+      table code {
+        display: inline;
+        margin: 0 2px;
+        padding: 2px 5px;
+        font-size: 14px;
+        font-family: inherit;
+        word-break: keep-all;
+        background-color: #f7f8fa;
+        border-radius: 4px;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      table {
+        width: 100%;
+        margin-top: 12px;
+        color: #34495e;
+        font-size: 14px;
+        line-height: 1.5;
+        border-collapse: collapse;
+
+        th {
+          padding: 8px 10px;
+          font-weight: 600;
+          text-align: left;
+
+          &:first-child {
+            padding-left: 0;
+          }
+        }
+
+        td {
+          padding: 8px;
+          border-top: 1px solid #f1f4f8;
+
+          code {
+            white-space: nowrap;
+          }
+
+          &:first-child {
+            padding-left: 0;
+
+            code {
+              margin: 0;
+              padding: 2px 6px;
+              color: #1989fa;
+              font-weight: 600;
+              font-size: 11px;
+              background-color: rgba(25, 137, 250, 0.1);
+              border-radius: 20px;
+            }
+          }
+        }
+
+        em {
+          color: #4fc08d;
+          font-size: 14px;
+          font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+          font-style: normal;
+        }
+      }
+
+      .card {
+        margin-bottom: 24px;
+        padding: 24px;
+        background-color: #fff;
+        border-radius: 12px;
+        box-shadow: 0 8px 12px #ebedf0;
+      }
+    }
+
+    &-nav {
+      padding: 10px 0;
+      flex: 0 0 220px;
+      position: sticky;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      overflow-y: scroll;
+      background-color: #fff;
+      box-shadow: 0 8px 12px #ebedf0;
+
+      &__item {
+        margin: 0;
+
+        a,
+        span {
+          display: inline-block;
+          margin: 0;
+          padding: 8px 0 8px 30px;
+          line-height: 28px;
+        }
+
+        span {
+          font-weight: 700;
+          font-size: 16px;
+        }
+
+        a {
+          text-decoration: none;
+          font-size: 14px;
+          color: #455a64;
+          transition: color 0.2s;
+
+          &:hover {
+            color: blueviolet;
+          }
+        }
+
+        .router-link-active {
+          color: blueviolet;
+        }
+      }
+    }
+
+    &-mobile {
+      flex: 0 0 360px;
+      top: 30px;
+      position: sticky;
+      margin-top: 30px;
+      margin-right: 30px;
+      height: 85vh;
+      z-index: 1;
+      box-sizing: border-box;
+      overflow: hidden;
+      background: #fafafa;
+      border-radius: 12px;
+      box-shadow: #ebedf0 0 4px 12px;
+    }
+  }
 }
 </style>
diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
index f08f6590f5a..f9d903191e4 100644
--- a/packages/varlet-cli/site/pc/main.ts
+++ b/packages/varlet-cli/site/pc/main.ts
@@ -8,12 +8,12 @@ import config from '@config'
 const defaultConfig = require('../../varlet.default.config.js')
 
 const mergeConfig = {
-	...defaultConfig,
-	...config,
+  ...defaultConfig,
+  ...config,
 }
 const router = createRouter({
-	history: createWebHashHistory(),
-	routes,
+  history: createWebHashHistory(),
+  routes,
 })
 
 const app = createApp(App as any)
diff --git a/packages/varlet-cli/src/commands/build.ts b/packages/varlet-cli/src/commands/build.ts
index 29099e7fc74..396df53e325 100644
--- a/packages/varlet-cli/src/commands/build.ts
+++ b/packages/varlet-cli/src/commands/build.ts
@@ -7,16 +7,16 @@ import { VARLET_CONFIG } from '../shared/constant'
 import { ensureConfigFile } from '../shared/fsUtils'
 
 export async function build() {
-	setProd()
+  setProd()
 
-	ensureConfigFile(VARLET_CONFIG)
+  ensureConfigFile(VARLET_CONFIG)
 
-	await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes()])
+  await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes()])
 
-	const config = getBuildConfig()
+  const config = getBuildConfig()
 
-	webpack(config, (err, stats: Stats) => {
-		err && logger.error(err.toString())
-		stats?.hasErrors() && logger.error(stats)
-	})
+  webpack(config, (err, stats: Stats) => {
+    err && logger.error(err.toString())
+    stats?.hasErrors() && logger.error(stats)
+  })
 }
diff --git a/packages/varlet-cli/src/commands/compile.ts b/packages/varlet-cli/src/commands/compile.ts
index 2b614ae36c8..782156e6c9b 100644
--- a/packages/varlet-cli/src/commands/compile.ts
+++ b/packages/varlet-cli/src/commands/compile.ts
@@ -9,58 +9,58 @@ import { parse } from 'path'
 import { compileLibraryEntry } from '../compiler/compileScript'
 
 export function removeDir() {
-	return Promise.all([remove(ES_DIR), remove(CJS_DIR), remove(UMD_DIR)])
+  return Promise.all([remove(ES_DIR), remove(CJS_DIR), remove(UMD_DIR)])
 }
 
 export async function recompile(changedRawPath: string) {
-	const changedESPath = changedRawPath.replace('src', 'es')
-	const changedCjsPath = changedRawPath.replace('src', 'cjs')
+  const changedESPath = changedRawPath.replace('src', 'es')
+  const changedCjsPath = changedRawPath.replace('src', 'cjs')
 
-	const { ext, dir: changedRawDir } = parse(changedRawPath)
-	const { dir: changedEsDir } = parse(changedESPath)
-	const { dir: changedCjsDir } = parse(changedCjsPath)
+  const { ext, dir: changedRawDir } = parse(changedRawPath)
+  const { dir: changedEsDir } = parse(changedESPath)
+  const { dir: changedCjsDir } = parse(changedCjsPath)
 
-	if (ext === '.vue') {
-		// style deps collection
-		await Promise.all([remove(changedEsDir), remove(changedCjsDir)])
-		await Promise.all([copy(changedRawDir, changedEsDir), copy(changedRawDir, changedCjsDir)])
-		await Promise.all([compileDir(changedEsDir), compileDir(changedCjsDir, 'cjs')])
-	} else {
-		await Promise.all([copy(changedRawDir, changedESPath), copy(changedRawDir, changedCjsPath)])
-		await Promise.all([compileFile(changedESPath), compileFile(changedCjsPath, 'cjs')])
-	}
+  if (ext === '.vue') {
+    // style deps collection
+    await Promise.all([remove(changedEsDir), remove(changedCjsDir)])
+    await Promise.all([copy(changedRawDir, changedEsDir), copy(changedRawDir, changedCjsDir)])
+    await Promise.all([compileDir(changedEsDir), compileDir(changedCjsDir, 'cjs')])
+  } else {
+    await Promise.all([copy(changedRawDir, changedESPath), copy(changedRawDir, changedCjsPath)])
+    await Promise.all([compileFile(changedESPath), compileFile(changedCjsPath, 'cjs')])
+  }
 
-	const [componentNames, exportDirNames]: Array<Array<string>> = await Promise.all([
-		getComponentNames(),
-		getExportDirNames(),
-	])
-	await Promise.all([
-		compileLibraryEntry(ES_DIR, componentNames, exportDirNames),
-		compileLibraryEntry(CJS_DIR, componentNames, exportDirNames, 'cjs'),
-	])
+  const [componentNames, exportDirNames]: Array<Array<string>> = await Promise.all([
+    getComponentNames(),
+    getExportDirNames(),
+  ])
+  await Promise.all([
+    compileLibraryEntry(ES_DIR, componentNames, exportDirNames),
+    compileLibraryEntry(CJS_DIR, componentNames, exportDirNames, 'cjs'),
+  ])
 }
 
 export function handleFilesChange() {
-	watch(SRC_DIR).on('change', async (path: string) => {
-		if (isExampleDir(path) || isTestsDir(path)) {
-			return
-		}
-		logger.info(`${path} has changed`)
-		await recompile(path)
-	})
+  watch(SRC_DIR).on('change', async (path: string) => {
+    if (isExampleDir(path) || isTestsDir(path)) {
+      return
+    }
+    logger.info(`${path} has changed`)
+    await recompile(path)
+  })
 }
 
 export async function compile(cmd: { watch: boolean }) {
-	const s = ora('Compile start for ES & CJS & UMD').start()
+  const s = ora('Compile start for ES & CJS & UMD').start()
 
-	await removeDir()
-	await Promise.all([compileModule(), compileModule('cjs')])
-	await compileModule('umd')
+  await removeDir()
+  await Promise.all([compileModule(), compileModule('cjs')])
+  await compileModule('umd')
 
-	s.succeed('Compile success!')
+  s.succeed('Compile success!')
 
-	if (cmd.watch) {
-		handleFilesChange()
-		logger.info('i will watching your files change')
-	}
+  if (cmd.watch) {
+    handleFilesChange()
+    logger.info('i will watching your files change')
+  }
 }
diff --git a/packages/varlet-cli/src/commands/create.ts b/packages/varlet-cli/src/commands/create.ts
index 61eda593cb0..9e44a88190a 100644
--- a/packages/varlet-cli/src/commands/create.ts
+++ b/packages/varlet-cli/src/commands/create.ts
@@ -6,9 +6,9 @@ import { DOCS_DIR_NAME, EXAMPLE_DIR_NAME, SRC_DIR, TESTS_DIR_NAME } from '../sha
 import { getVarletConfig } from '../config/varlet.config'
 
 export async function create(name: string) {
-	const varletConfig = getVarletConfig()
-	const namespace = accessProperty(varletConfig, 'namespace')
-	const vueTemplate = `\
+  const varletConfig = getVarletConfig()
+  const namespace = accessProperty(varletConfig, 'namespace')
+  const vueTemplate = `\
 <template>
   <div class="${namespace}-${name}"></div>
 </template>
@@ -27,7 +27,7 @@ export default defineComponent({
 }
 </style>
 `
-	const indexTemplate = `\
+  const indexTemplate = `\
 import { App } from 'vue'
 import ${bigCamelize(name)} from './${bigCamelize(name)}.vue'
 
@@ -37,7 +37,7 @@ ${bigCamelize(name)}.install = function(app: App) {
 
 export default ${bigCamelize(name)}
 `
-	const testsTemplate = `\
+  const testsTemplate = `\
 const ${bigCamelize(name)} = require('../../../cjs/${name}').default
 const { render } = require('@testing-library/vue')
 
@@ -46,7 +46,7 @@ test('test ${camelize(name)}', async () => {
   console.log(wrapper)
 })
 `
-	const exampleTemplate = `\
+  const exampleTemplate = `\
 <template>
   <${namespace}-${name}/>
 </template>
@@ -69,24 +69,24 @@ export default defineComponent({
 }
 </style>
 `
-	const componentDir = resolve(SRC_DIR, name)
-	const testsDir = resolve(SRC_DIR, name, TESTS_DIR_NAME)
-	const exampleDir = resolve(SRC_DIR, name, EXAMPLE_DIR_NAME)
-	const docsDir = resolve(SRC_DIR, name, DOCS_DIR_NAME)
+  const componentDir = resolve(SRC_DIR, name)
+  const testsDir = resolve(SRC_DIR, name, TESTS_DIR_NAME)
+  const exampleDir = resolve(SRC_DIR, name, EXAMPLE_DIR_NAME)
+  const docsDir = resolve(SRC_DIR, name, DOCS_DIR_NAME)
 
-	if (pathExistsSync(componentDir)) {
-		logger.error('component directory is existed')
-		return
-	}
-	await Promise.all([mkdirs(componentDir), mkdirs(testsDir), mkdirs(exampleDir), mkdirs(docsDir)])
-	await Promise.all([
-		writeFile(resolve(componentDir, `${bigCamelize(name)}.vue`), vueTemplate),
-		writeFile(resolve(componentDir, 'index.ts'), indexTemplate),
-		writeFile(resolve(testsDir, 'index.spec.js'), testsTemplate),
-		writeFile(resolve(exampleDir, 'index.vue'), exampleTemplate),
-		writeFile(resolve(docsDir, 'zh_CN.md'), ''),
-		writeFile(resolve(docsDir, 'en_US.md'), ''),
-	])
+  if (pathExistsSync(componentDir)) {
+    logger.error('component directory is existed')
+    return
+  }
+  await Promise.all([mkdirs(componentDir), mkdirs(testsDir), mkdirs(exampleDir), mkdirs(docsDir)])
+  await Promise.all([
+    writeFile(resolve(componentDir, `${bigCamelize(name)}.vue`), vueTemplate),
+    writeFile(resolve(componentDir, 'index.ts'), indexTemplate),
+    writeFile(resolve(testsDir, 'index.spec.js'), testsTemplate),
+    writeFile(resolve(exampleDir, 'index.vue'), exampleTemplate),
+    writeFile(resolve(docsDir, 'zh_CN.md'), ''),
+    writeFile(resolve(docsDir, 'en_US.md'), ''),
+  ])
 
-	logger.success('create success!')
+  logger.success('create success!')
 }
diff --git a/packages/varlet-cli/src/commands/dev.ts b/packages/varlet-cli/src/commands/dev.ts
index e7411bbe5de..49292ce60bd 100644
--- a/packages/varlet-cli/src/commands/dev.ts
+++ b/packages/varlet-cli/src/commands/dev.ts
@@ -10,42 +10,42 @@ import { SRC_DIR, VARLET_CONFIG } from '../shared/constant'
 import { ensureConfigFile } from '../shared/fsUtils'
 
 export function runDevServer(port: number, config: any) {
-	const { host } = config.devServer
-	config.devServer.port = port
-	const server = new WebpackDevServer(webpack(config), config.devServer)
+  const { host } = config.devServer
+  config.devServer.port = port
+  const server = new WebpackDevServer(webpack(config), config.devServer)
 
-	;(server as any).showStatus = function () {}
+  ;(server as any).showStatus = function () {}
 
-	server.listen(port, host, (err?: Error) => {
-		if (err) {
-			logger.error(err.toString())
-			return
-		}
+  server.listen(port, host, (err?: Error) => {
+    if (err) {
+      logger.error(err.toString())
+      return
+    }
 
-		logger.success(`Server running at http://${host}:${port}`)
-	})
+    logger.success(`Server running at http://${host}:${port}`)
+  })
 }
 
 export async function dev() {
-	setDev()
-
-	ensureConfigFile(VARLET_CONFIG)
-	ensureDirSync(SRC_DIR)
-
-	await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes()])
-
-	const config = getDevConfig()
-	const { port } = config.devServer
-	getPort(
-		{
-			port,
-		},
-		(err: Error, port: number) => {
-			if (err) {
-				logger.error(err.toString())
-				return
-			}
-			runDevServer(port, config)
-		}
-	)
+  setDev()
+
+  ensureConfigFile(VARLET_CONFIG)
+  ensureDirSync(SRC_DIR)
+
+  await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes()])
+
+  const config = getDevConfig()
+  const { port } = config.devServer
+  getPort(
+    {
+      port,
+    },
+    (err: Error, port: number) => {
+      if (err) {
+        logger.error(err.toString())
+        return
+      }
+      runDevServer(port, config)
+    }
+  )
 }
diff --git a/packages/varlet-cli/src/compiler/compileModule.ts b/packages/varlet-cli/src/compiler/compileModule.ts
index 54b95d4a52a..27e97dc759e 100644
--- a/packages/varlet-cli/src/compiler/compileModule.ts
+++ b/packages/varlet-cli/src/compiler/compileModule.ts
@@ -11,67 +11,67 @@ import webpack, { Stats } from 'webpack'
 import logger from '../shared/logger'
 
 export function compileUMD() {
-	return new Promise<void>((resolve, reject) => {
-		setProd()
-		const config = getUmdConfig()
+  return new Promise<void>((resolve, reject) => {
+    setProd()
+    const config = getUmdConfig()
 
-		webpack(config, (err, stats: Stats) => {
-			if (err) {
-				logger.error(err.toString())
-				reject()
-			}
-			if (stats?.hasErrors()) {
-				logger.error(stats)
-				reject()
-			}
-			if (!err && !stats?.hasErrors()) {
-				resolve()
-			}
-		})
-	})
+    webpack(config, (err, stats: Stats) => {
+      if (err) {
+        logger.error(err.toString())
+        reject()
+      }
+      if (stats?.hasErrors()) {
+        logger.error(stats)
+        reject()
+      }
+      if (!err && !stats?.hasErrors()) {
+        resolve()
+      }
+    })
+  })
 }
 
 export async function compileDir(dir: string, modules: string | boolean = false) {
-	const dirs = await readdir(dir)
+  const dirs = await readdir(dir)
 
-	await Promise.all(
-		dirs.map((filename) => {
-			const filePath = resolve(dir, filename)
+  await Promise.all(
+    dirs.map((filename) => {
+      const filePath = resolve(dir, filename)
 
-			;[TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes(filename) && removeSync(filePath)
+      ;[TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes(filename) && removeSync(filePath)
 
-			return compileFile(filePath, modules)
-		})
-	)
+      return compileFile(filePath, modules)
+    })
+  )
 }
 
 export async function compileFile(path: string, modules: string | boolean = false) {
-	isSFC(path) && (await compileSFC(path, modules))
-	isScript(path) && (await compileScriptFile(path, modules))
-	isLess(path) && (await compileLess(path))
-	isDir(path) && (await compileDir(path))
+  isSFC(path) && (await compileSFC(path, modules))
+  isScript(path) && (await compileScriptFile(path, modules))
+  isLess(path) && (await compileLess(path))
+  isDir(path) && (await compileDir(path))
 }
 
 export async function compileModule(modules: string | boolean = false) {
-	if (modules === 'umd') {
-		await compileUMD()
-		return
-	}
+  if (modules === 'umd') {
+    await compileUMD()
+    return
+  }
 
-	const MODULE_DIR: string = modules === 'cjs' ? CJS_DIR : ES_DIR
-	await copy(SRC_DIR, MODULE_DIR)
-	const moduleDir: string[] = await readdir(MODULE_DIR)
+  const MODULE_DIR: string = modules === 'cjs' ? CJS_DIR : ES_DIR
+  await copy(SRC_DIR, MODULE_DIR)
+  const moduleDir: string[] = await readdir(MODULE_DIR)
 
-	await Promise.all(
-		moduleDir.map((filename: string) => {
-			const path: string = resolve(MODULE_DIR, filename)
+  await Promise.all(
+    moduleDir.map((filename: string) => {
+      const path: string = resolve(MODULE_DIR, filename)
 
-			// cover babel-import-plugin
-			isDir(path) && ensureFileSync(resolve(path, './style/index.js'))
+      // cover babel-import-plugin
+      isDir(path) && ensureFileSync(resolve(path, './style/index.js'))
 
-			return isDir(path) ? compileDir(path, modules) : null
-		})
-	)
+      return isDir(path) ? compileDir(path, modules) : null
+    })
+  )
 
-	await compileLibraryEntry(MODULE_DIR, await getComponentNames(), await getExportDirNames(), modules)
+  await compileLibraryEntry(MODULE_DIR, await getComponentNames(), await getExportDirNames(), modules)
 }
diff --git a/packages/varlet-cli/src/compiler/compileRoutes.ts b/packages/varlet-cli/src/compiler/compileRoutes.ts
index 7bf1b0ee5e1..e72c9008a39 100644
--- a/packages/varlet-cli/src/compiler/compileRoutes.ts
+++ b/packages/varlet-cli/src/compiler/compileRoutes.ts
@@ -1,87 +1,87 @@
 import slash from 'slash'
 import {
-	DOCS_DIR_NAME,
-	EXAMPLE_DIR_INDEX,
-	EXAMPLE_DIR_NAME,
-	SITE_MOBILE_ROUTES,
-	SITE_PC_ROUTES,
-	SRC_DIR,
+  DOCS_DIR_NAME,
+  EXAMPLE_DIR_INDEX,
+  EXAMPLE_DIR_NAME,
+  SITE_MOBILE_ROUTES,
+  SITE_PC_ROUTES,
+  SRC_DIR,
 } from '../shared/constant'
 import { pathExistsSync, readdir, readdirSync, writeFile } from 'fs-extra'
 import { resolve } from 'path'
 import { isDir } from '../shared/fsUtils'
 
 interface I18MDPath {
-	[key: string]: string[]
+  [key: string]: string[]
 }
 
 export function resolveMobileSiteRoutePath(exampleComponentPath: string): string {
-	const componentName: string = exampleComponentPath.replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '').replace(/.*\//g, '')
+  const componentName: string = exampleComponentPath.replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '').replace(/.*\//g, '')
 
-	return `/${componentName}`
+  return `/${componentName}`
 }
 
 export function resolvePcSiteRoutePath(mdPath: string, componentName: string): string {
-	const language = mdPath.split('/').slice(-1)[0].split('.')[0]
-	return `/${language}/${componentName}`
+  const language = mdPath.split('/').slice(-1)[0].split('.')[0]
+  return `/${language}/${componentName}`
 }
 
 export async function findExampleComponentPaths(): Promise<string[]> {
-	const srcDir: string[] = await readdir(SRC_DIR)
-	return srcDir
-		.filter((filename: string) => pathExistsSync(resolve(SRC_DIR, filename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX)))
-		.map((validFilename: string) => slash(resolve(SRC_DIR, validFilename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX)))
+  const srcDir: string[] = await readdir(SRC_DIR)
+  return srcDir
+    .filter((filename: string) => pathExistsSync(resolve(SRC_DIR, filename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX)))
+    .map((validFilename: string) => slash(resolve(SRC_DIR, validFilename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX)))
 }
 
 export async function findDocsMDPaths(): Promise<I18MDPath> {
-	const srcDir: string[] = await readdir(SRC_DIR)
-	return srcDir
-		.filter((filename: string) => isDir(resolve(SRC_DIR, filename)))
-		.reduce((i18MdPath: I18MDPath, componentName: string) => {
-			const docsPath = resolve(SRC_DIR, componentName, DOCS_DIR_NAME)
-			isDir(docsPath) &&
-				(i18MdPath[componentName] = readdirSync(docsPath).map((filename: string) => slash(resolve(docsPath, filename))))
-			return i18MdPath
-		}, {})
+  const srcDir: string[] = await readdir(SRC_DIR)
+  return srcDir
+    .filter((filename: string) => isDir(resolve(SRC_DIR, filename)))
+    .reduce((i18MdPath: I18MDPath, componentName: string) => {
+      const docsPath = resolve(SRC_DIR, componentName, DOCS_DIR_NAME)
+      isDir(docsPath) &&
+        (i18MdPath[componentName] = readdirSync(docsPath).map((filename: string) => slash(resolve(docsPath, filename))))
+      return i18MdPath
+    }, {})
 }
 
 export async function buildMobileSiteRoutes() {
-	const exampleComponentPaths: string[] = await findExampleComponentPaths()
-	const routes = exampleComponentPaths.map(
-		(exampleComponentPath: string) => `
+  const exampleComponentPaths: string[] = await findExampleComponentPaths()
+  const routes = exampleComponentPaths.map(
+    (exampleComponentPath: string) => `
   {
     path: '${resolveMobileSiteRoutePath(exampleComponentPath)}',
     component: () => import('${exampleComponentPath}')
   }\
 `
-	)
+  )
 
-	await writeFile(
-		SITE_MOBILE_ROUTES,
-		`export default [\
+  await writeFile(
+    SITE_MOBILE_ROUTES,
+    `export default [\
   ${routes.join(',')}
 ]`
-	)
+  )
 }
 
 export async function buildPcSiteRoutes() {
-	const i18MdPath: I18MDPath = await findDocsMDPaths()
+  const i18MdPath: I18MDPath = await findDocsMDPaths()
 
-	const routes = Object.entries(i18MdPath).map(([componentName, mdPaths]) => {
-		return mdPaths.map((mdPath) => {
-			return `
+  const routes = Object.entries(i18MdPath).map(([componentName, mdPaths]) => {
+    return mdPaths.map((mdPath) => {
+      return `
   {
     path: '${resolvePcSiteRoutePath(mdPath, componentName)}',
     component: () => import('${mdPath}')
   }\
 `
-		})
-	})
+    })
+  })
 
-	await writeFile(
-		SITE_PC_ROUTES,
-		`export default [\
+  await writeFile(
+    SITE_PC_ROUTES,
+    `export default [\
   ${routes.join(',')}
 ]`
-	)
+  )
 }
diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts
index 22ccf96d781..c609c252d25 100644
--- a/packages/varlet-cli/src/compiler/compileScript.ts
+++ b/packages/varlet-cli/src/compiler/compileScript.ts
@@ -10,66 +10,66 @@ export const IMPORT_TS_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.
 export const REQUIRE_TS_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\.{1,2}\/.+\.)ts(\s*['"`]\))(?!\s*['"`])/g
 
 export function replaceVueExt(script: string) {
-	const replacer = (_: any, p1: string, p2: string): string => {
-		return `${p1}.js${p2}`
-	}
-	return script.replace(IMPORT_VUE_PATH_RE, replacer).replace(REQUIRE_VUE_PATH_RE, replacer)
+  const replacer = (_: any, p1: string, p2: string): string => {
+    return `${p1}.js${p2}`
+  }
+  return script.replace(IMPORT_VUE_PATH_RE, replacer).replace(REQUIRE_VUE_PATH_RE, replacer)
 }
 
 export function replaceTSExt(script: string) {
-	const replacer = (_: any, p1: string, p2: string): string => {
-		return `${p1}js${p2}`
-	}
-	return script.replace(IMPORT_TS_PATH_RE, replacer).replace(REQUIRE_TS_PATH_RE, replacer)
+  const replacer = (_: any, p1: string, p2: string): string => {
+    return `${p1}js${p2}`
+  }
+  return script.replace(IMPORT_TS_PATH_RE, replacer).replace(REQUIRE_TS_PATH_RE, replacer)
 }
 
 export async function compileScript(script: string, path: string, modules: string | boolean = false) {
-	let { code } = (await transformAsync(script, {
-		filename: replaceExt(path, '.ts'),
-		presets: [
-			[
-				require('@babel/preset-env'),
-				{
-					loose: true,
-					modules,
-				},
-			],
-			require('@babel/preset-typescript'),
-		],
-		plugins: [require('@babel/plugin-transform-runtime')],
-	})) as BabelFileResult
-	code = replaceStyleExt(code as string)
-	code = replaceVueExt(code as string)
-	code = replaceTSExt(code as string)
-	removeSync(path)
-	writeFileSync(replaceExt(path, '.js'), code, 'utf8')
+  let { code } = (await transformAsync(script, {
+    filename: replaceExt(path, '.ts'),
+    presets: [
+      [
+        require('@babel/preset-env'),
+        {
+          loose: true,
+          modules,
+        },
+      ],
+      require('@babel/preset-typescript'),
+    ],
+    plugins: [require('@babel/plugin-transform-runtime')],
+  })) as BabelFileResult
+  code = replaceStyleExt(code as string)
+  code = replaceVueExt(code as string)
+  code = replaceTSExt(code as string)
+  removeSync(path)
+  writeFileSync(replaceExt(path, '.js'), code, 'utf8')
 }
 
 export async function compileScriptFile(path: string, modules: string | boolean = false) {
-	const sources = readFileSync(path, 'utf-8')
-	await compileScript(sources, path, modules)
+  const sources = readFileSync(path, 'utf-8')
+  await compileScript(sources, path, modules)
 }
 
 export async function compileLibraryEntry(
-	dir: string,
-	componentNames: string[],
-	exportDirNames: string[],
-	modules: string | boolean = false
+  dir: string,
+  componentNames: string[],
+  exportDirNames: string[],
+  modules: string | boolean = false
 ) {
-	const imports = exportDirNames
-		.map((exportDirNames: string) => `import ${bigCamelize(exportDirNames)} from './${exportDirNames}'`)
-		.join('\n')
-	const requires = exportDirNames
-		.map((exportDirNames: string) => `var ${bigCamelize(exportDirNames)} = require('./${exportDirNames}')`)
-		.join('\n')
-	const install = `\
+  const imports = exportDirNames
+    .map((exportDirNames: string) => `import ${bigCamelize(exportDirNames)} from './${exportDirNames}'`)
+    .join('\n')
+  const requires = exportDirNames
+    .map((exportDirNames: string) => `var ${bigCamelize(exportDirNames)} = require('./${exportDirNames}')`)
+    .join('\n')
+  const install = `\
 function install(app) {
   ${exportDirNames
-		.map((exportDirName: string) => `${bigCamelize(exportDirName)}.install && app.use(${bigCamelize(exportDirName)})`)
-		.join('\n  ')}
+    .map((exportDirName: string) => `${bigCamelize(exportDirName)}.install && app.use(${bigCamelize(exportDirName)})`)
+    .join('\n  ')}
 }
 `
-	const esExports = `\
+  const esExports = `\
 export {
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }
@@ -79,42 +79,42 @@ export default {
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')},
 }\
 `
-	const cjsExports = `\
+  const cjsExports = `\
 module.exports = {
   install,
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }\
 `
-	const template = `\
+  const template = `\
 ${modules === 'cjs' ? requires : imports}\n
 ${install}
 ${modules === 'cjs' ? cjsExports : esExports}
 `
 
-	const cssImports = componentNames.map((componentName: string) => `import './${componentName}/style'`).join('\n')
-	const cssRequires = componentNames.map((componentName: string) => `require('./${componentName}/style')`).join('\n')
-	const styleTemplate = `\
+  const cssImports = componentNames.map((componentName: string) => `import './${componentName}/style'`).join('\n')
+  const cssRequires = componentNames.map((componentName: string) => `require('./${componentName}/style')`).join('\n')
+  const styleTemplate = `\
 ${modules === 'cjs' ? cssRequires : cssImports}
 `
 
-	const umdTemplate = `\
+  const umdTemplate = `\
 ${modules === 'cjs' ? requires : imports}\n
 ${install}
 ${modules === 'cjs' ? cssRequires : cssImports}\n
 ${modules === 'cjs' ? cjsExports : esExports}
 `
 
-	const lessImports = componentNames.map((componentName: string) => `import './${componentName}/style/less'`).join('\n')
-	const lessRequires = componentNames
-		.map((componentName: string) => `require('./${componentName}/style/less')`)
-		.join('\n')
-	const lessTemplate = `\
+  const lessImports = componentNames.map((componentName: string) => `import './${componentName}/style/less'`).join('\n')
+  const lessRequires = componentNames
+    .map((componentName: string) => `require('./${componentName}/style/less')`)
+    .join('\n')
+  const lessTemplate = `\
 ${modules === 'cjs' ? lessRequires : lessImports}
 `
-	await Promise.all([
-		writeFile(resolve(dir, 'index.js'), template, 'utf-8'),
-		writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf-8'),
-		writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
-		writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'),
-	])
+  await Promise.all([
+    writeFile(resolve(dir, 'index.js'), template, 'utf-8'),
+    writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf-8'),
+    writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
+    writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'),
+  ])
 }
diff --git a/packages/varlet-cli/src/compiler/compileStyle.ts b/packages/varlet-cli/src/compiler/compileStyle.ts
index 7ce971c713f..2175ca442ce 100644
--- a/packages/varlet-cli/src/compiler/compileStyle.ts
+++ b/packages/varlet-cli/src/compiler/compileStyle.ts
@@ -9,49 +9,49 @@ export const EMPTY_SPACE_RE = /[\s]+/g
 export const EMPTY_LINE_RE = /[\n\r]*/g
 
 class TildeResolver extends FileManager {
-	loadFile(filename: string, ...args: any[]) {
-		filename = filename.replace('~', '')
-		return super.loadFile.apply(this, [filename, ...args])
-	}
+  loadFile(filename: string, ...args: any[]) {
+    filename = filename.replace('~', '')
+    return super.loadFile.apply(this, [filename, ...args])
+  }
 }
 
 const TildeResolverPlugin = {
-	install(lessInstance: unknown, pluginManager: any) {
-		pluginManager.addFileManager(new TildeResolver())
-	},
+  install(lessInstance: unknown, pluginManager: any) {
+    pluginManager.addFileManager(new TildeResolver())
+  },
 }
 
 export function replaceStyleExt(script: string) {
-	const replacer = (_: any, p1: string, p2: string): string => {
-		return `${p1}css${p2}`
-	}
-	return script.replace(IMPORT_LESS_PATH_RE, replacer).replace(REQUIRE_LESS_PATH_RE, replacer)
+  const replacer = (_: any, p1: string, p2: string): string => {
+    return `${p1}css${p2}`
+  }
+  return script.replace(IMPORT_LESS_PATH_RE, replacer).replace(REQUIRE_LESS_PATH_RE, replacer)
 }
 
 export function clearEmptyLine(style: string) {
-	return style.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ')
+  return style.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ')
 }
 
 export async function compileLess(path: string) {
-	const source = readFileSync(path, 'utf-8')
-	const { css } = await render(source, {
-		filename: path,
-		plugins: [TildeResolverPlugin],
-	})
+  const source = readFileSync(path, 'utf-8')
+  const { css } = await render(source, {
+    filename: path,
+    plugins: [TildeResolverPlugin],
+  })
 
-	writeFileSync(replaceExt(path, '.css'), clearEmptyLine(css), 'utf-8')
+  writeFileSync(replaceExt(path, '.css'), clearEmptyLine(css), 'utf-8')
 }
 
 export function emitStyleEntry(path: string, modules: string | boolean = false) {
-	const { ext, dir, base } = parse(path)
-	const styleIndex: string = resolve(dir, './style/index.js')
-	const styleLess: string = resolve(dir, './style/less.js')
-	ensureFileSync(styleIndex)
-	ensureFileSync(styleLess)
+  const { ext, dir, base } = parse(path)
+  const styleIndex: string = resolve(dir, './style/index.js')
+  const styleLess: string = resolve(dir, './style/less.js')
+  ensureFileSync(styleIndex)
+  ensureFileSync(styleLess)
 
-	const emitPath = ext === '.css' ? styleIndex : styleLess
-	const emitScript = modules === 'cjs' ? `require('../${base}')\n` : `import '../${base}'\n`
-	const currentScript = readFileSync(emitPath, 'utf-8')
+  const emitPath = ext === '.css' ? styleIndex : styleLess
+  const emitScript = modules === 'cjs' ? `require('../${base}')\n` : `import '../${base}'\n`
+  const currentScript = readFileSync(emitPath, 'utf-8')
 
-	writeFileSync(emitPath, `${currentScript}${emitScript}`)
+  writeFileSync(emitPath, `${currentScript}${emitScript}`)
 }
diff --git a/packages/varlet-cli/src/config/varlet.config.ts b/packages/varlet-cli/src/config/varlet.config.ts
index dcfdb522b05..e66ecb0da03 100644
--- a/packages/varlet-cli/src/config/varlet.config.ts
+++ b/packages/varlet-cli/src/config/varlet.config.ts
@@ -4,9 +4,9 @@ import { VARLET_CONFIG } from '../shared/constant'
 const defaultConfig = require('../../varlet.default.config.js')
 
 export function getVarletConfig() {
-	const config = (pathExistsSync(VARLET_CONFIG) && require(VARLET_CONFIG)) || {}
-	return {
-		...defaultConfig,
-		...config,
-	}
+  const config = (pathExistsSync(VARLET_CONFIG) && require(VARLET_CONFIG)) || {}
+  return {
+    ...defaultConfig,
+    ...config,
+  }
 }
diff --git a/packages/varlet-cli/src/config/webpack.base.config.ts b/packages/varlet-cli/src/config/webpack.base.config.ts
index 7f0cc8051eb..e3efb21f1ef 100644
--- a/packages/varlet-cli/src/config/webpack.base.config.ts
+++ b/packages/varlet-cli/src/config/webpack.base.config.ts
@@ -1,12 +1,7 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { resolve } from 'path'
-import {
-  EXTENSIONS,
-  POSTCSS_CONFIG,
-  TS_CONFIG,
-  VARLET_CONFIG
-} from '../shared/constant'
+import { EXTENSIONS, POSTCSS_CONFIG, TS_CONFIG, VARLET_CONFIG } from '../shared/constant'
 import { createPostcssOptions } from './postcss.config'
 import { ForkTsCheckerWebpackPlugin } from 'fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin'
 import { VueLoaderPlugin } from 'vue-loader'
@@ -19,154 +14,154 @@ import { getVarletConfig } from './varlet.config'
 export type URLLoaderType = 'image' | 'video' | 'audio' | 'font'
 
 export const commonTemplateOption = {
-	minify: {
-		removeAttributeQuotes: true,
-		collapseWhitespace: true,
-	},
-	hash: true,
+  minify: {
+    removeAttributeQuotes: true,
+    collapseWhitespace: true,
+  },
+  hash: true,
 }
 
 export function createURLLoaderOptions(type: URLLoaderType) {
-	return {
-		name: '[name].[hash:7].[ext]',
-		limit: 8 * 1024,
-		outputPath: `${type}s/`,
-		esModule: false,
-	}
+  return {
+    name: '[name].[hash:7].[ext]',
+    limit: 8 * 1024,
+    outputPath: `${type}s/`,
+    esModule: false,
+  }
 }
 
 export function createCSSLoaders() {
-	return [
-		isDev() ? 'style-loader' : MiniCssExtractPlugin.loader,
-		'css-loader',
-		{
-			loader: 'postcss-loader',
-			options: createPostcssOptions(POSTCSS_CONFIG),
-		},
-	]
+  return [
+    isDev() ? 'style-loader' : MiniCssExtractPlugin.loader,
+    'css-loader',
+    {
+      loader: 'postcss-loader',
+      options: createPostcssOptions(POSTCSS_CONFIG),
+    },
+  ]
 }
 
 export function createBabelConfig() {
-	return {
-		loader: 'babel-loader',
-		options: {
-			presets: ['@babel/preset-env'],
-			plugins: ['@babel/plugin-transform-runtime'],
-		},
-	}
+  return {
+    loader: 'babel-loader',
+    options: {
+      presets: ['@babel/preset-env'],
+      plugins: ['@babel/plugin-transform-runtime'],
+    },
+  }
 }
 
 export function createBasePlugins(): WebpackPluginInstance[] {
-	const varletConfig = getVarletConfig()
+  const varletConfig = getVarletConfig()
 
-	const plugins: WebpackPluginInstance[] = [
-		new VueLoaderPlugin(),
-		new HtmlWebpackPlugin({
-			template: resolve(__dirname, '../../site/pc/index.html'),
-			filename: 'index.html',
-			chunks: ['pc'],
-			title: accessProperty(varletConfig, 'pc.title'),
-			logo: accessProperty(varletConfig, 'pc.logo'),
-			description: accessProperty(varletConfig, 'pc.description'),
-			...commonTemplateOption,
-		}),
-		new HtmlWebpackPlugin({
-			template: resolve(__dirname, '../../site/mobile/mobile.html'),
-			filename: 'mobile.html',
-			chunks: ['mobile'],
-			title: accessProperty(varletConfig, 'mobile.title'),
-			logo: accessProperty(varletConfig, 'mobile.logo'),
-			description: accessProperty(varletConfig, 'mobile.description'),
-			...commonTemplateOption,
-		}),
-	]
+  const plugins: WebpackPluginInstance[] = [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, '../../site/pc/index.html'),
+      filename: 'index.html',
+      chunks: ['pc'],
+      title: accessProperty(varletConfig, 'pc.title'),
+      logo: accessProperty(varletConfig, 'pc.logo'),
+      description: accessProperty(varletConfig, 'pc.description'),
+      ...commonTemplateOption,
+    }),
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, '../../site/mobile/mobile.html'),
+      filename: 'mobile.html',
+      chunks: ['mobile'],
+      title: accessProperty(varletConfig, 'mobile.title'),
+      logo: accessProperty(varletConfig, 'mobile.logo'),
+      description: accessProperty(varletConfig, 'mobile.description'),
+      ...commonTemplateOption,
+    }),
+  ]
 
-	pathExistsSync(TS_CONFIG) && plugins.push(new ForkTsCheckerWebpackPlugin())
+  pathExistsSync(TS_CONFIG) && plugins.push(new ForkTsCheckerWebpackPlugin())
 
-	return plugins
+  return plugins
 }
 
 export function createBaseConfig() {
-	return {
-		entry: {
-			pc: resolve(__dirname, '../../site/pc/main.ts'),
-			mobile: resolve(__dirname, '../../site/mobile/main.ts'),
-		},
-		resolve: {
-			extensions: EXTENSIONS,
-			alias: {
-				'@config': VARLET_CONFIG,
-			},
-		},
-		module: {
-			rules: [
-				{
-					test: /\.vue$/,
-					use: ['cache-loader', 'vue-loader'],
-				},
-				{
-					test: /\.js$/,
-					use: ['cache-loader', createBabelConfig()],
-					exclude: /node_modules/,
-				},
-				{
-					test: /\.ts$/,
-					use: [
-						'cache-loader',
-						createBabelConfig(),
-						{
-							loader: 'ts-loader',
-							options: {
-							  appendTsSuffixTo: [/\.vue$/],
+  return {
+    entry: {
+      pc: resolve(__dirname, '../../site/pc/main.ts'),
+      mobile: resolve(__dirname, '../../site/mobile/main.ts'),
+    },
+    resolve: {
+      extensions: EXTENSIONS,
+      alias: {
+        '@config': VARLET_CONFIG,
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: ['cache-loader', 'vue-loader'],
+        },
+        {
+          test: /\.js$/,
+          use: ['cache-loader', createBabelConfig()],
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.ts$/,
+          use: [
+            'cache-loader',
+            createBabelConfig(),
+            {
+              loader: 'ts-loader',
+              options: {
+                appendTsSuffixTo: [/\.vue$/],
                 allowTsInNodeModules: true,
                 compilerOptions: {
-							    declaration: false
-                }
+                  declaration: false,
+                },
               },
-						},
-					],
-				},
-				{
-					test: /\.md$/,
-					use: ['vue-loader', '@varlet/markdown-loader'],
-				},
-				{
-					test: /\.(png|jpg|gif|jpeg|svg)$/,
-					use: {
-						loader: 'url-loader',
-						options: createURLLoaderOptions('image'),
-					},
-				},
-				{
-					test: /\.(eot|ttf|woff|woff2)$/,
-					use: {
-						loader: 'url-loader',
-						options: createURLLoaderOptions('font'),
-					},
-				},
-				{
-					test: /\.(mp3|wav|ogg)$/,
-					use: {
-						loader: 'url-loader',
-						options: createURLLoaderOptions('audio'),
-					},
-				},
-				{
-					test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
-					use: {
-						loader: 'url-loader',
-						options: createURLLoaderOptions('video'),
-					},
-				},
-				{
-					test: /\.css$/,
-					use: createCSSLoaders(),
-				},
-				{
-					test: /\.less$/,
-					use: [...createCSSLoaders(), 'less-loader'],
-				}
-			],
-		},
-	}
+            },
+          ],
+        },
+        {
+          test: /\.md$/,
+          use: ['vue-loader', '@varlet/markdown-loader'],
+        },
+        {
+          test: /\.(png|jpg|gif|jpeg|svg)$/,
+          use: {
+            loader: 'url-loader',
+            options: createURLLoaderOptions('image'),
+          },
+        },
+        {
+          test: /\.(eot|ttf|woff|woff2)$/,
+          use: {
+            loader: 'url-loader',
+            options: createURLLoaderOptions('font'),
+          },
+        },
+        {
+          test: /\.(mp3|wav|ogg)$/,
+          use: {
+            loader: 'url-loader',
+            options: createURLLoaderOptions('audio'),
+          },
+        },
+        {
+          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+          use: {
+            loader: 'url-loader',
+            options: createURLLoaderOptions('video'),
+          },
+        },
+        {
+          test: /\.css$/,
+          use: createCSSLoaders(),
+        },
+        {
+          test: /\.less$/,
+          use: [...createCSSLoaders(), 'less-loader'],
+        },
+      ],
+    },
+  }
 }
diff --git a/packages/varlet-cli/src/config/webpack.dev.config.ts b/packages/varlet-cli/src/config/webpack.dev.config.ts
index 64f606d436c..81d8fbcec15 100644
--- a/packages/varlet-cli/src/config/webpack.dev.config.ts
+++ b/packages/varlet-cli/src/config/webpack.dev.config.ts
@@ -5,39 +5,39 @@ import { getVarletConfig } from './varlet.config'
 import { accessProperty } from '../shared/fsUtils'
 
 export function getDevConfig() {
-	const varletConfig = getVarletConfig()
-	return merge(createBaseConfig() as any, {
-		mode: 'development',
-		devtool: 'source-map',
-		output: {
-			chunkFilename: 'js/[name].[chunkhash:8].js',
-		},
-		devServer: {
-			port: accessProperty(varletConfig, 'port'),
-			host: accessProperty(varletConfig, 'host'),
-			publicPath: '/',
-			stats: 'errors-only',
-			disableHostCheck: true,
-			hot: true,
-		},
-		optimization: {
-			splitChunks: {
-				cacheGroups: {
-					chunks: {
-						chunks: 'all',
-						minChunks: 2,
-						minSize: 0,
-						name: 'chunks',
-					},
-				},
-			},
-		},
-		plugins: [
-			new WebpackBarPlugin({
-				name: 'Site development building',
-				color: '#15DD6A',
-			}),
-			...createBasePlugins(),
-		],
-	})
+  const varletConfig = getVarletConfig()
+  return merge(createBaseConfig() as any, {
+    mode: 'development',
+    devtool: 'source-map',
+    output: {
+      chunkFilename: 'js/[name].[chunkhash:8].js',
+    },
+    devServer: {
+      port: accessProperty(varletConfig, 'port'),
+      host: accessProperty(varletConfig, 'host'),
+      publicPath: '/',
+      stats: 'errors-only',
+      disableHostCheck: true,
+      hot: true,
+    },
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          chunks: {
+            chunks: 'all',
+            minChunks: 2,
+            minSize: 0,
+            name: 'chunks',
+          },
+        },
+      },
+    },
+    plugins: [
+      new WebpackBarPlugin({
+        name: 'Site development building',
+        color: '#15DD6A',
+      }),
+      ...createBasePlugins(),
+    ],
+  })
 }
diff --git a/packages/varlet-cli/src/config/webpack.umd.config.ts b/packages/varlet-cli/src/config/webpack.umd.config.ts
index 7987d7a4149..e880812149e 100644
--- a/packages/varlet-cli/src/config/webpack.umd.config.ts
+++ b/packages/varlet-cli/src/config/webpack.umd.config.ts
@@ -8,32 +8,32 @@ import { VueLoaderPlugin } from 'vue-loader'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 export function getUmdConfig() {
-	const varletConfig = getVarletConfig()
-	const namespace = accessProperty(varletConfig, 'namespace')
+  const varletConfig = getVarletConfig()
+  const namespace = accessProperty(varletConfig, 'namespace')
 
-	return merge(createBaseConfig() as any, {
-		mode: 'production',
-		entry: resolve(ES_DIR, 'umdIndex.js'),
-		output: {
-			path: UMD_DIR,
-			filename: `${namespace}.js`,
-			library: `${bigCamelize(namespace)}`,
-			libraryTarget: 'umd',
-			umdNamedDefine: true,
-		},
-		externals: {
-			vue: {
-				root: 'Vue',
-				commonjs: 'vue',
-				commonjs2: 'vue',
-				amd: 'vue',
-			},
-		},
-		plugins: [
-			new VueLoaderPlugin(),
-			new MiniCssExtractPlugin({
-				filename: `${namespace}.css`,
-			}),
-		],
-	})
+  return merge(createBaseConfig() as any, {
+    mode: 'production',
+    entry: resolve(ES_DIR, 'umdIndex.js'),
+    output: {
+      path: UMD_DIR,
+      filename: `${namespace}.js`,
+      library: `${bigCamelize(namespace)}`,
+      libraryTarget: 'umd',
+      umdNamedDefine: true,
+    },
+    externals: {
+      vue: {
+        root: 'Vue',
+        commonjs: 'vue',
+        commonjs2: 'vue',
+        amd: 'vue',
+      },
+    },
+    plugins: [
+      new VueLoaderPlugin(),
+      new MiniCssExtractPlugin({
+        filename: `${namespace}.css`,
+      }),
+    ],
+  })
 }
diff --git a/packages/varlet-cli/src/less.d.ts b/packages/varlet-cli/src/less.d.ts
index 23dc5e09403..959fd710b4c 100644
--- a/packages/varlet-cli/src/less.d.ts
+++ b/packages/varlet-cli/src/less.d.ts
@@ -1,6 +1,6 @@
 declare module 'less' {
-	declare const render: any
-	declare const FileManager: any
+  declare const render: any
+  declare const FileManager: any
 
-	export { render, FileManager }
+  export { render, FileManager }
 }
diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts
index 6458f98050d..70a249f5338 100644
--- a/packages/varlet-cli/src/shared/constant.ts
+++ b/packages/varlet-cli/src/shared/constant.ts
@@ -9,10 +9,7 @@ export const SRC_DIR = resolve(CWD, 'src')
 export const ES_DIR = resolve(CWD, 'es')
 export const CJS_DIR = resolve(CWD, 'cjs')
 export const UMD_DIR = resolve(CWD, 'umd')
-export const SITE_MOBILE_ROUTES = resolve(
-	__dirname,
-	'../../site/mobile/routes.ts'
-)
+export const SITE_MOBILE_ROUTES = resolve(__dirname, '../../site/mobile/routes.ts')
 export const SITE_PC_ROUTES = resolve(__dirname, '../../site/PC/routes.ts')
 export const EXAMPLE_DIR_NAME = 'example'
 export const DOCS_DIR_NAME = 'docs'
diff --git a/packages/varlet-cli/src/shared/fsUtils.ts b/packages/varlet-cli/src/shared/fsUtils.ts
index c0450b9d96a..18fe2f5dc04 100644
--- a/packages/varlet-cli/src/shared/fsUtils.ts
+++ b/packages/varlet-cli/src/shared/fsUtils.ts
@@ -3,77 +3,77 @@ import { ensureFileSync, lstatSync, pathExistsSync, readdir, readdirSync, writeF
 import { EXAMPLE_DIR_NAME, SRC_DIR, TESTS_DIR_NAME } from './constant'
 
 export function ensureConfigFile(path: string) {
-	if (!pathExistsSync(path)) {
-		ensureFileSync(path)
-		writeFileSync(path, 'module.exports = {}')
-	}
+  if (!pathExistsSync(path)) {
+    ensureFileSync(path)
+    writeFileSync(path, 'module.exports = {}')
+  }
 }
 
 export function accessProperty(target: any, operator: string) {
-	const keys: string[] = operator.split('.')
-	return keys.reduce((value: any, key: string) => {
-		if (value === null || value === undefined) {
-			return null
-		}
-		return value[key] || []
-	}, target)
+  const keys: string[] = operator.split('.')
+  return keys.reduce((value: any, key: string) => {
+    if (value === null || value === undefined) {
+      return null
+    }
+    return value[key] || []
+  }, target)
 }
 
 export async function getComponentNames(): Promise<string[]> {
-	const srcDir: string[] = await readdir(SRC_DIR)
-	return srcDir.filter((filename: string) => isComponentDir(resolve(SRC_DIR, filename)))
+  const srcDir: string[] = await readdir(SRC_DIR)
+  return srcDir.filter((filename: string) => isComponentDir(resolve(SRC_DIR, filename)))
 }
 
 export async function getExportDirNames(): Promise<string[]> {
-	const srcDir: string[] = await readdir(SRC_DIR)
-	return srcDir.filter((filename: string) => isExportDir(resolve(SRC_DIR, filename)))
+  const srcDir: string[] = await readdir(SRC_DIR)
+  return srcDir.filter((filename: string) => isExportDir(resolve(SRC_DIR, filename)))
 }
 
 export function isDir(path: string): boolean {
-	return pathExistsSync(path) && lstatSync(path).isDirectory()
+  return pathExistsSync(path) && lstatSync(path).isDirectory()
 }
 
 export function isSFC(path: string): boolean {
-	return pathExistsSync(path) && extname(path) === '.vue'
+  return pathExistsSync(path) && extname(path) === '.vue'
 }
 
 export function hasSFC(path: string): boolean {
-	const dir = readdirSync(path)
-	return dir.some((filename) => isSFC(resolve(path, filename)))
+  const dir = readdirSync(path)
+  return dir.some((filename) => isSFC(resolve(path, filename)))
 }
 
 export function isScript(path: string): boolean {
-	return (pathExistsSync(path) && extname(path) === '.js') || extname(path) === '.ts'
+  return (pathExistsSync(path) && extname(path) === '.js') || extname(path) === '.ts'
 }
 
 export function isLess(path: string): boolean {
-	return pathExistsSync(path) && extname(path) === '.less'
+  return pathExistsSync(path) && extname(path) === '.less'
 }
 
 export function isExampleDir(path: string): boolean {
-	return pathExistsSync(path) && parse(path).dir.endsWith(EXAMPLE_DIR_NAME)
+  return pathExistsSync(path) && parse(path).dir.endsWith(EXAMPLE_DIR_NAME)
 }
 
 export function isTestsDir(path: string): boolean {
-	return pathExistsSync(path) && parse(path).dir.endsWith(TESTS_DIR_NAME)
+  return pathExistsSync(path) && parse(path).dir.endsWith(TESTS_DIR_NAME)
 }
 
 export function isExportDir(path: string): boolean {
-	return pathExistsSync(resolve(path, 'index.js')) || pathExistsSync(resolve(path, 'index.ts'))
+  return pathExistsSync(resolve(path, 'index.js')) || pathExistsSync(resolve(path, 'index.ts'))
 }
 
 export function isComponentDir(path: string): boolean {
-	return hasSFC(path) && isExportDir(path)
+  return hasSFC(path) && isExportDir(path)
 }
 
 export function replaceExt(path: string, ext: string): string {
-	return path.replace(extname(path), ext)
+  return path.replace(extname(path), ext)
 }
 
 export function bigCamelize(str: string): string {
-	return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase())
+  return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase())
 }
 
 export function camelize(str: string): string {
-	return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
+  return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
 }
diff --git a/packages/varlet-cli/varlet.default.config.js b/packages/varlet-cli/varlet.default.config.js
index 426cb43ae5e..e2d4d195e8c 100644
--- a/packages/varlet-cli/varlet.default.config.js
+++ b/packages/varlet-cli/varlet.default.config.js
@@ -1,22 +1,22 @@
 module.exports = {
-	namespace: 'var',
-	host: 'localhost',
-	title: 'varlet',
-	port: 8080,
-	pc: {
-		title: 'Varlet 组件库文档',
-		description: 'Varlet 组件库文档',
-		logo: 'https://cn.vuejs.org/images/logo.png',
-		header: {
-			i18nButton: {
-				zh_CN: 'En',
-				en_US: '中文',
-			},
-		},
-	},
-	mobile: {
-		title: 'Varlet 组件库示例',
-		description: 'Varlet 组件库示例',
-		logo: 'https://cn.vuejs.org/images/logo.png',
-	},
+  namespace: 'var',
+  host: 'localhost',
+  title: 'varlet',
+  port: 8080,
+  pc: {
+    title: 'Varlet 组件库文档',
+    description: 'Varlet 组件库文档',
+    logo: 'https://cn.vuejs.org/images/logo.png',
+    header: {
+      i18nButton: {
+        zh_CN: 'En',
+        en_US: '中文',
+      },
+    },
+  },
+  mobile: {
+    title: 'Varlet 组件库示例',
+    description: 'Varlet 组件库示例',
+    logo: 'https://cn.vuejs.org/images/logo.png',
+  },
 }
diff --git a/packages/varlet-eslint-config/index.js b/packages/varlet-eslint-config/index.js
index 9e82f8d00a7..5211f6e3dc6 100644
--- a/packages/varlet-eslint-config/index.js
+++ b/packages/varlet-eslint-config/index.js
@@ -1,65 +1,65 @@
 module.exports = {
-	extends: [
-		'airbnb-base',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:vue/vue3-recommended',
-		'prettier',
-		'prettier/vue',
-	],
-	parserOptions: {
-		parser: '@typescript-eslint/parser',
-		ecmaVersion: 2020,
-		sourceType: 'module',
-		extraFileExtensions: ['.vue'],
-	},
-	plugins: ['@typescript-eslint'],
-	env: {
-		es6: true,
-		node: true,
-		browser: true,
-	},
-	rules: {
-		'no-new': 'off',
-		'no-shadow': 'off',
-		'no-bitwise': 'off',
-		'func-names': 'off',
-		'no-console': 'off',
-		'no-plusplus': 'off',
-		'default-case': 'off',
-		'prefer-template': 'off',
-		'consistent-return': 'off',
-		'no-param-reassign': 'off',
-		'no-nested-ternary': 'off',
-		'no-underscore-dangle': 'off',
-		'no-unused-expressions': 'off',
-		'no-restricted-globals': 'off',
-		'no-use-before-define': 'off',
-		'class-methods-use-this': 'off',
-		'global-require': 'off',
-		'prefer-destructuring': ['error', { object: true, array: false }],
-		// eslint-plugin-import
-		'import/order': 'off',
-		'import/extensions': 'off',
-		'import/no-unresolved': 'off',
-		'import/prefer-default-export': 'off',
-		'import/no-extraneous-dependencies': 'off',
-		'import/no-dynamic-require': 'off',
-		// eslint-plugin-vue
-		'vue/comment-directive': 'off',
-		'vue/no-v-html': 'off',
-		'vue/attributes-order': 'off',
-		'vue/require-default-prop': 'off',
-		'vue/no-unused-components': 'off',
-		'vue/require-explicit-emits': 'off',
-		// typescript-eslint
-		'@typescript-eslint/camelcase': 'off',
-		'@typescript-eslint/ban-ts-ignore': 'off',
-		'@typescript-eslint/no-var-requires': 'off',
-		'@typescript-eslint/no-extra-semi': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-empty-function': 'off',
-		'@typescript-eslint/no-non-null-assertion': 'off',
-		'@typescript-eslint/explicit-function-return-type': 'off',
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
-	},
+  extends: [
+    'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+    'prettier/vue',
+  ],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    extraFileExtensions: ['.vue'],
+  },
+  plugins: ['@typescript-eslint'],
+  env: {
+    es6: true,
+    node: true,
+    browser: true,
+  },
+  rules: {
+    'no-new': 'off',
+    'no-shadow': 'off',
+    'no-bitwise': 'off',
+    'func-names': 'off',
+    'no-console': 'off',
+    'no-plusplus': 'off',
+    'default-case': 'off',
+    'prefer-template': 'off',
+    'consistent-return': 'off',
+    'no-param-reassign': 'off',
+    'no-nested-ternary': 'off',
+    'no-underscore-dangle': 'off',
+    'no-unused-expressions': 'off',
+    'no-restricted-globals': 'off',
+    'no-use-before-define': 'off',
+    'class-methods-use-this': 'off',
+    'global-require': 'off',
+    'prefer-destructuring': ['error', { object: true, array: false }],
+    // eslint-plugin-import
+    'import/order': 'off',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/no-dynamic-require': 'off',
+    // eslint-plugin-vue
+    'vue/comment-directive': 'off',
+    'vue/no-v-html': 'off',
+    'vue/attributes-order': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/no-unused-components': 'off',
+    'vue/require-explicit-emits': 'off',
+    // typescript-eslint
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-extra-semi': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
 }
diff --git a/packages/varlet-icons/lib/index.js b/packages/varlet-icons/lib/index.js
index b1cf58dbb32..33728b541ed 100755
--- a/packages/varlet-icons/lib/index.js
+++ b/packages/varlet-icons/lib/index.js
@@ -15,31 +15,31 @@ const formats = ['ttf', 'eot', 'woff', 'woff2']
 const config = require(resolve(CWD, 'varlet-icons.config.js'))
 
 async function build() {
-	const { publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = config
+  const { publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = config
 
-	const { ttf, eot, woff, woff2 } = await webfont({
-		files: `${SVG_DIR}/*.svg`,
-		fontName,
-		formats,
-		fontHeight: 512,
-		descent: 64,
-	})
+  const { ttf, eot, woff, woff2 } = await webfont({
+    files: `${SVG_DIR}/*.svg`,
+    fontName,
+    formats,
+    fontHeight: 512,
+    descent: 64,
+  })
 
-	removeSync(DIST_DIR)
+  removeSync(DIST_DIR)
 
-	await Promise.all([ensureDir(FONTS_DIR), ensureDir(CSS_DIR)])
+  await Promise.all([ensureDir(FONTS_DIR), ensureDir(CSS_DIR)])
 
-	const icons = readdirSync(SVG_DIR).map((svgName) => {
-		const i = svgName.indexOf('-')
-		const extIndex = svgName.lastIndexOf('.')
+  const icons = readdirSync(SVG_DIR).map((svgName) => {
+    const i = svgName.indexOf('-')
+    const extIndex = svgName.lastIndexOf('.')
 
-		return {
-			name: svgName.slice(i + 1, extIndex),
-			pointCode: svgName.slice(1, i),
-		}
-	})
+    return {
+      name: svgName.slice(i + 1, extIndex),
+      pointCode: svgName.slice(1, i),
+    }
+  })
 
-	const cssTemplate = `\
+  const cssTemplate = `\
 @font-face {
   font-family: "${fontName}";
   src: url("${publicPath}${fileName}-webfont.eot");
@@ -59,12 +59,12 @@ async function build() {
 }
 
 ${icons
-	.map((icon) => {
-		return `.${namespace}-${icon.name}::before {
+    .map((icon) => {
+      return `.${namespace}-${icon.name}::before {
   content: "\\${icon.pointCode}";
 }`
-	})
-	.join('\n\n')}
+    })
+    .join('\n\n')}
 `
 
   const iconNames = icons.map((iconName) => `  "${iconName.name}"`)
@@ -76,16 +76,16 @@ ${iconNames.join(',\n')}
 `
 
   await Promise.all([
-		writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
-		writeFile(resolve(FONTS_DIR, `${fileName}-webfont.eot`), eot),
-		writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
-		writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
-		writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),
-		writeFile(resolve(CSS_DIR, `${fileName}.less`), cssTemplate),
-    writeFile(resolve(DIST_DIR, 'index.js'), indexTemplate)
-	])
-
-	console.log('build success!')
+    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
+    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.eot`), eot),
+    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
+    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
+    writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),
+    writeFile(resolve(CSS_DIR, `${fileName}.less`), cssTemplate),
+    writeFile(resolve(DIST_DIR, 'index.js'), indexTemplate),
+  ])
+
+  console.log('build success!')
 }
 
 commander.command('build').description('Build varlet icons from svg').action(build)
diff --git a/packages/varlet-icons/varlet-icons.config.js b/packages/varlet-icons/varlet-icons.config.js
index 9aacd79dfe6..ac64addd2de 100644
--- a/packages/varlet-icons/varlet-icons.config.js
+++ b/packages/varlet-icons/varlet-icons.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-	namespace: 'var-icon',
-	publicPath: '~@varlet/icons/dist/fonts/',
-	fileName: 'varlet-icons',
-	fontName: 'varlet-icons',
+  namespace: 'var-icon',
+  publicPath: '~@varlet/icons/dist/fonts/',
+  fileName: 'varlet-icons',
+  fontName: 'varlet-icons',
 }
diff --git a/packages/varlet-markdown-loader/index.js b/packages/varlet-markdown-loader/index.js
index c017cba7481..b522dcbedf0 100644
--- a/packages/varlet-markdown-loader/index.js
+++ b/packages/varlet-markdown-loader/index.js
@@ -3,30 +3,26 @@ const hljs = require('highlight.js')
 const cardWrapper = require('./src/cardWrapper.js')
 
 function highlight(str, lang) {
-	if (lang && hljs.getLanguage(lang)) {
-		return (
-			'<pre class="hljs"><code><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/github.min.css">' +
-			hljs.highlight(lang, str, true).value +
-			'</code></pre>'
-		)
-	}
+  if (lang && hljs.getLanguage(lang)) {
+    return (
+      '<pre class="hljs"><code><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/github.min.css">' +
+      hljs.highlight(lang, str, true).value +
+      '</code></pre>'
+    )
+  }
 
-	return ''
+  return ''
 }
 
 function markLoader(source) {
-	const md = markdown({
-		html: true,
-		typographer: true,
-		highlight,
-	})
-	const html = cardWrapper(md.render(source))
+  const md = markdown({
+    html: true,
+    typographer: true,
+    highlight,
+  })
+  const html = cardWrapper(md.render(source))
 
-	return (
-		'<template>\n' +
-		`<div class="varlet-site-doc">${html}</div>\n` +
-		'</template>\n'
-	)
+  return `<template>\n<div class="varlet-site-doc">${html}</div>\n</template>\n`
 }
 
 module.exports = markLoader
diff --git a/packages/varlet-touch-emulator/index.js b/packages/varlet-touch-emulator/index.js
index 9d03809f773..dcff85e1e2e 100644
--- a/packages/varlet-touch-emulator/index.js
+++ b/packages/varlet-touch-emulator/index.js
@@ -9,79 +9,79 @@ const isMousemove = (eventType) => eventType === 'mousemove'
 const isMouseup = (eventType) => eventType === 'mouseup'
 
 const isUpdateTarget = (eventType) =>
-	isMousedown(eventType) || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)
+  isMousedown(eventType) || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)
 
 function Touch(target, identifier, mouseEvent) {
-	const { clientX, clientY, screenX, screenY, pageX, pageY } = mouseEvent
-
-	this.identifier = identifier
-	this.target = target
-	this.clientX = clientX
-	this.clientY = clientY
-	this.screenX = screenX
-	this.screenY = screenY
-	this.pageX = pageX
-	this.pageY = pageY
+  const { clientX, clientY, screenX, screenY, pageX, pageY } = mouseEvent
+
+  this.identifier = identifier
+  this.target = target
+  this.clientX = clientX
+  this.clientY = clientY
+  this.screenX = screenX
+  this.screenY = screenY
+  this.pageX = pageX
+  this.pageY = pageY
 }
 
 function updateTouchList(mouseEvent) {
-	const touchList = createTouchList()
+  const touchList = createTouchList()
 
-	touchList.push(new Touch(eventTarget, 1, mouseEvent))
-	return touchList
+  touchList.push(new Touch(eventTarget, 1, mouseEvent))
+  return touchList
 }
 
 function createTouchList() {
-	const touchList = []
+  const touchList = []
 
-	touchList.item = function (index) {
-		return this[index] || null
-	}
+  touchList.item = function (index) {
+    return this[index] || null
+  }
 
-	return touchList
+  return touchList
 }
 
 function getActiveTouches(mouseEvent) {
-	const { type } = mouseEvent
-	if (isMouseup(type)) return createTouchList()
-	return updateTouchList(mouseEvent)
+  const { type } = mouseEvent
+  if (isMouseup(type)) return createTouchList()
+  return updateTouchList(mouseEvent)
 }
 
 function triggerTouch(touchType, mouseEvent) {
-	const { altKey, ctrlKey, metaKey, shiftKey } = mouseEvent
-	const touchEvent = document.createEvent('Event')
-	touchEvent.initEvent(touchType, true, true)
+  const { altKey, ctrlKey, metaKey, shiftKey } = mouseEvent
+  const touchEvent = document.createEvent('Event')
+  touchEvent.initEvent(touchType, true, true)
 
-	touchEvent.altKey = altKey
-	touchEvent.ctrlKey = ctrlKey
-	touchEvent.metaKey = metaKey
-	touchEvent.shiftKey = shiftKey
+  touchEvent.altKey = altKey
+  touchEvent.ctrlKey = ctrlKey
+  touchEvent.metaKey = metaKey
+  touchEvent.shiftKey = shiftKey
 
-	touchEvent.touches = getActiveTouches(mouseEvent)
-	touchEvent.targetTouches = getActiveTouches(mouseEvent)
-	touchEvent.changedTouches = createTouchList(mouseEvent)
+  touchEvent.touches = getActiveTouches(mouseEvent)
+  touchEvent.targetTouches = getActiveTouches(mouseEvent)
+  touchEvent.changedTouches = createTouchList(mouseEvent)
 
-	eventTarget.dispatchEvent(touchEvent)
+  eventTarget.dispatchEvent(touchEvent)
 }
 
 function onMouse(mouseEvent, touchType) {
-	const { type, target } = mouseEvent
+  const { type, target } = mouseEvent
 
-	initiated = isMousedown(type) ? true : isMouseup(type) ? false : initiated
+  initiated = isMousedown(type) ? true : isMouseup(type) ? false : initiated
 
-	if (isMousemove(type) && !initiated) return
+  if (isMousemove(type) && !initiated) return
 
-	if (isUpdateTarget(type)) eventTarget = target
+  if (isUpdateTarget(type)) eventTarget = target
 
-	triggerTouch(touchType, mouseEvent)
+  triggerTouch(touchType, mouseEvent)
 
-	if (isMouseup(type)) eventTarget = null
+  if (isMouseup(type)) eventTarget = null
 }
 
 function createTouchEmulator() {
-	window.addEventListener('mousedown', (event) => onMouse(event, 'touchstart'), true)
-	window.addEventListener('mousemove', (event) => onMouse(event, 'touchmove'), true)
-	window.addEventListener('mouseup', (event) => onMouse(event, 'touchend'), true)
+  window.addEventListener('mousedown', (event) => onMouse(event, 'touchstart'), true)
+  window.addEventListener('mousemove', (event) => onMouse(event, 'touchmove'), true)
+  window.addEventListener('mouseup', (event) => onMouse(event, 'touchend'), true)
 }
 
 if (!supportTouch) createTouchEmulator()
diff --git a/packages/varlet-ui/src/badge/example/index.vue b/packages/varlet-ui/src/badge/example/index.vue
index da924067e66..e1bbeb4c5e2 100644
--- a/packages/varlet-ui/src/badge/example/index.vue
+++ b/packages/varlet-ui/src/badge/example/index.vue
@@ -56,35 +56,35 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent, Ref, ref } from 'vue'
-	import Badge from '..'
-	import Button from '../../button'
-	import Chip from '../../chip'
+import { defineComponent, Ref, ref } from 'vue'
+import Badge from '..'
+import Button from '../../button'
+import Chip from '../../chip'
 
-	export default defineComponent({
-		name: 'BadgeExample',
-		components: {
-			[Badge.name]: Badge,
-			[Button.name]: Button,
-			[Chip.name]: Chip
-		},
-		setup() {
-			const value: Ref<number> = ref(88)
-			const value1: Ref<number> = ref(188)
-			const maxValue: Ref<number> = ref(99)
-			const hidden: Ref<boolean> = ref(false)
-			const handleChange = () => {
-				hidden.value = !hidden.value
-			}
-			return {
-				value,
-				value1,
-				maxValue,
-				hidden,
-				handleChange
-			}
-		}
-	})
+export default defineComponent({
+  name: 'BadgeExample',
+  components: {
+    [Badge.name]: Badge,
+    [Button.name]: Button,
+    [Chip.name]: Chip
+  },
+  setup() {
+    const value: Ref<number> = ref(88)
+    const value1: Ref<number> = ref(188)
+    const maxValue: Ref<number> = ref(99)
+    const hidden: Ref<boolean> = ref(false)
+    const handleChange = () => {
+      hidden.value = !hidden.value
+    }
+    return {
+      value,
+      value1,
+      maxValue,
+      hidden,
+      handleChange
+    }
+  }
+})
 </script>
 
 <style scoped>
diff --git a/packages/varlet-ui/src/badge/props.ts b/packages/varlet-ui/src/badge/props.ts
index e05620e29f8..8c61709bcf3 100644
--- a/packages/varlet-ui/src/badge/props.ts
+++ b/packages/varlet-ui/src/badge/props.ts
@@ -13,35 +13,35 @@ export const props = {
     default: 'default',
     validator: typeValidator
   },
-//  是否隐藏徽标
+  //  是否隐藏徽标
   hidden: {
     type: Boolean,
     default: false
   },
-//  是否是小圆点
+  //  是否是小圆点
   dot: {
     type: Boolean,
     default: false
   },
-//  显示的值
+  //  显示的值
   value: {
     type: [String, Number],
     default: 0
   },
-// 显示最大值
+  // 显示最大值
   maxValue: {
     type: [String, Number]
   },
-//  自定义徽标颜色
+  //  自定义徽标颜色
   color: {
     type: String
   },
-//  定位位置
+  //  定位位置
   position: {
     type: String,
     validator: positionValidator
   },
-//  图标
+  //  图标
   icon:{
     type:String
   }
diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
index 5c787f9e310..ce03ffdf66e 100644
--- a/packages/varlet-ui/src/button/Button.vue
+++ b/packages/varlet-ui/src/button/Button.vue
@@ -31,34 +31,34 @@ import { defineComponent } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarButton',
-	components: {
-		[Loading.name]: Loading,
-	},
-	directives: { Ripple },
-	props,
-	setup(props) {
-		const handleClick = (e: Event) => {
-			if (props.loading || props.disabled) {
-				return
-			}
+  name: 'VarButton',
+  components: {
+    [Loading.name]: Loading,
+  },
+  directives: { Ripple },
+  props,
+  setup(props) {
+    const handleClick = (e: Event) => {
+      if (props.loading || props.disabled) {
+        return
+      }
 
-			props.onClick?.(e)
-		}
+      props.onClick?.(e)
+    }
 
-		const handleTouchstart = (e: Event) => {
-			if (props.loading || props.disabled) {
-				return
-			}
+    const handleTouchstart = (e: Event) => {
+      if (props.loading || props.disabled) {
+        return
+      }
 
-			props.onTouchstart?.(e)
-		}
+      props.onTouchstart?.(e)
+    }
 
-		return {
-			handleClick,
-			handleTouchstart,
-		}
-	},
+    return {
+      handleClick,
+      handleTouchstart,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
index 7cc68ad8af4..2d1470a9d8b 100644
--- a/packages/varlet-ui/src/button/example/index.vue
+++ b/packages/varlet-ui/src/button/example/index.vue
@@ -58,24 +58,24 @@ import Button from '..'
 import Snackbar from '../../snackbar'
 
 export default defineComponent({
-	name: 'ButtonExample',
-	components: {
-		[Button.name]: Button,
-	},
-	setup() {
-		const handleClick = () => {
-			Snackbar.success('click success!')
-		}
+  name: 'ButtonExample',
+  components: {
+    [Button.name]: Button,
+  },
+  setup() {
+    const handleClick = () => {
+      Snackbar.success('click success!')
+    }
 
-		const handleTouchstart = () => {
-			Snackbar.success('touchstart success!')
-		}
+    const handleTouchstart = () => {
+      Snackbar.success('touchstart success!')
+    }
 
-		return {
-			handleClick,
-			handleTouchstart,
-		}
-	},
+    return {
+      handleClick,
+      handleTouchstart,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/button/index.ts b/packages/varlet-ui/src/button/index.ts
index 6976be9de26..bdd10635e5f 100644
--- a/packages/varlet-ui/src/button/index.ts
+++ b/packages/varlet-ui/src/button/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Button from './Button.vue'
 
 Button.install = function (app: App) {
-	app.component(Button.name, Button)
+  app.component(Button.name, Button)
 }
 
 export default Button
diff --git a/packages/varlet-ui/src/button/props.ts b/packages/varlet-ui/src/button/props.ts
index f0b116934ae..b342e687275 100644
--- a/packages/varlet-ui/src/button/props.ts
+++ b/packages/varlet-ui/src/button/props.ts
@@ -2,74 +2,74 @@ import { props as loadingProps } from '../loading/props'
 import { pickProps } from '../utils/components'
 
 function typeValidator(type: string): boolean {
-	return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
 }
 
 function sizeValidator(size: string): boolean {
-	return ['normal', 'mini', 'small', 'large'].includes(size)
+  return ['normal', 'mini', 'small', 'large'].includes(size)
 }
 
 export const props = {
-	// 按钮类型
-	type: {
-		type: String,
-		default: 'default',
-		validator: typeValidator,
-	},
-	// 按钮尺寸
-	size: {
-		type: String,
-		default: 'normal',
-		validator: sizeValidator,
-	},
-	// 加载状态
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	// 加载动画类型
-	loadingType: pickProps(loadingProps, 'type'),
-	// 加载动画尺寸
-	loadingSize: pickProps(loadingProps, 'size'),
-	// 圆型按钮
-	round: {
-		type: Boolean,
-		default: false,
-	},
-	// 块级元素
-	block: {
-		type: Boolean,
-		default: false,
-	},
-	// 朴素按钮
-	plain: {
-		type: Boolean,
-		default: false,
-	},
-	// 开启外边框
-	outline: {
-		type: Boolean,
-		default: false,
-	},
-	// 禁用按钮
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	// 按钮文字颜色
-	textColor: {
-		type: String,
-	},
-	// 按钮背景颜色
-	color: {
-		type: String,
-	},
-	// 点击回调
-	onClick: {
-		type: Function,
-	},
-	// 触摸回调
-	onTouchstart: {
-		type: Function,
-	},
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'default',
+    validator: typeValidator,
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  // 加载状态
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 加载动画类型
+  loadingType: pickProps(loadingProps, 'type'),
+  // 加载动画尺寸
+  loadingSize: pickProps(loadingProps, 'size'),
+  // 圆型按钮
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  // 块级元素
+  block: {
+    type: Boolean,
+    default: false,
+  },
+  // 朴素按钮
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  // 开启外边框
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用按钮
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 按钮文字颜色
+  textColor: {
+    type: String,
+  },
+  // 按钮背景颜色
+  color: {
+    type: String,
+  },
+  // 点击回调
+  onClick: {
+    type: Function,
+  },
+  // 触摸回调
+  onTouchstart: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
index 03cab869ac3..14e04776a1d 100644
--- a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
+++ b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -17,118 +17,118 @@ import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 import FormDetails from '../form-details'
 
 export default defineComponent({
-	name: 'VarCheckboxGroup',
-	components: {
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindChildren: bindCheckbox, childProviders: checkboxProviders } = useChildren<
+  name: 'VarCheckboxGroup',
+  components: {
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindChildren: bindCheckbox, childProviders: checkboxProviders } = useChildren<
 			CheckboxGroupProvider,
 			CheckboxProvider
 		>(CHECKBOX_GROUP_BIND_CHECKBOX_KEY)
-		const { bindParent: bindForm } = useParent<FormProvider, CheckboxGroupProvider>(FORM_BIND_FORM_ITEM_KEY)
-		const { length } = useAtChildrenCounter(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY)
+    const { bindParent: bindForm } = useParent<FormProvider, CheckboxGroupProvider>(FORM_BIND_FORM_ITEM_KEY)
+    const { length } = useAtChildrenCounter(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY)
 
-		const checkedCount: ComputedRef<number> = computed(() => props.modelValue.length)
-		const max: ComputedRef<number | string | undefined> = computed(() => props.max)
+    const checkedCount: ComputedRef<number> = computed(() => props.modelValue.length)
+    const max: ComputedRef<number | string | undefined> = computed(() => props.max)
 
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-		const errorMessageComputed: ComputedRef<string> = computed(() => errorMessage.value)
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+    const errorMessageComputed: ComputedRef<string> = computed(() => errorMessage.value)
 
-		const validate = () => v(props.rules, props.modelValue)
+    const validate = () => v(props.rules, props.modelValue)
 
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
 
-		const change = (changedModelValue: any) => {
-			props['onUpdate:modelValue']?.(changedModelValue)
-			props.onChange?.(changedModelValue)
+    const change = (changedModelValue: any) => {
+      props['onUpdate:modelValue']?.(changedModelValue)
+      props.onChange?.(changedModelValue)
 
-			validateWithTrigger('onChange')
-		}
+      validateWithTrigger('onChange')
+    }
 
-		const onChecked = (changedValue: any) => {
-			if (!props.modelValue.includes(changedValue)) {
-				change([...props.modelValue, changedValue])
-			}
-		}
+    const onChecked = (changedValue: any) => {
+      if (!props.modelValue.includes(changedValue)) {
+        change([...props.modelValue, changedValue])
+      }
+    }
 
-		const onUnchecked = (changedValue: any) => {
-			if (!props.modelValue.includes(changedValue)) {
-				return
-			}
+    const onUnchecked = (changedValue: any) => {
+      if (!props.modelValue.includes(changedValue)) {
+        return
+      }
 
-			change(props.modelValue.filter((value) => value !== changedValue))
-		}
+      change(props.modelValue.filter((value) => value !== changedValue))
+    }
 
-		const syncAllCheckbox = () => {
-			checkboxProviders.forEach(({ sync }) => sync(props.modelValue))
-		}
+    const syncAllCheckbox = () => {
+      checkboxProviders.forEach(({ sync }) => sync(props.modelValue))
+    }
 
-		const checkAll = () => {
-			const checkedValues: any[] = checkboxProviders.map(({ checkedValue }) => checkedValue.value)
-			const changedModelValue: any[] = [...new Set(checkedValues)]
+    const checkAll = () => {
+      const checkedValues: any[] = checkboxProviders.map(({ checkedValue }) => checkedValue.value)
+      const changedModelValue: any[] = [...new Set(checkedValues)]
 
-			props['onUpdate:modelValue']?.(changedModelValue)
+      props['onUpdate:modelValue']?.(changedModelValue)
 
-			return changedModelValue
-		}
+      return changedModelValue
+    }
 
-		const uncheckAll = () => {
-			const changedModelValue: any[] = []
+    const uncheckAll = () => {
+      const changedModelValue: any[] = []
 
-			props['onUpdate:modelValue']?.(changedModelValue)
+      props['onUpdate:modelValue']?.(changedModelValue)
 
-			return changedModelValue
-		}
+      return changedModelValue
+    }
 
-		const inverseAll = () => {
-			const checkedValues: any[] = checkboxProviders
-				.filter(({ checked }) => !checked.value)
-				.map(({ checkedValue }) => checkedValue.value)
+    const inverseAll = () => {
+      const checkedValues: any[] = checkboxProviders
+        .filter(({ checked }) => !checked.value)
+        .map(({ checkedValue }) => checkedValue.value)
 
-			const changedModelValue: any[] = [...new Set(checkedValues)]
+      const changedModelValue: any[] = [...new Set(checkedValues)]
 
-			props['onUpdate:modelValue']?.(changedModelValue)
+      props['onUpdate:modelValue']?.(changedModelValue)
 
-			return changedModelValue
-		}
+      return changedModelValue
+    }
 
-		const reset = () => {
-			props['onUpdate:modelValue']?.([])
-			resetValidation()
-		}
+    const reset = () => {
+      props['onUpdate:modelValue']?.([])
+      resetValidation()
+    }
 
-		watch(() => props.modelValue, syncAllCheckbox, { deep: true })
+    watch(() => props.modelValue, syncAllCheckbox, { deep: true })
 
-		watch(() => length.value, syncAllCheckbox)
+    watch(() => length.value, syncAllCheckbox)
 
-		const checkboxGroupProvider: CheckboxGroupProvider = {
-			checkedCount,
-			max,
-			onChecked,
-			onUnchecked,
-			validate,
-			resetValidation,
-			reset,
-			errorMessage: errorMessageComputed,
-		}
+    const checkboxGroupProvider: CheckboxGroupProvider = {
+      checkedCount,
+      max,
+      onChecked,
+      onUnchecked,
+      validate,
+      resetValidation,
+      reset,
+      errorMessage: errorMessageComputed,
+    }
 
-		bindCheckbox(checkboxGroupProvider)
-		bindForm?.(checkboxGroupProvider)
+    bindCheckbox(checkboxGroupProvider)
+    bindForm?.(checkboxGroupProvider)
 
-		return {
-			errorMessage,
-			checkAll,
-			uncheckAll,
-			inverseAll,
-			reset,
-			validate,
-			resetValidation,
-		}
-	},
+    return {
+      errorMessage,
+      checkAll,
+      uncheckAll,
+      inverseAll,
+      reset,
+      validate,
+      resetValidation,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js b/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js
index dd9a3d5dc57..c55571aff8a 100644
--- a/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js
@@ -2,6 +2,6 @@ const CheckboxGroup = require('../../../cjs/checkbox-group').default
 const { render } = require('@testing-library/vue')
 
 test('test checkboxGroup', async () => {
-	const wrapper = render(CheckboxGroup)
-	console.log(wrapper)
+  const wrapper = render(CheckboxGroup)
+  console.log(wrapper)
 })
diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
index f1b98ae24be..9e83122a75e 100644
--- a/packages/varlet-ui/src/checkbox-group/example/index.vue
+++ b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import CheckboxGroup from '..'
 
 export default defineComponent({
-	name: 'CheckboxGroupExample',
-	components: {
-		[CheckboxGroup.name]: CheckboxGroup,
-	},
+  name: 'CheckboxGroupExample',
+  components: {
+    [CheckboxGroup.name]: CheckboxGroup,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/checkbox-group/index.ts b/packages/varlet-ui/src/checkbox-group/index.ts
index 3e2d0ed4831..5e019c0b18c 100644
--- a/packages/varlet-ui/src/checkbox-group/index.ts
+++ b/packages/varlet-ui/src/checkbox-group/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import CheckboxGroup from './CheckboxGroup.vue'
 
 CheckboxGroup.install = function (app: App) {
-	app.component(CheckboxGroup.name, CheckboxGroup)
+  app.component(CheckboxGroup.name, CheckboxGroup)
 }
 
 export default CheckboxGroup
diff --git a/packages/varlet-ui/src/checkbox-group/props.ts b/packages/varlet-ui/src/checkbox-group/props.ts
index 01b23450dcb..02b6196bfcd 100644
--- a/packages/varlet-ui/src/checkbox-group/props.ts
+++ b/packages/varlet-ui/src/checkbox-group/props.ts
@@ -3,32 +3,32 @@ import { PropType } from 'vue'
 export type ValidateTriggers = 'onChange'
 
 export function directionValidator(direction: string) {
-	return ['horizontal', 'vertical'].includes(direction)
+  return ['horizontal', 'vertical'].includes(direction)
 }
 
 export const props = {
-	modelValue: {
-		type: Array as PropType<Array<any>>,
-		default: [],
-	},
-	max: {
-		type: [String, Number],
-	},
-	direction: {
-		type: String,
-		default: 'horizontal',
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onChange'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-	onChange: {
-		type: Function,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    type: Array as PropType<Array<any>>,
+    default: [],
+  },
+  max: {
+    type: [String, Number],
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+  onChange: {
+    type: Function,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
index 3a4dd1d251c..9412db777ae 100644
--- a/packages/varlet-ui/src/checkbox/Checkbox.vue
+++ b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -38,9 +38,9 @@ import { defineComponent, ref, Ref, computed, ComputedRef, watch, nextTick } fro
 import { props, ValidateTriggers } from './props'
 import { useAtParentIndex, useParent, useValidation } from '../utils/components'
 import {
-	CHECKBOX_GROUP_BIND_CHECKBOX_KEY,
-	CHECKBOX_GROUP_COUNT_CHECKBOX_KEY,
-	CheckboxGroupProvider,
+  CHECKBOX_GROUP_BIND_CHECKBOX_KEY,
+  CHECKBOX_GROUP_COUNT_CHECKBOX_KEY,
+  CheckboxGroupProvider,
 } from '../checkbox-group/provide'
 import { CheckboxProvider } from './provide'
 import Icon from '../icon'
@@ -49,119 +49,119 @@ import FormDetails from '../form-details'
 import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 
 export default defineComponent({
-	name: 'VarCheckbox',
-	directives: { Ripple },
-	components: {
-		[Icon.name]: Icon,
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindParent: bindCheckboxGroup, parentProvider: checkboxGroupProvider } = useParent<
+  name: 'VarCheckbox',
+  directives: { Ripple },
+  components: {
+    [Icon.name]: Icon,
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindParent: bindCheckboxGroup, parentProvider: checkboxGroupProvider } = useParent<
 			CheckboxGroupProvider,
 			CheckboxProvider
 		>(CHECKBOX_GROUP_BIND_CHECKBOX_KEY)
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, CheckboxProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
-		useAtParentIndex(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY)
-
-		const value: Ref<any> = ref(false)
-		const checked: ComputedRef<boolean> = computed(() => value.value === props.checkedValue)
-		const checkedValue: ComputedRef<boolean> = computed(() => props.checkedValue)
-
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-
-		const validate = () => v(props.rules, props.modelValue)
-
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
-
-		const change = (changedValue: any) => {
-			value.value = changedValue
-			props['onUpdate:modelValue']?.(value.value)
-			props.onChange?.(value.value)
-
-			validateWithTrigger('onChange')
-
-			changedValue === props.checkedValue
-				? checkboxGroupProvider?.onChecked(props.checkedValue)
-				: checkboxGroupProvider?.onUnchecked(props.checkedValue)
-		}
-
-		const toggle = (changedValue?: any) => {
-			const isInvalidValue = changedValue !== props.uncheckedValue && changedValue !== props.checkedValue
-			if (changedValue != null && (isInvalidValue || changedValue === value.value)) {
-				return
-			}
-
-			if (changedValue == null) {
-				changedValue = checked.value ? props.uncheckedValue : props.checkedValue
-			}
-
-			change(changedValue)
-		}
-
-		const handleClick = (e: Event) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			props.onClick?.(e)
-
-			const maximum = checkboxGroupProvider
-				? checkboxGroupProvider.checkedCount.value >= Number(checkboxGroupProvider.max.value)
-				: false
-
-			if (!checked.value && maximum) {
-				return
-			}
-
-			change(checked.value ? props.uncheckedValue : props.checkedValue)
-		}
-
-		const sync = (values: Array<any>) => {
-			value.value = values.includes(props.checkedValue) ? props.checkedValue : props.uncheckedValue
-		}
-
-		const reset = () => {
-			props['onUpdate:modelValue']?.(props.uncheckedValue)
-			resetValidation()
-		}
-
-		watch(
-			() => props.modelValue,
-			(newValue) => {
-				value.value = newValue
-			},
-			{ immediate: true }
-		)
-
-		const checkboxProvider: CheckboxProvider = {
-			checkedValue,
-			checked,
-			sync,
-			validate,
-			resetValidation,
-			reset,
-		}
-
-		bindCheckboxGroup?.(checkboxProvider)
-		bindForm?.(checkboxProvider)
-
-		return {
-			checked,
-			errorMessage,
-			checkboxGroupErrorMessage: checkboxGroupProvider?.errorMessage,
-			formDisabled: formProvider?.disabled,
-			handleClick,
-			toggle,
-			reset,
-			validate,
-			resetValidation,
-		}
-	},
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, CheckboxProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
+    useAtParentIndex(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY)
+
+    const value: Ref<any> = ref(false)
+    const checked: ComputedRef<boolean> = computed(() => value.value === props.checkedValue)
+    const checkedValue: ComputedRef<boolean> = computed(() => props.checkedValue)
+
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+    const validate = () => v(props.rules, props.modelValue)
+
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+    const change = (changedValue: any) => {
+      value.value = changedValue
+      props['onUpdate:modelValue']?.(value.value)
+      props.onChange?.(value.value)
+
+      validateWithTrigger('onChange')
+
+      changedValue === props.checkedValue
+        ? checkboxGroupProvider?.onChecked(props.checkedValue)
+        : checkboxGroupProvider?.onUnchecked(props.checkedValue)
+    }
+
+    const toggle = (changedValue?: any) => {
+      const isInvalidValue = changedValue !== props.uncheckedValue && changedValue !== props.checkedValue
+      if (changedValue != null && (isInvalidValue || changedValue === value.value)) {
+        return
+      }
+
+      if (changedValue == null) {
+        changedValue = checked.value ? props.uncheckedValue : props.checkedValue
+      }
+
+      change(changedValue)
+    }
+
+    const handleClick = (e: Event) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      props.onClick?.(e)
+
+      const maximum = checkboxGroupProvider
+        ? checkboxGroupProvider.checkedCount.value >= Number(checkboxGroupProvider.max.value)
+        : false
+
+      if (!checked.value && maximum) {
+        return
+      }
+
+      change(checked.value ? props.uncheckedValue : props.checkedValue)
+    }
+
+    const sync = (values: Array<any>) => {
+      value.value = values.includes(props.checkedValue) ? props.checkedValue : props.uncheckedValue
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(props.uncheckedValue)
+      resetValidation()
+    }
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        value.value = newValue
+      },
+      { immediate: true }
+    )
+
+    const checkboxProvider: CheckboxProvider = {
+      checkedValue,
+      checked,
+      sync,
+      validate,
+      resetValidation,
+      reset,
+    }
+
+    bindCheckboxGroup?.(checkboxProvider)
+    bindForm?.(checkboxProvider)
+
+    return {
+      checked,
+      errorMessage,
+      checkboxGroupErrorMessage: checkboxGroupProvider?.errorMessage,
+      formDisabled: formProvider?.disabled,
+      handleClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/checkbox/example/index.vue b/packages/varlet-ui/src/checkbox/example/index.vue
index 279e8987fb7..0a3935305f2 100644
--- a/packages/varlet-ui/src/checkbox/example/index.vue
+++ b/packages/varlet-ui/src/checkbox/example/index.vue
@@ -53,26 +53,26 @@ import Icon from '../../icon'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'CheckboxExample',
-	components: {
-		[Checkbox.name]: Checkbox,
-		[CheckboxGroup.name]: CheckboxGroup,
-		[Icon.name]: Icon,
-		[Button.name]: Button,
-	},
-	setup() {
-		const g: any = ref(null)
-		return {
-			v: ref(false),
-			v1: ref(0),
-			v2: ref([1, 3]),
-			list: ref([]),
-			g,
-			log(v: any) {
-				console.log(v)
-			},
-		}
-	},
+  name: 'CheckboxExample',
+  components: {
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+  },
+  setup() {
+    const g: any = ref(null)
+    return {
+      v: ref(false),
+      v1: ref(0),
+      v2: ref([1, 3]),
+      list: ref([]),
+      g,
+      log(v: any) {
+        console.log(v)
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/checkbox/index.ts b/packages/varlet-ui/src/checkbox/index.ts
index 4b427594a29..04d0825a5e3 100644
--- a/packages/varlet-ui/src/checkbox/index.ts
+++ b/packages/varlet-ui/src/checkbox/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Checkbox from './Checkbox.vue'
 
 Checkbox.install = function (app: App) {
-	app.component(Checkbox.name, Checkbox)
+  app.component(Checkbox.name, Checkbox)
 }
 
 export default Checkbox
diff --git a/packages/varlet-ui/src/checkbox/props.ts b/packages/varlet-ui/src/checkbox/props.ts
index 7ef25bf4e75..bfff78d5893 100644
--- a/packages/varlet-ui/src/checkbox/props.ts
+++ b/packages/varlet-ui/src/checkbox/props.ts
@@ -3,50 +3,50 @@ import { PropType } from 'vue'
 export type ValidateTriggers = 'onChange'
 
 export const props = {
-	modelValue: {
-		default: false,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	checkedValue: {
-		default: true,
-	},
-	uncheckedValue: {
-		default: false,
-	},
-	checkedColor: {
-		type: String,
-	},
-	uncheckedColor: {
-		type: String,
-	},
-	iconSize: {
-		type: String,
-	},
-	ripple: {
-		type: Boolean,
-		default: true,
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onChange'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
-	onClick: {
-		type: Function,
-	},
+  modelValue: {
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  checkedValue: {
+    default: true,
+  },
+  uncheckedValue: {
+    default: false,
+  },
+  checkedColor: {
+    type: String,
+  },
+  uncheckedColor: {
+    type: String,
+  },
+  iconSize: {
+    type: String,
+  },
+  ripple: {
+    type: Boolean,
+    default: true,
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  onClick: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/chip/Chip.vue b/packages/varlet-ui/src/chip/Chip.vue
index f4803173366..02dfabbf177 100644
--- a/packages/varlet-ui/src/chip/Chip.vue
+++ b/packages/varlet-ui/src/chip/Chip.vue
@@ -41,31 +41,31 @@ import { props } from './props'
 import Icon from '../icon'
 
 export default defineComponent({
-	name: 'VarChip',
-	components: {
-		[Icon.name]: Icon,
-	},
-	directives: { Ripple },
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const controlStyle = () => {
-			if (props.plain) {
-				return {
-					color: props.textColor || props.color,
-					borderColor: props.color,
-				}
-			}
+  name: 'VarChip',
+  components: {
+    [Icon.name]: Icon,
+  },
+  directives: { Ripple },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const controlStyle = () => {
+      if (props.plain) {
+        return {
+          color: props.textColor || props.color,
+          borderColor: props.color,
+        }
+      }
 
-			return {
-				color: props.textColor,
-				background: props.color,
-			}
-		}
-		return {
-			controlStyle,
-		}
-	},
+      return {
+        color: props.textColor,
+        background: props.color,
+      }
+    }
+    return {
+      controlStyle,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/chip/__tests__/index.spec.js b/packages/varlet-ui/src/chip/__tests__/index.spec.js
index 77345b882be..78cce776c20 100644
--- a/packages/varlet-ui/src/chip/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/chip/__tests__/index.spec.js
@@ -2,6 +2,6 @@ const chip = require('../../../cjs/chip').default
 const { render } = require('@testing-library/vue')
 
 test('test chip', async () => {
-	const wrapper = render(chip)
-	console.log(wrapper)
+  const wrapper = render(chip)
+  console.log(wrapper)
 })
diff --git a/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js b/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js
index 77345b882be..78cce776c20 100644
--- a/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js
@@ -2,6 +2,6 @@ const chip = require('../../../cjs/chip').default
 const { render } = require('@testing-library/vue')
 
 test('test chip', async () => {
-	const wrapper = render(chip)
-	console.log(wrapper)
+  const wrapper = render(chip)
+  console.log(wrapper)
 })
diff --git a/packages/varlet-ui/src/chip/chip/index.ts b/packages/varlet-ui/src/chip/chip/index.ts
index 61091193ab4..1dfb1b366e7 100644
--- a/packages/varlet-ui/src/chip/chip/index.ts
+++ b/packages/varlet-ui/src/chip/chip/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Chip from './Chip.vue'
 
 Chip.install = function (app: App) {
-	app.component(Chip.name, Chip)
+  app.component(Chip.name, Chip)
 }
 
 export default Chip
diff --git a/packages/varlet-ui/src/chip/chip/props.ts b/packages/varlet-ui/src/chip/chip/props.ts
index dc0e4bc1945..d9e8541c4ff 100644
--- a/packages/varlet-ui/src/chip/chip/props.ts
+++ b/packages/varlet-ui/src/chip/chip/props.ts
@@ -16,65 +16,65 @@ export const props = {
     default: 'default',
     validator: typeValidator
   },
-//  标签尺寸
+  //  标签尺寸
   size: {
     type: String,
     default: 'normal',
     validator: sizeValidator
   },
-//  是否使用水波纹
+  //  是否使用水波纹
   disabled: {
     type: Boolean,
     default: true
   },
-//  是否空心
+  //  是否空心
   plain: {
     type: Boolean,
     default: false
   },
-//  标签文字颜色
+  //  标签文字颜色
   color: {
     type: String
   },
-//  是否使用圆形标签
+  //  是否使用圆形标签
   round: {
     type: Boolean,
     default: true
   },
-//  是否是块级元素
+  //  是否是块级元素
   block: {
     type: Boolean,
     default: false
   },
-//  背景颜色
+  //  背景颜色
   background: {
     type: String
   },
-//  是否使用图标
+  //  是否使用图标
   icon: {
     type: Boolean,
     default: false
   },
-//  是否可关闭
+  //  是否可关闭
   closable: {
     type: Boolean,
     default: false
   },
-//  字体颜色
+  //  字体颜色
   textColor: {
     type: String
   },
-//  图标样式
+  //  图标样式
   iconName: pickProps(iconProps, 'name'),
-//  图标样式
-//   iconType:pickProps(iconProps,'type'),
-//  图标大小
-//   iconSize:pickProps(iconProps,'size'),
-//   closeIcon: {
-//     type: String,
-//     default: false
-//   },
-//  取消回调
+  //  图标样式
+  //   iconType:pickProps(iconProps,'type'),
+  //  图标大小
+  //   iconSize:pickProps(iconProps,'size'),
+  //   closeIcon: {
+  //     type: String,
+  //     default: false
+  //   },
+  //  取消回调
   onClose: {
     type: Function
   }
diff --git a/packages/varlet-ui/src/chip/example/index.vue b/packages/varlet-ui/src/chip/example/index.vue
index b0a84751e25..e74caca428e 100644
--- a/packages/varlet-ui/src/chip/example/index.vue
+++ b/packages/varlet-ui/src/chip/example/index.vue
@@ -63,29 +63,29 @@ import Chip from '..'
 import Icon from '../../icon'
 
 export default defineComponent({
-	name: 'ChipExample',
-	components: {
-		[Chip.name]: Chip,
-		[Icon.name]: Icon,
-	},
-	setup() {
-		const show: Ref<boolean> = ref(true)
-		const show1: Ref<boolean> = ref(true)
-		const show2: Ref<boolean> = ref(true)
-		const show3: Ref<boolean> = ref(true)
-		const show4: Ref<boolean> = ref(true)
-		const show5: Ref<boolean> = ref(true)
-		const show6: Ref<boolean> = ref(true)
-		return {
-			show,
-			show1,
-			show2,
-			show3,
-			show4,
-			show5,
-			show6,
-		}
-	},
+  name: 'ChipExample',
+  components: {
+    [Chip.name]: Chip,
+    [Icon.name]: Icon,
+  },
+  setup() {
+    const show: Ref<boolean> = ref(true)
+    const show1: Ref<boolean> = ref(true)
+    const show2: Ref<boolean> = ref(true)
+    const show3: Ref<boolean> = ref(true)
+    const show4: Ref<boolean> = ref(true)
+    const show5: Ref<boolean> = ref(true)
+    const show6: Ref<boolean> = ref(true)
+    return {
+      show,
+      show1,
+      show2,
+      show3,
+      show4,
+      show5,
+      show6,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/chip/index.ts b/packages/varlet-ui/src/chip/index.ts
index 61091193ab4..1dfb1b366e7 100644
--- a/packages/varlet-ui/src/chip/index.ts
+++ b/packages/varlet-ui/src/chip/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Chip from './Chip.vue'
 
 Chip.install = function (app: App) {
-	app.component(Chip.name, Chip)
+  app.component(Chip.name, Chip)
 }
 
 export default Chip
diff --git a/packages/varlet-ui/src/chip/props.ts b/packages/varlet-ui/src/chip/props.ts
index dc0e4bc1945..d9e8541c4ff 100644
--- a/packages/varlet-ui/src/chip/props.ts
+++ b/packages/varlet-ui/src/chip/props.ts
@@ -16,65 +16,65 @@ export const props = {
     default: 'default',
     validator: typeValidator
   },
-//  标签尺寸
+  //  标签尺寸
   size: {
     type: String,
     default: 'normal',
     validator: sizeValidator
   },
-//  是否使用水波纹
+  //  是否使用水波纹
   disabled: {
     type: Boolean,
     default: true
   },
-//  是否空心
+  //  是否空心
   plain: {
     type: Boolean,
     default: false
   },
-//  标签文字颜色
+  //  标签文字颜色
   color: {
     type: String
   },
-//  是否使用圆形标签
+  //  是否使用圆形标签
   round: {
     type: Boolean,
     default: true
   },
-//  是否是块级元素
+  //  是否是块级元素
   block: {
     type: Boolean,
     default: false
   },
-//  背景颜色
+  //  背景颜色
   background: {
     type: String
   },
-//  是否使用图标
+  //  是否使用图标
   icon: {
     type: Boolean,
     default: false
   },
-//  是否可关闭
+  //  是否可关闭
   closable: {
     type: Boolean,
     default: false
   },
-//  字体颜色
+  //  字体颜色
   textColor: {
     type: String
   },
-//  图标样式
+  //  图标样式
   iconName: pickProps(iconProps, 'name'),
-//  图标样式
-//   iconType:pickProps(iconProps,'type'),
-//  图标大小
-//   iconSize:pickProps(iconProps,'size'),
-//   closeIcon: {
-//     type: String,
-//     default: false
-//   },
-//  取消回调
+  //  图标样式
+  //   iconType:pickProps(iconProps,'type'),
+  //  图标大小
+  //   iconSize:pickProps(iconProps,'size'),
+  //   closeIcon: {
+  //     type: String,
+  //     default: false
+  //   },
+  //  取消回调
   onClose: {
     type: Function
   }
diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
index d5fab560fee..fa8db2f15c8 100644
--- a/packages/varlet-ui/src/dialog/Dialog.vue
+++ b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -58,79 +58,79 @@ import { props } from './props'
 import { defineComponent, ref, Ref, watch } from 'vue'
 
 export default defineComponent({
-	name: 'VarDialog',
-	components: {
-		[Popup.name]: Popup,
-		[Button.name]: Button,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		// 需要透传到popup组件里并需要特殊处理的参数
-		const popupShow: Ref<boolean> = ref(false)
-		const popupCloseOnClickOverlay: Ref<boolean> = ref(false)
+  name: 'VarDialog',
+  components: {
+    [Popup.name]: Popup,
+    [Button.name]: Button,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    // 需要透传到popup组件里并需要特殊处理的参数
+    const popupShow: Ref<boolean> = ref(false)
+    const popupCloseOnClickOverlay: Ref<boolean> = ref(false)
 
-		watch(
-			() => props.show,
-			(newValue) => {
-				popupShow.value = newValue
-			},
-			{ immediate: true }
-		)
-		watch(
-			() => props.closeOnClickOverlay,
-			(newValue) => {
-				if (props.onBeforeClose) {
-					// 异步关闭情况下 禁止点击弹出层关闭
-					popupCloseOnClickOverlay.value = false
-					return
-				}
-				popupCloseOnClickOverlay.value = newValue
-			},
-			{ immediate: true }
-		)
+    watch(
+      () => props.show,
+      (newValue) => {
+        popupShow.value = newValue
+      },
+      { immediate: true }
+    )
+    watch(
+      () => props.closeOnClickOverlay,
+      (newValue) => {
+        if (props.onBeforeClose) {
+          // 异步关闭情况下 禁止点击弹出层关闭
+          popupCloseOnClickOverlay.value = false
+          return
+        }
+        popupCloseOnClickOverlay.value = newValue
+      },
+      { immediate: true }
+    )
 
-		// 异步关闭回调
-		const done = () => props['onUpdate:show']?.(false)
+    // 异步关闭回调
+    const done = () => props['onUpdate:show']?.(false)
 
-		const handleClickOverlay = () => {
-			props.onClickOverlay?.()
-			if (props.closeOnClickOverlay === false) {
-				return
-			}
-			if (props.onBeforeClose) {
-				props.onBeforeClose(done)
-				return
-			}
-			props['onUpdate:show']?.(false)
-		}
+    const handleClickOverlay = () => {
+      props.onClickOverlay?.()
+      if (props.closeOnClickOverlay === false) {
+        return
+      }
+      if (props.onBeforeClose) {
+        props.onBeforeClose(done)
+        return
+      }
+      props['onUpdate:show']?.(false)
+    }
 
-		const confirm = () => {
-			props.onConfirm?.()
-			if (props.beforeClose) {
-				props.onBeforeClose(done)
-				return
-			}
-			props['onUpdate:show']?.(false)
-		}
+    const confirm = () => {
+      props.onConfirm?.()
+      if (props.beforeClose) {
+        props.onBeforeClose(done)
+        return
+      }
+      props['onUpdate:show']?.(false)
+    }
 
-		const cancel = () => {
-			props.onCancel?.()
-			if (props.onBeforeClose) {
-				props.onBeforeClose(done)
-				return
-			}
-			props['onUpdate:show']?.(false)
-		}
+    const cancel = () => {
+      props.onCancel?.()
+      if (props.onBeforeClose) {
+        props.onBeforeClose(done)
+        return
+      }
+      props['onUpdate:show']?.(false)
+    }
 
-		return {
-			popupShow,
-			popupCloseOnClickOverlay,
-			handleClickOverlay,
-			confirm,
-			cancel,
-		}
-	},
+    return {
+      popupShow,
+      popupCloseOnClickOverlay,
+      handleClickOverlay,
+      confirm,
+      cancel,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts
index 4b5ea2f3288..c58591c2778 100644
--- a/packages/varlet-ui/src/dialog/index.ts
+++ b/packages/varlet-ui/src/dialog/index.ts
@@ -26,34 +26,34 @@ interface DialogOptions {
 type DialogResolvedState = 'confirm' | 'cancel' | 'close'
 
 function Dialog(options: DialogOptions | string): Promise<DialogResolvedState> {
-	return new Promise((resolve) => {
-		const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
-		const reactiveDialogOptions: DialogOptions = reactive(dialogOptions)
-
-		const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
-			onConfirm: () => {
-				resolve('confirm')
-			},
-			onCancel: () => {
-				resolve('cancel')
-			},
-			onClose: () => {
-				resolve('close')
-			},
-			onClosed: () => {
-				unmountInstance()
-			},
-			'onUpdate:show': (value: boolean) => {
-				reactiveDialogOptions.show = value
-			},
-		})
-
-		reactiveDialogOptions.show = true
-	})
+  return new Promise((resolve) => {
+    const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
+    const reactiveDialogOptions: DialogOptions = reactive(dialogOptions)
+
+    const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
+      onConfirm: () => {
+        resolve('confirm')
+      },
+      onCancel: () => {
+        resolve('cancel')
+      },
+      onClose: () => {
+        resolve('close')
+      },
+      onClosed: () => {
+        unmountInstance()
+      },
+      'onUpdate:show': (value: boolean) => {
+        reactiveDialogOptions.show = value
+      },
+    })
+
+    reactiveDialogOptions.show = true
+  })
 }
 
 Dialog.install = function (app: App) {
-	app.component(VarDialog.name, VarDialog)
+  app.component(VarDialog.name, VarDialog)
 }
 
 Dialog.Component = VarDialog
diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts
index 5daea0bbe51..316d4aef2bd 100644
--- a/packages/varlet-ui/src/dialog/props.ts
+++ b/packages/varlet-ui/src/dialog/props.ts
@@ -2,91 +2,91 @@ import { pickProps } from '../utils/components'
 import { props as popupProps } from '../popup/props'
 
 function messageAlignValidator(messageAlign: string): boolean {
-	return ['left', 'right'].includes(messageAlign)
+  return ['left', 'right'].includes(messageAlign)
 }
 
 export const props = {
-	// 开关
-	show: {
-		type: Boolean,
-		default: false,
-	},
-	'onUpdate:show': {
-		type: Function,
-	},
-	// 标题
-	title: {
-		type: String,
-		default: '提示',
-	},
-	// 信息
-	message: {
-		type: String,
-	},
-	// 信息对齐方式
-	messageAlign: {
-		type: String,
-		default: 'left',
-		validator: messageAlignValidator,
-	},
-	// 显示确认按钮
-	confirmButton: {
-		type: Boolean,
-		default: true,
-	},
-	// 显示取消按钮
-	cancelButton: {
-		type: Boolean,
-		default: true,
-	},
-	// 确认按钮文案
-	confirmButtonText: {
-		type: String,
-		default: '确定',
-	},
-	// 取消按钮文案
-	cancelButtonText: {
-		type: String,
-		default: '取消',
-	},
-	// 确认按钮文字颜色
-	confirmButtonColor: {
-		type: String,
-	},
-	// 取消按钮文字颜色
-	cancelButtonColor: {
-		type: String,
-	},
-	// 确认按钮背景
-	confirmButtonBackground: {
-		type: String,
-	},
-	// 确认按钮背景
-	cancelButtonBackground: {
-		type: String,
-	},
-	// 关闭前回调函数
-	onBeforeClose: {
-		type: Function,
-	},
-	// 确认回调
-	onConfirm: {
-		type: Function,
-	},
-	// 取消回调
-	onCancel: {
-		type: Function,
-	},
-	...pickProps(popupProps, [
-		'overlay',
-		'overlayClass',
-		'lockScroll',
-		'closeOnClickOverlay',
-		'teleport',
-		'onOpen',
-		'onClose',
-		'onOpened',
-		'onClosed',
-		'onClickOverlay',
-	]),
+  // 开关
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  'onUpdate:show': {
+    type: Function,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '提示',
+  },
+  // 信息
+  message: {
+    type: String,
+  },
+  // 信息对齐方式
+  messageAlign: {
+    type: String,
+    default: 'left',
+    validator: messageAlignValidator,
+  },
+  // 显示确认按钮
+  confirmButton: {
+    type: Boolean,
+    default: true,
+  },
+  // 显示取消按钮
+  cancelButton: {
+    type: Boolean,
+    default: true,
+  },
+  // 确认按钮文案
+  confirmButtonText: {
+    type: String,
+    default: '确定',
+  },
+  // 取消按钮文案
+  cancelButtonText: {
+    type: String,
+    default: '取消',
+  },
+  // 确认按钮文字颜色
+  confirmButtonColor: {
+    type: String,
+  },
+  // 取消按钮文字颜色
+  cancelButtonColor: {
+    type: String,
+  },
+  // 确认按钮背景
+  confirmButtonBackground: {
+    type: String,
+  },
+  // 确认按钮背景
+  cancelButtonBackground: {
+    type: String,
+  },
+  // 关闭前回调函数
+  onBeforeClose: {
+    type: Function,
+  },
+  // 确认回调
+  onConfirm: {
+    type: Function,
+  },
+  // 取消回调
+  onCancel: {
+    type: Function,
+  },
+  ...pickProps(popupProps, [
+    'overlay',
+    'overlayClass',
+    'lockScroll',
+    'closeOnClickOverlay',
+    'teleport',
+    'onOpen',
+    'onClose',
+    'onOpened',
+    'onClosed',
+    'onClickOverlay',
+  ]),
 }
diff --git a/packages/varlet-ui/src/expansion-panel/index.ts b/packages/varlet-ui/src/expansion-panel/index.ts
index 4a3f42c59c8..19edbe43b5b 100644
--- a/packages/varlet-ui/src/expansion-panel/index.ts
+++ b/packages/varlet-ui/src/expansion-panel/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import ExpansionPanel from './ExpansionPanel.vue'
 
 ExpansionPanel.install = function (app: App) {
-	app.component(ExpansionPanel.name, ExpansionPanel)
+  app.component(ExpansionPanel.name, ExpansionPanel)
 }
 
 export default ExpansionPanel
diff --git a/packages/varlet-ui/src/expansion-panel/props.ts b/packages/varlet-ui/src/expansion-panel/props.ts
index f089ccf4294..006f87e4618 100644
--- a/packages/varlet-ui/src/expansion-panel/props.ts
+++ b/packages/varlet-ui/src/expansion-panel/props.ts
@@ -1,16 +1,16 @@
 export const props = {
-	name: {
-		type: [String, Number],
-	},
-	title: {
-		type: String,
-	},
-	icon: {
-		type: String,
-		default: 'chevron-down',
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
+  name: {
+    type: [String, Number],
+  },
+  title: {
+    type: String,
+  },
+  icon: {
+    type: String,
+    default: 'chevron-down',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 }
diff --git a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
index 816b9468b0b..f89482cdf3f 100644
--- a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
+++ b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
@@ -68,7 +68,6 @@ export default defineComponent({
 
     const matchIndex = (): Array<ExpansionPanelProvider> | ExpansionPanelProvider | undefined => {
       if (props.accordion) {
-        // console.log(expansionPanelProviders)
         return expansionPanelProviders.find(({ index, name }: ExpansionPanelProvider) =>
           name.value === undefined ? props.modelValue === index.value : false
         )
diff --git a/packages/varlet-ui/src/expansion-panels/index.ts b/packages/varlet-ui/src/expansion-panels/index.ts
index e5f19e550e0..ed67ed4f03f 100644
--- a/packages/varlet-ui/src/expansion-panels/index.ts
+++ b/packages/varlet-ui/src/expansion-panels/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import ExpansionPanels from './ExpansionPanels.vue'
 
 ExpansionPanels.install = function (app: App) {
-	app.component(ExpansionPanels.name, ExpansionPanels)
+  app.component(ExpansionPanels.name, ExpansionPanels)
 }
 
 export default ExpansionPanels
diff --git a/packages/varlet-ui/src/form-details/FormDetails.vue b/packages/varlet-ui/src/form-details/FormDetails.vue
index 55fd312d3d7..781591af908 100644
--- a/packages/varlet-ui/src/form-details/FormDetails.vue
+++ b/packages/varlet-ui/src/form-details/FormDetails.vue
@@ -12,8 +12,8 @@ import { defineComponent } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarFormDetails',
-	props,
+  name: 'VarFormDetails',
+  props,
 })
 </script>
 
diff --git a/packages/varlet-ui/src/form-details/example/index.vue b/packages/varlet-ui/src/form-details/example/index.vue
index 374c62e8957..f71bcb6c5c5 100644
--- a/packages/varlet-ui/src/form-details/example/index.vue
+++ b/packages/varlet-ui/src/form-details/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import FormDetails from '..'
 
 export default defineComponent({
-	name: 'FormDetailsExample',
-	components: {
-		[FormDetails.name]: FormDetails,
-	},
+  name: 'FormDetailsExample',
+  components: {
+    [FormDetails.name]: FormDetails,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/form-details/index.ts b/packages/varlet-ui/src/form-details/index.ts
index d5d112a4b25..e89142ffe9e 100644
--- a/packages/varlet-ui/src/form-details/index.ts
+++ b/packages/varlet-ui/src/form-details/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import FormDetails from './FormDetails.vue'
 
 FormDetails.install = function (app: App) {
-	app.component(FormDetails.name, FormDetails)
+  app.component(FormDetails.name, FormDetails)
 }
 
 export default FormDetails
diff --git a/packages/varlet-ui/src/form-details/props.ts b/packages/varlet-ui/src/form-details/props.ts
index 05daeb68432..94a151e37fb 100644
--- a/packages/varlet-ui/src/form-details/props.ts
+++ b/packages/varlet-ui/src/form-details/props.ts
@@ -1,10 +1,10 @@
 export const props = {
-	errorMessage: {
-		type: String,
-		default: '',
-	},
-	maxlengthText: {
-		type: String,
-		default: '',
-	},
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  maxlengthText: {
+    type: String,
+    default: '',
+  },
 }
diff --git a/packages/varlet-ui/src/form/Form.vue b/packages/varlet-ui/src/form/Form.vue
index 12296acb11a..32093a18948 100644
--- a/packages/varlet-ui/src/form/Form.vue
+++ b/packages/varlet-ui/src/form/Form.vue
@@ -11,38 +11,38 @@ import { useChildren } from '../utils/components'
 import { FORM_BIND_FORM_ITEM_KEY, FormProvider, Validation } from './provide'
 
 export default defineComponent({
-	name: 'VarForm',
-	props,
-	setup(props) {
-		const { bindChildren: bindFormItem, childProviders: formItemProviders } = useChildren<FormProvider, Validation>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
+  name: 'VarForm',
+  props,
+  setup(props) {
+    const { bindChildren: bindFormItem, childProviders: formItemProviders } = useChildren<FormProvider, Validation>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
 
-		const disabled: ComputedRef<boolean> = computed(() => props.disabled)
-		const readonly: ComputedRef<boolean> = computed(() => props.readonly)
+    const disabled: ComputedRef<boolean> = computed(() => props.disabled)
+    const readonly: ComputedRef<boolean> = computed(() => props.readonly)
 
-		const validate = async () => {
-			const res = await Promise.all(formItemProviders.map(({ validate }) => validate()))
+    const validate = async () => {
+      const res = await Promise.all(formItemProviders.map(({ validate }) => validate()))
 
-			return res.every((r) => r === true)
-		}
+      return res.every((r) => r === true)
+    }
 
-		const reset = () => formItemProviders.forEach(({ reset }) => reset())
+    const reset = () => formItemProviders.forEach(({ reset }) => reset())
 
-		const resetValidation = () => formItemProviders.forEach(({ resetValidation }) => resetValidation())
+    const resetValidation = () => formItemProviders.forEach(({ resetValidation }) => resetValidation())
 
-		const formProvider: FormProvider = {
-			disabled,
-			readonly,
-		}
+    const formProvider: FormProvider = {
+      disabled,
+      readonly,
+    }
 
-		bindFormItem(formProvider)
+    bindFormItem(formProvider)
 
-		return {
-			validate,
-			reset,
-			resetValidation,
-		}
-	},
+    return {
+      validate,
+      reset,
+      resetValidation,
+    }
+  },
 })
 </script>
diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
index dd200693605..16a7c17f20d 100644
--- a/packages/varlet-ui/src/form/example/index.vue
+++ b/packages/varlet-ui/src/form/example/index.vue
@@ -79,45 +79,45 @@ import Switch from '../../switch'
 import Slider from '../../slider'
 
 export default defineComponent({
-	name: 'FormExample',
-	components: {
-		[Form.name]: Form,
-		[Input.name]: Input,
-		[Select.name]: Select,
-		[CheckboxGroup.name]: CheckboxGroup,
-		[Checkbox.name]: Checkbox,
-		[RadioGroup.name]: RadioGroup,
-		[Radio.name]: Radio,
-		[Option.name]: Option,
-		[Switch.name]: Switch,
-		[Slider.name]: Slider,
-		[Button.name]: Button,
-	},
-	setup() {
-		const form: any = reactive({
-			username: undefined,
-			password: undefined,
-			department: undefined,
-			gender: undefined,
-			confirm: false,
-			open: false,
-			slider: 10,
-			group: [],
-			skill: [],
-			like: [],
-		})
+  name: 'FormExample',
+  components: {
+    [Form.name]: Form,
+    [Input.name]: Input,
+    [Select.name]: Select,
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Checkbox.name]: Checkbox,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    [Option.name]: Option,
+    [Switch.name]: Switch,
+    [Slider.name]: Slider,
+    [Button.name]: Button,
+  },
+  setup() {
+    const form: any = reactive({
+      username: undefined,
+      password: undefined,
+      department: undefined,
+      gender: undefined,
+      confirm: false,
+      open: false,
+      slider: 10,
+      group: [],
+      skill: [],
+      like: [],
+    })
 
-		const formEl: any = ref(null)
-		const disabled: any = ref(false)
-		const readonly: any = ref(false)
+    const formEl: any = ref(null)
+    const disabled: any = ref(false)
+    const readonly: any = ref(false)
 
-		return {
-			formEl,
-			form,
-			disabled,
-			readonly,
-		}
-	},
+    return {
+      formEl,
+      form,
+      disabled,
+      readonly,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/form/index.ts b/packages/varlet-ui/src/form/index.ts
index c3f20dc1f0b..33a4744fd57 100644
--- a/packages/varlet-ui/src/form/index.ts
+++ b/packages/varlet-ui/src/form/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Form from './Form.vue'
 
 Form.install = function (app: App) {
-	app.component(Form.name, Form)
+  app.component(Form.name, Form)
 }
 
 export default Form
diff --git a/packages/varlet-ui/src/form/props.ts b/packages/varlet-ui/src/form/props.ts
index b65716fa7e7..12333a45fb9 100644
--- a/packages/varlet-ui/src/form/props.ts
+++ b/packages/varlet-ui/src/form/props.ts
@@ -1,10 +1,10 @@
 export const props = {
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 }
diff --git a/packages/varlet-ui/src/icon/Icon.vue b/packages/varlet-ui/src/icon/Icon.vue
index ab422c54b38..7b1ea287e20 100644
--- a/packages/varlet-ui/src/icon/Icon.vue
+++ b/packages/varlet-ui/src/icon/Icon.vue
@@ -24,47 +24,47 @@ import { isURL } from '../utils/shared'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarIcon',
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const nextName: Ref<string | undefined> = ref('')
-		const tickTransition: Ref<boolean> = ref(false)
+  name: 'VarIcon',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const nextName: Ref<string | undefined> = ref('')
+    const tickTransition: Ref<boolean> = ref(false)
 
-		watch(
-			() => props.name,
-			(newValue: string | undefined, oldValue: string | undefined) => {
-				if (oldValue === undefined || !props.transition) {
-					nextName.value = newValue
-					return
-				}
+    watch(
+      () => props.name,
+      (newValue: string | undefined, oldValue: string | undefined) => {
+        if (oldValue === undefined || !props.transition) {
+          nextName.value = newValue
+          return
+        }
 
-				tickTransition.value = true
+        tickTransition.value = true
 
-				nextTick().then(() => {
-					setTimeout(() => {
-						if (oldValue !== undefined) {
-							nextName.value = newValue
-						}
+        nextTick().then(() => {
+          setTimeout(() => {
+            if (oldValue !== undefined) {
+              nextName.value = newValue
+            }
 
-						tickTransition.value = false
-					}, props.transition)
-				})
-			},
-			{ immediate: true }
-		)
+            tickTransition.value = false
+          }, props.transition)
+        })
+      },
+      { immediate: true }
+    )
 
-		const handleClick = (e: Event) => {
-			props.onClick?.(e)
-		}
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
 
-		return {
-			isURL,
-			nextName,
-			tickTransition,
-			handleClick,
-		}
-	},
+    return {
+      isURL,
+      nextName,
+      tickTransition,
+      handleClick,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/icon/example/index.vue b/packages/varlet-ui/src/icon/example/index.vue
index 125fcaadcc2..fcbf821a09b 100644
--- a/packages/varlet-ui/src/icon/example/index.vue
+++ b/packages/varlet-ui/src/icon/example/index.vue
@@ -1,19 +1,19 @@
 <template>
-	<div class="example">
-		<app-type>icons列表</app-type>
-		<div class="example__icons">
-			<div class="example__icon" v-for="iconName in iconNames" :key="iconName" v-ripple :data-clipboard-text="iconName">
-				<var-icon :name="iconName" />
-				<div class="example__icon-name">
-					{{ iconName }}
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="example">
+    <app-type>icons列表</app-type>
+    <div class="example__icons">
+      <div class="example__icon" v-for="iconName in iconNames" :key="iconName" v-ripple :data-clipboard-text="iconName">
+        <var-icon :name="iconName" />
+        <div class="example__icon-name">
+          {{ iconName }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted, ref, Ref } from 'vue'
+import { defineComponent, reactive, onMounted } from 'vue'
 import Icon from '..'
 import Button from '../../button'
 import Ripple from '../../ripple'
@@ -22,57 +22,57 @@ import Snackbar from '../../snackbar'
 const Clipboard = require('clipboard')
 
 export default defineComponent({
-	name: 'IconExample',
-	components: {
-		[Icon.name]: Icon,
-		[Button.name]: Button,
-	},
-	directives: { Ripple },
-	setup() {
-		const iconNames: string[] = reactive(require('@varlet/icons'))
+  name: 'IconExample',
+  components: {
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+  },
+  directives: { Ripple },
+  setup() {
+    const iconNames: string[] = reactive(require('@varlet/icons'))
 
-		onMounted(() => {
-			const clipboard = new Clipboard('.example__icon', {
-				text(trigger: any) {
-					const iconName = trigger.getAttribute('data-clipboard-text')
-					return `<var-icon name="${iconName}" />`
-				},
-			})
+    onMounted(() => {
+      const clipboard = new Clipboard('.example__icon', {
+        text(trigger: any) {
+          const iconName = trigger.getAttribute('data-clipboard-text')
+          return `<var-icon name="${iconName}" />`
+        },
+      })
 
-			clipboard.on('success', (e: any) => {
-				Snackbar.success(`成功完成复制${e.text}`)
-			})
-		})
+      clipboard.on('success', (e: any) => {
+        Snackbar.success(`成功完成复制${e.text}`)
+      })
+    })
 
-		return {
-			iconNames,
-		}
-	},
+    return {
+      iconNames,
+    }
+  },
 })
 </script>
 
 <style lang="less" scoped>
 .example {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-	&__icons {
-		display: flex;
-		flex-wrap: wrap;
-	}
+  &__icons {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
-	&__icon {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 33%;
-		padding: 10px;
-	}
+  &__icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 33%;
+    padding: 10px;
+  }
 
-	&__icon-name {
-		font-size: 12px;
-		text-align: center;
-	}
+  &__icon-name {
+    font-size: 12px;
+    text-align: center;
+  }
 }
 </style>
diff --git a/packages/varlet-ui/src/icon/index.ts b/packages/varlet-ui/src/icon/index.ts
index 7592d884c49..179076aeb07 100644
--- a/packages/varlet-ui/src/icon/index.ts
+++ b/packages/varlet-ui/src/icon/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Icon from './Icon.vue'
 
 Icon.install = function (app: App) {
-	app.component(Icon.name, Icon)
+  app.component(Icon.name, Icon)
 }
 
 export default Icon
diff --git a/packages/varlet-ui/src/icon/props.ts b/packages/varlet-ui/src/icon/props.ts
index 57fc2957b4f..73a942bd49e 100644
--- a/packages/varlet-ui/src/icon/props.ts
+++ b/packages/varlet-ui/src/icon/props.ts
@@ -1,21 +1,21 @@
 export const props = {
-	name: {
-		type: String,
-	},
+  name: {
+    type: String,
+  },
   color: {
     type: String,
   },
   size: {
     type: String,
   },
-	namespace: {
-		type: String,
-		default: 'var-icon',
-	},
-	transition: {
-		type: Number,
-		default: 0,
-	},
+  namespace: {
+    type: String,
+    default: 'var-icon',
+  },
+  transition: {
+    type: Number,
+    default: 0,
+  },
   onClick: {
 	  type: Function
   }
diff --git a/packages/varlet-ui/src/image/Image.vue b/packages/varlet-ui/src/image/Image.vue
index 93fb23d966d..8234abf8fc0 100644
--- a/packages/varlet-ui/src/image/Image.vue
+++ b/packages/varlet-ui/src/image/Image.vue
@@ -32,32 +32,32 @@ import Ripple from '../ripple'
 import Lazy, { LazyHTMLElement } from '../lazy'
 
 export default defineComponent({
-	name: 'VarImage',
-	directives: {
-		Lazy,
-		Ripple,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const handleLoad = (e: Event) => {
-			const el: LazyHTMLElement = e.currentTarget as LazyHTMLElement
+  name: 'VarImage',
+  directives: {
+    Lazy,
+    Ripple,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const handleLoad = (e: Event) => {
+      const el: LazyHTMLElement = e.currentTarget as LazyHTMLElement
 
-			el._lazy.state === 'success' && props.onLoad?.(e, 'success')
-			el._lazy.state === 'error' && props.onError?.(e, 'error')
-		}
+      el._lazy.state === 'success' && props.onLoad?.(e, 'success')
+      el._lazy.state === 'error' && props.onError?.(e, 'error')
+    }
 
-		const handleError = (e: Event) => {
-			const el: LazyHTMLElement = e.currentTarget as LazyHTMLElement
+    const handleError = (e: Event) => {
+      const el: LazyHTMLElement = e.currentTarget as LazyHTMLElement
 
-			el._lazy.state !== 'pending' && props.onError?.(e, 'native-error')
-		}
+      el._lazy.state !== 'pending' && props.onError?.(e, 'native-error')
+    }
 
-		return {
-			handleLoad,
-			handleError,
-		}
-	},
+    return {
+      handleLoad,
+      handleError,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/image/example/index.vue b/packages/varlet-ui/src/image/example/index.vue
index c6416d109b4..c08b0ceb50a 100644
--- a/packages/varlet-ui/src/image/example/index.vue
+++ b/packages/varlet-ui/src/image/example/index.vue
@@ -48,22 +48,22 @@ import { defineComponent } from 'vue'
 import Image from '..'
 
 export default defineComponent({
-	name: 'ImageExample',
-	components: {
-		[Image.name]: Image,
-	},
-	setup() {
-		return {
-			handleLoad(e: Event, state: string) {
-				console.log(e)
-				console.log(state)
-			},
-			handleError(e: Event, state: string) {
-				console.log(e)
-				console.log(state)
-			},
-		}
-	},
+  name: 'ImageExample',
+  components: {
+    [Image.name]: Image,
+  },
+  setup() {
+    return {
+      handleLoad(e: Event, state: string) {
+        console.log(e)
+        console.log(state)
+      },
+      handleError(e: Event, state: string) {
+        console.log(e)
+        console.log(state)
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts
index d835e829791..58472f4c832 100644
--- a/packages/varlet-ui/src/image/props.ts
+++ b/packages/varlet-ui/src/image/props.ts
@@ -1,47 +1,47 @@
 function fitValidator(fit: string) {
-	return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit)
+  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit)
 }
 
 export const props = {
-	src: {
-		type: String,
-	},
-	fit: {
-		type: String,
-		validator: fitValidator,
-		default: 'fill',
-	},
-	alt: {
-		type: String,
-	},
-	width: {
-		type: String,
-	},
-	height: {
-		type: String,
-	},
-	radius: {
-		type: String,
-		default: '0',
-	},
-	error: {
-		type: String,
-	},
-	loading: {
-		type: String,
-	},
-	ripple: {
-		type: Boolean,
-		default: false,
-	},
-	block: {
-		type: Boolean,
-		default: true,
-	},
-	onLoad: {
-		type: Function,
-	},
-	onError: {
-		type: Function,
-	},
+  src: {
+    type: String,
+  },
+  fit: {
+    type: String,
+    validator: fitValidator,
+    default: 'fill',
+  },
+  alt: {
+    type: String,
+  },
+  width: {
+    type: String,
+  },
+  height: {
+    type: String,
+  },
+  radius: {
+    type: String,
+    default: '0',
+  },
+  error: {
+    type: String,
+  },
+  loading: {
+    type: String,
+  },
+  ripple: {
+    type: Boolean,
+    default: false,
+  },
+  block: {
+    type: Boolean,
+    default: true,
+  },
+  onLoad: {
+    type: Function,
+  },
+  onError: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
index ed01e48c481..f13db621aa3 100644
--- a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
+++ b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
@@ -17,60 +17,60 @@ import Sticky from '../sticky'
 import { useParent, useAtParentIndex } from '../utils/components'
 import { IndexAnchorProvider } from './provide'
 import {
-	INDEX_BAR_BIND_INDEX_ANCHOR_KEY,
-	INDEX_BAR_COUNT_INDEX_ANCHOR_KEY,
-	IndexBarProvider,
+  INDEX_BAR_BIND_INDEX_ANCHOR_KEY,
+  INDEX_BAR_COUNT_INDEX_ANCHOR_KEY,
+  IndexBarProvider,
 } from '../index-bar/provide'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarIndexAnchor',
-	components: {
-		[Sticky.name]: Sticky,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const ownTop: Ref<number> = ref(0)
-		const name: ComputedRef<number | string | undefined> = computed(() => props.index)
-		const anchorEl: Ref<HTMLDivElement | RendererNode | null> = ref(null)
-		const { parentProvider: IndexBarProvider, bindParent } = useParent<IndexBarProvider, IndexAnchorProvider>(
-			INDEX_BAR_BIND_INDEX_ANCHOR_KEY
-		)
+  name: 'VarIndexAnchor',
+  components: {
+    [Sticky.name]: Sticky,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const ownTop: Ref<number> = ref(0)
+    const name: ComputedRef<number | string | undefined> = computed(() => props.index)
+    const anchorEl: Ref<HTMLDivElement | RendererNode | null> = ref(null)
+    const { parentProvider: IndexBarProvider, bindParent } = useParent<IndexBarProvider, IndexAnchorProvider>(
+      INDEX_BAR_BIND_INDEX_ANCHOR_KEY
+    )
 
-		if (!IndexBarProvider || !bindParent) {
-			console.error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
-			return
-		}
+    if (!IndexBarProvider || !bindParent) {
+      console.error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
+      return
+    }
 
-		const { active, sticky, stickyOffsetTop, zIndex } = IndexBarProvider
-		const { index } = useAtParentIndex(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
+    const { active, sticky, stickyOffsetTop, zIndex } = IndexBarProvider
+    const { index } = useAtParentIndex(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
 
-		const setOwnTop = () => {
-			ownTop.value = (anchorEl.value as RendererNode).$el
-				? (anchorEl.value as RendererNode).$el.offsetTop
-				: (anchorEl.value as HTMLDivElement).offsetTop
-		}
+    const setOwnTop = () => {
+      ownTop.value = (anchorEl.value as RendererNode).$el
+        ? (anchorEl.value as RendererNode).$el.offsetTop
+        : (anchorEl.value as HTMLDivElement).offsetTop
+    }
 
-		const indexAnchorProvider: IndexAnchorProvider = {
-			index,
-			name,
-			ownTop,
-			setOwnTop,
-		}
+    const indexAnchorProvider: IndexAnchorProvider = {
+      index,
+      name,
+      ownTop,
+      setOwnTop,
+    }
 
-		bindParent(indexAnchorProvider)
+    bindParent(indexAnchorProvider)
 
-		return {
-			name,
-			anchorEl,
-			active,
-			sticky,
-			zIndex,
-			stickyOffsetTop,
-			Transition,
-		}
-	},
+    return {
+      name,
+      anchorEl,
+      active,
+      sticky,
+      zIndex,
+      stickyOffsetTop,
+      Transition,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/index-anchor/index.ts b/packages/varlet-ui/src/index-anchor/index.ts
index 14cf84f7b0a..657284925b1 100644
--- a/packages/varlet-ui/src/index-anchor/index.ts
+++ b/packages/varlet-ui/src/index-anchor/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import IndexAnchor from './IndexAnchor.vue'
 
 IndexAnchor.install = function (app: App) {
-	app.component(IndexAnchor.name, IndexAnchor)
+  app.component(IndexAnchor.name, IndexAnchor)
 }
 
 export default IndexAnchor
diff --git a/packages/varlet-ui/src/index-anchor/props.ts b/packages/varlet-ui/src/index-anchor/props.ts
index 5bf18a81ed2..e65c87eed7e 100644
--- a/packages/varlet-ui/src/index-anchor/props.ts
+++ b/packages/varlet-ui/src/index-anchor/props.ts
@@ -1,5 +1,5 @@
 export const props = {
-	index: {
-		type: [Number, String],
-	},
+  index: {
+    type: [Number, String],
+  },
 }
diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
index eab2b0a7cc6..a4e3b76a303 100644
--- a/packages/varlet-ui/src/index-bar/IndexBar.vue
+++ b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -23,85 +23,85 @@ import { IndexAnchorProvider } from '../index-anchor/provide'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarIndexBar',
-	props,
-	setup(props) {
-		const barEl: Ref<HTMLDivElement | null> = ref(null)
+  name: 'VarIndexBar',
+  props,
+  setup(props) {
+    const barEl: Ref<HTMLDivElement | null> = ref(null)
 
-		const active: ComputedRef<number | string | undefined> = computed(() => props.active)
-		const sticky: ComputedRef<boolean> = computed(() => props.sticky)
-		const stickyOffsetTop: ComputedRef<number> = computed(() => props.stickyOffsetTop)
-		const zIndex: ComputedRef<number | string> = computed(() => props.zIndex)
+    const active: ComputedRef<number | string | undefined> = computed(() => props.active)
+    const sticky: ComputedRef<boolean> = computed(() => props.sticky)
+    const stickyOffsetTop: ComputedRef<number> = computed(() => props.stickyOffsetTop)
+    const zIndex: ComputedRef<number | string> = computed(() => props.zIndex)
 
-		const anchorNameList: Ref<Array<number | string>> = ref([])
+    const anchorNameList: Ref<Array<number | string>> = ref([])
 
-		const { bindChildren, childProviders: IndexAnchorProviders } = useChildren<IndexBarProvider, IndexAnchorProvider>(
-			INDEX_BAR_BIND_INDEX_ANCHOR_KEY
-		)
-		const { length } = useAtChildrenCounter(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
+    const { bindChildren, childProviders: IndexAnchorProviders } = useChildren<IndexBarProvider, IndexAnchorProvider>(
+      INDEX_BAR_BIND_INDEX_ANCHOR_KEY
+    )
+    const { length } = useAtChildrenCounter(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
 
-		const indexBarProvider: IndexBarProvider = {
-			active,
-			sticky,
-			stickyOffsetTop,
-			zIndex,
-		}
+    const indexBarProvider: IndexBarProvider = {
+      active,
+      sticky,
+      stickyOffsetTop,
+      zIndex,
+    }
 
-		bindChildren(indexBarProvider)
+    bindChildren(indexBarProvider)
 
-		const emitEvent = (anchor: IndexAnchorProvider | number | string) => {
-			const anchorName = isBaseObject(anchor) ? anchor.name.value : anchor
-			if (anchorName === props.active) return
-			props['onUpdate:active']?.(anchorName)
-			props.onChange?.(anchorName)
-		}
+    const emitEvent = (anchor: IndexAnchorProvider | number | string) => {
+      const anchorName = isBaseObject(anchor) ? anchor.name.value : anchor
+      if (anchorName === props.active) return
+      props['onUpdate:active']?.(anchorName)
+      props.onChange?.(anchorName)
+    }
 
-		const handleScroll = () => {
-			const { scrollTop } = barEl.value as HTMLDivElement
-			IndexAnchorProviders.forEach((anchor: IndexAnchorProvider, index: number) => {
-				const anchorTop = anchor.ownTop.value
-				const top = scrollTop - anchorTop + stickyOffsetTop.value
+    const handleScroll = () => {
+      const { scrollTop } = barEl.value as HTMLDivElement
+      IndexAnchorProviders.forEach((anchor: IndexAnchorProvider, index: number) => {
+        const anchorTop = anchor.ownTop.value
+        const top = scrollTop - anchorTop + stickyOffsetTop.value
 
-				if (top >= 0 && top <= 10) {
-					emitEvent(anchor)
-				} else if (top < 0 && top >= -10) {
-					const preAnchor = IndexAnchorProviders[index - 1]
-					emitEvent(preAnchor)
-				}
-			})
-		}
+        if (top >= 0 && top <= 10) {
+          emitEvent(anchor)
+        } else if (top < 0 && top >= -10) {
+          const preAnchor = IndexAnchorProviders[index - 1]
+          emitEvent(preAnchor)
+        }
+      })
+    }
 
-		const anchorClick = (anchorName: string | number) => {
-			if (anchorName === active.value) return
-			const indexAnchor = IndexAnchorProviders.find(({ name }: IndexAnchorProvider) => anchorName === name.value)
-			if (!indexAnchor) return
-			const top = indexAnchor.ownTop.value
-			const { scrollLeft } = barEl.value as HTMLDivElement
+    const anchorClick = (anchorName: string | number) => {
+      if (anchorName === active.value) return
+      const indexAnchor = IndexAnchorProviders.find(({ name }: IndexAnchorProvider) => anchorName === name.value)
+      if (!indexAnchor) return
+      const top = indexAnchor.ownTop.value
+      const { scrollLeft } = barEl.value as HTMLDivElement
 			;(barEl.value as HTMLDivElement).scrollTo(scrollLeft, top)
-			emitEvent(anchorName)
-		}
+      emitEvent(anchorName)
+    }
 
-		watch(
-			() => length.value,
-			() =>
-				nextTick(() => {
-					IndexAnchorProviders.forEach(({ name }) => {
-						if (name.value) anchorNameList.value.push(name.value)
-					})
-				})
-		)
+    watch(
+      () => length.value,
+      () =>
+        nextTick(() => {
+          IndexAnchorProviders.forEach(({ name }) => {
+            if (name.value) anchorNameList.value.push(name.value)
+          })
+        })
+    )
 
-		onMounted(() => {
-			IndexAnchorProviders.forEach(({ setOwnTop }) => setOwnTop())
-		})
+    onMounted(() => {
+      IndexAnchorProviders.forEach(({ setOwnTop }) => setOwnTop())
+    })
 
-		return {
-			barEl,
-			anchorNameList,
-			anchorClick,
-			handleScroll,
-		}
-	},
+    return {
+      barEl,
+      anchorNameList,
+      anchorClick,
+      handleScroll,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/index-bar/example/index.vue b/packages/varlet-ui/src/index-bar/example/index.vue
index c22bdf1ad56..e11aafd6cc8 100644
--- a/packages/varlet-ui/src/index-bar/example/index.vue
+++ b/packages/varlet-ui/src/index-bar/example/index.vue
@@ -15,31 +15,31 @@ import IndexAnchor from '../../index-anchor/IndexAnchor.vue'
 import IndexBar from '..'
 
 export default defineComponent({
-	name: 'IndexBarExample',
-	components: {
-		[IndexBar.name]: IndexBar,
-		[IndexAnchor.name]: IndexAnchor,
-	},
-	setup() {
-		const active = ref('A')
-		const list = ref([])
+  name: 'IndexBarExample',
+  components: {
+    [IndexBar.name]: IndexBar,
+    [IndexAnchor.name]: IndexAnchor,
+  },
+  setup() {
+    const active = ref('A')
+    const list = ref([])
 
-		onBeforeMount(() => {
-			for (let i = 0; i < 26; i++) {
-				list.value.push(String.fromCharCode(65 + i))
-			}
-		})
+    onBeforeMount(() => {
+      for (let i = 0; i < 26; i++) {
+        list.value.push(String.fromCharCode(65 + i))
+      }
+    })
 
-		const change = (value) => {
-			console.log(value)
-		}
+    const change = (value) => {
+      console.log(value)
+    }
 
-		return {
-			active,
-			list,
-			change,
-		}
-	},
+    return {
+      active,
+      list,
+      change,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/index-bar/index.ts b/packages/varlet-ui/src/index-bar/index.ts
index 30321909aef..3b3f93e11be 100644
--- a/packages/varlet-ui/src/index-bar/index.ts
+++ b/packages/varlet-ui/src/index-bar/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import IndexBar from './IndexBar.vue'
 
 IndexBar.install = function (app: App) {
-	app.component(IndexBar.name, IndexBar)
+  app.component(IndexBar.name, IndexBar)
 }
 
 export default IndexBar
diff --git a/packages/varlet-ui/src/index-bar/props.ts b/packages/varlet-ui/src/index-bar/props.ts
index 501afdb5a9c..b53858bc1af 100644
--- a/packages/varlet-ui/src/index-bar/props.ts
+++ b/packages/varlet-ui/src/index-bar/props.ts
@@ -1,27 +1,27 @@
 export const props = {
-	active: {
-		type: [Number, String],
-	},
-	sticky: {
-		type: Boolean,
-		default: true,
-	},
-	stickyOffsetTop: {
-		type: Number,
-		default: 0,
-	},
-	zIndex: {
-		type: [Number, String],
-		default: 1,
-	},
-	highlightColor: {
-		type: String,
-		default: '#ee0a24',
-	},
-	'onUpdate:active': {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
+  active: {
+    type: [Number, String],
+  },
+  sticky: {
+    type: Boolean,
+    default: true,
+  },
+  stickyOffsetTop: {
+    type: Number,
+    default: 0,
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1,
+  },
+  highlightColor: {
+    type: String,
+    default: '#ee0a24',
+  },
+  'onUpdate:active': {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index 06305673150..21532149501 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -118,174 +118,174 @@ import FormDetails from '../form-details'
 import Icon from '../icon'
 
 export default defineComponent({
-	name: 'VarInput',
-	components: {
-		[Icon.name]: Icon,
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, InputProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
+  name: 'VarInput',
+  components: {
+    [Icon.name]: Icon,
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, InputProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
 
-		const inputId: Ref<string> = ref(`var-input-${getCurrentInstance()!.uid}`)
-		const isFocus: Ref<boolean> = ref(false)
-		const inputEl: Ref<HTMLInputElement | null> = ref(null)
+    const inputId: Ref<string> = ref(`var-input-${getCurrentInstance()!.uid}`)
+    const isFocus: Ref<boolean> = ref(false)
+    const inputEl: Ref<HTMLInputElement | null> = ref(null)
 
-		const isNumberValue: ComputedRef<boolean> = computed(() => isNumber(props.modelValue))
-		const maxlengthText: ComputedRef<string> = computed(() => {
-			const { maxlength, modelValue } = props
+    const isNumberValue: ComputedRef<boolean> = computed(() => isNumber(props.modelValue))
+    const maxlengthText: ComputedRef<string> = computed(() => {
+      const { maxlength, modelValue } = props
 
-			if (!maxlength) {
-				return ''
-			}
+      if (!maxlength) {
+        return ''
+      }
 
-			if (isEmpty(modelValue)) {
-				return `0 / ${maxlength}`
-			}
+      if (isEmpty(modelValue)) {
+        return `0 / ${maxlength}`
+      }
 
-			return `${String(modelValue).length}/${maxlength}`
-		})
+      return `${String(modelValue).length}/${maxlength}`
+    })
 
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
 
-		const validate = () => v(props.rules, props.modelValue)
+    const validate = () => v(props.rules, props.modelValue)
 
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
 
-		const computePlaceholderState = () => {
-			if (!props.hint && !isEmpty(props.modelValue)) {
-				return 'var-input--placeholder-hidden'
-			}
-			if (props.hint && (!isEmpty(props.modelValue) || isFocus.value)) {
-				return 'var-input--placeholder-hint'
-			}
-		}
+    const computePlaceholderState = () => {
+      if (!props.hint && !isEmpty(props.modelValue)) {
+        return 'var-input--placeholder-hidden'
+      }
+      if (props.hint && (!isEmpty(props.modelValue) || isFocus.value)) {
+        return 'var-input--placeholder-hint'
+      }
+    }
 
-		const normalizeValue = (value: string) => {
-			return isNumberValue.value ? parseFloat(value) : value
-		}
+    const normalizeValue = (value: string) => {
+      return isNumberValue.value ? parseFloat(value) : value
+    }
 
-		const handleFocus = (e: Event) => {
-			isFocus.value = true
-			props.onFocus?.(e)
+    const handleFocus = (e: Event) => {
+      isFocus.value = true
+      props.onFocus?.(e)
 
-			validateWithTrigger('onFocus')
-		}
+      validateWithTrigger('onFocus')
+    }
 
-		const handleBlur = (e: Event) => {
-			isFocus.value = false
-			props.onBlur?.(e)
+    const handleBlur = (e: Event) => {
+      isFocus.value = false
+      props.onBlur?.(e)
 
-			validateWithTrigger('onBlur')
-		}
+      validateWithTrigger('onBlur')
+    }
 
-		const handleInput = (e: Event) => {
-			const { value } = e.target as HTMLInputElement
+    const handleInput = (e: Event) => {
+      const { value } = e.target as HTMLInputElement
 
-			props['onUpdate:modelValue']?.(normalizeValue(value))
-			props.onInput?.(e)
+      props['onUpdate:modelValue']?.(normalizeValue(value))
+      props.onInput?.(e)
 
-			validateWithTrigger('onInput')
-		}
+      validateWithTrigger('onInput')
+    }
 
-		const handleChange = (e: Event) => {
-			props.onChange?.(e)
+    const handleChange = (e: Event) => {
+      props.onChange?.(e)
 
-			validateWithTrigger('onChange')
-		}
+      validateWithTrigger('onChange')
+    }
 
-		const handleClear = () => {
-			if (
-				formProvider?.disabled.value ||
+    const handleClear = () => {
+      if (
+        formProvider?.disabled.value ||
 				formProvider?.readonly.value ||
 				props.disabled ||
 				props.readonly ||
 				!props.clearable
-			) {
-				return
-			}
-
-			props['onUpdate:modelValue']?.(undefined)
-			props.onClear?.()
-
-			validateWithTrigger('onClear')
-		}
-
-		const handleClick = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClick?.(e)
-
-			validateWithTrigger('onClick')
-		}
-
-		const handleClickAppendIcon = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClickAppendIcon?.(e)
-		}
-
-		const handleClickPrependIcon = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClickPrependIcon?.(e)
-		}
-
-		const focus = () => {
-			;(inputEl.value as HTMLInputElement).focus()
-		}
-
-		const blur = () => {
-			;(inputEl.value as HTMLInputElement).blur()
-		}
-
-		const reset = () => {
-			props['onUpdate:modelValue']?.(undefined)
-			resetValidation()
-		}
-
-		const inputProvider: InputProvider = {
-			reset,
-			validate,
-			resetValidation,
-		}
-
-		bindForm?.(inputProvider)
-
-		return {
-			inputEl,
-			inputId,
-			isFocus,
-			errorMessage,
-			maxlengthText,
-			formDisabled: formProvider?.disabled,
-			formReadonly: formProvider?.readonly,
-			computePlaceholderState,
-			handleFocus,
-			handleBlur,
-			handleInput,
-			handleChange,
-			handleClear,
-			handleClick,
-			handleClickAppendIcon,
-			handleClickPrependIcon,
-			validate,
-			resetValidation,
-			reset,
-			focus,
-			blur,
-		}
-	},
+      ) {
+        return
+      }
+
+      props['onUpdate:modelValue']?.(undefined)
+      props.onClear?.()
+
+      validateWithTrigger('onClear')
+    }
+
+    const handleClick = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClick?.(e)
+
+      validateWithTrigger('onClick')
+    }
+
+    const handleClickAppendIcon = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClickAppendIcon?.(e)
+    }
+
+    const handleClickPrependIcon = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClickPrependIcon?.(e)
+    }
+
+    const focus = () => {
+      ;(inputEl.value as HTMLInputElement).focus()
+    }
+
+    const blur = () => {
+      ;(inputEl.value as HTMLInputElement).blur()
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(undefined)
+      resetValidation()
+    }
+
+    const inputProvider: InputProvider = {
+      reset,
+      validate,
+      resetValidation,
+    }
+
+    bindForm?.(inputProvider)
+
+    return {
+      inputEl,
+      inputId,
+      isFocus,
+      errorMessage,
+      maxlengthText,
+      formDisabled: formProvider?.disabled,
+      formReadonly: formProvider?.readonly,
+      computePlaceholderState,
+      handleFocus,
+      handleBlur,
+      handleInput,
+      handleChange,
+      handleClear,
+      handleClick,
+      handleClickAppendIcon,
+      handleClickPrependIcon,
+      validate,
+      resetValidation,
+      reset,
+      focus,
+      blur,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
index d7be16da288..c2d27323192 100644
--- a/packages/varlet-ui/src/input/example/index.vue
+++ b/packages/varlet-ui/src/input/example/index.vue
@@ -54,29 +54,29 @@ import Button from '../../button'
 import Icon from '../../icon'
 
 export default defineComponent({
-	name: 'InputExample',
-	components: {
-		[Input.name]: Input,
-		[Button.name]: Button,
-		[Icon.name]: Icon,
-	},
-	setup() {
-		const value4: any = ref('')
+  name: 'InputExample',
+  components: {
+    [Input.name]: Input,
+    [Button.name]: Button,
+    [Icon.name]: Icon,
+  },
+  setup() {
+    const value4: any = ref('')
 
-		return {
-			value: ref(''),
-			value2: ref(''),
-			value3: ref(''),
-			value4,
-			asyncValidator() {
-				return new Promise((resolve) => {
-					setTimeout(() => {
-						resolve('反正就是失败了')
-					}, 1000)
-				})
-			},
-		}
-	},
+    return {
+      value: ref(''),
+      value2: ref(''),
+      value3: ref(''),
+      value4,
+      asyncValidator() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve('反正就是失败了')
+          }, 1000)
+        })
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
index e326a9f1a63..304ef2a8e18 100644
--- a/packages/varlet-ui/src/input/props.ts
+++ b/packages/varlet-ui/src/input/props.ts
@@ -1,114 +1,114 @@
 import { PropType } from 'vue'
 
 export function textAlignValidator(textAlign: string) {
-	return ['left', 'right', 'center'].includes(textAlign)
+  return ['left', 'right', 'center'].includes(textAlign)
 }
 
 export function typeValidator(type: string) {
-	return ['text', 'password'].includes(type)
+  return ['text', 'password'].includes(type)
 }
 
 export type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
 
 export const props = {
-	modelValue: {
-		type: [String, Number],
-	},
-	textColor: {
-		type: String,
-	},
-	inactiveColor: {
-		type: String,
-	},
-	activeColor: {
-		type: String,
-	},
-	type: {
-		type: String,
-		default: 'text',
-		validator: typeValidator,
-	},
-	maxlength: {
-		type: [String, Number],
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	clearable: {
-		type: Boolean,
-		default: false,
-	},
-	textarea: {
-		type: Boolean,
-		default: false,
-	},
-	resize: {
-		type: Boolean,
-		default: false,
-	},
-	rows: {
-		type: [String, Number],
-		default: 8,
-	},
-	textAlign: {
-		type: String,
-		default: 'left',
-		validator: textAlignValidator,
-	},
-	placeholder: {
-		type: String,
-	},
-	prependIcon: {
-		type: String,
-	},
-	appendIcon: {
-		type: String,
-	},
-	line: {
-		type: Boolean,
-		default: true,
-	},
-	hint: {
-		type: Boolean,
-		default: true,
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onInput', 'onClear'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: string | number | undefined) => any>>,
-	},
-	onFocus: {
-		type: Function,
-	},
-	onBlur: {
-		type: Function,
-	},
-	onInput: {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
-	onClick: {
-		type: Function,
-	},
-	onClear: {
-		type: Function,
-	},
-	onClickAppendIcon: {
-		type: Function,
-	},
-	onClickPrependIcon: {
-		type: Function,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    type: [String, Number],
+  },
+  textColor: {
+    type: String,
+  },
+  inactiveColor: {
+    type: String,
+  },
+  activeColor: {
+    type: String,
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: typeValidator,
+  },
+  maxlength: {
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  textarea: {
+    type: Boolean,
+    default: false,
+  },
+  resize: {
+    type: Boolean,
+    default: false,
+  },
+  rows: {
+    type: [String, Number],
+    default: 8,
+  },
+  textAlign: {
+    type: String,
+    default: 'left',
+    validator: textAlignValidator,
+  },
+  placeholder: {
+    type: String,
+  },
+  prependIcon: {
+    type: String,
+  },
+  appendIcon: {
+    type: String,
+  },
+  line: {
+    type: Boolean,
+    default: true,
+  },
+  hint: {
+    type: Boolean,
+    default: true,
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onInput', 'onClear'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: string | number | undefined) => any>>,
+  },
+  onFocus: {
+    type: Function,
+  },
+  onBlur: {
+    type: Function,
+  },
+  onInput: {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  onClick: {
+    type: Function,
+  },
+  onClear: {
+    type: Function,
+  },
+  onClickAppendIcon: {
+    type: Function,
+  },
+  onClickPrependIcon: {
+    type: Function,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/lazy/index.ts b/packages/varlet-ui/src/lazy/index.ts
index 2d684b13485..98aaa85fa62 100644
--- a/packages/varlet-ui/src/lazy/index.ts
+++ b/packages/varlet-ui/src/lazy/index.ts
@@ -2,12 +2,12 @@ import { App, Directive, Plugin } from 'vue'
 import { DirectiveBinding } from '@vue/runtime-core'
 import { getParentScroller, inViewport } from '../utils/elements'
 import {
-	CacheInstance,
-	checkIntersectionObserverAPI,
-	createCache,
-	createInViewportObserver,
-	removeItem,
-	throttle,
+  CacheInstance,
+  checkIntersectionObserverAPI,
+  createCache,
+  createInViewportObserver,
+  removeItem,
+  throttle,
 } from '../utils/shared'
 
 interface LazyOptions {
@@ -45,11 +45,11 @@ let listenTargets: ListenTarget[] = []
 const imageCache: CacheInstance<string> = createCache<string>(100)
 
 export const defaultLazyOptions: LazyOptions = {
-	loading: PIXEL,
-	error: PIXEL,
-	attempt: 3,
-	throttleWait: 300,
-	events: EVENTS,
+  loading: PIXEL,
+  error: PIXEL,
+  attempt: 3,
+  throttleWait: 300,
+  events: EVENTS,
 }
 
 let checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait)
@@ -59,200 +59,200 @@ let observer: IntersectionObserver | null = null
 const useIntersectionObserverAPI: boolean = checkIntersectionObserverAPI()
 
 function setLoading(el: LazyHTMLElement) {
-	el._lazy.loading
-		? el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME
-			? (el.style.backgroundImage = `url(${el._lazy.loading})`)
-			: el.setAttribute('src', el._lazy.loading)
-		: null
+  el._lazy.loading
+    ? el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME
+      ? (el.style.backgroundImage = `url(${el._lazy.loading})`)
+      : el.setAttribute('src', el._lazy.loading)
+    : null
 
-	!useIntersectionObserverAPI && checkAll()
+  !useIntersectionObserverAPI && checkAll()
 }
 
 function setError(el: LazyHTMLElement) {
-	if (el._lazy.error) {
-		if (el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME) {
-			el.style.backgroundImage = `url(${el._lazy.error})`
-		} else {
-			el.setAttribute('src', el._lazy.error)
-		}
-	}
-
-	el._lazy.state = 'error'
-
-	clear(el)
-	!useIntersectionObserverAPI && checkAll()
+  if (el._lazy.error) {
+    if (el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME) {
+      el.style.backgroundImage = `url(${el._lazy.error})`
+    } else {
+      el.setAttribute('src', el._lazy.error)
+    }
+  }
+
+  el._lazy.state = 'error'
+
+  clear(el)
+  !useIntersectionObserverAPI && checkAll()
 }
 
 function setSuccess(el: LazyHTMLElement, attemptSRC: string) {
-	el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME
-		? (el.style.backgroundImage = `url(${attemptSRC})`)
-		: el.setAttribute('src', attemptSRC)
+  el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME
+    ? (el.style.backgroundImage = `url(${attemptSRC})`)
+    : el.setAttribute('src', attemptSRC)
 
-	el._lazy.state = 'success'
+  el._lazy.state = 'success'
 
-	clear(el)
-	!useIntersectionObserverAPI && checkAll()
+  clear(el)
+  !useIntersectionObserverAPI && checkAll()
 }
 
 function bindEvents(listenTarget: ListenTarget) {
-	if (listenTargets.includes(listenTarget)) {
-		return
-	}
-	listenTargets.push(listenTarget)
-
-	defaultLazyOptions.events?.forEach((event: string) => {
-		listenTarget.addEventListener(event, checkAllWithThrottle, { passive: true })
-	})
+  if (listenTargets.includes(listenTarget)) {
+    return
+  }
+  listenTargets.push(listenTarget)
+
+  defaultLazyOptions.events?.forEach((event: string) => {
+    listenTarget.addEventListener(event, checkAllWithThrottle, { passive: true })
+  })
 }
 
 function unbindEvents() {
-	listenTargets.forEach((listenTarget: ListenTarget) => {
-		defaultLazyOptions.events?.forEach((event: string) => {
-			listenTarget.removeEventListener(event, checkAllWithThrottle)
-		})
-	})
+  listenTargets.forEach((listenTarget: ListenTarget) => {
+    defaultLazyOptions.events?.forEach((event: string) => {
+      listenTarget.removeEventListener(event, checkAllWithThrottle)
+    })
+  })
 
-	listenTargets = []
+  listenTargets = []
 }
 
 function updateLazyOptions(el: LazyHTMLElement, binding: DirectiveBinding<string>) {
-	const lazyInnerOptions: LazyOptions = {
-		loading: el.getAttribute(LAZY_LOADING) ?? defaultLazyOptions.loading,
-		error: el.getAttribute(LAZY_ERROR) ?? defaultLazyOptions.error,
-		attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt,
-	}
-
-	el._lazy = {
-		src: binding.value,
-		arg: binding.arg,
-		currentAttempt: 0,
-		state: 'pending',
-		attemptLock: false,
-		...lazyInnerOptions,
-	}
-
-	defaultLazyOptions.filter?.(el._lazy)
+  const lazyInnerOptions: LazyOptions = {
+    loading: el.getAttribute(LAZY_LOADING) ?? defaultLazyOptions.loading,
+    error: el.getAttribute(LAZY_ERROR) ?? defaultLazyOptions.error,
+    attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt,
+  }
+
+  el._lazy = {
+    src: binding.value,
+    arg: binding.arg,
+    currentAttempt: 0,
+    state: 'pending',
+    attemptLock: false,
+    ...lazyInnerOptions,
+  }
+
+  defaultLazyOptions.filter?.(el._lazy)
 }
 
 function createImage(el: LazyHTMLElement, attemptSRC: string) {
-	const image: HTMLImageElement = new Image()
-	image.src = attemptSRC
-	image.addEventListener('load', () => {
-		el._lazy.attemptLock = false
-
-		imageCache.add(attemptSRC)
-		setSuccess(el, attemptSRC)
-	})
-	image.addEventListener('error', () => {
-		el._lazy.attemptLock = false
-		;(el._lazy.currentAttempt as number) >= (el._lazy.attempt as number) ? setError(el) : attemptLoad(el)
-	})
+  const image: HTMLImageElement = new Image()
+  image.src = attemptSRC
+  image.addEventListener('load', () => {
+    el._lazy.attemptLock = false
+
+    imageCache.add(attemptSRC)
+    setSuccess(el, attemptSRC)
+  })
+  image.addEventListener('error', () => {
+    el._lazy.attemptLock = false
+    ;(el._lazy.currentAttempt as number) >= (el._lazy.attempt as number) ? setError(el) : attemptLoad(el)
+  })
 }
 
 function attemptLoad(el: LazyHTMLElement) {
-	if (el._lazy.attemptLock === true) {
-		return
-	}
-	el._lazy.attemptLock = true
-	el._lazy.currentAttempt++
-
-	const { src: attemptSRC }: Lazy = el._lazy
-
-	if (imageCache.has(attemptSRC)) {
-		setSuccess(el, attemptSRC)
-		el._lazy.attemptLock = false
-		return
-	}
-
-	setLoading(el)
-	createImage(el, attemptSRC)
+  if (el._lazy.attemptLock === true) {
+    return
+  }
+  el._lazy.attemptLock = true
+  el._lazy.currentAttempt++
+
+  const { src: attemptSRC }: Lazy = el._lazy
+
+  if (imageCache.has(attemptSRC)) {
+    setSuccess(el, attemptSRC)
+    el._lazy.attemptLock = false
+    return
+  }
+
+  setLoading(el)
+  createImage(el, attemptSRC)
 }
 
 function check(el: LazyHTMLElement) {
-	inViewport(el) && attemptLoad(el)
+  inViewport(el) && attemptLoad(el)
 }
 
 function checkAll() {
-	lazyElements.forEach((el: LazyHTMLElement) => check(el))
+  lazyElements.forEach((el: LazyHTMLElement) => check(el))
 }
 
 function clear(el: LazyHTMLElement) {
-	if (useIntersectionObserverAPI) {
-		observer?.unobserve(el)
-	} else {
-		removeItem(lazyElements, el)
-		lazyElements.length === 0 && unbindEvents()
-	}
+  if (useIntersectionObserverAPI) {
+    observer?.unobserve(el)
+  } else {
+    removeItem(lazyElements, el)
+    lazyElements.length === 0 && unbindEvents()
+  }
 }
 
 function observe(el: LazyHTMLElement) {
-	if (!observer) {
-		observer = createInViewportObserver<LazyHTMLElement>((el: LazyHTMLElement) => attemptLoad(el))
-	}
+  if (!observer) {
+    observer = createInViewportObserver<LazyHTMLElement>((el: LazyHTMLElement) => attemptLoad(el))
+  }
 
-	observer.unobserve(el)
-	observer.observe(el)
+  observer.unobserve(el)
+  observer.observe(el)
 }
 
 function diff(el: LazyHTMLElement, binding: DirectiveBinding<string>): boolean {
-	const { src, arg, attempt, loading, error } = el._lazy
-	return (
-		src !== binding.value ||
+  const { src, arg, attempt, loading, error } = el._lazy
+  return (
+    src !== binding.value ||
 		arg !== binding.arg ||
 		attempt !== Number(el.getAttribute(LAZY_ATTEMPT)) ||
 		loading !== el.getAttribute(LAZY_LOADING) ||
 		error !== el.getAttribute(LAZY_ERROR)
-	)
+  )
 }
 
 function mounted(el: LazyHTMLElement, binding: DirectiveBinding<string>) {
-	!el.getAttribute('src') && el.setAttribute('src', PIXEL)
+  !el.getAttribute('src') && el.setAttribute('src', PIXEL)
 
-	updateLazyOptions(el, binding)
+  updateLazyOptions(el, binding)
 
-	if (useIntersectionObserverAPI) {
-		observe(el)
-	} else {
-		bindEvents(window)
-		bindEvents(getParentScroller(el))
-		check(el)
-	}
+  if (useIntersectionObserverAPI) {
+    observe(el)
+  } else {
+    bindEvents(window)
+    bindEvents(getParentScroller(el))
+    check(el)
+  }
 }
 
 function unmounted(el: LazyHTMLElement) {
-	clear(el)
+  clear(el)
 }
 
 function updated(el: LazyHTMLElement, binding: DirectiveBinding<string>) {
-	diff(el, binding)
-		? mounted(el, binding)
-		: !useIntersectionObserverAPI
-		? lazyElements.includes(el)
-			? check(el)
-			: null
-		: null
+  diff(el, binding)
+    ? mounted(el, binding)
+    : !useIntersectionObserverAPI
+      ? lazyElements.includes(el)
+        ? check(el)
+        : null
+      : null
 }
 
 function mergeLazyOptions(lazyOptions: LazyOptions) {
-	defaultLazyOptions.events = lazyOptions.events ?? defaultLazyOptions.events
-	defaultLazyOptions.loading = lazyOptions.loading ?? defaultLazyOptions.loading
-	defaultLazyOptions.error = lazyOptions.error ?? defaultLazyOptions.error
-	defaultLazyOptions.attempt = lazyOptions.attempt ?? defaultLazyOptions.attempt
-	defaultLazyOptions.throttleWait = lazyOptions.throttleWait ?? defaultLazyOptions.throttleWait
-	defaultLazyOptions.filter = lazyOptions.filter
+  defaultLazyOptions.events = lazyOptions.events ?? defaultLazyOptions.events
+  defaultLazyOptions.loading = lazyOptions.loading ?? defaultLazyOptions.loading
+  defaultLazyOptions.error = lazyOptions.error ?? defaultLazyOptions.error
+  defaultLazyOptions.attempt = lazyOptions.attempt ?? defaultLazyOptions.attempt
+  defaultLazyOptions.throttleWait = lazyOptions.throttleWait ?? defaultLazyOptions.throttleWait
+  defaultLazyOptions.filter = lazyOptions.filter
 }
 
 const Lazy: Directive & Plugin = {
-	mounted,
-	unmounted,
-	updated,
-	install(app: App, lazyOptions: LazyOptions) {
-		mergeLazyOptions(lazyOptions)
+  mounted,
+  unmounted,
+  updated,
+  install(app: App, lazyOptions: LazyOptions) {
+    mergeLazyOptions(lazyOptions)
 
-		checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait)
+    checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait)
 
-		app.directive('lazy', this)
-	},
+    app.directive('lazy', this)
+  },
 }
 
 export default Lazy
diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue
index c25aceae994..536b2350468 100644
--- a/packages/varlet-ui/src/loading/Loading.vue
+++ b/packages/varlet-ui/src/loading/Loading.vue
@@ -62,8 +62,8 @@ import { defineComponent } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarLoading',
-	props,
+  name: 'VarLoading',
+  props,
 })
 </script>
 
diff --git a/packages/varlet-ui/src/loading/example/index.vue b/packages/varlet-ui/src/loading/example/index.vue
index 622ce80583d..f970181ceba 100644
--- a/packages/varlet-ui/src/loading/example/index.vue
+++ b/packages/varlet-ui/src/loading/example/index.vue
@@ -28,10 +28,10 @@ import { defineComponent } from 'vue'
 import Loading from '..'
 
 export default defineComponent({
-	name: 'LoadingExample',
-	components: {
-		[Loading.name]: Loading,
-	},
+  name: 'LoadingExample',
+  components: {
+    [Loading.name]: Loading,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/loading/index.ts b/packages/varlet-ui/src/loading/index.ts
index 1ad92cb3adf..200554506f7 100644
--- a/packages/varlet-ui/src/loading/index.ts
+++ b/packages/varlet-ui/src/loading/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Loading from './Loading.vue'
 
 Loading.install = function (app: App) {
-	app.component(Loading.name, Loading)
+  app.component(Loading.name, Loading)
 }
 
 export default Loading
diff --git a/packages/varlet-ui/src/loading/props.ts b/packages/varlet-ui/src/loading/props.ts
index 77c6fc743ee..889e0730bff 100644
--- a/packages/varlet-ui/src/loading/props.ts
+++ b/packages/varlet-ui/src/loading/props.ts
@@ -1,31 +1,31 @@
 export function typeValidator(type: string): boolean {
-	return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
+  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
 }
 
 export function sizeValidator(size: string): boolean {
-	return ['normal', 'mini', 'small', 'large'].includes(size)
+  return ['normal', 'mini', 'small', 'large'].includes(size)
 }
 
 export const props = {
-	// loading类型
-	type: {
-		type: String,
-		default: 'circle',
-		validator: typeValidator,
-	},
-	radius: {
-		type: [String, Number],
-		default: 15,
-	},
-	// loading尺寸
-	size: {
-		type: String,
-		default: 'normal',
-		validator: sizeValidator,
-	},
-	// loading颜色
-	color: {
-		type: String,
-		default: 'currentColor',
-	},
+  // loading类型
+  type: {
+    type: String,
+    default: 'circle',
+    validator: typeValidator,
+  },
+  radius: {
+    type: [String, Number],
+    default: 15,
+  },
+  // loading尺寸
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  // loading颜色
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
 }
diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
index 5c015c76815..a8692311401 100644
--- a/packages/varlet-ui/src/menu/Menu.vue
+++ b/packages/varlet-ui/src/menu/Menu.vue
@@ -30,76 +30,76 @@ import { getLeft, getTop } from '../utils/elements'
 import { useZIndex } from '../context/zIndex'
 
 export default defineComponent({
-	name: 'VarMenu',
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { zIndex } = useZIndex(props, 'show', 1)
+  name: 'VarMenu',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { zIndex } = useZIndex(props, 'show', 1)
 
-		const host: Ref<null | HTMLElement> = ref(null)
-		const menu: Ref<null | HTMLElement> = ref(null)
+    const host: Ref<null | HTMLElement> = ref(null)
+    const menu: Ref<null | HTMLElement> = ref(null)
 
-		const top: Ref<number> = ref(0)
-		const left: Ref<number> = ref(0)
-		const computeTop = (alignment: string): number => {
-			return alignment === 'top'
-				? getTop(host.value as HTMLElement)
-				: getTop(host.value as HTMLElement) - (menu.value as HTMLElement).offsetHeight
-		}
+    const top: Ref<number> = ref(0)
+    const left: Ref<number> = ref(0)
+    const computeTop = (alignment: string): number => {
+      return alignment === 'top'
+        ? getTop(host.value as HTMLElement)
+        : getTop(host.value as HTMLElement) - (menu.value as HTMLElement).offsetHeight
+    }
 
-		const clickSelf: Ref<boolean> = ref(false)
+    const clickSelf: Ref<boolean> = ref(false)
 
-		const handleClick = () => {
-			clickSelf.value = true
-		}
+    const handleClick = () => {
+      clickSelf.value = true
+    }
 
-		// positions effect
-		watch(
-			() => props.alignment,
-			(newValue: string) => {
-				props.show === true && (top.value = computeTop(newValue))
-			}
-		)
-		watch(
-			() => props.show,
-			async (newValue: boolean) => {
-				await nextTick()
+    // positions effect
+    watch(
+      () => props.alignment,
+      (newValue: string) => {
+        props.show === true && (top.value = computeTop(newValue))
+      }
+    )
+    watch(
+      () => props.show,
+      async (newValue: boolean) => {
+        await nextTick()
 
-				top.value = newValue === true ? computeTop(props.alignment) : top.value
-			},
-			{ immediate: true }
-		)
+        top.value = newValue === true ? computeTop(props.alignment) : top.value
+      },
+      { immediate: true }
+    )
 
-		// menu hidden
-		const handleMenuBlur = () => {
-			if (clickSelf.value) {
-				clickSelf.value = false
-				return
-			}
+    // menu hidden
+    const handleMenuBlur = () => {
+      if (clickSelf.value) {
+        clickSelf.value = false
+        return
+      }
 
-			props['onUpdate:show']?.(false)
-			props.onBlur?.()
-		}
+      props['onUpdate:show']?.(false)
+      props.onBlur?.()
+    }
 
-		onMounted(() => {
-			top.value = computeTop(props.alignment)
-			left.value = getLeft(host.value as HTMLElement)
+    onMounted(() => {
+      top.value = computeTop(props.alignment)
+      left.value = getLeft(host.value as HTMLElement)
 
-			document.addEventListener('click', handleMenuBlur)
-		})
-		onUnmounted(() => {
-			document.removeEventListener('click', handleMenuBlur)
-		})
+      document.addEventListener('click', handleMenuBlur)
+    })
+    onUnmounted(() => {
+      document.removeEventListener('click', handleMenuBlur)
+    })
 
-		return {
-			zIndex,
-			host,
-			menu,
-			top,
-			left,
-			handleClick,
-		}
-	},
+    return {
+      zIndex,
+      host,
+      menu,
+      top,
+      left,
+      handleClick,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/menu/index.ts b/packages/varlet-ui/src/menu/index.ts
index 6c5aebfd58c..f2f6b353b87 100644
--- a/packages/varlet-ui/src/menu/index.ts
+++ b/packages/varlet-ui/src/menu/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Menu from './Menu.vue'
 
 Menu.install = function (app: App) {
-	app.component(Menu.name, Menu)
+  app.component(Menu.name, Menu)
 }
 
 export default Menu
diff --git a/packages/varlet-ui/src/menu/props.ts b/packages/varlet-ui/src/menu/props.ts
index ee5245d7470..77bd5c387ac 100644
--- a/packages/varlet-ui/src/menu/props.ts
+++ b/packages/varlet-ui/src/menu/props.ts
@@ -1,29 +1,29 @@
 function alignmentValidator(alignment: string) {
-	return ['top', 'bottom'].includes(alignment)
+  return ['top', 'bottom'].includes(alignment)
 }
 
 export const props = {
-	show: {
-		type: Boolean,
-		default: false,
-	},
-	'onUpdate:show': {
-		type: Function,
-	},
-	alignment: {
-		type: String,
-		default: 'top',
-		validator: alignmentValidator,
-	},
-	offsetX: {
-		type: String,
-		default: '0px',
-	},
-	offsetY: {
-		type: String,
-		default: '0px',
-	},
-	onBlur: {
-		type: Function,
-	},
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  'onUpdate:show': {
+    type: Function,
+  },
+  alignment: {
+    type: String,
+    default: 'top',
+    validator: alignmentValidator,
+  },
+  offsetX: {
+    type: String,
+    default: '0px',
+  },
+  offsetY: {
+    type: String,
+    default: '0px',
+  },
+  onBlur: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/option/Option.vue b/packages/varlet-ui/src/option/Option.vue
index 6a13add3472..bd2b9d8631a 100644
--- a/packages/varlet-ui/src/option/Option.vue
+++ b/packages/varlet-ui/src/option/Option.vue
@@ -37,62 +37,62 @@ import Checkbox from '../checkbox'
 import Ripple from '../ripple'
 
 export default defineComponent({
-	name: 'VarOption',
-	directives: { Ripple },
-	components: {
-		[Checkbox.name]: Checkbox,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindParent, parentProvider: selectProvider } = useParent<SelectProvider, OptionProvider>(
-			SELECT_BIND_OPTION_KEY
-		)
-		useAtParentIndex(SELECT_COUNT_OPTION_KEY)
+  name: 'VarOption',
+  directives: { Ripple },
+  components: {
+    [Checkbox.name]: Checkbox,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindParent, parentProvider: selectProvider } = useParent<SelectProvider, OptionProvider>(
+      SELECT_BIND_OPTION_KEY
+    )
+    useAtParentIndex(SELECT_COUNT_OPTION_KEY)
 
-		if (!bindParent || !selectProvider) {
-			throw Error('<var-option/> must in <var-select/>')
-		}
+    if (!bindParent || !selectProvider) {
+      throw Error('<var-option/> must in <var-select/>')
+    }
 
-		const optionSelected: Ref<boolean> = ref(false)
+    const optionSelected: Ref<boolean> = ref(false)
 
-		const selected: ComputedRef<boolean> = computed(() => optionSelected.value)
-		const label: ComputedRef<string | undefined> = computed(() => props.label)
-		const value: ComputedRef<string | number | boolean | undefined> = computed(() => props.value)
+    const selected: ComputedRef<boolean> = computed(() => optionSelected.value)
+    const label: ComputedRef<string | undefined> = computed(() => props.label)
+    const value: ComputedRef<string | number | boolean | undefined> = computed(() => props.value)
 
-		const { wrapWidth, multiple, activeColor, onSelect } = selectProvider
+    const { wrapWidth, multiple, activeColor, onSelect } = selectProvider
 
-		const handleClick = () => {
-			optionSelected.value = !optionSelected.value
-			onSelect(optionProvider)
-		}
+    const handleClick = () => {
+      optionSelected.value = !optionSelected.value
+      onSelect(optionProvider)
+    }
 
-		const handleSelect = () => {
-			onSelect(optionProvider)
-		}
+    const handleSelect = () => {
+      onSelect(optionProvider)
+    }
 
-		const sync = (checked: boolean) => {
-			optionSelected.value = checked
-		}
+    const sync = (checked: boolean) => {
+      optionSelected.value = checked
+    }
 
-		const optionProvider: OptionProvider = {
-			label,
-			value,
-			selected,
-			sync,
-		}
+    const optionProvider: OptionProvider = {
+      label,
+      value,
+      selected,
+      sync,
+    }
 
-		bindParent(optionProvider)
+    bindParent(optionProvider)
 
-		return {
-			optionSelected,
-			wrapWidth,
-			multiple,
-			activeColor,
-			handleClick,
-			handleSelect,
-		}
-	},
+    return {
+      optionSelected,
+      wrapWidth,
+      multiple,
+      activeColor,
+      handleClick,
+      handleSelect,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/option/example/index.vue b/packages/varlet-ui/src/option/example/index.vue
index b8df4b19f39..1ad7916e64f 100644
--- a/packages/varlet-ui/src/option/example/index.vue
+++ b/packages/varlet-ui/src/option/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import Option from '..'
 
 export default defineComponent({
-	name: 'OptionExample',
-	components: {
-		[Option.name]: Option,
-	},
+  name: 'OptionExample',
+  components: {
+    [Option.name]: Option,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/option/index.ts b/packages/varlet-ui/src/option/index.ts
index bd77ea352da..87eb0ce997e 100644
--- a/packages/varlet-ui/src/option/index.ts
+++ b/packages/varlet-ui/src/option/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Option from './Option.vue'
 
 Option.install = function (app: App) {
-	app.component(Option.name, Option)
+  app.component(Option.name, Option)
 }
 
 export default Option
diff --git a/packages/varlet-ui/src/option/props.ts b/packages/varlet-ui/src/option/props.ts
index adf901ecc81..2097d282a86 100644
--- a/packages/varlet-ui/src/option/props.ts
+++ b/packages/varlet-ui/src/option/props.ts
@@ -1,10 +1,10 @@
 export const props = {
-	value: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-	label: {
-		type: [String],
-		required: true,
-	},
+  value: {
+    type: [String, Number, Boolean],
+    default: undefined,
+  },
+  label: {
+    type: [String],
+    required: true,
+  },
 }
diff --git a/packages/varlet-ui/src/popup/index.ts b/packages/varlet-ui/src/popup/index.ts
index e89ef11f33b..91749350135 100644
--- a/packages/varlet-ui/src/popup/index.ts
+++ b/packages/varlet-ui/src/popup/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Popup from './Popup.vue'
 
 Popup.install = function (app: App) {
-	app.component(Popup.name, Popup)
+  app.component(Popup.name, Popup)
 }
 
 export default Popup
diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index 4b3a77ae544..c1abb0944e5 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -62,41 +62,41 @@ import { defineComponent, computed } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarProgress',
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const linearProps = computed(() => {
-			const width = isNaN(+props.value) ? 0 : props.value > 100 ? 100 : props.value
-			const roundValue = isNaN(+props.value) ? 0 : props.value > 100 ? 100 : Math.round(props.value)
+  name: 'VarProgress',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const linearProps = computed(() => {
+      const width = isNaN(+props.value) ? 0 : props.value > 100 ? 100 : props.value
+      const roundValue = isNaN(+props.value) ? 0 : props.value > 100 ? 100 : Math.round(props.value)
 
-			return {
-				width: `${width}%`,
-				roundValue: `${roundValue}%`,
-			}
-		})
+      return {
+        width: `${width}%`,
+        roundValue: `${roundValue}%`,
+      }
+    })
 
-		const circleProps = computed(() => {
-			const { size, lineWidth, value } = props
-			const viewBox = `0 0 ${size} ${size}`
-			const roundValue = isNaN(+value) ? 0 : value > 100 ? 100 : Math.round(value)
-			const radius = (size - +lineWidth) / 2
-			const perimeter = 2 * Math.PI * radius
-			const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
+    const circleProps = computed(() => {
+      const { size, lineWidth, value } = props
+      const viewBox = `0 0 ${size} ${size}`
+      const roundValue = isNaN(+value) ? 0 : value > 100 ? 100 : Math.round(value)
+      const radius = (size - +lineWidth) / 2
+      const perimeter = 2 * Math.PI * radius
+      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
 
-			return {
-				viewBox,
-				radius,
-				strokeDasharray,
-				perimeter,
-				roundValue: `${roundValue}%`,
-			}
-		})
-		return {
-			linearProps,
-			circleProps,
-		}
-	},
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: `${roundValue}%`,
+      }
+    })
+    return {
+      linearProps,
+      circleProps,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
index 66fc7d6f31e..2f921099511 100644
--- a/packages/varlet-ui/src/progress/example/index.vue
+++ b/packages/varlet-ui/src/progress/example/index.vue
@@ -87,29 +87,29 @@ import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
 import Progress from '..'
 
 export default defineComponent({
-	name: 'ProgressExample',
-	components: {
-		[Progress.name]: Progress,
-	},
-	setup() {
-		const value = ref(0)
-		const interval = ref(0)
-
-		onMounted(() => {
-			interval.value = window.setInterval(() => {
-				if (value.value >= 100) value.value = 0
-				else value.value += 20
-			}, 1000)
-		})
-
-		onUnmounted(() => {
-			window.clearInterval(interval.value)
-		})
-
-		return {
-			value,
-		}
-	},
+  name: 'ProgressExample',
+  components: {
+    [Progress.name]: Progress,
+  },
+  setup() {
+    const value = ref(0)
+    const interval = ref(0)
+
+    onMounted(() => {
+      interval.value = window.setInterval(() => {
+        if (value.value >= 100) value.value = 0
+        else value.value += 20
+      }, 1000)
+    })
+
+    onUnmounted(() => {
+      window.clearInterval(interval.value)
+    })
+
+    return {
+      value,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/progress/index.ts b/packages/varlet-ui/src/progress/index.ts
index 6d885f4976c..98bab27e156 100644
--- a/packages/varlet-ui/src/progress/index.ts
+++ b/packages/varlet-ui/src/progress/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Progress from './Progress.vue'
 
 Progress.install = function (app: App) {
-	app.component(Progress.name, Progress)
+  app.component(Progress.name, Progress)
 }
 
 export default Progress
diff --git a/packages/varlet-ui/src/progress/props.ts b/packages/varlet-ui/src/progress/props.ts
index 45057a079e5..e1b9c9460ba 100644
--- a/packages/varlet-ui/src/progress/props.ts
+++ b/packages/varlet-ui/src/progress/props.ts
@@ -1,56 +1,56 @@
 function modeValidator(mode: string): boolean {
-	return ['linear', 'circle'].includes(mode)
+  return ['linear', 'circle'].includes(mode)
 }
 
 export const props = {
-	// progress 模式
-	mode: {
-		type: String,
-		default: 'linear',
-		validator: modeValidator,
-	},
-	// progress 线宽
-	lineWidth: {
-		type: [Number, String],
-		default: 4,
-	},
-	// progress 颜色
-	color: {
-		type: String,
-	},
-	// progress 轨道颜色
-	trackColor: {
-		type: String,
-		default: '#d8d8d8',
-	},
-	// 是否添加水波纹效果
-	ripple: {
-		type: Boolean,
-		default: false,
-	},
-	// progress 值
-	value: {
-		type: Number,
-		default: 0,
-	},
-	// 是否显示action
-	showAction: {
-		type: Boolean,
-		default: false,
-	},
-	// circle 的尺寸
-	size: {
-		type: Number,
-		default: 40,
-	},
-	// circle的原点
-	rotate: {
-		type: Number,
-		default: 0,
-	},
-	// 是否显示 circle 轨道
-	showTrack: {
-		type: Boolean,
-		default: true,
-	},
+  // progress 模式
+  mode: {
+    type: String,
+    default: 'linear',
+    validator: modeValidator,
+  },
+  // progress 线宽
+  lineWidth: {
+    type: [Number, String],
+    default: 4,
+  },
+  // progress 颜色
+  color: {
+    type: String,
+  },
+  // progress 轨道颜色
+  trackColor: {
+    type: String,
+    default: '#d8d8d8',
+  },
+  // 是否添加水波纹效果
+  ripple: {
+    type: Boolean,
+    default: false,
+  },
+  // progress 值
+  value: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示action
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
+  // circle 的尺寸
+  size: {
+    type: Number,
+    default: 40,
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示 circle 轨道
+  showTrack: {
+    type: Boolean,
+    default: true,
+  },
 }
diff --git a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
index c71a25a5bf7..e7c199de05b 100644
--- a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
+++ b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
@@ -32,107 +32,107 @@ const CONTROL_POSITION = -50
 let scroller: HTMLElement | Window = window
 
 export default defineComponent({
-	name: 'VarPullRefresh',
-	components: {
-		[Icon.name]: Icon,
-	},
-	props,
-	setup(props) {
-		const freshNode: Ref<HTMLElement | null> = ref(null)
-
-		const startPosition: Ref<number> = ref(0)
-
-		const distance: Ref<number> = ref(CONTROL_POSITION)
-
-		const iconName: Ref<string> = ref('arrow-down')
-
-		const refreshStatus: Ref<RefreshStatus> = ref('default')
-
-		const isEnd: Ref<boolean> = ref(false)
-
-		const isTouchable = computed(
-			() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disable
-		)
-
-		const iconClass = computed(() => ({
-			'var-pull-refresh__animation': refreshStatus.value === 'loading',
-		}))
-
-		const controlStyle = computed(() => ({
-			transform: `translate3d(0px, ${distance.value}px, 0px) translate(-50%, 0)`,
-			transition: isEnd.value ? `transform ${props.animationDuration}ms` : null,
-			background: props.successBgColor || props.bgColor,
-			color: props.successColor || props.color,
-		}))
-
-		const isSuccess = computed(() => refreshStatus.value === 'success')
-
-		const touchStart = (event: TouchEvent) => {
-			if (!isTouchable.value) return
-			refreshStatus.value = 'pulling'
-			startPosition.value = event.touches[0].clientY
-		}
-		const touchMove = (event: TouchEvent) => {
-			const scrollTop = getScrollTop(scroller)
-			if (scrollTop > 0 || !isTouchable.value) return
-			if (scrollTop === 0 && distance.value !== CONTROL_POSITION) event.cancelable && event.preventDefault()
-
-			const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + CONTROL_POSITION
-
-			distance.value = moveDistance >= MAX_DISTANCE ? MAX_DISTANCE : moveDistance
-			iconName.value = distance.value >= MAX_DISTANCE * 0.2 ? 'refresh' : 'arrow-down'
-		}
-		const touchEnd = () => {
-			if (!isTouchable.value) return
-			isEnd.value = true
-			if (distance.value >= MAX_DISTANCE * 0.2) {
-				refreshStatus.value = 'loading'
-				distance.value = MAX_DISTANCE * 0.3
-				props.onRefresh?.()
-			} else {
-				refreshStatus.value = 'loosing'
-				iconName.value = 'arrow-down'
-				distance.value = CONTROL_POSITION
-				setTimeout(() => {
-					isEnd.value = false
-				}, +props.animationDuration)
-			}
-		}
-
-		watch(
-			() => props.modelValue,
-			(newValue) => {
-				if (newValue === false) {
-					isEnd.value = true
-					refreshStatus.value = 'success'
-					iconName.value = 'checkbox-marked-circle'
-					setTimeout(() => {
-						distance.value = CONTROL_POSITION
-						setTimeout(() => {
-							refreshStatus.value = 'default'
-							iconName.value = 'arrow-down'
-							isEnd.value = false
-						}, +props.animationDuration)
-					}, +props.successDuration)
-				}
-			}
-		)
-
-		onMounted(() => {
-			scroller = getParentScroller(freshNode.value as HTMLElement, 'y')
-		})
-
-		return {
-			freshNode,
-			touchStart,
-			touchMove,
-			touchEnd,
-			iconName,
-			iconClass,
-			controlStyle,
-			isSuccess,
-		}
-	},
+  name: 'VarPullRefresh',
+  components: {
+    [Icon.name]: Icon,
+  },
+  props,
+  setup(props) {
+    const freshNode: Ref<HTMLElement | null> = ref(null)
+
+    const startPosition: Ref<number> = ref(0)
+
+    const distance: Ref<number> = ref(CONTROL_POSITION)
+
+    const iconName: Ref<string> = ref('arrow-down')
+
+    const refreshStatus: Ref<RefreshStatus> = ref('default')
+
+    const isEnd: Ref<boolean> = ref(false)
+
+    const isTouchable = computed(
+      () => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disable
+    )
+
+    const iconClass = computed(() => ({
+      'var-pull-refresh__animation': refreshStatus.value === 'loading',
+    }))
+
+    const controlStyle = computed(() => ({
+      transform: `translate3d(0px, ${distance.value}px, 0px) translate(-50%, 0)`,
+      transition: isEnd.value ? `transform ${props.animationDuration}ms` : null,
+      background: props.successBgColor || props.bgColor,
+      color: props.successColor || props.color,
+    }))
+
+    const isSuccess = computed(() => refreshStatus.value === 'success')
+
+    const touchStart = (event: TouchEvent) => {
+      if (!isTouchable.value) return
+      refreshStatus.value = 'pulling'
+      startPosition.value = event.touches[0].clientY
+    }
+    const touchMove = (event: TouchEvent) => {
+      const scrollTop = getScrollTop(scroller)
+      if (scrollTop > 0 || !isTouchable.value) return
+      if (scrollTop === 0 && distance.value !== CONTROL_POSITION) event.cancelable && event.preventDefault()
+
+      const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + CONTROL_POSITION
+
+      distance.value = moveDistance >= MAX_DISTANCE ? MAX_DISTANCE : moveDistance
+      iconName.value = distance.value >= MAX_DISTANCE * 0.2 ? 'refresh' : 'arrow-down'
+    }
+    const touchEnd = () => {
+      if (!isTouchable.value) return
+      isEnd.value = true
+      if (distance.value >= MAX_DISTANCE * 0.2) {
+        refreshStatus.value = 'loading'
+        distance.value = MAX_DISTANCE * 0.3
+        props.onRefresh?.()
+      } else {
+        refreshStatus.value = 'loosing'
+        iconName.value = 'arrow-down'
+        distance.value = CONTROL_POSITION
+        setTimeout(() => {
+          isEnd.value = false
+        }, +props.animationDuration)
+      }
+    }
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (newValue === false) {
+          isEnd.value = true
+          refreshStatus.value = 'success'
+          iconName.value = 'checkbox-marked-circle'
+          setTimeout(() => {
+            distance.value = CONTROL_POSITION
+            setTimeout(() => {
+              refreshStatus.value = 'default'
+              iconName.value = 'arrow-down'
+              isEnd.value = false
+            }, +props.animationDuration)
+          }, +props.successDuration)
+        }
+      }
+    )
+
+    onMounted(() => {
+      scroller = getParentScroller(freshNode.value as HTMLElement, 'y')
+    })
+
+    return {
+      freshNode,
+      touchStart,
+      touchMove,
+      touchEnd,
+      iconName,
+      iconClass,
+      controlStyle,
+      isSuccess,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/pull-refresh/example/index.vue b/packages/varlet-ui/src/pull-refresh/example/index.vue
index 62e399ccc44..3939e719de6 100644
--- a/packages/varlet-ui/src/pull-refresh/example/index.vue
+++ b/packages/varlet-ui/src/pull-refresh/example/index.vue
@@ -14,28 +14,28 @@ const data1 = Array(10).fill('List Item')
 const data2 = Array(10).fill('This is new List Item')
 
 export default defineComponent({
-	name: 'PullRefreshExample',
-	components: {
-		[PullRefresh.name]: PullRefresh,
-	},
-	setup() {
-		const isRefresh = ref(true)
-		const data = ref(data1)
-
-		const refresh = () => {
-			isRefresh.value = true
-			setTimeout(() => {
-				data.value = data.value[0] === 'List Item' ? data2 : data1
-				isRefresh.value = false
-			}, 2000)
-		}
-
-		return {
-			refresh,
-			isRefresh,
-			data,
-		}
-	},
+  name: 'PullRefreshExample',
+  components: {
+    [PullRefresh.name]: PullRefresh,
+  },
+  setup() {
+    const isRefresh = ref(true)
+    const data = ref(data1)
+
+    const refresh = () => {
+      isRefresh.value = true
+      setTimeout(() => {
+        data.value = data.value[0] === 'List Item' ? data2 : data1
+        isRefresh.value = false
+      }, 2000)
+    }
+
+    return {
+      refresh,
+      isRefresh,
+      data,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/pull-refresh/index.ts b/packages/varlet-ui/src/pull-refresh/index.ts
index b1f9b2c3efe..c0db119090c 100644
--- a/packages/varlet-ui/src/pull-refresh/index.ts
+++ b/packages/varlet-ui/src/pull-refresh/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import PullRefresh from './PullRefresh.vue'
 
 PullRefresh.install = function (app: App) {
-	app.component(PullRefresh.name, PullRefresh)
+  app.component(PullRefresh.name, PullRefresh)
 }
 
 export default PullRefresh
diff --git a/packages/varlet-ui/src/pull-refresh/props.ts b/packages/varlet-ui/src/pull-refresh/props.ts
index dccecebe29c..3408c32f11e 100644
--- a/packages/varlet-ui/src/pull-refresh/props.ts
+++ b/packages/varlet-ui/src/pull-refresh/props.ts
@@ -1,39 +1,39 @@
 export const props = {
-	modelValue: {
-		type: Boolean,
-	},
-	// 是否禁用下拉刷新
-	disable: {
-		type: Boolean,
-		default: false,
-	},
-	// 动画时长
-	animationDuration: {
-		type: [Number, String],
-		default: 300,
-	},
-	// 刷新成功提示展示时长
-	successDuration: {
-		type: [Number, String],
-		default: 2000,
-	},
-	// control 的背景颜色
-	bgColor: {
-		type: String,
-	},
-	// 成功状态下 control 的背景颜色
-	successBgColor: {
-		type: String,
-	},
-	// control 的颜色
-	color: {
-		type: String,
-	},
-	// 成功状态下 control 的颜色
-	successColor: {
-		type: String,
-	},
-	onRefresh: {
-		type: Function,
-	},
+  modelValue: {
+    type: Boolean,
+  },
+  // 是否禁用下拉刷新
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  // 动画时长
+  animationDuration: {
+    type: [Number, String],
+    default: 300,
+  },
+  // 刷新成功提示展示时长
+  successDuration: {
+    type: [Number, String],
+    default: 2000,
+  },
+  // control 的背景颜色
+  bgColor: {
+    type: String,
+  },
+  // 成功状态下 control 的背景颜色
+  successBgColor: {
+    type: String,
+  },
+  // control 的颜色
+  color: {
+    type: String,
+  },
+  // 成功状态下 control 的颜色
+  successColor: {
+    type: String,
+  },
+  onRefresh: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/radio-group/RadioGroup.vue b/packages/varlet-ui/src/radio-group/RadioGroup.vue
index 55688be53e8..b47a75117fd 100644
--- a/packages/varlet-ui/src/radio-group/RadioGroup.vue
+++ b/packages/varlet-ui/src/radio-group/RadioGroup.vue
@@ -18,65 +18,65 @@ import FormDetails from '../form-details'
 import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 
 export default defineComponent({
-	name: 'VarRadioGroup',
-	components: {
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindChildren: bindRadio, childProviders: radioProviders } = useChildren<RadioGroupProvider, RadioProvider>(
-			RADIO_GROUP_BIND_RADIO_KEY
-		)
-		const { bindParent: bindForm } = useParent<FormProvider, RadioGroupProvider>(FORM_BIND_FORM_ITEM_KEY)
-		const { length } = useAtChildrenCounter(RADIO_GROUP_COUNT_RADIO_KEY)
-
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-		const errorMessageComputed: ComputedRef<string> = computed(() => errorMessage.value)
-
-		const validate = () => v(props.rules, props.modelValue)
-
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
-
-		const syncAllRadio = () => {
-			radioProviders.forEach(({ sync }) => sync(props.modelValue))
-		}
-
-		const onToggle = (changedValue: any) => {
-			props['onUpdate:modelValue']?.(changedValue)
-			props.onChange?.(changedValue)
-
-			validateWithTrigger('onChange')
-		}
-
-		const reset = () => {
-			props['onUpdate:modelValue']?.(undefined)
-			resetValidation()
-		}
-
-		watch(() => props.modelValue, syncAllRadio)
-
-		watch(() => length.value, syncAllRadio)
-
-		const radioGroupProvider: RadioGroupProvider = {
-			onToggle,
-			validate,
-			reset,
-			resetValidation,
-			errorMessage: errorMessageComputed,
-		}
-
-		bindRadio(radioGroupProvider)
-		bindForm?.(radioGroupProvider)
-
-		return {
-			errorMessage,
-			reset,
-			validate,
-			resetValidation,
-		}
-	},
+  name: 'VarRadioGroup',
+  components: {
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindChildren: bindRadio, childProviders: radioProviders } = useChildren<RadioGroupProvider, RadioProvider>(
+      RADIO_GROUP_BIND_RADIO_KEY
+    )
+    const { bindParent: bindForm } = useParent<FormProvider, RadioGroupProvider>(FORM_BIND_FORM_ITEM_KEY)
+    const { length } = useAtChildrenCounter(RADIO_GROUP_COUNT_RADIO_KEY)
+
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+    const errorMessageComputed: ComputedRef<string> = computed(() => errorMessage.value)
+
+    const validate = () => v(props.rules, props.modelValue)
+
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+    const syncAllRadio = () => {
+      radioProviders.forEach(({ sync }) => sync(props.modelValue))
+    }
+
+    const onToggle = (changedValue: any) => {
+      props['onUpdate:modelValue']?.(changedValue)
+      props.onChange?.(changedValue)
+
+      validateWithTrigger('onChange')
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(undefined)
+      resetValidation()
+    }
+
+    watch(() => props.modelValue, syncAllRadio)
+
+    watch(() => length.value, syncAllRadio)
+
+    const radioGroupProvider: RadioGroupProvider = {
+      onToggle,
+      validate,
+      reset,
+      resetValidation,
+      errorMessage: errorMessageComputed,
+    }
+
+    bindRadio(radioGroupProvider)
+    bindForm?.(radioGroupProvider)
+
+    return {
+      errorMessage,
+      reset,
+      validate,
+      resetValidation,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/radio-group/example/index.vue b/packages/varlet-ui/src/radio-group/example/index.vue
index 7bd49a76c69..043f1c38895 100644
--- a/packages/varlet-ui/src/radio-group/example/index.vue
+++ b/packages/varlet-ui/src/radio-group/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import RadioGroup from '..'
 
 export default defineComponent({
-	name: 'RadioGroupExample',
-	components: {
-		[RadioGroup.name]: RadioGroup,
-	},
+  name: 'RadioGroupExample',
+  components: {
+    [RadioGroup.name]: RadioGroup,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/radio-group/index.ts b/packages/varlet-ui/src/radio-group/index.ts
index c4ad5b17755..1d931211e06 100644
--- a/packages/varlet-ui/src/radio-group/index.ts
+++ b/packages/varlet-ui/src/radio-group/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import RadioGroup from './RadioGroup.vue'
 
 RadioGroup.install = function (app: App) {
-	app.component(RadioGroup.name, RadioGroup)
+  app.component(RadioGroup.name, RadioGroup)
 }
 
 export default RadioGroup
diff --git a/packages/varlet-ui/src/radio-group/props.ts b/packages/varlet-ui/src/radio-group/props.ts
index 20ce84e87b9..52a4b24e893 100644
--- a/packages/varlet-ui/src/radio-group/props.ts
+++ b/packages/varlet-ui/src/radio-group/props.ts
@@ -3,28 +3,28 @@ import { PropType } from 'vue'
 export type ValidateTriggers = 'onChange'
 
 export function directionValidator(direction: string) {
-	return ['horizontal', 'vertical'].includes(direction)
+  return ['horizontal', 'vertical'].includes(direction)
 }
 
 export const props = {
-	modelValue: {
-		default: false,
-	},
-	direction: {
-		type: String,
-		default: 'horizontal',
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onChange'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-	onChange: {
-		type: Function,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    default: false,
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+  onChange: {
+    type: Function,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/radio/Radio.vue b/packages/varlet-ui/src/radio/Radio.vue
index 7dfb05a2d7a..7edacad53cb 100644
--- a/packages/varlet-ui/src/radio/Radio.vue
+++ b/packages/varlet-ui/src/radio/Radio.vue
@@ -45,110 +45,110 @@ import Icon from '../icon'
 import FormDetails from '../form-details'
 
 export default defineComponent({
-	name: 'VarRadio',
-	directives: { Ripple },
-	components: {
-		[Icon.name]: Icon,
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindParent: bindRadioGroup, parentProvider: radioGroupProvider } = useParent<
+  name: 'VarRadio',
+  directives: { Ripple },
+  components: {
+    [Icon.name]: Icon,
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindParent: bindRadioGroup, parentProvider: radioGroupProvider } = useParent<
 			RadioGroupProvider,
 			RadioProvider
 		>(RADIO_GROUP_BIND_RADIO_KEY)
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, RadioProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
-		useAtParentIndex(RADIO_GROUP_COUNT_RADIO_KEY)
-
-		const value: Ref<any> = ref(false)
-		const checked: ComputedRef<boolean> = computed(() => value.value === props.checkedValue)
-
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-
-		const validate = () => v(props.rules, props.modelValue)
-
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
-
-		const change = (changedValue: any) => {
-			if (radioGroupProvider && value.value === props.checkedValue) {
-				return
-			}
-
-			value.value = changedValue
-			props['onUpdate:modelValue']?.(value.value)
-			props.onChange?.(value.value)
-
-			validateWithTrigger('onChange')
-
-			radioGroupProvider?.onToggle(props.checkedValue)
-		}
-
-		const toggle = (changedValue?: any) => {
-			const isInvalidValue = changedValue !== props.uncheckedValue && changedValue !== props.checkedValue
-			if (changedValue != null && (isInvalidValue || changedValue === value.value)) {
-				return
-			}
-
-			if (changedValue == null) {
-				changedValue = checked.value ? props.uncheckedValue : props.checkedValue
-			}
-
-			change(changedValue)
-		}
-
-		const handleClick = (e: Event) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			props.onClick?.(e)
-
-			change(checked.value ? props.uncheckedValue : props.checkedValue)
-		}
-
-		const sync = (v: any) => {
-			value.value = v === props.checkedValue ? props.checkedValue : props.uncheckedValue
-		}
-
-		const reset = () => {
-			props['onUpdate:modelValue']?.(props.uncheckedValue)
-			resetValidation()
-		}
-
-		watch(
-			() => props.modelValue,
-			(newValue) => {
-				value.value = newValue
-			},
-			{ immediate: true }
-		)
-
-		const radioProvider: RadioProvider = {
-			sync,
-			validate,
-			resetValidation,
-			reset,
-		}
-
-		bindRadioGroup?.(radioProvider)
-		bindForm?.(radioProvider)
-
-		return {
-			checked,
-			errorMessage,
-			radioGroupErrorMessage: radioGroupProvider?.errorMessage,
-			formDisabled: formProvider?.disabled,
-			handleClick,
-			toggle,
-			reset,
-			validate,
-			resetValidation,
-		}
-	},
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, RadioProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
+    useAtParentIndex(RADIO_GROUP_COUNT_RADIO_KEY)
+
+    const value: Ref<any> = ref(false)
+    const checked: ComputedRef<boolean> = computed(() => value.value === props.checkedValue)
+
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+    const validate = () => v(props.rules, props.modelValue)
+
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+    const change = (changedValue: any) => {
+      if (radioGroupProvider && value.value === props.checkedValue) {
+        return
+      }
+
+      value.value = changedValue
+      props['onUpdate:modelValue']?.(value.value)
+      props.onChange?.(value.value)
+
+      validateWithTrigger('onChange')
+
+      radioGroupProvider?.onToggle(props.checkedValue)
+    }
+
+    const toggle = (changedValue?: any) => {
+      const isInvalidValue = changedValue !== props.uncheckedValue && changedValue !== props.checkedValue
+      if (changedValue != null && (isInvalidValue || changedValue === value.value)) {
+        return
+      }
+
+      if (changedValue == null) {
+        changedValue = checked.value ? props.uncheckedValue : props.checkedValue
+      }
+
+      change(changedValue)
+    }
+
+    const handleClick = (e: Event) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      props.onClick?.(e)
+
+      change(checked.value ? props.uncheckedValue : props.checkedValue)
+    }
+
+    const sync = (v: any) => {
+      value.value = v === props.checkedValue ? props.checkedValue : props.uncheckedValue
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(props.uncheckedValue)
+      resetValidation()
+    }
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        value.value = newValue
+      },
+      { immediate: true }
+    )
+
+    const radioProvider: RadioProvider = {
+      sync,
+      validate,
+      resetValidation,
+      reset,
+    }
+
+    bindRadioGroup?.(radioProvider)
+    bindForm?.(radioProvider)
+
+    return {
+      checked,
+      errorMessage,
+      radioGroupErrorMessage: radioGroupProvider?.errorMessage,
+      formDisabled: formProvider?.disabled,
+      handleClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/radio/example/index.vue b/packages/varlet-ui/src/radio/example/index.vue
index 77d452e4db2..b1459030d0f 100644
--- a/packages/varlet-ui/src/radio/example/index.vue
+++ b/packages/varlet-ui/src/radio/example/index.vue
@@ -18,19 +18,19 @@ import RadioGroup from '../../radio-group'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'RadioExample',
-	components: {
-		[Radio.name]: Radio,
-		[RadioGroup.name]: RadioGroup,
-		[Icon.name]: Icon,
-		[Button.name]: Button,
-	},
-	setup() {
-		return {
-			v: ref(false),
-			i: ref(),
-		}
-	},
+  name: 'RadioExample',
+  components: {
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+  },
+  setup() {
+    return {
+      v: ref(false),
+      i: ref(),
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/radio/index.ts b/packages/varlet-ui/src/radio/index.ts
index 051f9d5ae2c..227b436e308 100644
--- a/packages/varlet-ui/src/radio/index.ts
+++ b/packages/varlet-ui/src/radio/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Radio from './Radio.vue'
 
 Radio.install = function (app: App) {
-	app.component(Radio.name, Radio)
+  app.component(Radio.name, Radio)
 }
 
 export default Radio
diff --git a/packages/varlet-ui/src/radio/props.ts b/packages/varlet-ui/src/radio/props.ts
index 7ef25bf4e75..bfff78d5893 100644
--- a/packages/varlet-ui/src/radio/props.ts
+++ b/packages/varlet-ui/src/radio/props.ts
@@ -3,50 +3,50 @@ import { PropType } from 'vue'
 export type ValidateTriggers = 'onChange'
 
 export const props = {
-	modelValue: {
-		default: false,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	checkedValue: {
-		default: true,
-	},
-	uncheckedValue: {
-		default: false,
-	},
-	checkedColor: {
-		type: String,
-	},
-	uncheckedColor: {
-		type: String,
-	},
-	iconSize: {
-		type: String,
-	},
-	ripple: {
-		type: Boolean,
-		default: true,
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onChange'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
-	onClick: {
-		type: Function,
-	},
+  modelValue: {
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  checkedValue: {
+    default: true,
+  },
+  uncheckedValue: {
+    default: false,
+  },
+  checkedColor: {
+    type: String,
+  },
+  uncheckedColor: {
+    type: String,
+  },
+  iconSize: {
+    type: String,
+  },
+  ripple: {
+    type: Boolean,
+    default: true,
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  onClick: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue
index b949f8b05dc..c3d36ac7a45 100644
--- a/packages/varlet-ui/src/rate/Rate.vue
+++ b/packages/varlet-ui/src/rate/Rate.vue
@@ -1,86 +1,86 @@
 <template>
-	<div class="var-rate" ref="rate">
-		<div
-			class="var-rate--content"
-			v-for="val in count"
-			:key="val"
-			v-ripple="{ disabled: readonly || disabled ? true : !ripple }"
-			:style="{
-				color: transformValue(val + 1).color,
-				cursor: readonly ? 'default' : disabled ? 'not-allowed' : 'pointer',
-				marginRight: val !== count ? marginRight : 0,
-				width: fontSize,
-				height: fontSize,
-				borderRadius: '50%',
-			}"
-		>
-			<var-icon
-				:transition="1"
-				:name="`${
-					transformValue(val + 1).type === 'full'
-						? icon
-						: transformValue(val + 1).type === 'half'
-						? halfIcon
-						: emptyIcon
-				}`"
-				:style="{ fontSize }"
-				@click="handleClick(val + 1, $event)"
-			/>
-		</div>
-	</div>
+  <div class="var-rate" ref="rate">
+    <div
+      class="var-rate--content"
+      v-for="val in count"
+      :key="val"
+      v-ripple="{ disabled: readonly || disabled ? true : !ripple }"
+      :style="{
+        color: transformValue(val + 1).color,
+        cursor: readonly ? 'default' : disabled ? 'not-allowed' : 'pointer',
+        marginRight: val !== count ? marginRight : 0,
+        width: fontSize,
+        height: fontSize,
+        borderRadius: '50%',
+      }"
+    >
+      <var-icon
+        :transition="1"
+        :name="`${
+          transformValue(val + 1).type === 'full'
+            ? icon
+            : transformValue(val + 1).type === 'half'
+            ? halfIcon
+            : emptyIcon
+        }`"
+        :style="{ fontSize }"
+        @click="handleClick(val + 1, $event)"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent, ref, Ref, watch } from 'vue'
+import { defineComponent, ref, Ref } from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
 export default defineComponent({
-	name: 'VarRate',
-	components: {
-		[Icon.name]: Icon,
-	},
-	directives: { Ripple },
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const transformValue = (index: number) => {
-			if (index <= props.modelValue) {
-				return { type: 'full', score: index, color: props.disabled ? props.disabledColor : props.color }
-			}
-			if (props.half && index <= props.modelValue + 0.5) {
-				return { type: 'half', score: index, color: props.disabled ? props.disabledColor : props.color }
-			}
-			return { type: 'empty', score: index, color: props.disabled ? props.disabledColor : props.emptyColor }
-		}
-		const changeValue = (score: number, event: MouseEvent) => {
-			if (props.half) {
-				const { offsetWidth } = event.target as HTMLDivElement
-				if (event.offsetX <= Math.floor(offsetWidth / 2)) {
-					score -= 0.5
-				}
-			}
-			props['onUpdate:modelValue']?.(score)
-		}
-		const handleClick = (score: number, event: MouseEvent) => {
-			if (props.readonly || props.disabled) {
-				return
-			}
-			changeValue(score, event)
-			props.onChange?.(score)
-		}
-		const fontSize: Ref<number | string> = ref(0)
-		fontSize.value = !isNaN(Number(props.size)) ? `${props.size}px` : props.size
-		const marginRight: Ref<number | string> = ref(0)
-		marginRight.value = !isNaN(Number(props.marginRight)) ? `${props.marginRight}px` : props.marginRight
-		return {
-			transformValue,
-			handleClick,
-			fontSize,
-			marginRight,
-		}
-	},
+  name: 'VarRate',
+  components: {
+    [Icon.name]: Icon,
+  },
+  directives: { Ripple },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const transformValue = (index: number) => {
+      if (index <= props.modelValue) {
+        return { type: 'full', score: index, color: props.disabled ? props.disabledColor : props.color }
+      }
+      if (props.half && index <= props.modelValue + 0.5) {
+        return { type: 'half', score: index, color: props.disabled ? props.disabledColor : props.color }
+      }
+      return { type: 'empty', score: index, color: props.disabled ? props.disabledColor : props.emptyColor }
+    }
+    const changeValue = (score: number, event: MouseEvent) => {
+      if (props.half) {
+        const { offsetWidth } = event.target as HTMLDivElement
+        if (event.offsetX <= Math.floor(offsetWidth / 2)) {
+          score -= 0.5
+        }
+      }
+      props['onUpdate:modelValue']?.(score)
+    }
+    const handleClick = (score: number, event: MouseEvent) => {
+      if (props.readonly || props.disabled) {
+        return
+      }
+      changeValue(score, event)
+      props.onChange?.(score)
+    }
+    const fontSize: Ref<number | string> = ref(0)
+    fontSize.value = !isNaN(Number(props.size)) ? `${props.size}px` : props.size
+    const marginRight: Ref<number | string> = ref(0)
+    marginRight.value = !isNaN(Number(props.marginRight)) ? `${props.marginRight}px` : props.marginRight
+    return {
+      transformValue,
+      handleClick,
+      fontSize,
+      marginRight,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/rate/props.ts b/packages/varlet-ui/src/rate/props.ts
index 57e03cd25eb..ee07c82849a 100644
--- a/packages/varlet-ui/src/rate/props.ts
+++ b/packages/varlet-ui/src/rate/props.ts
@@ -1,80 +1,80 @@
 export const props = {
-	//  当前分数
-	modelValue: {
-		type: Number,
-		default: 3,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
-	// 图标总数
-	count: {
-		type: Number,
-		default: 5,
-	},
-	//  选中时的颜色
-	color: {
-		type: String,
-		default: '#ff9800',
-	},
-	// 选中时图标样式
-	icon: {
-		type: String,
-		default: 'star',
-	},
-	//  未选中的图标的颜色
-	emptyColor: {
-		type: String,
-		default: '#bdbdbd',
-	},
-	//  未选中时图标样式
-	emptyIcon: {
-		type: String,
-		default: 'star-outline',
-	},
-	// 图标大小
-	size: {
-		type: [String, Number],
-		default: '20',
-	},
-	// 图标间隔
-	marginRight: {
-		type: [String, Number],
-		default: '4',
-	},
+  //  当前分数
+  modelValue: {
+    type: Number,
+    default: 3,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
+  // 图标总数
+  count: {
+    type: Number,
+    default: 5,
+  },
+  //  选中时的颜色
+  color: {
+    type: String,
+    default: '#ff9800',
+  },
+  // 选中时图标样式
+  icon: {
+    type: String,
+    default: 'star',
+  },
+  //  未选中的图标的颜色
+  emptyColor: {
+    type: String,
+    default: '#bdbdbd',
+  },
+  //  未选中时图标样式
+  emptyIcon: {
+    type: String,
+    default: 'star-outline',
+  },
+  // 图标大小
+  size: {
+    type: [String, Number],
+    default: '20',
+  },
+  // 图标间隔
+  marginRight: {
+    type: [String, Number],
+    default: '4',
+  },
 
-	//  是否使用半评分
-	half: {
-		type: Boolean,
-		default: false,
-	},
-	// 选择一半时使用的图标
-	halfIcon: {
-		type: String,
-		default: 'star-half-full',
-	},
-	//  是否禁用
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	// 禁用后的图标颜色
-	disabledColor: {
-		type: String,
-		default: '#bdbdbd',
-	},
-	//  是否只读
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	//  点击时是否有水波纹样式
-	ripple: {
-		type: Boolean,
-		default: false,
-	},
-	//  点击回调
-	onChange: {
-		type: Function,
-	},
+  //  是否使用半评分
+  half: {
+    type: Boolean,
+    default: false,
+  },
+  // 选择一半时使用的图标
+  halfIcon: {
+    type: String,
+    default: 'star-half-full',
+  },
+  //  是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用后的图标颜色
+  disabledColor: {
+    type: String,
+    default: '#bdbdbd',
+  },
+  //  是否只读
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  //  点击时是否有水波纹样式
+  ripple: {
+    type: Boolean,
+    default: false,
+  },
+  //  点击回调
+  onChange: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/ripple/example/index.vue b/packages/varlet-ui/src/ripple/example/index.vue
index d49b67a9060..044ff05fc79 100644
--- a/packages/varlet-ui/src/ripple/example/index.vue
+++ b/packages/varlet-ui/src/ripple/example/index.vue
@@ -9,15 +9,15 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent } from 'vue'
-	import Ripple from '..'
+import { defineComponent } from 'vue'
+import Ripple from '..'
 
-	export default defineComponent({
-		name: 'RippleExample',
-		directives: {
-			Ripple
-		}
-	})
+export default defineComponent({
+  name: 'RippleExample',
+  directives: {
+    Ripple
+  }
+})
 </script>
 
 <style scoped lang="less">
diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
index 678150258a9..f814fbe1f4b 100644
--- a/packages/varlet-ui/src/ripple/index.ts
+++ b/packages/varlet-ui/src/ripple/index.ts
@@ -22,153 +22,153 @@ interface RippleHTMLElement extends HTMLElement {
 }
 
 function recordStyles(element: RippleHTMLElement) {
-	const { zIndex, position, overflow, overflowX, overflowY } = window.getComputedStyle(element)
+  const { zIndex, position, overflow, overflowX, overflowY } = window.getComputedStyle(element)
 
-	zIndex === 'auto' && (element.dataset.prevZIndex = zIndex)
-	position === 'static' && (element.dataset.prevPosition = position)
-	element.dataset.prevOverflow = overflow
-	element.dataset.prevOverflowX = overflowX
-	element.dataset.prevOverflowY = overflowY
+  zIndex === 'auto' && (element.dataset.prevZIndex = zIndex)
+  position === 'static' && (element.dataset.prevPosition = position)
+  element.dataset.prevOverflow = overflow
+  element.dataset.prevOverflowX = overflowX
+  element.dataset.prevOverflowY = overflowY
 }
 
 function setStyles(element: RippleHTMLElement) {
-	const { zIndex, position } = window.getComputedStyle(element)
+  const { zIndex, position } = window.getComputedStyle(element)
 
-	element.style.overflow = 'hidden'
-	element.style.overflowX = 'hidden'
-	element.style.overflowY = 'hidden'
-	position === 'static' && (element.style.position = 'relative')
-	zIndex === 'auto' && (element.style.zIndex = '1')
+  element.style.overflow = 'hidden'
+  element.style.overflowX = 'hidden'
+  element.style.overflowY = 'hidden'
+  position === 'static' && (element.style.position = 'relative')
+  zIndex === 'auto' && (element.style.zIndex = '1')
 }
 
 function resetStyles(element: RippleHTMLElement) {
-	element.dataset.prevZIndex && (element.style.zIndex = element.dataset.prevZIndex)
-	element.dataset.prevPosition && (element.style.position = element.dataset.prevPosition)
+  element.dataset.prevZIndex && (element.style.zIndex = element.dataset.prevZIndex)
+  element.dataset.prevPosition && (element.style.position = element.dataset.prevPosition)
 
-	element.style.overflow = element.dataset.prevOverflow as string
-	element.style.overflowX = element.dataset.prevOverflowX as string
-	element.style.overflowY = element.dataset.prevOverflowY as string
+  element.style.overflow = element.dataset.prevOverflow as string
+  element.style.overflowX = element.dataset.prevOverflowX as string
+  element.style.overflowY = element.dataset.prevOverflowY as string
 }
 
 function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
-	const { top, left }: DOMRect = element.getBoundingClientRect()
-	const { clientWidth, clientHeight } = element
+  const { top, left }: DOMRect = element.getBoundingClientRect()
+  const { clientWidth, clientHeight } = element
 
-	const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
-	const size: number = radius * 2
+  const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
+  const size: number = radius * 2
 
-	const localX: number = event.touches[0].clientX - left
-	const localY: number = event.touches[0].clientY - top
+  const localX: number = event.touches[0].clientX - left
+  const localY: number = event.touches[0].clientY - top
 
-	const centerX: number = (clientWidth - radius * 2) / 2
-	const centerY: number = (clientHeight - radius * 2) / 2
+  const centerX: number = (clientWidth - radius * 2) / 2
+  const centerY: number = (clientHeight - radius * 2) / 2
 
-	const x: number = localX - radius
-	const y: number = localY - radius
+  const x: number = localX - radius
+  const y: number = localY - radius
 
-	return { x, y, centerX, centerY, size }
+  return { x, y, centerX, centerY, size }
 }
 
 function createRipple(this: RippleHTMLElement, event: TouchEvent) {
-	const _ripple = this._ripple as RippleOptions
-	if (_ripple.disabled) {
-		return
-	}
-
-	const task = () => {
-		_ripple.tasker = null
-
-		const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
-		const ripple: RippleHTMLElement = document.createElement('div')
-		ripple.classList.add('var-ripple')
-		ripple.style.opacity = `0`
-		ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
-		ripple.style.width = `${size}px`
-		ripple.style.height = `${size}px`
-		ripple.style.backgroundColor = _ripple.color ?? 'currentColor'
-		ripple.dataset.createdAt = String(performance.now())
-
-		setStyles(this)
-
-		this.appendChild(ripple)
-
-		window.setTimeout(() => {
-			ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
-			ripple.style.opacity = `.25`
-		}, 20)
-	}
-
-	_ripple.tasker = window.setTimeout(task, 60)
+  const _ripple = this._ripple as RippleOptions
+  if (_ripple.disabled) {
+    return
+  }
+
+  const task = () => {
+    _ripple.tasker = null
+
+    const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
+    const ripple: RippleHTMLElement = document.createElement('div')
+    ripple.classList.add('var-ripple')
+    ripple.style.opacity = `0`
+    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
+    ripple.style.width = `${size}px`
+    ripple.style.height = `${size}px`
+    ripple.style.backgroundColor = _ripple.color ?? 'currentColor'
+    ripple.dataset.createdAt = String(performance.now())
+
+    setStyles(this)
+
+    this.appendChild(ripple)
+
+    window.setTimeout(() => {
+      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
+      ripple.style.opacity = `.25`
+    }, 20)
+  }
+
+  _ripple.tasker = window.setTimeout(task, 60)
 }
 
 function removeRipple(this: RippleHTMLElement) {
-	const _ripple = this._ripple as RippleOptions
+  const _ripple = this._ripple as RippleOptions
 
-	const task = () => {
-		const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-ripple')
-		if (!ripples.length) {
-			return
-		}
+  const task = () => {
+    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-ripple')
+    if (!ripples.length) {
+      return
+    }
 
-		const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
-		const delay: number = 300 - performance.now() + Number(lastRipple.dataset.createdAt)
+    const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
+    const delay: number = 300 - performance.now() + Number(lastRipple.dataset.createdAt)
 
-		setTimeout(() => {
-			lastRipple.style.opacity = `0`
+    setTimeout(() => {
+      lastRipple.style.opacity = `0`
 
-			setTimeout(() => {
-				const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-ripple')
+      setTimeout(() => {
+        const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-ripple')
 
-				ripples.length === 1 && resetStyles(this)
+        ripples.length === 1 && resetStyles(this)
 
-				lastRipple.parentNode?.removeChild(lastRipple)
-			}, 300)
-		}, delay)
-	}
+        lastRipple.parentNode?.removeChild(lastRipple)
+      }, 300)
+    }, delay)
+  }
 
-	_ripple.tasker ? setTimeout(task, 60) : task()
+  _ripple.tasker ? setTimeout(task, 60) : task()
 }
 
 function forbidRippleTask(this: RippleHTMLElement) {
-	const _ripple = this._ripple as RippleOptions
+  const _ripple = this._ripple as RippleOptions
 
-	_ripple.tasker && window.clearTimeout(_ripple.tasker)
-	_ripple.tasker = null
+  _ripple.tasker && window.clearTimeout(_ripple.tasker)
+  _ripple.tasker = null
 }
 
 function mounted(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-	el._ripple = binding.value ?? {}
-	el._ripple.tasker = null
+  el._ripple = binding.value ?? {}
+  el._ripple.tasker = null
 
-	recordStyles(el)
+  recordStyles(el)
 
-	el.addEventListener('touchstart', createRipple, { passive: true })
-	el.addEventListener('touchend', removeRipple, { passive: true })
-	el.addEventListener('touchcancel', removeRipple, { passive: true })
-	el.addEventListener('touchmove', forbidRippleTask, { passive: true })
+  el.addEventListener('touchstart', createRipple, { passive: true })
+  el.addEventListener('touchend', removeRipple, { passive: true })
+  el.addEventListener('touchcancel', removeRipple, { passive: true })
+  el.addEventListener('touchmove', forbidRippleTask, { passive: true })
 }
 
 function unmounted(el: RippleHTMLElement) {
-	el.removeEventListener('touchstart', createRipple)
-	el.removeEventListener('touchend', removeRipple)
-	el.removeEventListener('touchcancel', removeRipple)
-	el.removeEventListener('touchmove', forbidRippleTask)
+  el.removeEventListener('touchstart', createRipple)
+  el.removeEventListener('touchend', removeRipple)
+  el.removeEventListener('touchcancel', removeRipple)
+  el.removeEventListener('touchmove', forbidRippleTask)
 }
 
 function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-	el._ripple = binding.value ?? {}
-	el._ripple.tasker = null
+  el._ripple = binding.value ?? {}
+  el._ripple.tasker = null
 
-	recordStyles(el)
+  recordStyles(el)
 }
 
 const Ripple: Directive & Plugin = {
-	mounted,
-	unmounted,
-	updated,
-	install(app: App) {
-		app.directive('ripple', this)
-	},
+  mounted,
+  unmounted,
+  updated,
+  install(app: App) {
+    app.directive('ripple', this)
+  },
 }
 
 export default Ripple
diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
index 30cfd15a67b..c6dcc7611be 100644
--- a/packages/varlet-ui/src/select/Select.vue
+++ b/packages/varlet-ui/src/select/Select.vue
@@ -121,235 +121,235 @@ import FormDetails from '../form-details'
 import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 
 export default defineComponent({
-	name: 'VarSelect',
-	components: {
-		[Icon.name]: Icon,
-		[Menu.name]: Menu,
-		[Chip.name]: Chip,
-		[FormDetails.name]: FormDetails,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindChildren: bindOption, childProviders: optionProviders } = useChildren<SelectProvider, OptionProvider>(
-			SELECT_BIND_OPTION_KEY
-		)
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SelectProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
-		const { length } = useAtChildrenCounter(SELECT_COUNT_OPTION_KEY)
-
-		const wrapEl: Ref<HTMLElement | null> = ref(null)
-		const isFocus: Ref<boolean> = ref(false)
-		const wrapWidth: ComputedRef<string> = computed(() => {
-			return (wrapEl.value && window.getComputedStyle(wrapEl.value as HTMLElement).width) || '0px'
-		})
-		const multiple: ComputedRef<boolean> = computed(() => props.multiple)
-		const activeColor: ComputedRef<string | undefined> = computed(() => props.activeColor)
-
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-
-		const validate = () => v(props.rules, props.modelValue)
-
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
-
-		const findValue = ({ value, label }: OptionProvider) => {
-			if (value.value != null) {
-				return value.value
-			}
-
-			return label.value
-		}
-
-		const findLabel = (targetValue: any) => {
-			let targetProvider = optionProviders.find(({ value }) => value.value === targetValue)
-
-			!targetProvider && (targetProvider = optionProviders.find(({ label }) => label.value === targetValue))
-
-			return targetProvider?.label.value
-		}
-
-		const computePlaceholderState = () => {
-			if (!props.hint && !isEmpty(props.modelValue)) {
-				return 'var-select--placeholder-hidden'
-			}
-			if (props.hint && (!isEmpty(props.modelValue) || isFocus.value)) {
-				return 'var-select--placeholder-hint'
-			}
-		}
-
-		const handleFocus = (e: Event) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			isFocus.value = true
-			props.onFocus?.(e)
-
-			validateWithTrigger('onFocus')
-		}
-
-		const handleBlur = (e: Event) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			props.onBlur?.(e)
-
-			validateWithTrigger('onBlur')
-		}
-
-		const handleChange = (optionProvider: OptionProvider) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			let selectedValue: any = findValue(optionProvider)
-
-			if (props.multiple) {
-				selectedValue = optionProviders.filter(({ selected }) => selected.value).map(findValue)
-			}
-
-			props['onUpdate:modelValue']?.(selectedValue)
-			props.onChange?.(selectedValue)
-
-			validateWithTrigger('onChange')
-
-			!props.multiple && (isFocus.value = false)
-		}
-
-		const handleClear = () => {
-			if (
-				formProvider?.disabled.value ||
+  name: 'VarSelect',
+  components: {
+    [Icon.name]: Icon,
+    [Menu.name]: Menu,
+    [Chip.name]: Chip,
+    [FormDetails.name]: FormDetails,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindChildren: bindOption, childProviders: optionProviders } = useChildren<SelectProvider, OptionProvider>(
+      SELECT_BIND_OPTION_KEY
+    )
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SelectProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
+    const { length } = useAtChildrenCounter(SELECT_COUNT_OPTION_KEY)
+
+    const wrapEl: Ref<HTMLElement | null> = ref(null)
+    const isFocus: Ref<boolean> = ref(false)
+    const wrapWidth: ComputedRef<string> = computed(() => {
+      return (wrapEl.value && window.getComputedStyle(wrapEl.value as HTMLElement).width) || '0px'
+    })
+    const multiple: ComputedRef<boolean> = computed(() => props.multiple)
+    const activeColor: ComputedRef<string | undefined> = computed(() => props.activeColor)
+
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+    const validate = () => v(props.rules, props.modelValue)
+
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+    const findValue = ({ value, label }: OptionProvider) => {
+      if (value.value != null) {
+        return value.value
+      }
+
+      return label.value
+    }
+
+    const findLabel = (targetValue: any) => {
+      let targetProvider = optionProviders.find(({ value }) => value.value === targetValue)
+
+      !targetProvider && (targetProvider = optionProviders.find(({ label }) => label.value === targetValue))
+
+      return targetProvider?.label.value
+    }
+
+    const computePlaceholderState = () => {
+      if (!props.hint && !isEmpty(props.modelValue)) {
+        return 'var-select--placeholder-hidden'
+      }
+      if (props.hint && (!isEmpty(props.modelValue) || isFocus.value)) {
+        return 'var-select--placeholder-hint'
+      }
+    }
+
+    const handleFocus = (e: Event) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      isFocus.value = true
+      props.onFocus?.(e)
+
+      validateWithTrigger('onFocus')
+    }
+
+    const handleBlur = (e: Event) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      props.onBlur?.(e)
+
+      validateWithTrigger('onBlur')
+    }
+
+    const handleChange = (optionProvider: OptionProvider) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      let selectedValue: any = findValue(optionProvider)
+
+      if (props.multiple) {
+        selectedValue = optionProviders.filter(({ selected }) => selected.value).map(findValue)
+      }
+
+      props['onUpdate:modelValue']?.(selectedValue)
+      props.onChange?.(selectedValue)
+
+      validateWithTrigger('onChange')
+
+      !props.multiple && (isFocus.value = false)
+    }
+
+    const handleClear = () => {
+      if (
+        formProvider?.disabled.value ||
 				formProvider?.readonly.value ||
 				props.disabled ||
 				props.readonly ||
 				!props.clearable
-			) {
-				return
-			}
-
-			const targetModelValue = props.multiple ? [] : undefined
-
-			props['onUpdate:modelValue']?.(targetModelValue)
-			props.onClear?.(targetModelValue)
-
-			validateWithTrigger('onClear')
-		}
-
-		const handleClickAppendIcon = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClickAppendIcon?.(e)
-		}
-
-		const handleClickPrependIcon = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClickPrependIcon?.(e)
-		}
-
-		const handleClick = (e: Event) => {
-			if (formProvider?.disabled.value || props.disabled) {
-				return
-			}
-
-			props.onClick?.(e)
-
-			validateWithTrigger('onClick')
-		}
-
-		const handleClose = (targetValue: any) => {
-			if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
-				return
-			}
-
-			const targetModelValue = ((props.modelValue as unknown) as any[]).filter((value) => value !== targetValue)
-
-			props['onUpdate:modelValue']?.(targetModelValue)
-			props.onClose?.(targetModelValue)
-
-			validateWithTrigger('onClose')
-		}
-
-		const focus = () => {
-			isFocus.value = true
-		}
-
-		const blur = () => {
-			isFocus.value = false
-		}
-
-		const reset = () => {
-			props['onUpdate:modelValue']?.(props.multiple ? [] : undefined)
-			resetValidation()
-		}
-
-		const syncAllOption = () => {
-			if (props.multiple) {
-				optionProviders.forEach(({ sync, ...rest }) => {
-					sync(((props.modelValue as unknown) as any[]).includes(findValue({ sync, ...rest })))
-				})
-			} else {
-				optionProviders.forEach(({ sync, ...rest }) => {
-					sync(props.modelValue === findValue({ sync, ...rest }))
-				})
-			}
-		}
-
-		watch(
-			() => props.multiple,
-			() => {
-				if (props.multiple && !isArray(props.modelValue)) {
-					throw Error('The modelValue must be an array when multiple is true')
-				}
-			}
-		)
-
-		watch(() => props.modelValue, syncAllOption, { deep: true })
-
-		watch(() => length.value, syncAllOption)
-
-		const selectProvider: SelectProvider = {
-			wrapWidth,
-			multiple,
-			activeColor,
-			onSelect: handleChange,
-			reset,
-			validate,
-			resetValidation,
-		}
-
-		bindOption(selectProvider)
-		bindForm?.(selectProvider)
-
-		return {
-			wrapEl,
-			isFocus,
-			errorMessage,
-			formDisabled: formProvider?.disabled,
-			computePlaceholderState,
-			findLabel,
-			handleFocus,
-			handleBlur,
-			handleChange,
-			handleClear,
-			handleClick,
-			handleClose,
-			handleClickAppendIcon,
-			handleClickPrependIcon,
-			reset,
-			validate,
-			resetValidation,
-			focus,
-			blur,
-		}
-	},
+      ) {
+        return
+      }
+
+      const targetModelValue = props.multiple ? [] : undefined
+
+      props['onUpdate:modelValue']?.(targetModelValue)
+      props.onClear?.(targetModelValue)
+
+      validateWithTrigger('onClear')
+    }
+
+    const handleClickAppendIcon = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClickAppendIcon?.(e)
+    }
+
+    const handleClickPrependIcon = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClickPrependIcon?.(e)
+    }
+
+    const handleClick = (e: Event) => {
+      if (formProvider?.disabled.value || props.disabled) {
+        return
+      }
+
+      props.onClick?.(e)
+
+      validateWithTrigger('onClick')
+    }
+
+    const handleClose = (targetValue: any) => {
+      if (formProvider?.disabled.value || formProvider?.readonly.value || props.disabled || props.readonly) {
+        return
+      }
+
+      const targetModelValue = ((props.modelValue as unknown) as any[]).filter((value) => value !== targetValue)
+
+      props['onUpdate:modelValue']?.(targetModelValue)
+      props.onClose?.(targetModelValue)
+
+      validateWithTrigger('onClose')
+    }
+
+    const focus = () => {
+      isFocus.value = true
+    }
+
+    const blur = () => {
+      isFocus.value = false
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(props.multiple ? [] : undefined)
+      resetValidation()
+    }
+
+    const syncAllOption = () => {
+      if (props.multiple) {
+        optionProviders.forEach(({ sync, ...rest }) => {
+          sync(((props.modelValue as unknown) as any[]).includes(findValue({ sync, ...rest })))
+        })
+      } else {
+        optionProviders.forEach(({ sync, ...rest }) => {
+          sync(props.modelValue === findValue({ sync, ...rest }))
+        })
+      }
+    }
+
+    watch(
+      () => props.multiple,
+      () => {
+        if (props.multiple && !isArray(props.modelValue)) {
+          throw Error('The modelValue must be an array when multiple is true')
+        }
+      }
+    )
+
+    watch(() => props.modelValue, syncAllOption, { deep: true })
+
+    watch(() => length.value, syncAllOption)
+
+    const selectProvider: SelectProvider = {
+      wrapWidth,
+      multiple,
+      activeColor,
+      onSelect: handleChange,
+      reset,
+      validate,
+      resetValidation,
+    }
+
+    bindOption(selectProvider)
+    bindForm?.(selectProvider)
+
+    return {
+      wrapEl,
+      isFocus,
+      errorMessage,
+      formDisabled: formProvider?.disabled,
+      computePlaceholderState,
+      findLabel,
+      handleFocus,
+      handleBlur,
+      handleChange,
+      handleClear,
+      handleClick,
+      handleClose,
+      handleClickAppendIcon,
+      handleClickPrependIcon,
+      reset,
+      validate,
+      resetValidation,
+      focus,
+      blur,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/select/example/index.vue b/packages/varlet-ui/src/select/example/index.vue
index 96b67748b09..ac904660f82 100644
--- a/packages/varlet-ui/src/select/example/index.vue
+++ b/packages/varlet-ui/src/select/example/index.vue
@@ -76,22 +76,22 @@ import Option from '../../option'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'SelectExample',
-	components: {
-		[Select.name]: Select,
-		[Option.name]: Option,
-		[Button.name]: Button,
-	},
-	setup() {
-		return {
-			v: ref([]),
-			v1: ref(),
-			v2: ref([]),
-			log(...rest: any[]) {
-				console.log(...rest)
-			},
-		}
-	},
+  name: 'SelectExample',
+  components: {
+    [Select.name]: Select,
+    [Option.name]: Option,
+    [Button.name]: Button,
+  },
+  setup() {
+    return {
+      v: ref([]),
+      v1: ref(),
+      v2: ref([]),
+      log(...rest: any[]) {
+        console.log(...rest)
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/select/index.ts b/packages/varlet-ui/src/select/index.ts
index 47ba11924b7..76b9c7fed65 100644
--- a/packages/varlet-ui/src/select/index.ts
+++ b/packages/varlet-ui/src/select/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Select from './Select.vue'
 
 Select.install = function (app: App) {
-	app.component(Select.name, Select)
+  app.component(Select.name, Select)
 }
 
 export default Select
diff --git a/packages/varlet-ui/src/select/props.ts b/packages/varlet-ui/src/select/props.ts
index 1995ebbf204..f57ae4e3535 100644
--- a/packages/varlet-ui/src/select/props.ts
+++ b/packages/varlet-ui/src/select/props.ts
@@ -1,102 +1,102 @@
 import { PropType } from 'vue'
 
 export function textAlignValidator(textAlign: string) {
-	return ['left', 'right', 'center'].includes(textAlign)
+  return ['left', 'right', 'center'].includes(textAlign)
 }
 
 export type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onClose'
 
 export const props = {
-	modelValue: {
-		default: undefined,
-	},
-	textColor: {
-		type: String,
-	},
-	activeColor: {
-		type: String,
-	},
-	inactiveColor: {
-		type: String,
-	},
-	multiple: {
-		type: Boolean,
-		default: false,
-	},
-	chip: {
-		type: Boolean,
-		default: false,
-	},
-	separator: {
-		type: String,
-		default: ',',
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	clearable: {
-		type: Boolean,
-		default: false,
-	},
-	textAlign: {
-		type: String,
-		default: 'left',
-		validator: textAlignValidator,
-	},
-	placeholder: {
-		type: String,
-	},
-	prependIcon: {
-		type: String,
-	},
-	appendIcon: {
-		type: String,
-	},
-	line: {
-		type: Boolean,
-		default: true,
-	},
-	hint: {
-		type: Boolean,
-		default: true,
-	},
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onChange', 'onClear', 'onClose'],
-	},
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-	onFocus: {
-		type: Function,
-	},
-	onBlur: {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
-	onClick: {
-		type: Function,
-	},
-	onClear: {
-		type: Function,
-	},
-	onClose: {
-		type: Function,
-	},
-	onClickAppendIcon: {
-		type: Function,
-	},
-	onClickPrependIcon: {
-		type: Function,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    default: undefined,
+  },
+  textColor: {
+    type: String,
+  },
+  activeColor: {
+    type: String,
+  },
+  inactiveColor: {
+    type: String,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  chip: {
+    type: Boolean,
+    default: false,
+  },
+  separator: {
+    type: String,
+    default: ',',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  textAlign: {
+    type: String,
+    default: 'left',
+    validator: textAlignValidator,
+  },
+  placeholder: {
+    type: String,
+  },
+  prependIcon: {
+    type: String,
+  },
+  appendIcon: {
+    type: String,
+  },
+  line: {
+    type: Boolean,
+    default: true,
+  },
+  hint: {
+    type: Boolean,
+    default: true,
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange', 'onClear', 'onClose'],
+  },
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+  onFocus: {
+    type: Function,
+  },
+  onBlur: {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  onClick: {
+    type: Function,
+  },
+  onClear: {
+    type: Function,
+  },
+  onClose: {
+    type: Function,
+  },
+  onClickAppendIcon: {
+    type: Function,
+  },
+  onClickPrependIcon: {
+    type: Function,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/skeleton/Skeleton.vue b/packages/varlet-ui/src/skeleton/Skeleton.vue
index 94b0d89d812..dd1cdf2cb55 100644
--- a/packages/varlet-ui/src/skeleton/Skeleton.vue
+++ b/packages/varlet-ui/src/skeleton/Skeleton.vue
@@ -34,8 +34,8 @@ import { defineComponent } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarSkeleton',
-	props,
+  name: 'VarSkeleton',
+  props,
 })
 </script>
 
diff --git a/packages/varlet-ui/src/skeleton/example/index.vue b/packages/varlet-ui/src/skeleton/example/index.vue
index 35c463a7204..59adea10669 100644
--- a/packages/varlet-ui/src/skeleton/example/index.vue
+++ b/packages/varlet-ui/src/skeleton/example/index.vue
@@ -21,15 +21,15 @@ import { defineComponent, ref, Ref } from 'vue'
 import Skeleton from '..'
 
 export default defineComponent({
-	name: 'SkeletonExample',
-	components: {
-		[Skeleton.name]: Skeleton,
-	},
-	setup() {
-		const loading: Ref<boolean> = ref(true)
+  name: 'SkeletonExample',
+  components: {
+    [Skeleton.name]: Skeleton,
+  },
+  setup() {
+    const loading: Ref<boolean> = ref(true)
 
-		return { loading }
-	},
+    return { loading }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/skeleton/index.ts b/packages/varlet-ui/src/skeleton/index.ts
index 0c571a6dac0..455df3a4fca 100644
--- a/packages/varlet-ui/src/skeleton/index.ts
+++ b/packages/varlet-ui/src/skeleton/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Skeleton from './Skeleton.vue'
 
 Skeleton.install = function (app: App) {
-	app.component(Skeleton.name, Skeleton)
+  app.component(Skeleton.name, Skeleton)
 }
 
 export default Skeleton
diff --git a/packages/varlet-ui/src/skeleton/props.ts b/packages/varlet-ui/src/skeleton/props.ts
index 7ad0aadf0b6..22aba0d8450 100644
--- a/packages/varlet-ui/src/skeleton/props.ts
+++ b/packages/varlet-ui/src/skeleton/props.ts
@@ -1,48 +1,48 @@
 export const props = {
-	// 加载状态
-	loading: {
-		type: Boolean,
-		default: true,
-	},
-	// 段落行数
-	rows: {
-		type: Number,
-		default: 0,
-	},
-	rowsWidth: {
-		type: Array,
-		default: () => [],
-	},
-	// 是否全屏
-	fullscreen: {
-		type: Boolean,
-		default: false,
-	},
-	// 是否显示标题
-	title: {
-		type: Boolean,
-		default: false,
-	},
-	// 标题宽度
-	titleWidth: {
-		type: String,
-	},
-	// 是否显示卡片
-	card: {
-		type: Boolean,
-		default: false,
-	},
-	// 卡片高度
-	cardHeight: {
-		type: String,
-	},
-	// 是否显示头像
-	avatar: {
-		type: Boolean,
-		default: false,
-	},
-	// 头像大小
-	avatarSize: {
-		type: String,
-	},
+  // 加载状态
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  // 段落行数
+  rows: {
+    type: Number,
+    default: 0,
+  },
+  rowsWidth: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否全屏
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示标题
+  title: {
+    type: Boolean,
+    default: false,
+  },
+  // 标题宽度
+  titleWidth: {
+    type: String,
+  },
+  // 是否显示卡片
+  card: {
+    type: Boolean,
+    default: false,
+  },
+  // 卡片高度
+  cardHeight: {
+    type: String,
+  },
+  // 是否显示头像
+  avatar: {
+    type: Boolean,
+    default: false,
+  },
+  // 头像大小
+  avatarSize: {
+    type: String,
+  },
 }
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
index 2145bfb053b..d332162b878 100644
--- a/packages/varlet-ui/src/slider/Slider.vue
+++ b/packages/varlet-ui/src/slider/Slider.vue
@@ -124,258 +124,258 @@ type ThumbProps = {
 }
 
 export default defineComponent({
-	name: 'VarSlider',
-	components: {
-		[FormDetails.name]: FormDetails,
-	},
-	props,
-	setup(props) {
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SliderProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
-
-		const validate = () => v(props.rules, props.modelValue)
-		const validateWithTrigger = (trigger: ValidateTriggers) =>
-			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
-
-		const sliderEl: Ref<HTMLDivElement | null> = ref(null)
-		const maxWidth: Ref<number> = ref(0)
-		const isScroll: Ref<boolean> = ref(false)
-		const thumbProps1: UnwrapRef<ThumbProps> = reactive({
-			startPosition: 0,
-			currentLeft: 0,
-			active: false,
-			percentValue: 0,
-		})
-		const thumbProps2: UnwrapRef<ThumbProps> = reactive({
-			startPosition: 0,
-			currentLeft: 0,
-			active: false,
-			percentValue: 0,
-		})
-
-		const unitWidth: ComputedRef<number> = computed(() => (maxWidth.value / 100) * +props.step)
-
-		const showLabel1: ComputedRef<boolean> = computed(() => {
-			if (props.labelVisible === 'always') return true
-			if (props.labelVisible === 'never') return false
-			return thumbProps1.active
-		})
-
-		const showLabel2: ComputedRef<boolean> = computed(() => {
-			if (props.labelVisible === 'always') return true
-			if (props.labelVisible === 'never') return false
-			return thumbProps2.active
-		})
-
-		const getFillStyle: ComputedRef<Record<string, string | undefined>> = computed(() => {
-			const width =
+  name: 'VarSlider',
+  components: {
+    [FormDetails.name]: FormDetails,
+  },
+  props,
+  setup(props) {
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SliderProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+    const validate = () => v(props.rules, props.modelValue)
+    const validateWithTrigger = (trigger: ValidateTriggers) =>
+      nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+    const sliderEl: Ref<HTMLDivElement | null> = ref(null)
+    const maxWidth: Ref<number> = ref(0)
+    const isScroll: Ref<boolean> = ref(false)
+    const thumbProps1: UnwrapRef<ThumbProps> = reactive({
+      startPosition: 0,
+      currentLeft: 0,
+      active: false,
+      percentValue: 0,
+    })
+    const thumbProps2: UnwrapRef<ThumbProps> = reactive({
+      startPosition: 0,
+      currentLeft: 0,
+      active: false,
+      percentValue: 0,
+    })
+
+    const unitWidth: ComputedRef<number> = computed(() => (maxWidth.value / 100) * +props.step)
+
+    const showLabel1: ComputedRef<boolean> = computed(() => {
+      if (props.labelVisible === 'always') return true
+      if (props.labelVisible === 'never') return false
+      return thumbProps1.active
+    })
+
+    const showLabel2: ComputedRef<boolean> = computed(() => {
+      if (props.labelVisible === 'always') return true
+      if (props.labelVisible === 'never') return false
+      return thumbProps2.active
+    })
+
+    const getFillStyle: ComputedRef<Record<string, string | undefined>> = computed(() => {
+      const width =
 				props.range && isArray(props.modelValue)
-					? Math.abs(props.modelValue[0] - props.modelValue[1])
-					: props.modelValue
-
-			const left = props.range && isArray(props.modelValue) ? Math.min(props.modelValue[0], props.modelValue[1]) : 0
-
-			return {
-				width: `${width}%`,
-				left: `${left}%`,
-				background: props.activeColor,
-			}
-		})
-
-		const setPercent = (moveDistance: number, type: number) => {
-			let prevValue: number
-			let rangeValue: Array<number> = []
-			const roundDistance = Math.round(moveDistance / unitWidth.value)
-			const curValue: number = roundDistance * +props.step
-
-			if (type === 1) {
-				prevValue = thumbProps1.percentValue
-				thumbProps1.percentValue = curValue / +props.step
-				if (props.range && isArray(props.modelValue)) rangeValue = [curValue, props.modelValue[1]]
-			} else {
-				prevValue = thumbProps2.percentValue
-				thumbProps2.percentValue = curValue / +props.step
-				if (props.range && isArray(props.modelValue)) rangeValue = [props.modelValue[0], curValue]
-			}
-
-			if (prevValue !== curValue) {
-				if (props.range) {
-					props.onInput?.(rangeValue)
-					props['onUpdate:modelValue']?.(rangeValue)
-				} else {
-					props.onInput?.(curValue)
-					props['onUpdate:modelValue']?.(curValue)
-				}
-				validateWithTrigger('onInput')
-			}
-		}
-
-		const getType = (offset: number): number => {
-			if (!props.range) return 1
-			const thumb1Distance = thumbProps1.percentValue * unitWidth.value
-			const thumb2Distance = thumbProps2.percentValue * unitWidth.value
-			const offsetToThumb1 = Math.abs(offset - thumb1Distance)
-			const offsetToThumb2 = Math.abs(offset - thumb2Distance)
-
-			return offsetToThumb1 <= offsetToThumb2 ? 1 : 2
-		}
-
-		const start = (event: TouchEvent, type: number) => {
-			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
-			props.onStart?.()
-			isScroll.value = true
-			if (type === 1) {
-				thumbProps1.startPosition = event.touches[0].clientX
-			} else {
-				thumbProps2.startPosition = event.touches[0].clientX
-			}
-		}
-
-		const move = (event: TouchEvent, type: number) => {
-			if (
-				props.disabled ||
+				  ? Math.abs(props.modelValue[0] - props.modelValue[1])
+				  : props.modelValue
+
+      const left = props.range && isArray(props.modelValue) ? Math.min(props.modelValue[0], props.modelValue[1]) : 0
+
+      return {
+        width: `${width}%`,
+        left: `${left}%`,
+        background: props.activeColor,
+      }
+    })
+
+    const setPercent = (moveDistance: number, type: number) => {
+      let prevValue: number
+      let rangeValue: Array<number> = []
+      const roundDistance = Math.round(moveDistance / unitWidth.value)
+      const curValue: number = roundDistance * +props.step
+
+      if (type === 1) {
+        prevValue = thumbProps1.percentValue
+        thumbProps1.percentValue = curValue / +props.step
+        if (props.range && isArray(props.modelValue)) rangeValue = [curValue, props.modelValue[1]]
+      } else {
+        prevValue = thumbProps2.percentValue
+        thumbProps2.percentValue = curValue / +props.step
+        if (props.range && isArray(props.modelValue)) rangeValue = [props.modelValue[0], curValue]
+      }
+
+      if (prevValue !== curValue) {
+        if (props.range) {
+          props.onInput?.(rangeValue)
+          props['onUpdate:modelValue']?.(rangeValue)
+        } else {
+          props.onInput?.(curValue)
+          props['onUpdate:modelValue']?.(curValue)
+        }
+        validateWithTrigger('onInput')
+      }
+    }
+
+    const getType = (offset: number): number => {
+      if (!props.range) return 1
+      const thumb1Distance = thumbProps1.percentValue * unitWidth.value
+      const thumb2Distance = thumbProps2.percentValue * unitWidth.value
+      const offsetToThumb1 = Math.abs(offset - thumb1Distance)
+      const offsetToThumb2 = Math.abs(offset - thumb2Distance)
+
+      return offsetToThumb1 <= offsetToThumb2 ? 1 : 2
+    }
+
+    const start = (event: TouchEvent, type: number) => {
+      if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
+      props.onStart?.()
+      isScroll.value = true
+      if (type === 1) {
+        thumbProps1.startPosition = event.touches[0].clientX
+      } else {
+        thumbProps2.startPosition = event.touches[0].clientX
+      }
+    }
+
+    const move = (event: TouchEvent, type: number) => {
+      if (
+        props.disabled ||
 				props.readonly ||
 				formProvider?.disabled.value ||
 				formProvider?.readonly.value ||
 				!isScroll.value
-			)
-				return
-			let moveDistance: number
-
-			if (type === 1) {
-				thumbProps1.active = true
-				moveDistance = event.touches[0].clientX - thumbProps1.startPosition + thumbProps1.currentLeft
-			} else {
-				thumbProps2.active = true
-				moveDistance = event.touches[0].clientX - thumbProps2.startPosition + thumbProps2.currentLeft
-			}
-			if (moveDistance <= 0) moveDistance = 0
-			else if (moveDistance >= maxWidth.value) moveDistance = maxWidth.value
-			setPercent(moveDistance, type)
-		}
-
-		const end = (type: number) => {
-			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
-			let curValue: number
-			let rangeValue: Array<number> = []
-			if (type === 1) {
-				thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
-				thumbProps1.active = false
-				curValue = thumbProps1.percentValue
-				if (props.range && isArray(props.modelValue)) rangeValue = [curValue, props.modelValue[1]]
-			} else {
-				thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
-				thumbProps2.active = false
-				curValue = thumbProps2.percentValue
-				if (props.range && isArray(props.modelValue)) rangeValue = [props.modelValue[0], curValue]
-			}
-
-			if (props.range) {
-				props.onChange?.(rangeValue)
-			} else {
-				props.onChange?.(curValue)
-			}
-			validateWithTrigger('onChange')
-			isScroll.value = false
-			props.onEnd?.()
-		}
-
-		const click = (event: MouseEvent) => {
-			if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
-			if ((event.target as HTMLDivElement).closest('.var-slider__thumb')) return
-			const offset = event.clientX - getLeft(event.currentTarget as HTMLDivElement)
-			const type = getType(offset)
-			setPercent(offset, type)
-			end(type)
-		}
-
-		const stepValidator = () => {
-			if (isNaN(+props.step)) {
-				console.warn('[Varlet] Slider: type of prop "step" should be Number')
-				return false
-			}
-			if (+props.step < 1 || +props.step > 100) {
-				console.warn('[Varlet] Slider: "step" should be >= 0 and <= 100')
-				return false
-			}
-			if (parseInt(`${props.step}`, 10) !== +props.step) {
-				console.warn('[Varlet] Slider: "step" should be an Integer')
-				return false
-			}
-			return true
-		}
-
-		const valueValidator = () => {
-			if (props.range && !isArray(props.modelValue)) {
-				console.error('[Varlet] Slider: "modelValue" should be an Array')
-				return false
-			}
-			if (!props.range && isArray(props.modelValue)) {
-				console.error('[Varlet] Slider: "modelValue" should be a Number')
-				return false
-			}
-			if (props.range && isArray(props.modelValue) && props.modelValue.length < 2) {
-				console.error('[Varlet] Slider: "modelValue" should have two value')
-				return false
-			}
-			return true
-		}
-
-		const setProps = (modelValue = props.modelValue, step = props.step) => {
-			if (props.range && isArray(modelValue)) {
-				thumbProps1.percentValue = modelValue[0] / +step
-				thumbProps2.percentValue = modelValue[1] / +step
-				thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
-				thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
-			} else if (isNumber(modelValue)) {
-				thumbProps1.currentLeft = (modelValue / +step) * unitWidth.value
-			}
-		}
-
-		watch([() => props.modelValue, () => props.step], ([modelValue, step]) => {
-			if (!stepValidator() || !valueValidator() || isScroll.value) return
-			setProps(modelValue as number | number[], step as string | number)
-		})
-
-		onMounted(() => {
-			if (!stepValidator() || !valueValidator()) return
-
-			maxWidth.value = (sliderEl.value as HTMLDivElement).offsetWidth
-			setProps()
-		})
-
-		const reset = () => {
-			const resetValue = props.range ? [0, 0] : 0
-			props['onUpdate:modelValue']?.(resetValue)
-			resetValidation()
-		}
-
-		const sliderProvider: SliderProvider = {
-			reset,
-			validate,
-			resetValidation,
-		}
-
-		bindForm?.(sliderProvider)
-
-		return {
-			sliderEl,
-			thumbProps1,
-			thumbProps2,
-			showLabel1,
-			showLabel2,
-			getFillStyle,
-			formDisabled: formProvider?.disabled,
-			formReadonly: formProvider?.readonly,
-			errorMessage,
-			start,
-			move,
-			end,
-			click,
-		}
-	},
+      )
+        return
+      let moveDistance: number
+
+      if (type === 1) {
+        thumbProps1.active = true
+        moveDistance = event.touches[0].clientX - thumbProps1.startPosition + thumbProps1.currentLeft
+      } else {
+        thumbProps2.active = true
+        moveDistance = event.touches[0].clientX - thumbProps2.startPosition + thumbProps2.currentLeft
+      }
+      if (moveDistance <= 0) moveDistance = 0
+      else if (moveDistance >= maxWidth.value) moveDistance = maxWidth.value
+      setPercent(moveDistance, type)
+    }
+
+    const end = (type: number) => {
+      if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
+      let curValue: number
+      let rangeValue: Array<number> = []
+      if (type === 1) {
+        thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
+        thumbProps1.active = false
+        curValue = thumbProps1.percentValue
+        if (props.range && isArray(props.modelValue)) rangeValue = [curValue, props.modelValue[1]]
+      } else {
+        thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
+        thumbProps2.active = false
+        curValue = thumbProps2.percentValue
+        if (props.range && isArray(props.modelValue)) rangeValue = [props.modelValue[0], curValue]
+      }
+
+      if (props.range) {
+        props.onChange?.(rangeValue)
+      } else {
+        props.onChange?.(curValue)
+      }
+      validateWithTrigger('onChange')
+      isScroll.value = false
+      props.onEnd?.()
+    }
+
+    const click = (event: MouseEvent) => {
+      if (props.disabled || props.readonly || formProvider?.disabled.value || formProvider?.readonly.value) return
+      if ((event.target as HTMLDivElement).closest('.var-slider__thumb')) return
+      const offset = event.clientX - getLeft(event.currentTarget as HTMLDivElement)
+      const type = getType(offset)
+      setPercent(offset, type)
+      end(type)
+    }
+
+    const stepValidator = () => {
+      if (isNaN(+props.step)) {
+        console.warn('[Varlet] Slider: type of prop "step" should be Number')
+        return false
+      }
+      if (+props.step < 1 || +props.step > 100) {
+        console.warn('[Varlet] Slider: "step" should be >= 0 and <= 100')
+        return false
+      }
+      if (parseInt(`${props.step}`, 10) !== +props.step) {
+        console.warn('[Varlet] Slider: "step" should be an Integer')
+        return false
+      }
+      return true
+    }
+
+    const valueValidator = () => {
+      if (props.range && !isArray(props.modelValue)) {
+        console.error('[Varlet] Slider: "modelValue" should be an Array')
+        return false
+      }
+      if (!props.range && isArray(props.modelValue)) {
+        console.error('[Varlet] Slider: "modelValue" should be a Number')
+        return false
+      }
+      if (props.range && isArray(props.modelValue) && props.modelValue.length < 2) {
+        console.error('[Varlet] Slider: "modelValue" should have two value')
+        return false
+      }
+      return true
+    }
+
+    const setProps = (modelValue = props.modelValue, step = props.step) => {
+      if (props.range && isArray(modelValue)) {
+        thumbProps1.percentValue = modelValue[0] / +step
+        thumbProps2.percentValue = modelValue[1] / +step
+        thumbProps1.currentLeft = thumbProps1.percentValue * unitWidth.value
+        thumbProps2.currentLeft = thumbProps2.percentValue * unitWidth.value
+      } else if (isNumber(modelValue)) {
+        thumbProps1.currentLeft = (modelValue / +step) * unitWidth.value
+      }
+    }
+
+    watch([() => props.modelValue, () => props.step], ([modelValue, step]) => {
+      if (!stepValidator() || !valueValidator() || isScroll.value) return
+      setProps(modelValue as number | number[], step as string | number)
+    })
+
+    onMounted(() => {
+      if (!stepValidator() || !valueValidator()) return
+
+      maxWidth.value = (sliderEl.value as HTMLDivElement).offsetWidth
+      setProps()
+    })
+
+    const reset = () => {
+      const resetValue = props.range ? [0, 0] : 0
+      props['onUpdate:modelValue']?.(resetValue)
+      resetValidation()
+    }
+
+    const sliderProvider: SliderProvider = {
+      reset,
+      validate,
+      resetValidation,
+    }
+
+    bindForm?.(sliderProvider)
+
+    return {
+      sliderEl,
+      thumbProps1,
+      thumbProps2,
+      showLabel1,
+      showLabel2,
+      getFillStyle,
+      formDisabled: formProvider?.disabled,
+      formReadonly: formProvider?.readonly,
+      errorMessage,
+      start,
+      move,
+      end,
+      click,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
index da51c2ad692..9e933da903f 100644
--- a/packages/varlet-ui/src/slider/example/index.vue
+++ b/packages/varlet-ui/src/slider/example/index.vue
@@ -46,42 +46,42 @@ import { defineComponent, ref } from 'vue'
 import Slider from '..'
 
 export default defineComponent({
-	name: 'SliderExample',
-	components: {
-		[Slider.name]: Slider,
-	},
-	setup() {
-		const value = ref(3)
-		const value1 = ref([3, 50])
-		const value2 = ref(25)
-		const value3 = ref(40)
-		const value4 = ref(20)
-		const value5 = ref(20)
-		const value6 = ref(70)
-		const value7 = ref(50)
-		const change = (v) => {
-			console.log(v)
-		}
-		const start = () => {
-			console.log('start')
-		}
-		const end = () => {
-			console.log('end')
-		}
-		return {
-			value,
-			value1,
-			value2,
-			value3,
-			value4,
-			value5,
-			value6,
-			value7,
-			change,
-			start,
-			end,
-		}
-	},
+  name: 'SliderExample',
+  components: {
+    [Slider.name]: Slider,
+  },
+  setup() {
+    const value = ref(3)
+    const value1 = ref([3, 50])
+    const value2 = ref(25)
+    const value3 = ref(40)
+    const value4 = ref(20)
+    const value5 = ref(20)
+    const value6 = ref(70)
+    const value7 = ref(50)
+    const change = (v) => {
+      console.log(v)
+    }
+    const start = () => {
+      console.log('start')
+    }
+    const end = () => {
+      console.log('end')
+    }
+    return {
+      value,
+      value1,
+      value2,
+      value3,
+      value4,
+      value5,
+      value6,
+      value7,
+      change,
+      start,
+      end,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/slider/index.ts b/packages/varlet-ui/src/slider/index.ts
index 657c445e169..17a602983c3 100644
--- a/packages/varlet-ui/src/slider/index.ts
+++ b/packages/varlet-ui/src/slider/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Slider from './Slider.vue'
 
 Slider.install = function (app: App) {
-	app.component(Slider.name, Slider)
+  app.component(Slider.name, Slider)
 }
 
 export default Slider
diff --git a/packages/varlet-ui/src/slider/props.ts b/packages/varlet-ui/src/slider/props.ts
index bca0372a647..7bfe1cfd8a9 100644
--- a/packages/varlet-ui/src/slider/props.ts
+++ b/packages/varlet-ui/src/slider/props.ts
@@ -3,96 +3,96 @@ import { PropType } from 'vue'
 export type ValidateTriggers = 'onChange' | 'onInput'
 
 function labelValidator(label: string) {
-	return ['always', 'normal', 'never'].includes(label)
+  return ['always', 'normal', 'never'].includes(label)
 }
 
 export const props = {
-	// 当前进度百分比
-	modelValue: {
-		type: [Number, Array] as PropType<number | Array<number>>,
-		default: 0,
-	},
-	// 步长
-	step: {
-		type: [Number, String],
-		default: 1,
-	},
-	// 是否开启双滑块模式
-	range: {
-		type: Boolean,
-		default: false,
-	},
-
-	labelVisible: {
-		type: String,
-		default: 'normal',
-		validator: labelValidator,
-	},
-
-	activeColor: {
-		type: String,
-	},
-
-	trackColor: {
-		type: String,
-	},
-
-	thumbColor: {
-		type: String,
-	},
-
-	labelColor: {
-		type: String,
-	},
-
-	labelTextColor: {
-		type: String,
-	},
-
-	trackHeight: {
-		type: [String, Number],
-	},
-
-	thumbSize: {
-		type: [String, Number],
-	},
-
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	// 是否只读
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-
-	rules: {
-		type: Array as PropType<Array<(v: any) => any>>,
-	},
-
-	validateTrigger: {
-		type: Array as PropType<Array<ValidateTriggers>>,
-		default: ['onInput'],
-	},
-
-	onChange: {
-		type: Function,
-	},
-
-	onInput: {
-		type: Function,
-	},
-
-	onStart: {
-		type: Function,
-	},
-
-	onEnd: {
-		type: Function,
-	},
-
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  // 当前进度百分比
+  modelValue: {
+    type: [Number, Array] as PropType<number | Array<number>>,
+    default: 0,
+  },
+  // 步长
+  step: {
+    type: [Number, String],
+    default: 1,
+  },
+  // 是否开启双滑块模式
+  range: {
+    type: Boolean,
+    default: false,
+  },
+
+  labelVisible: {
+    type: String,
+    default: 'normal',
+    validator: labelValidator,
+  },
+
+  activeColor: {
+    type: String,
+  },
+
+  trackColor: {
+    type: String,
+  },
+
+  thumbColor: {
+    type: String,
+  },
+
+  labelColor: {
+    type: String,
+  },
+
+  labelTextColor: {
+    type: String,
+  },
+
+  trackHeight: {
+    type: [String, Number],
+  },
+
+  thumbSize: {
+    type: [String, Number],
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否只读
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  rules: {
+    type: Array as PropType<Array<(v: any) => any>>,
+  },
+
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onInput'],
+  },
+
+  onChange: {
+    type: Function,
+  },
+
+  onInput: {
+    type: Function,
+  },
+
+  onStart: {
+    type: Function,
+  },
+
+  onEnd: {
+    type: Function,
+  },
+
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/snackbar/Snackbar.vue b/packages/varlet-ui/src/snackbar/Snackbar.vue
index 8154e59e9b1..60b4769b4e6 100644
--- a/packages/varlet-ui/src/snackbar/Snackbar.vue
+++ b/packages/varlet-ui/src/snackbar/Snackbar.vue
@@ -20,17 +20,17 @@ import { useTeleport } from '../utils/teleport'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarSnackbar',
-	components: {
-		[SnackbarCore.name]: SnackbarCore,
-	},
-	props,
-	setup() {
-		const { disabled } = useTeleport()
+  name: 'VarSnackbar',
+  components: {
+    [SnackbarCore.name]: SnackbarCore,
+  },
+  props,
+  setup() {
+    const { disabled } = useTeleport()
 
-		return {
-			disabled,
-		}
-	},
+    return {
+      disabled,
+    }
+  },
 })
 </script>
diff --git a/packages/varlet-ui/src/snackbar/core.vue b/packages/varlet-ui/src/snackbar/core.vue
index 2458233c506..444ad76b267 100644
--- a/packages/varlet-ui/src/snackbar/core.vue
+++ b/packages/varlet-ui/src/snackbar/core.vue
@@ -24,87 +24,87 @@ import { useLock } from '../context/lock'
 import { SNACKBAR_TYPE } from './index'
 
 export default defineComponent({
-	name: 'VarSnackbarCore',
-	components: {
-		[Loading.name]: Loading,
-		[Button.name]: Button,
-		[Icon.name]: Icon,
-	},
-	props,
-	setup(props) {
-		const timer: Ref = ref(null)
-		const hasMounted: Ref<boolean> = ref(false)
-		const { zIndex } = useZIndex(props, 'show', 1)
-		useLock(props, 'show', 'lockScroll')
+  name: 'VarSnackbarCore',
+  components: {
+    [Loading.name]: Loading,
+    [Button.name]: Button,
+    [Icon.name]: Icon,
+  },
+  props,
+  setup(props) {
+    const timer: Ref = ref(null)
+    const hasMounted: Ref<boolean> = ref(false)
+    const { zIndex } = useZIndex(props, 'show', 1)
+    useLock(props, 'show', 'lockScroll')
 
-		const snackbarStyle = reactive({
-			zIndex,
-		})
-		const snackbarClass = computed(() => {
-			const { position, vertical, type } = props
-			const baseClass = `var-snackbar__wrapper var-snackbar__wrapper-${position} var-elevation--4`
-			const verticalClass = vertical ? ' var-snackbar__vertical' : ''
-			const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-snackbar__wrapper-${type}` : ''
-			return `${baseClass}${verticalClass}${typeClass}`
-		})
+    const snackbarStyle = reactive({
+      zIndex,
+    })
+    const snackbarClass = computed(() => {
+      const { position, vertical, type } = props
+      const baseClass = `var-snackbar__wrapper var-snackbar__wrapper-${position} var-elevation--4`
+      const verticalClass = vertical ? ' var-snackbar__vertical' : ''
+      const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-snackbar__wrapper-${type}` : ''
+      return `${baseClass}${verticalClass}${typeClass}`
+    })
 
-		const iconName = computed(() => {
-			switch (props.type) {
-				case 'success':
-					return 'checkbox-marked-circle'
-				case 'warning':
-					return 'warning'
-				case 'info':
-					return 'information'
-				case 'error':
-					return 'error'
-				default:
-					return ''
-			}
-		})
+    const iconName = computed(() => {
+      switch (props.type) {
+      case 'success':
+        return 'checkbox-marked-circle'
+      case 'warning':
+        return 'warning'
+      case 'info':
+        return 'information'
+      case 'error':
+        return 'error'
+      default:
+        return ''
+      }
+    })
 
-		watch(
-			() => props.show,
-			(show) => {
-				if (show) {
-					props.onOpen?.()
-					timer.value = setTimeout(() => {
-						props['onUpdate:show']?.(false)
-					}, props.duration)
-				} else if (show === false) {
-					clearTimeout(timer.value)
-					props.onClose?.()
-				}
-			}
-		)
+    watch(
+      () => props.show,
+      (show) => {
+        if (show) {
+          props.onOpen?.()
+          timer.value = setTimeout(() => {
+            props['onUpdate:show']?.(false)
+          }, props.duration)
+        } else if (show === false) {
+          clearTimeout(timer.value)
+          props.onClose?.()
+        }
+      }
+    )
 
-		watch(
-			() => props._update,
-			() => {
-				hasMounted.value = true
-				clearTimeout(timer.value)
-				timer.value = setTimeout(() => {
-					props['onUpdate:show']?.(false)
-				}, props.duration)
-			}
-		)
+    watch(
+      () => props._update,
+      () => {
+        hasMounted.value = true
+        clearTimeout(timer.value)
+        timer.value = setTimeout(() => {
+          props['onUpdate:show']?.(false)
+        }, props.duration)
+      }
+    )
 
-		onMounted(() => {
-			if (props.show) {
-				props.onOpen && props.onOpen()
-				timer.value = setTimeout(() => {
-					props['onUpdate:show']?.(false)
-				}, props.duration)
-			}
-		})
+    onMounted(() => {
+      if (props.show) {
+        props.onOpen && props.onOpen()
+        timer.value = setTimeout(() => {
+          props['onUpdate:show']?.(false)
+        }, props.duration)
+      }
+    })
 
-		return {
-			snackbarStyle,
-			snackbarClass,
-			iconName,
-			hasMounted,
-		}
-	},
+    return {
+      snackbarStyle,
+      snackbarClass,
+      iconName,
+      hasMounted,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/snackbar/example/index.vue b/packages/varlet-ui/src/snackbar/example/index.vue
index b3cd87edcb4..4e2e9f4add1 100644
--- a/packages/varlet-ui/src/snackbar/example/index.vue
+++ b/packages/varlet-ui/src/snackbar/example/index.vue
@@ -1,92 +1,92 @@
 <template>
-	<div class="snackbar-demo">
-		<div class="snackbar-demo__basic">
-			<app-type>基本使用</app-type>
-			<div class="snackbar-demo__basic-block">
-				<var-button type="primary" size="small" @click="changeValue('show1')"> 基本使用 </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show2')"> 自定义action </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show3')"> 垂直排列 </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show4')"> 自定义关闭时间 </var-button>
-				<var-button type="primary" size="small" @click="changeMultiple()"> 切换单例或多例 </var-button>
-			</div>
-		</div>
-		<div class="snackbar-demo__type">
-			<app-type>snackbar类型</app-type>
-			<div class="snackbar-demo__type-block">
-				<var-button type="primary" size="small" @click="changeValue('show7')"> success </var-button>
-				<var-button type="primary" size="small" @click="create('warning')"> warning </var-button>
-				<var-button type="primary" size="small" @click="create('info')"> info </var-button>
-				<var-button type="primary" size="small" @click="createMethod('error')"> error </var-button>
-				<var-button type="primary" size="small" @click="createMethod('loading')"> loading </var-button>
-			</div>
-		</div>
-		<div class="snackbar-demo__position">
-			<app-type>snackbar位置</app-type>
-			<div class="snackbar-demo__position-block">
-				<var-button type="primary" size="small" @click="createPosition('top')"> top </var-button>
-				<var-button type="primary" size="small" @click="createPosition('center')"> center </var-button>
-				<var-button type="primary" size="small" @click="createPosition('bottom')"> bottom </var-button>
-			</div>
-		</div>
-		<div class="snackbar-demo__others">
-			<app-type>其他配置</app-type>
-			<div class="snackbar-demo__others-block">
-				<var-button type="primary" size="small" @click="changeValue('show8')"> 自定义内容class </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show9')"> 不可穿透点击 </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show10')"> 可以穿透滑动 </var-button>
-			</div>
-		</div>
-		<div class="snackbar-demo__event">
-			<app-type>snackbar事件</app-type>
-			<div class="snackbar-demo__event-block">
-				<var-button type="primary" size="small" @click="changeValue('show11')"> 打开与关闭回调 </var-button>
-				<var-button type="primary" size="small" @click="changeValue('show12')">
-					打开动画与关闭动画结束时回调
-				</var-button>
-			</div>
-		</div>
-
-		<var-snackbar v-model:show="show1" position="bottom">
-			{{ text }}
-		</var-snackbar>
-
-		<var-snackbar v-model:show="show2">
-			{{ text }}
-			<template #action>
-				<var-button type="primary" size="small" @click="show2 = !show2"> close </var-button>
-			</template>
-		</var-snackbar>
-
-		<var-snackbar v-model:show="show3" :vertical="true">
-			{{ text }}
-			<template #action>
-				<var-button type="primary" size="small" @click="show3 = !show3"> close </var-button>
-			</template>
-		</var-snackbar>
-
-		<var-snackbar v-model:show="show4" :duration="500">
-			{{ text }}
-		</var-snackbar>
-
-		<var-snackbar v-model:show="show7" type="success">
-			{{ text }}
-		</var-snackbar>
-		<var-snackbar v-model:show="show8">
-			{{ text }}
-		</var-snackbar>
-		<var-snackbar v-model:show="show9" :forbid-click="true">
-			{{ text }}
-		</var-snackbar>
-		<var-snackbar v-model:show="show10" :lock-scroll="false">
-			{{ text }}
-		</var-snackbar>
-		<var-snackbar v-model:show="show11" @open="open" @close="close">
-			{{ text }}
-		</var-snackbar>
-		<var-snackbar v-model:show="show12" @opened="opened" @closed="closed">
-			{{ text }}
-		</var-snackbar>
-	</div>
+  <div class="snackbar-demo">
+    <div class="snackbar-demo__basic">
+      <app-type>基本使用</app-type>
+      <div class="snackbar-demo__basic-block">
+        <var-button type="primary" size="small" @click="changeValue('show1')"> 基本使用</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show2')"> 自定义action</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show3')"> 垂直排列</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show4')"> 自定义关闭时间</var-button>
+        <var-button type="primary" size="small" @click="changeMultiple()"> 切换单例或多例</var-button>
+      </div>
+    </div>
+    <div class="snackbar-demo__type">
+      <app-type>snackbar类型</app-type>
+      <div class="snackbar-demo__type-block">
+        <var-button type="primary" size="small" @click="changeValue('show7')"> success</var-button>
+        <var-button type="primary" size="small" @click="create('warning')"> warning</var-button>
+        <var-button type="primary" size="small" @click="create('info')"> info</var-button>
+        <var-button type="primary" size="small" @click="createMethod('error')"> error</var-button>
+        <var-button type="primary" size="small" @click="createMethod('loading')"> loading</var-button>
+      </div>
+    </div>
+    <div class="snackbar-demo__position">
+      <app-type>snackbar位置</app-type>
+      <div class="snackbar-demo__position-block">
+        <var-button type="primary" size="small" @click="createPosition('top')"> top</var-button>
+        <var-button type="primary" size="small" @click="createPosition('center')"> center</var-button>
+        <var-button type="primary" size="small" @click="createPosition('bottom')"> bottom</var-button>
+      </div>
+    </div>
+    <div class="snackbar-demo__others">
+      <app-type>其他配置</app-type>
+      <div class="snackbar-demo__others-block">
+        <var-button type="primary" size="small" @click="changeValue('show8')"> 自定义内容class</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show9')"> 不可穿透点击</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show10')"> 可以穿透滑动</var-button>
+      </div>
+    </div>
+    <div class="snackbar-demo__event">
+      <app-type>snackbar事件</app-type>
+      <div class="snackbar-demo__event-block">
+        <var-button type="primary" size="small" @click="changeValue('show11')"> 打开与关闭回调</var-button>
+        <var-button type="primary" size="small" @click="changeValue('show12')">
+          打开动画与关闭动画结束时回调
+        </var-button>
+      </div>
+    </div>
+
+    <var-snackbar v-model:show="show1" position="bottom">
+      {{ text }}
+    </var-snackbar>
+
+    <var-snackbar v-model:show="show2">
+      {{ text }}
+      <template #action>
+        <var-button type="primary" size="small" @click="show2 = !show2"> close</var-button>
+      </template>
+    </var-snackbar>
+
+    <var-snackbar v-model:show="show3" :vertical="true">
+      {{ text }}
+      <template #action>
+        <var-button type="primary" size="small" @click="show3 = !show3"> close</var-button>
+      </template>
+    </var-snackbar>
+
+    <var-snackbar v-model:show="show4" :duration="500">
+      {{ text }}
+    </var-snackbar>
+
+    <var-snackbar v-model:show="show7" type="success">
+      {{ text }}
+    </var-snackbar>
+    <var-snackbar v-model:show="show8">
+      {{ text }}
+    </var-snackbar>
+    <var-snackbar v-model:show="show9" :forbid-click="true">
+      {{ text }}
+    </var-snackbar>
+    <var-snackbar v-model:show="show10" :lock-scroll="false">
+      {{ text }}
+    </var-snackbar>
+    <var-snackbar v-model:show="show11" @open="open" @close="close">
+      {{ text }}
+    </var-snackbar>
+    <var-snackbar v-model:show="show12" @opened="opened" @closed="closed">
+      {{ text }}
+    </var-snackbar>
+  </div>
 </template>
 
 <script>
@@ -95,122 +95,122 @@ import Button from '../../button'
 import Snackbar from '..'
 
 export default defineComponent({
-	name: 'SnackbarExample',
-	components: {
-		[Snackbar.Component.name]: Snackbar.Component,
-		[Button.name]: Button,
-	},
-	setup() {
-		const text = ref("Hello, I'm a snackbar")
-		const isAllowMultiple = ref(true)
-		const shows = reactive({
-			show1: false,
-			show2: false,
-			show3: false,
-			show4: false,
-			show7: false,
-			show8: false,
-			show9: false,
-			show10: false,
-			show11: false,
-			show12: false,
-		})
-		const changeValue = (type) => {
-			shows[type] = !shows[type]
-		}
-
-		const create = (type) => {
-			const snackbar = Snackbar({
-				content: "Hello, I'm a snackbar",
-				type,
-			})
-			setTimeout(function () {
-				snackbar.clear()
-			}, 1000)
-		}
-
-		const createMethod = (type) => {
-			Snackbar[type]({
-				content: "Hello, I'm a snackbar",
-				forbidClick: type === 'loading',
-			})
-		}
-
-		const createPosition = (position) => {
-			Snackbar({
-				content: "Hello, I'm a snackbar",
-				position,
-			})
-			setTimeout(() => {
-				Snackbar.clear()
-			}, 2000)
-		}
-
-		const changeMultiple = () => {
-			Snackbar.allowMultiple(isAllowMultiple.value)
-			isAllowMultiple.value = !isAllowMultiple.value
-		}
-
-		const open = () => {
-			window.alert('open!')
-		}
-		const close = () => {
-			window.alert('close!')
-		}
-
-		const opened = () => {
-			window.alert('opened!')
-		}
-
-		const closed = () => {
-			window.alert('closed!')
-		}
-
-		return {
-			...toRefs(shows),
-			text,
-			changeValue,
-			create,
-			createMethod,
-			createPosition,
-			open,
-			opened,
-			closed,
-			close,
-			changeMultiple,
-		}
-	},
+  name: 'SnackbarExample',
+  components: {
+    [Snackbar.Component.name]: Snackbar.Component,
+    [Button.name]: Button,
+  },
+  setup() {
+    const text = ref("Hello, I'm a snackbar")
+    const isAllowMultiple = ref(true)
+    const shows = reactive({
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
+      show7: false,
+      show8: false,
+      show9: false,
+      show10: false,
+      show11: false,
+      show12: false,
+    })
+    const changeValue = (type) => {
+      shows[type] = !shows[type]
+    }
+
+    const create = (type) => {
+      const snackbar = Snackbar({
+        content: "Hello, I'm a snackbar",
+        type,
+      })
+      setTimeout(function () {
+        snackbar.clear()
+      }, 1000)
+    }
+
+    const createMethod = (type) => {
+      Snackbar[type]({
+        content: "Hello, I'm a snackbar",
+        forbidClick: type === 'loading',
+      })
+    }
+
+    const createPosition = (position) => {
+      Snackbar({
+        content: "Hello, I'm a snackbar",
+        position,
+      })
+      setTimeout(() => {
+        Snackbar.clear()
+      }, 2000)
+    }
+
+    const changeMultiple = () => {
+      Snackbar.allowMultiple(isAllowMultiple.value)
+      isAllowMultiple.value = !isAllowMultiple.value
+    }
+
+    const open = () => {
+      console.log('open!')
+    }
+    const close = () => {
+      console.log('close!')
+    }
+
+    const opened = () => {
+      console.log('opened!')
+    }
+
+    const closed = () => {
+      console.log('closed!')
+    }
+
+    return {
+      ...toRefs(shows),
+      text,
+      changeValue,
+      create,
+      createMethod,
+      createPosition,
+      open,
+      opened,
+      closed,
+      close,
+      changeMultiple,
+    }
+  },
 })
 </script>
 
 <style lang="less" scoped>
 .snackbar-demo {
-	&__basic-block,
-	&__type-block,
-	&__position-block,
-	&__others-block,
-	&__event-block {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-
-		button {
-			margin: 5px 0;
-		}
-	}
+  &__basic-block,
+  &__type-block,
+  &__position-block,
+  &__others-block,
+  &__event-block {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    button {
+      margin: 5px 0;
+    }
+  }
 }
 
 .list-complete-item {
-	transition: all 0.8s ease;
+  transition: all 0.8s ease;
 }
 
 .list-complete-enter-from,
 .list-complete-leave-to {
-	opacity: 0;
-	transform: translateY(30px);
+  opacity: 0;
+  transform: translateY(30px);
 }
 
 .list-complete-leave-active {
-	position: absolute;
+  position: absolute;
 }
 </style>
diff --git a/packages/varlet-ui/src/snackbar/index.ts b/packages/varlet-ui/src/snackbar/index.ts
index b016130f7f3..9648da06e9c 100644
--- a/packages/varlet-ui/src/snackbar/index.ts
+++ b/packages/varlet-ui/src/snackbar/index.ts
@@ -7,174 +7,174 @@ import { isBaseObject } from '../utils/shared'
 export type SnackbarType = 'success' | 'warning' | 'info' | 'error' | 'loading'
 
 type SnackbarHandel = {
-	clear: () => void
+  clear: () => void
 }
 
 interface SnackbarOptions {
-	type?: SnackbarType
-	content?: string
-	position?: 'top' | 'center' | 'bottom'
-	loadingType?: string
-	loadingSize?: string
-	teleport?: string
-	lockScroll?: boolean
-	contentClass?: string
-	duration?: number
-	vertical?: boolean
-	show?: boolean
-	forbidClick?: boolean
-	onOpen?: () => void
-	onClose?: () => void
-	onOpened?: () => void
-	onClosed?: () => void
+  type?: SnackbarType
+  content?: string
+  position?: 'top' | 'center' | 'bottom'
+  loadingType?: string
+  loadingSize?: string
+  teleport?: string
+  lockScroll?: boolean
+  contentClass?: string
+  duration?: number
+  vertical?: boolean
+  show?: boolean
+  forbidClick?: boolean
+  onOpen?: () => void
+  onClose?: () => void
+  onOpened?: () => void
+  onClosed?: () => void
 }
 
 interface UniqSnackbarOptions {
-	id: number
-	reactiveSnackOptions: SnackbarOptions
-	_update?: string
+  id: number
+  reactiveSnackOptions: SnackbarOptions
+  _update?: string
 }
 
 interface Snackbar {
-	(options: SnackbarOptions): SnackbarHandel
+  (options: SnackbarOptions): SnackbarHandel
 
-	install(app: App): void
+  install(app: App): void
 
-	allowMultiple(bool: boolean): void
+  allowMultiple(bool: boolean): void
 
-	success(options: SnackbarOptions | string): SnackbarHandel
+  success(options: SnackbarOptions | string): SnackbarHandel
 
-	warning(options: SnackbarOptions | string): SnackbarHandel
+  warning(options: SnackbarOptions | string): SnackbarHandel
 
-	info(options: SnackbarOptions | string): SnackbarHandel
+  info(options: SnackbarOptions | string): SnackbarHandel
 
-	error(options: SnackbarOptions | string): SnackbarHandel
+  error(options: SnackbarOptions | string): SnackbarHandel
 
-	loading(options: SnackbarOptions | string): SnackbarHandel
+  loading(options: SnackbarOptions | string): SnackbarHandel
 
-	clear(): void
+  clear(): void
 
-	isAllowMultiple: boolean
-	isMount: boolean | undefined
-	uniqSnackbarOptions: UniqSnackbarOptions[]
-	Component: RendererElement
+  isAllowMultiple: boolean
+  isMount: boolean | undefined
+  uniqSnackbarOptions: UniqSnackbarOptions[]
+  Component: RendererElement
 }
 
 export const SNACKBAR_TYPE: Array<SnackbarType> = ['loading', 'success', 'warning', 'info', 'error']
 
 const transitionGroupProps: any = {
-	name: 'var-snackbar-fade',
-	tag: 'div',
-	class: 'var-transition-group',
-	afterEnter: 'onOpened',
-	afterLeave: 'onClosed',
+  name: 'var-snackbar-fade',
+  tag: 'div',
+  class: 'var-transition-group',
+  afterEnter: 'onOpened',
+  afterLeave: 'onClosed',
 }
 
 const TransitionGroupHost = {
-	setup() {
-		return () => {
-			const snackbarList = Snackbar.uniqSnackbarOptions.map(
-				({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
-					if (reactiveSnackOptions.forbidClick) {
-						const transitionGroupEl = document.querySelector('.var-transition-group')
-						;(transitionGroupEl as HTMLElement).classList.add('var-pointer-auto')
-					}
-					if (Snackbar.isAllowMultiple) reactiveSnackOptions.position = 'top'
-					return h(VarSnackbarCore, {
-						...reactiveSnackOptions,
-						...{
-							key: id,
-							'data-id': id,
-							style: {
-								position: 'relative',
-								top: getTop(reactiveSnackOptions.position),
-							},
-							_update,
-							'onUpdate:show': (value: boolean) => {
-								reactiveSnackOptions.show = value
-							},
-						},
-					})
-				}
-			)
-
-			return h(
-				TransitionGroup,
-				{
-					...transitionGroupProps,
-					onAfterLeave: removeUniqOption,
-				},
-				// remove [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance
-				() => snackbarList
-			)
-		}
-	},
+  setup() {
+    return () => {
+      const snackbarList = Snackbar.uniqSnackbarOptions.map(
+        ({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
+          if (reactiveSnackOptions.forbidClick) {
+            const transitionGroupEl = document.querySelector('.var-transition-group')
+            ;(transitionGroupEl as HTMLElement).classList.add('var-pointer-auto')
+          }
+          if (Snackbar.isAllowMultiple) reactiveSnackOptions.position = 'top'
+          return h(VarSnackbarCore, {
+            ...reactiveSnackOptions,
+            ...{
+              key: id,
+              'data-id': id,
+              style: {
+                position: 'relative',
+                top: getTop(reactiveSnackOptions.position),
+              },
+              _update,
+              'onUpdate:show': (value: boolean) => {
+                reactiveSnackOptions.show = value
+              },
+            },
+          })
+        }
+      )
+
+      return h(
+        TransitionGroup,
+        {
+          ...transitionGroupProps,
+          onAfterLeave: removeUniqOption,
+        },
+        // remove [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance
+        () => snackbarList
+      )
+    }
+  },
 }
 
 const Snackbar: Snackbar = <Snackbar>function (options: SnackbarOptions = {}): SnackbarHandel {
-	const snackOptions: SnackbarOptions = isBaseObject(options) ? options : {}
-	const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(snackOptions)
-	reactiveSnackOptions.show = true
-
-	if (!Snackbar.isMount) {
-		Snackbar.isMount = true
-		mountInstance(TransitionGroupHost)
-	}
-
-	const id = Date.now()
-	const { length } = Snackbar.uniqSnackbarOptions
-	const uniqSnackbarOptionItem: UniqSnackbarOptions = {
-		id,
-		reactiveSnackOptions,
-	}
-
-	if (length === 0 || Snackbar.isAllowMultiple) {
-		addUniqOption(uniqSnackbarOptionItem)
-	} else {
-		const _update = `update-${id}`
-		updateUniqOption(reactiveSnackOptions, _update)
-	}
-
-	return {
-		clear() {
-			if (!Snackbar.isAllowMultiple && Snackbar.uniqSnackbarOptions.length)
-				Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions.show = false
-			else reactiveSnackOptions.show = false
-		},
-	}
+  const snackOptions: SnackbarOptions = isBaseObject(options) ? options : {}
+  const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(snackOptions)
+  reactiveSnackOptions.show = true
+
+  if (!Snackbar.isMount) {
+    Snackbar.isMount = true
+    mountInstance(TransitionGroupHost)
+  }
+
+  const id = Date.now()
+  const { length } = Snackbar.uniqSnackbarOptions
+  const uniqSnackbarOptionItem: UniqSnackbarOptions = {
+    id,
+    reactiveSnackOptions,
+  }
+
+  if (length === 0 || Snackbar.isAllowMultiple) {
+    addUniqOption(uniqSnackbarOptionItem)
+  } else {
+    const _update = `update-${id}`
+    updateUniqOption(reactiveSnackOptions, _update)
+  }
+
+  return {
+    clear() {
+      if (!Snackbar.isAllowMultiple && Snackbar.uniqSnackbarOptions.length)
+        Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions.show = false
+      else reactiveSnackOptions.show = false
+    },
+  }
 }
 
 SNACKBAR_TYPE.forEach((type) => {
-	Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
-		if (typeof options === 'string') {
-			options = {
-				content: options,
-				type,
-			}
-		} else {
-			options.type = type
-		}
-		return Snackbar(options)
-	}
+  Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
+    if (typeof options === 'string') {
+      options = {
+        content: options,
+        type,
+      }
+    } else {
+      options.type = type
+    }
+    return Snackbar(options)
+  }
 })
 
 Snackbar.install = function (app: App) {
-	app.component(VarSnackbar.name, VarSnackbar)
+  app.component(VarSnackbar.name, VarSnackbar)
 }
 
 Snackbar.allowMultiple = function (bool = false) {
-	if (bool !== Snackbar.isAllowMultiple) {
-		for (let i = 0; i < Snackbar.uniqSnackbarOptions.length; i++) {
-			Snackbar.uniqSnackbarOptions[i].reactiveSnackOptions.show = false
-		}
-		this.isAllowMultiple = !!bool
-	}
+  if (bool !== Snackbar.isAllowMultiple) {
+    for (let i = 0; i < Snackbar.uniqSnackbarOptions.length; i++) {
+      Snackbar.uniqSnackbarOptions[i].reactiveSnackOptions.show = false
+    }
+    this.isAllowMultiple = !!bool
+  }
 }
 
 Snackbar.clear = function () {
-	Snackbar.uniqSnackbarOptions.forEach((snackbar: UniqSnackbarOptions) => {
-		snackbar.reactiveSnackOptions.show = false
-	})
+  Snackbar.uniqSnackbarOptions.forEach((snackbar: UniqSnackbarOptions) => {
+    snackbar.reactiveSnackOptions.show = false
+  })
 }
 
 Snackbar.isAllowMultiple = false
@@ -186,29 +186,29 @@ Snackbar.uniqSnackbarOptions = reactive<UniqSnackbarOptions[]>([])
 Snackbar.Component = VarSnackbar
 
 function removeUniqOption(element: HTMLElement): void {
-	element.parentElement && element.parentElement.classList.remove('var-pointer-auto')
-	const id = element.getAttribute('data-id')
-	for (let i = 0; i < Snackbar.uniqSnackbarOptions.length; i++) {
-		if (Snackbar.uniqSnackbarOptions[i].id === +(id as string)) Snackbar.uniqSnackbarOptions.splice(i, 1)
-	}
+  element.parentElement && element.parentElement.classList.remove('var-pointer-auto')
+  const id = element.getAttribute('data-id')
+  for (let i = 0; i < Snackbar.uniqSnackbarOptions.length; i++) {
+    if (Snackbar.uniqSnackbarOptions[i].id === +(id as string)) Snackbar.uniqSnackbarOptions.splice(i, 1)
+  }
 }
 
 function addUniqOption(uniqSnackbarOptionItem: UniqSnackbarOptions) {
-	Snackbar.uniqSnackbarOptions.push(uniqSnackbarOptionItem)
+  Snackbar.uniqSnackbarOptions.push(uniqSnackbarOptionItem)
 }
 
 function updateUniqOption(reactiveSnackOptions: SnackbarOptions, _update: string) {
-	Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions = {
-		...Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions,
-		...reactiveSnackOptions,
-	}
-	Snackbar.uniqSnackbarOptions[0]._update = _update
+  Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions = {
+    ...Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions,
+    ...reactiveSnackOptions,
+  }
+  Snackbar.uniqSnackbarOptions[0]._update = _update
 }
 
 function getTop(position = 'top'): string {
-	if (position === 'center') return '45%'
-	if (position === 'bottom') return '85%'
-	return '5%'
+  if (position === 'center') return '45%'
+  if (position === 'bottom') return '85%'
+  return '5%'
 }
 
 export default Snackbar
diff --git a/packages/varlet-ui/src/snackbar/props.ts b/packages/varlet-ui/src/snackbar/props.ts
index 07879232c10..2551b4c143b 100644
--- a/packages/varlet-ui/src/snackbar/props.ts
+++ b/packages/varlet-ui/src/snackbar/props.ts
@@ -4,92 +4,92 @@ import { props as loadingProps } from '../loading/props'
 import { SNACKBAR_TYPE, SnackbarType } from './index'
 
 export function positionValidator(type: string): boolean {
-	const validPositions = ['top', 'center', 'bottom']
-	return validPositions.includes(type)
+  const validPositions = ['top', 'center', 'bottom']
+  return validPositions.includes(type)
 }
 
 export function typeValidator(type: SnackbarType): boolean {
-	return SNACKBAR_TYPE.includes(type)
+  return SNACKBAR_TYPE.includes(type)
 }
 
 export const getPositionDefault = () => 'top'
 
 export const props = {
-	type: {
-		type: String as PropType<SnackbarType>,
-		validator: typeValidator,
-	},
-	// snackbar显示的位置
-	position: {
-		type: String,
-		default: getPositionDefault,
-		validator: positionValidator,
-	},
-	// content内容
-	content: {
-		type: String,
-	},
-	// 为snackbar content添加自定义类名
-	contentClass: {
-		type: String,
-	},
-	// snackbar 持续时间
-	duration: {
-		type: Number,
-		default: 3000,
-	},
-	// 是否将消息条内容堆叠在操作（按钮）之上
-	vertical: {
-		type: Boolean,
-		default: false,
-	},
-	// 加载动画类型
-	loadingType: pickProps(loadingProps, 'type'),
-	// 加载动画尺寸
-	loadingSize: pickProps(loadingProps, 'size'),
-	// 是否禁止滚动穿透
-	lockScroll: {
-		type: Boolean,
-		default: false,
-	},
-	// 控制组件可见还是隐藏
-	show: {
-		type: Boolean,
-		default: false,
-	},
-	// teleport
-	teleport: {
-		default: 'body',
-	},
-	// 是否禁止点击背景
-	forbidClick: {
-		type: Boolean,
-		default: false,
-	},
-	// 打开时的回调函数
-	onOpen: {
-		type: Function,
-		default: () => {},
-	},
-	// 打开动画结束时的回调
-	onOpened: {
-		type: Function,
-		default: () => {},
-	},
-	// 关闭时的回调函数
-	onClose: {
-		type: Function,
-		default: () => {},
-	},
-	// 关闭动画结束时的回调
-	onClosed: {
-		type: Function,
-		default: () => {},
-	},
-	'onUpdate:show': {
-		type: Function,
-	},
-	_update: {
-		type: String,
-	},
+  type: {
+    type: String as PropType<SnackbarType>,
+    validator: typeValidator,
+  },
+  // snackbar显示的位置
+  position: {
+    type: String,
+    default: getPositionDefault,
+    validator: positionValidator,
+  },
+  // content内容
+  content: {
+    type: String,
+  },
+  // 为snackbar content添加自定义类名
+  contentClass: {
+    type: String,
+  },
+  // snackbar 持续时间
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  // 是否将消息条内容堆叠在操作（按钮）之上
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  // 加载动画类型
+  loadingType: pickProps(loadingProps, 'type'),
+  // 加载动画尺寸
+  loadingSize: pickProps(loadingProps, 'size'),
+  // 是否禁止滚动穿透
+  lockScroll: {
+    type: Boolean,
+    default: false,
+  },
+  // 控制组件可见还是隐藏
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // teleport
+  teleport: {
+    default: 'body',
+  },
+  // 是否禁止点击背景
+  forbidClick: {
+    type: Boolean,
+    default: false,
+  },
+  // 打开时的回调函数
+  onOpen: {
+    type: Function,
+    default: () => {},
+  },
+  // 打开动画结束时的回调
+  onOpened: {
+    type: Function,
+    default: () => {},
+  },
+  // 关闭时的回调函数
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  // 关闭动画结束时的回调
+  onClosed: {
+    type: Function,
+    default: () => {},
+  },
+  'onUpdate:show': {
+    type: Function,
+  },
+  _update: {
+    type: String,
+  },
 }
diff --git a/packages/varlet-ui/src/sticky/Sticky.vue b/packages/varlet-ui/src/sticky/Sticky.vue
index 0970a82cd4a..a8ec6fb294a 100644
--- a/packages/varlet-ui/src/sticky/Sticky.vue
+++ b/packages/varlet-ui/src/sticky/Sticky.vue
@@ -32,90 +32,90 @@ import { props } from './props'
 import { getParentScroller, isPx, remToPx, formatPx } from '../utils/elements'
 
 export default defineComponent({
-	name: 'VarSticky',
-	props,
-	setup(props) {
-		const stickyEl: Ref<HTMLElement | null> = ref(null)
-		const wrapperEl: Ref<HTMLElement | null> = ref(null)
-
-		let isSupportCSSSticky = false
-
-		const isFixed: Ref<boolean> = ref(false)
-		const fixedTop: Ref<string> = ref('0px')
-		const fixedLeft: Ref<string> = ref('0px')
-		const fixedWidth: Ref<string> = ref('auto')
-		const fixedHeight: Ref<string> = ref('auto')
-		const fixedWrapperWidth: Ref<string> = ref('auto')
-		const fixedWrapperHeight: Ref<string> = ref('auto')
-
-		const offsetTop = computed(() => {
-			return isPx(props.offsetTop) ? formatPx(props.offsetTop) : remToPx(props.offsetTop)
-		})
-
-		let scroller: HTMLElement | Window = window
-
-		const handleScroll = () => {
-			let scrollerTop = 0
-
-			if (scroller !== window) {
-				const { top } = (scroller as HTMLElement).getBoundingClientRect()
-				scrollerTop = top
-			}
-
-			const sticky = stickyEl.value as HTMLElement
-			const wrapper = wrapperEl.value as HTMLElement
-
-			const { top: stickyTop, left: stickyLeft } = sticky.getBoundingClientRect()
-			const currentOffsetTop = stickyTop - scrollerTop
-
-			if (currentOffsetTop <= offsetTop.value) {
-				if (!isSupportCSSSticky) {
-					fixedWidth.value = `${sticky.offsetWidth}px`
-					fixedHeight.value = `${sticky.offsetHeight}px`
-					fixedTop.value = `${scrollerTop + offsetTop.value}px`
-					fixedLeft.value = `${stickyLeft}px`
-					fixedWrapperWidth.value = `${wrapper.offsetWidth}px`
-					fixedWrapperHeight.value = `${wrapper.offsetHeight}px`
-					isFixed.value = true
-				}
-
-				props.onScroll?.(offsetTop.value, true)
-			} else {
-				isFixed.value = false
-
-				props.onScroll?.(currentOffsetTop, false)
-			}
-		}
-
-		onMounted(() => {
-			const sticky = stickyEl.value as HTMLInputElement
-
-			isSupportCSSSticky = ['sticky', '-webkit-sticky'].includes(window.getComputedStyle(sticky).position)
-
-			window.addEventListener('scroll', handleScroll)
-			scroller = getParentScroller(sticky)
-			scroller !== window && scroller.addEventListener('scroll', handleScroll)
-
-			handleScroll()
-		})
-		onUnmounted(() => {
-			window.removeEventListener('scroll', handleScroll)
-			scroller !== window && scroller.removeEventListener('scroll', handleScroll)
-		})
-
-		return {
-			stickyEl,
-			wrapperEl,
-			isFixed,
-			offsetTop,
-			fixedTop,
-			fixedLeft,
-			fixedWidth,
-			fixedHeight,
-			fixedWrapperWidth,
-			fixedWrapperHeight,
-		}
-	},
+  name: 'VarSticky',
+  props,
+  setup(props) {
+    const stickyEl: Ref<HTMLElement | null> = ref(null)
+    const wrapperEl: Ref<HTMLElement | null> = ref(null)
+
+    let isSupportCSSSticky = false
+
+    const isFixed: Ref<boolean> = ref(false)
+    const fixedTop: Ref<string> = ref('0px')
+    const fixedLeft: Ref<string> = ref('0px')
+    const fixedWidth: Ref<string> = ref('auto')
+    const fixedHeight: Ref<string> = ref('auto')
+    const fixedWrapperWidth: Ref<string> = ref('auto')
+    const fixedWrapperHeight: Ref<string> = ref('auto')
+
+    const offsetTop = computed(() => {
+      return isPx(props.offsetTop) ? formatPx(props.offsetTop) : remToPx(props.offsetTop)
+    })
+
+    let scroller: HTMLElement | Window = window
+
+    const handleScroll = () => {
+      let scrollerTop = 0
+
+      if (scroller !== window) {
+        const { top } = (scroller as HTMLElement).getBoundingClientRect()
+        scrollerTop = top
+      }
+
+      const sticky = stickyEl.value as HTMLElement
+      const wrapper = wrapperEl.value as HTMLElement
+
+      const { top: stickyTop, left: stickyLeft } = sticky.getBoundingClientRect()
+      const currentOffsetTop = stickyTop - scrollerTop
+
+      if (currentOffsetTop <= offsetTop.value) {
+        if (!isSupportCSSSticky) {
+          fixedWidth.value = `${sticky.offsetWidth}px`
+          fixedHeight.value = `${sticky.offsetHeight}px`
+          fixedTop.value = `${scrollerTop + offsetTop.value}px`
+          fixedLeft.value = `${stickyLeft}px`
+          fixedWrapperWidth.value = `${wrapper.offsetWidth}px`
+          fixedWrapperHeight.value = `${wrapper.offsetHeight}px`
+          isFixed.value = true
+        }
+
+        props.onScroll?.(offsetTop.value, true)
+      } else {
+        isFixed.value = false
+
+        props.onScroll?.(currentOffsetTop, false)
+      }
+    }
+
+    onMounted(() => {
+      const sticky = stickyEl.value as HTMLInputElement
+
+      isSupportCSSSticky = ['sticky', '-webkit-sticky'].includes(window.getComputedStyle(sticky).position)
+
+      window.addEventListener('scroll', handleScroll)
+      scroller = getParentScroller(sticky)
+      scroller !== window && scroller.addEventListener('scroll', handleScroll)
+
+      handleScroll()
+    })
+    onUnmounted(() => {
+      window.removeEventListener('scroll', handleScroll)
+      scroller !== window && scroller.removeEventListener('scroll', handleScroll)
+    })
+
+    return {
+      stickyEl,
+      wrapperEl,
+      isFixed,
+      offsetTop,
+      fixedTop,
+      fixedLeft,
+      fixedWidth,
+      fixedHeight,
+      fixedWrapperWidth,
+      fixedWrapperHeight,
+    }
+  },
 })
 </script>
 <style lang="less">
diff --git a/packages/varlet-ui/src/sticky/example/index.vue b/packages/varlet-ui/src/sticky/example/index.vue
index 35982df994c..3cdcb94f4e6 100644
--- a/packages/varlet-ui/src/sticky/example/index.vue
+++ b/packages/varlet-ui/src/sticky/example/index.vue
@@ -23,19 +23,19 @@ import Sticky from '..'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'StickyExample',
-	components: {
-		[Sticky.name]: Sticky,
-		[Button.name]: Button,
-	},
-	setup() {
-		return {
-			handleScroll(top: number, isFixed: boolean) {
-				console.log(top)
-				console.log(isFixed)
-			},
-		}
-	},
+  name: 'StickyExample',
+  components: {
+    [Sticky.name]: Sticky,
+    [Button.name]: Button,
+  },
+  setup() {
+    return {
+      handleScroll(top: number, isFixed: boolean) {
+        console.log(top)
+        console.log(isFixed)
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/sticky/index.ts b/packages/varlet-ui/src/sticky/index.ts
index e2fe2598b95..91aa42151ea 100644
--- a/packages/varlet-ui/src/sticky/index.ts
+++ b/packages/varlet-ui/src/sticky/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Sticky from './Sticky.vue'
 
 Sticky.install = function (app: App) {
-	app.component(Sticky.name, Sticky)
+  app.component(Sticky.name, Sticky)
 }
 
 export default Sticky
diff --git a/packages/varlet-ui/src/sticky/props.ts b/packages/varlet-ui/src/sticky/props.ts
index 709f32913fa..a68cc1a0880 100644
--- a/packages/varlet-ui/src/sticky/props.ts
+++ b/packages/varlet-ui/src/sticky/props.ts
@@ -1,20 +1,20 @@
 import { isPx, isRem } from '../utils/elements'
 
 function offsetTopValidator(offsetTop: string | number): boolean {
-	return isPx(offsetTop) || isRem(offsetTop)
+  return isPx(offsetTop) || isRem(offsetTop)
 }
 
 export const props = {
-	offsetTop: {
-		type: [String, Number],
-		validator: offsetTopValidator,
-		default: 0,
-	},
-	zIndex: {
-		type: Number,
-		default: 10,
-	},
-	onScroll: {
-		type: Function,
-	},
+  offsetTop: {
+    type: [String, Number],
+    validator: offsetTopValidator,
+    default: 0,
+  },
+  zIndex: {
+    type: Number,
+    default: 10,
+  },
+  onScroll: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/switch/Switch.vue b/packages/varlet-ui/src/switch/Switch.vue
index bc0cdbbf950..bb5cc4e716d 100644
--- a/packages/varlet-ui/src/switch/Switch.vue
+++ b/packages/varlet-ui/src/switch/Switch.vue
@@ -51,90 +51,90 @@ type StyleProps = {
 }
 
 export default defineComponent({
-	name: 'VarSwitch',
-	components: {
-		[Loading.name]: Loading,
-		[FormDetails.name]: FormDetails,
-	},
-	directives: { Ripple },
-	props,
-	setup(props) {
-		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SwitchProvider>(
-			FORM_BIND_FORM_ITEM_KEY
-		)
-		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+  name: 'VarSwitch',
+  components: {
+    [Loading.name]: Loading,
+    [FormDetails.name]: FormDetails,
+  },
+  directives: { Ripple },
+  props,
+  setup(props) {
+    const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SwitchProvider>(
+      FORM_BIND_FORM_ITEM_KEY
+    )
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
 
-		const validate = () => v(props.rules, props.modelValue)
+    const validate = () => v(props.rules, props.modelValue)
 
-		const validateWithTrigger = () => nextTick(() => vt(['onChange'], 'onChange', props.rules, props.modelValue))
+    const validateWithTrigger = () => nextTick(() => vt(['onChange'], 'onChange', props.rules, props.modelValue))
 
-		const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
-			const switchWidth = +props.size * 2
-			const switchHeight = +props.size * 1.2
+    const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
+      const switchWidth = +props.size * 2
+      const switchHeight = +props.size * 1.2
 
-			return {
-				handle: {
-					width: `${props.size}px`,
-					height: `${props.size}px`,
-					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
-					color: props.loadingColor && props.loadingColor,
-				},
-				ripple: {
-					left: props.modelValue ? `${+props.size / 2}px` : `-${+props.size / 2}px`,
-					color: props.modelValue ? props.color || '' : props.closeColor || '#999',
-					width: `${+props.size * 2}px`,
-					height: `${+props.size * 2}px`,
-				},
-				track: {
-					height: `${switchHeight * 0.6}px`,
-					width: `${switchWidth - 2}px`,
-					borderRadius: `${switchWidth / 3}px`,
-					filter: props.modelValue || errorMessage?.value ? 'opacity(.6)' : 'brightness(.6)',
-					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
-				},
-				switch: {
-					height: `${switchHeight}px`,
-					width: `${switchWidth}px`,
-				},
-			}
-		})
+      return {
+        handle: {
+          width: `${props.size}px`,
+          height: `${props.size}px`,
+          backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
+          color: props.loadingColor && props.loadingColor,
+        },
+        ripple: {
+          left: props.modelValue ? `${+props.size / 2}px` : `-${+props.size / 2}px`,
+          color: props.modelValue ? props.color || '' : props.closeColor || '#999',
+          width: `${+props.size * 2}px`,
+          height: `${+props.size * 2}px`,
+        },
+        track: {
+          height: `${switchHeight * 0.6}px`,
+          width: `${switchWidth - 2}px`,
+          borderRadius: `${switchWidth / 3}px`,
+          filter: props.modelValue || errorMessage?.value ? 'opacity(.6)' : 'brightness(.6)',
+          backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
+        },
+        switch: {
+          height: `${switchHeight}px`,
+          width: `${switchWidth}px`,
+        },
+      }
+    })
 
-		const switchActive = () => {
-			props.onClick?.()
-			if (
-				props.disabled ||
+    const switchActive = () => {
+      props.onClick?.()
+      if (
+        props.disabled ||
 				props.loading ||
 				props.readonly ||
 				formProvider?.disabled.value ||
 				formProvider?.readonly.value
-			)
-				return
-			props.onChange?.(!props.modelValue)
-			props['onUpdate:modelValue']?.(!props.modelValue)
-			validateWithTrigger()
-		}
+      )
+        return
+      props.onChange?.(!props.modelValue)
+      props['onUpdate:modelValue']?.(!props.modelValue)
+      validateWithTrigger()
+    }
 
-		const reset = () => {
-			props['onUpdate:modelValue']?.(false)
-			resetValidation()
-		}
+    const reset = () => {
+      props['onUpdate:modelValue']?.(false)
+      resetValidation()
+    }
 
-		const switchProvider: SwitchProvider = {
-			reset,
-			validate,
-			resetValidation,
-		}
+    const switchProvider: SwitchProvider = {
+      reset,
+      validate,
+      resetValidation,
+    }
 
-		bindForm?.(switchProvider)
+    bindForm?.(switchProvider)
 
-		return {
-			switchActive,
-			styleComputed,
-			errorMessage,
-			formDisabled: formProvider?.disabled,
-			formReadonly: formProvider?.readonly,
-		}
-	},
+    return {
+      switchActive,
+      styleComputed,
+      errorMessage,
+      formDisabled: formProvider?.disabled,
+      formReadonly: formProvider?.readonly,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/switch/example/index.vue b/packages/varlet-ui/src/switch/example/index.vue
index 72bb97be395..03413ec1ef9 100644
--- a/packages/varlet-ui/src/switch/example/index.vue
+++ b/packages/varlet-ui/src/switch/example/index.vue
@@ -49,23 +49,23 @@ import { defineComponent, ref } from 'vue'
 import Switch from '..'
 
 export default defineComponent({
-	name: 'SwitchExample',
-	components: {
-		[Switch.name]: Switch,
-	},
-	setup() {
-		const value = ref(true)
-		const value1 = ref(true)
-		const value2 = ref(false)
-		const value3 = ref(true)
+  name: 'SwitchExample',
+  components: {
+    [Switch.name]: Switch,
+  },
+  setup() {
+    const value = ref(true)
+    const value1 = ref(true)
+    const value2 = ref(false)
+    const value3 = ref(true)
 
-		return {
-			value,
-			value1,
-			value2,
-			value3,
-		}
-	},
+    return {
+      value,
+      value1,
+      value2,
+      value3,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/switch/index.ts b/packages/varlet-ui/src/switch/index.ts
index ed80c43a38e..b542f19ea70 100644
--- a/packages/varlet-ui/src/switch/index.ts
+++ b/packages/varlet-ui/src/switch/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Switch from './Switch.vue'
 
 Switch.install = function (app: App) {
-	app.component(Switch.name, Switch)
+  app.component(Switch.name, Switch)
 }
 
 export default Switch
diff --git a/packages/varlet-ui/src/switch/props.ts b/packages/varlet-ui/src/switch/props.ts
index c5e4d8ff265..e705d9f2560 100644
--- a/packages/varlet-ui/src/switch/props.ts
+++ b/packages/varlet-ui/src/switch/props.ts
@@ -1,48 +1,48 @@
 import { PropType } from 'vue'
 
 export const props = {
-	modelValue: {
-		type: Boolean,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	readonly: {
-		type: Boolean,
-		default: false,
-	},
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	color: {
-		type: String,
-	},
-	loadingColor: {
-		type: String,
-	},
-	closeColor: {
-		type: String,
-	},
-	size: {
-		type: [String, Number],
-		default: 20,
-	},
-	rules: {
-		type: Array as PropType<Array<(v: boolean) => any>>,
-	},
-	ripple: {
-		type: Boolean,
-		default: true,
-	},
-	onClick: {
-		type: Function,
-	},
-	onChange: {
-		type: Function,
-	},
-	'onUpdate:modelValue': {
-		type: Function,
-	},
+  modelValue: {
+    type: Boolean,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+  },
+  loadingColor: {
+    type: String,
+  },
+  closeColor: {
+    type: String,
+  },
+  size: {
+    type: [String, Number],
+    default: 20,
+  },
+  rules: {
+    type: Array as PropType<Array<(v: boolean) => any>>,
+  },
+  ripple: {
+    type: Boolean,
+    default: true,
+  },
+  onClick: {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/tab-item/TabItem.vue b/packages/varlet-ui/src/tab-item/TabItem.vue
index 062b60a3718..cac398c3e89 100644
--- a/packages/varlet-ui/src/tab-item/TabItem.vue
+++ b/packages/varlet-ui/src/tab-item/TabItem.vue
@@ -14,50 +14,50 @@ import { TabItemProvider } from './provide'
 import { props } from './props'
 
 export default defineComponent({
-	name: 'VarTabItem',
-	props,
-	setup(props) {
-		const { parentProvider: tabsItemsProvider, bindParent } = useParent<TabsItemsProvider, TabItemProvider>(
-			TABS_ITEMS_BIND_TAB_ITEM_KEY
-		)
-		const { index } = useAtParentIndex(TABS_ITEMS_COUNT_TAB_ITEM_KEY)
+  name: 'VarTabItem',
+  props,
+  setup(props) {
+    const { parentProvider: tabsItemsProvider, bindParent } = useParent<TabsItemsProvider, TabItemProvider>(
+      TABS_ITEMS_BIND_TAB_ITEM_KEY
+    )
+    const { index } = useAtParentIndex(TABS_ITEMS_COUNT_TAB_ITEM_KEY)
 
-		if (!tabsItemsProvider || !bindParent || !index) {
-			throw Error('<var-tab-item/> must in <var-tabs-items/>')
-		}
+    if (!tabsItemsProvider || !bindParent || !index) {
+      throw Error('<var-tab-item/> must in <var-tabs-items/>')
+    }
 
-		const show: Ref<boolean> = ref(false)
-		const tabItemEl: Ref<null | HTMLElement> = ref(null)
-		const transitionName: Ref<string> = ref('var-tabs-items-left')
-		const name: ComputedRef<string | number | undefined> = computed(() => props.name)
-		const element: ComputedRef<HTMLElement | null> = computed(() => tabItemEl.value)
-		const { active, resize, resetTransitionHeight } = tabsItemsProvider
+    const show: Ref<boolean> = ref(false)
+    const tabItemEl: Ref<null | HTMLElement> = ref(null)
+    const transitionName: Ref<string> = ref('var-tabs-items-left')
+    const name: ComputedRef<string | number | undefined> = computed(() => props.name)
+    const element: ComputedRef<HTMLElement | null> = computed(() => tabItemEl.value)
+    const { active, resize, resetTransitionHeight } = tabsItemsProvider
 
-		const transition = (newIndex: number, oldIndex: number) => {
-			transitionName.value =
+    const transition = (newIndex: number, oldIndex: number) => {
+      transitionName.value =
 				oldIndex === -1 ? 'var-tab-item-right' : newIndex > oldIndex ? 'var-tab-item-right' : 'var-tab-item-left'
-			show.value = active.value === props.name || active.value === index.value
-		}
+      show.value = active.value === props.name || active.value === index.value
+    }
 
-		const tabItemProvider: TabItemProvider = {
-			index,
-			name,
-			element,
-			transition,
-		}
+    const tabItemProvider: TabItemProvider = {
+      index,
+      name,
+      element,
+      transition,
+    }
 
-		bindParent(tabItemProvider)
+    bindParent(tabItemProvider)
 
-		watch(() => props.name, resize)
+    watch(() => props.name, resize)
 
-		return {
-			tabItemEl,
-			show,
-			active,
-			transitionName,
-			resetTransitionHeight,
-		}
-	},
+    return {
+      tabItemEl,
+      show,
+      active,
+      transitionName,
+      resetTransitionHeight,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tab-item/example/index.vue b/packages/varlet-ui/src/tab-item/example/index.vue
index de2fbe6eab2..6ac256911b7 100644
--- a/packages/varlet-ui/src/tab-item/example/index.vue
+++ b/packages/varlet-ui/src/tab-item/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import TabItem from '..'
 
 export default defineComponent({
-	name: 'TabItemExample',
-	components: {
-		[TabItem.name]: TabItem,
-	},
+  name: 'TabItemExample',
+  components: {
+    [TabItem.name]: TabItem,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tab-item/index.ts b/packages/varlet-ui/src/tab-item/index.ts
index 0d3e5f084ca..86304dcb3a1 100644
--- a/packages/varlet-ui/src/tab-item/index.ts
+++ b/packages/varlet-ui/src/tab-item/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import TabItem from './TabItem.vue'
 
 TabItem.install = function (app: App) {
-	app.component(TabItem.name, TabItem)
+  app.component(TabItem.name, TabItem)
 }
 
 export default TabItem
diff --git a/packages/varlet-ui/src/tab-item/props.ts b/packages/varlet-ui/src/tab-item/props.ts
index 70fc577b30f..3baab76bdf4 100644
--- a/packages/varlet-ui/src/tab-item/props.ts
+++ b/packages/varlet-ui/src/tab-item/props.ts
@@ -1,5 +1,5 @@
 export const props = {
-	name: {
-		type: [String, Number],
-	},
+  name: {
+    type: [String, Number],
+  },
 }
diff --git a/packages/varlet-ui/src/tab/Tab.vue b/packages/varlet-ui/src/tab/Tab.vue
index 93a86d2d1fd..cec5c03cfc7 100644
--- a/packages/varlet-ui/src/tab/Tab.vue
+++ b/packages/varlet-ui/src/tab/Tab.vue
@@ -22,72 +22,72 @@ import { useAtParentIndex, useParent } from '../utils/components'
 import { TabProvider } from './provide'
 
 export default defineComponent({
-	name: 'VarTab',
-	directives: { Ripple },
-	props,
-	setup(props) {
-		const { parentProvider: tabsProvider, bindParent } = useParent<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
-		const { index } = useAtParentIndex(TABS_COUNT_TAB_KEY)
+  name: 'VarTab',
+  directives: { Ripple },
+  props,
+  setup(props) {
+    const { parentProvider: tabsProvider, bindParent } = useParent<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
+    const { index } = useAtParentIndex(TABS_COUNT_TAB_KEY)
 
-		if (!tabsProvider || !bindParent || !index) {
-			throw Error('<var-tab/> must in <var-tabs/>')
-		}
+    if (!tabsProvider || !bindParent || !index) {
+      throw Error('<var-tab/> must in <var-tabs/>')
+    }
 
-		const tabEl: Ref<HTMLElement | null> = ref(null)
-		const name: ComputedRef<string | number | undefined> = computed(() => props.name)
-		const disabled: ComputedRef<boolean> = computed(() => props.disabled)
-		const element: ComputedRef<HTMLElement | null> = computed(() => tabEl.value)
+    const tabEl: Ref<HTMLElement | null> = ref(null)
+    const name: ComputedRef<string | number | undefined> = computed(() => props.name)
+    const disabled: ComputedRef<boolean> = computed(() => props.disabled)
+    const element: ComputedRef<HTMLElement | null> = computed(() => tabEl.value)
 
-		const tabProvider: TabProvider = {
-			name,
-			index,
-			disabled,
-			element,
-		}
+    const tabProvider: TabProvider = {
+      name,
+      index,
+      disabled,
+      element,
+    }
 
-		bindParent(tabProvider)
+    bindParent(tabProvider)
 
-		const { onTabClick, active, activeColor, inactiveColor, disabledColor, itemDirection, resize } = tabsProvider
+    const { onTabClick, active, activeColor, inactiveColor, disabledColor, itemDirection, resize } = tabsProvider
 
-		const computeColorStyle = () => {
-			return props.disabled
-				? disabledColor.value
-				: active.value === props.name || active.value === index.value
-				? activeColor.value
-				: inactiveColor.value
-		}
+    const computeColorStyle = () => {
+      return props.disabled
+        ? disabledColor.value
+        : active.value === props.name || active.value === index.value
+          ? activeColor.value
+          : inactiveColor.value
+    }
 
-		const computeColorClass = () => {
-			return props.disabled
-				? 'var-tab--disabled'
-				: active.value === props.name || active.value === index.value
-				? 'var-tab--active'
-				: 'var-tab--inactive'
-		}
+    const computeColorClass = () => {
+      return props.disabled
+        ? 'var-tab--disabled'
+        : active.value === props.name || active.value === index.value
+          ? 'var-tab--active'
+          : 'var-tab--inactive'
+    }
 
-		const handleClick = (event: Event) => {
-			if (props.disabled) {
-				return
-			}
+    const handleClick = (event: Event) => {
+      if (props.disabled) {
+        return
+      }
 
-			props.onClick?.(props.name ?? index.value, event)
-			onTabClick(tabProvider)
-		}
+      props.onClick?.(props.name ?? index.value, event)
+      onTabClick(tabProvider)
+    }
 
-		watch(() => props.name, resize)
-		watch(() => props.disabled, resize)
+    watch(() => props.name, resize)
+    watch(() => props.disabled, resize)
 
-		return {
-			tabEl,
-			active,
-			activeColor,
-			inactiveColor,
-			itemDirection,
-			computeColorStyle,
-			computeColorClass,
-			handleClick,
-		}
-	},
+    return {
+      tabEl,
+      active,
+      activeColor,
+      inactiveColor,
+      itemDirection,
+      computeColorStyle,
+      computeColorClass,
+      handleClick,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tab/example/index.vue b/packages/varlet-ui/src/tab/example/index.vue
index ce3e25af84b..6ed48ab2494 100644
--- a/packages/varlet-ui/src/tab/example/index.vue
+++ b/packages/varlet-ui/src/tab/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import Tab from '..'
 
 export default defineComponent({
-	name: 'TabExample',
-	components: {
-		[Tab.name]: Tab,
-	},
+  name: 'TabExample',
+  components: {
+    [Tab.name]: Tab,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tab/index.ts b/packages/varlet-ui/src/tab/index.ts
index 7d02e86b251..ef69eeb21b6 100644
--- a/packages/varlet-ui/src/tab/index.ts
+++ b/packages/varlet-ui/src/tab/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Tab from './Tab.vue'
 
 Tab.install = function (app: App) {
-	app.component(Tab.name, Tab)
+  app.component(Tab.name, Tab)
 }
 
 export default Tab
diff --git a/packages/varlet-ui/src/tab/props.ts b/packages/varlet-ui/src/tab/props.ts
index ece18f511c6..b61377d8d15 100644
--- a/packages/varlet-ui/src/tab/props.ts
+++ b/packages/varlet-ui/src/tab/props.ts
@@ -1,12 +1,12 @@
 export const props = {
-	name: {
-		type: [String, Number],
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	onClick: {
-		type: Function,
-	},
+  name: {
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  onClick: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/tabs-items/TabsItems.vue b/packages/varlet-ui/src/tabs-items/TabsItems.vue
index 8562701967a..3741f65ecc6 100644
--- a/packages/varlet-ui/src/tabs-items/TabsItems.vue
+++ b/packages/varlet-ui/src/tabs-items/TabsItems.vue
@@ -18,87 +18,87 @@ import { props } from './props'
 import { TabItemProvider } from '../tab-item/provide'
 
 export default defineComponent({
-	name: 'VarTabsItems',
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const transitionHeight: Ref<string> = ref('auto')
-		const active: ComputedRef<number | string> = computed(() => props.active)
-		const { bindChildren, childProviders: tabItemProviders } = useChildren<TabsItemsProvider, TabItemProvider>(
-			TABS_ITEMS_BIND_TAB_ITEM_KEY
-		)
-		const { length } = useAtChildrenCounter(TABS_ITEMS_COUNT_TAB_ITEM_KEY)
-
-		const resetTransitionHeight = () => {
+  name: 'VarTabsItems',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const transitionHeight: Ref<string> = ref('auto')
+    const active: ComputedRef<number | string> = computed(() => props.active)
+    const { bindChildren, childProviders: tabItemProviders } = useChildren<TabsItemsProvider, TabItemProvider>(
+      TABS_ITEMS_BIND_TAB_ITEM_KEY
+    )
+    const { length } = useAtChildrenCounter(TABS_ITEMS_COUNT_TAB_ITEM_KEY)
+
+    const resetTransitionHeight = () => {
       transitionHeight.value = 'auto'
     }
 
-		const matchName = (active: number | string | undefined): TabItemProvider | undefined => {
-			return tabItemProviders.find(({ name }: TabItemProvider) => active === name.value)
-		}
-
-		const matchIndex = (active: number | string | undefined): TabItemProvider | undefined => {
-			return tabItemProviders.find(({ index }: TabItemProvider) => active === index.value)
-		}
-
-		const matchActive = (active: number | string | undefined): TabItemProvider | undefined => {
-			return matchName(active) || matchIndex(active)
-		}
-
-		const resize = () => {
-			const tabItemProvider: TabItemProvider | undefined = matchActive(props.active)
-			if (!tabItemProvider) {
-				return
-			}
-
-			const { element } = tabItemProvider
-
-			tabItemProviders.forEach(({ transition }) => transition(tabItemProvider.index.value, -1))
-
-			nextTick().then(() => {
-				transitionHeight.value = `${(element.value as HTMLElement).offsetHeight}px`
-			})
-		}
-
-		const tabsItemsProvider: TabsItemsProvider = {
-			active,
-			resize,
-			resetTransitionHeight,
-		}
-
-		bindChildren(tabsItemsProvider)
-
-		watch(
-			() => props.active,
-			(newValue: number | string | undefined, oldValue: number | string | undefined) => {
-				const oldActiveTabItemProvider: TabItemProvider | undefined = matchActive(oldValue)
-				const newActiveTabItemProvider: TabItemProvider | undefined = matchActive(newValue)
-				if (!oldActiveTabItemProvider || !newActiveTabItemProvider) {
-					return
-				}
-
-				const { index: oldIndex } = oldActiveTabItemProvider
-				const { element, index: newIndex } = newActiveTabItemProvider
-
-				tabItemProviders.forEach(({ transition }) => transition(newIndex.value, oldIndex.value))
-
-				nextTick().then(() => {
-					transitionHeight.value = `${(element.value as HTMLElement).offsetHeight}px`
-				})
-			}
-		)
-
-		watch(
-			() => length.value,
-			() => nextTick().then(resize)
-		)
-
-		return {
-			transitionHeight,
-			length,
-			resize,
-		}
-	},
+    const matchName = (active: number | string | undefined): TabItemProvider | undefined => {
+      return tabItemProviders.find(({ name }: TabItemProvider) => active === name.value)
+    }
+
+    const matchIndex = (active: number | string | undefined): TabItemProvider | undefined => {
+      return tabItemProviders.find(({ index }: TabItemProvider) => active === index.value)
+    }
+
+    const matchActive = (active: number | string | undefined): TabItemProvider | undefined => {
+      return matchName(active) || matchIndex(active)
+    }
+
+    const resize = () => {
+      const tabItemProvider: TabItemProvider | undefined = matchActive(props.active)
+      if (!tabItemProvider) {
+        return
+      }
+
+      const { element } = tabItemProvider
+
+      tabItemProviders.forEach(({ transition }) => transition(tabItemProvider.index.value, -1))
+
+      nextTick().then(() => {
+        transitionHeight.value = `${(element.value as HTMLElement).offsetHeight}px`
+      })
+    }
+
+    const tabsItemsProvider: TabsItemsProvider = {
+      active,
+      resize,
+      resetTransitionHeight,
+    }
+
+    bindChildren(tabsItemsProvider)
+
+    watch(
+      () => props.active,
+      (newValue: number | string | undefined, oldValue: number | string | undefined) => {
+        const oldActiveTabItemProvider: TabItemProvider | undefined = matchActive(oldValue)
+        const newActiveTabItemProvider: TabItemProvider | undefined = matchActive(newValue)
+        if (!oldActiveTabItemProvider || !newActiveTabItemProvider) {
+          return
+        }
+
+        const { index: oldIndex } = oldActiveTabItemProvider
+        const { element, index: newIndex } = newActiveTabItemProvider
+
+        tabItemProviders.forEach(({ transition }) => transition(newIndex.value, oldIndex.value))
+
+        nextTick().then(() => {
+          transitionHeight.value = `${(element.value as HTMLElement).offsetHeight}px`
+        })
+      }
+    )
+
+    watch(
+      () => length.value,
+      () => nextTick().then(resize)
+    )
+
+    return {
+      transitionHeight,
+      length,
+      resize,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tabs-items/example/index.vue b/packages/varlet-ui/src/tabs-items/example/index.vue
index c879448a360..6a01704af1d 100644
--- a/packages/varlet-ui/src/tabs-items/example/index.vue
+++ b/packages/varlet-ui/src/tabs-items/example/index.vue
@@ -7,10 +7,10 @@ import { defineComponent } from 'vue'
 import TabsItems from '..'
 
 export default defineComponent({
-	name: 'TabsItemsExample',
-	components: {
-		[TabsItems.name]: TabsItems,
-	},
+  name: 'TabsItemsExample',
+  components: {
+    [TabsItems.name]: TabsItems,
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tabs-items/index.ts b/packages/varlet-ui/src/tabs-items/index.ts
index 31ec0afc308..afff7ef6064 100644
--- a/packages/varlet-ui/src/tabs-items/index.ts
+++ b/packages/varlet-ui/src/tabs-items/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import TabsItems from './TabsItems.vue'
 
 TabsItems.install = function (app: App) {
-	app.component(TabsItems.name, TabsItems)
+  app.component(TabsItems.name, TabsItems)
 }
 
 export default TabsItems
diff --git a/packages/varlet-ui/src/tabs-items/props.ts b/packages/varlet-ui/src/tabs-items/props.ts
index a3108130d39..6efa0c10ee8 100644
--- a/packages/varlet-ui/src/tabs-items/props.ts
+++ b/packages/varlet-ui/src/tabs-items/props.ts
@@ -1,9 +1,9 @@
 export const props = {
-	active: {
-		type: [String, Number],
-		default: 0,
-	},
-	'onUpdate:active': {
-		type: Function,
-	},
+  active: {
+    type: [String, Number],
+    default: 0,
+  },
+  'onUpdate:active': {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/tabs/Tabs.vue b/packages/varlet-ui/src/tabs/Tabs.vue
index 610ae9a03d2..94d8788875c 100644
--- a/packages/varlet-ui/src/tabs/Tabs.vue
+++ b/packages/varlet-ui/src/tabs/Tabs.vue
@@ -47,64 +47,64 @@ import { TabProvider } from '../tab/provide'
 import { isNumber } from '../utils/shared'
 
 export default defineComponent({
-	name: 'VarTabs',
-	components: {
-		[Sticky.name]: Sticky,
-	},
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const indicatorWidth: Ref<string> = ref('0px')
-		const indicatorHeight: Ref<string> = ref('0px')
-		const indicatorX: Ref<string> = ref('0px')
-		const indicatorY: Ref<string> = ref('0px')
-
-		const scrollable: Ref<boolean> = ref(false)
-		const scrollerEl: Ref<HTMLElement | null> = ref(null)
-
-		const active: ComputedRef<number | string> = computed(() => props.active)
-		const activeColor: ComputedRef<string | undefined> = computed(() => props.activeColor)
-		const inactiveColor: ComputedRef<string | undefined> = computed(() => props.inactiveColor)
-		const disabledColor: ComputedRef<string | undefined> = computed(() => props.disabledColor)
-		const itemDirection: ComputedRef<string> = computed(() => props.itemDirection)
-		const { childProviders: tabProviders, bindChildren } = useChildren<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
-		const { length } = useAtChildrenCounter(TABS_COUNT_TAB_KEY)
-
-		const onTabClick = (tabProvider: TabProvider) => {
-			const active = tabProvider.name.value ?? tabProvider.index.value
-
-			props['onUpdate:active']?.(active)
-			props.onClick?.(active)
-			active !== props.active && props.onChange?.(active)
-		}
-
-		const matchName = (): TabProvider | undefined => {
-			return tabProviders.find(({ name }: TabProvider) => props.active === name.value)
-		}
-
-		const matchIndex = (): TabProvider | undefined => {
-			return tabProviders.find(({ index }: TabProvider) => props.active === index.value)
-		}
-
-		const matchBoundary = (): TabProvider | undefined => {
-			if (length.value === 0) {
-				return
-			}
-
-			isNumber(props.active)
-				? props.active > length.value - 1
-					? props['onUpdate:active']?.(length.value - 1)
-					: props['onUpdate:active']?.(0)
-				: null
-
-			return matchIndex()
-		}
-
-		const watchScrollable = () => {
-			scrollable.value = tabProviders.length >= 5
-		}
-
-		const moveIndicator = ({ element }: TabProvider) => {
+  name: 'VarTabs',
+  components: {
+    [Sticky.name]: Sticky,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const indicatorWidth: Ref<string> = ref('0px')
+    const indicatorHeight: Ref<string> = ref('0px')
+    const indicatorX: Ref<string> = ref('0px')
+    const indicatorY: Ref<string> = ref('0px')
+
+    const scrollable: Ref<boolean> = ref(false)
+    const scrollerEl: Ref<HTMLElement | null> = ref(null)
+
+    const active: ComputedRef<number | string> = computed(() => props.active)
+    const activeColor: ComputedRef<string | undefined> = computed(() => props.activeColor)
+    const inactiveColor: ComputedRef<string | undefined> = computed(() => props.inactiveColor)
+    const disabledColor: ComputedRef<string | undefined> = computed(() => props.disabledColor)
+    const itemDirection: ComputedRef<string> = computed(() => props.itemDirection)
+    const { childProviders: tabProviders, bindChildren } = useChildren<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
+    const { length } = useAtChildrenCounter(TABS_COUNT_TAB_KEY)
+
+    const onTabClick = (tabProvider: TabProvider) => {
+      const active = tabProvider.name.value ?? tabProvider.index.value
+
+      props['onUpdate:active']?.(active)
+      props.onClick?.(active)
+      active !== props.active && props.onChange?.(active)
+    }
+
+    const matchName = (): TabProvider | undefined => {
+      return tabProviders.find(({ name }: TabProvider) => props.active === name.value)
+    }
+
+    const matchIndex = (): TabProvider | undefined => {
+      return tabProviders.find(({ index }: TabProvider) => props.active === index.value)
+    }
+
+    const matchBoundary = (): TabProvider | undefined => {
+      if (length.value === 0) {
+        return
+      }
+
+      isNumber(props.active)
+        ? props.active > length.value - 1
+          ? props['onUpdate:active']?.(length.value - 1)
+          : props['onUpdate:active']?.(0)
+        : null
+
+      return matchIndex()
+    }
+
+    const watchScrollable = () => {
+      scrollable.value = tabProviders.length >= 5
+    }
+
+    const moveIndicator = ({ element }: TabProvider) => {
 		  if (props.layoutDirection === 'horizontal') {
         indicatorWidth.value = `${element.value?.offsetWidth}px`
         indicatorX.value = `${element.value?.offsetLeft}px`
@@ -112,15 +112,15 @@ export default defineComponent({
         indicatorHeight.value = `${element.value?.offsetHeight}px`
         indicatorY.value = `${element.value?.offsetTop}px`
       }
-		}
+    }
 
-		const scrollToCenter = ({ element }: TabProvider) => {
-			if (!scrollable.value) {
-				return
-			}
+    const scrollToCenter = ({ element }: TabProvider) => {
+      if (!scrollable.value) {
+        return
+      }
 
-			const scroller: HTMLElement = scrollerEl.value as HTMLElement
-			const el = element.value as HTMLElement
+      const scroller: HTMLElement = scrollerEl.value as HTMLElement
+      const el = element.value as HTMLElement
 
       if (props.layoutDirection === 'horizontal') {
         const left: number = el.offsetLeft + el.offsetWidth / 2 - scroller.offsetWidth / 2
@@ -135,49 +135,49 @@ export default defineComponent({
           behavior: 'smooth',
         })
       }
-		}
+    }
 
-		const resize = () => {
-			const tabProvider: TabProvider | undefined = matchName() || matchIndex() || matchBoundary()
+    const resize = () => {
+      const tabProvider: TabProvider | undefined = matchName() || matchIndex() || matchBoundary()
       if (!tabProvider || tabProvider.disabled.value) {
-				return
-			}
-
-			watchScrollable()
-			moveIndicator(tabProvider)
-			scrollToCenter(tabProvider)
-		}
-
-		const tabsProvider: TabsProvider = {
-			active,
-			activeColor,
-			inactiveColor,
-			disabledColor,
+        return
+      }
+
+      watchScrollable()
+      moveIndicator(tabProvider)
+      scrollToCenter(tabProvider)
+    }
+
+    const tabsProvider: TabsProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      disabledColor,
       itemDirection,
-			resize,
-			onTabClick,
-		}
+      resize,
+      onTabClick,
+    }
 
-		bindChildren(tabsProvider)
+    bindChildren(tabsProvider)
 
-		watch(
-			() => length.value,
-			() => nextTick().then(resize)
-		)
+    watch(
+      () => length.value,
+      () => nextTick().then(resize)
+    )
 
-		watch(() => props.active, resize)
+    watch(() => props.active, resize)
 
-		return {
-			indicatorWidth,
+    return {
+      indicatorWidth,
       indicatorHeight,
-			indicatorX,
+      indicatorX,
       indicatorY,
-			scrollable,
-			scrollerEl,
-			Transition,
-			resize,
-		}
-	},
+      scrollable,
+      scrollerEl,
+      Transition,
+      resize,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tabs/example/index.vue b/packages/varlet-ui/src/tabs/example/index.vue
index d3952f7faf5..e26005f2854 100644
--- a/packages/varlet-ui/src/tabs/example/index.vue
+++ b/packages/varlet-ui/src/tabs/example/index.vue
@@ -171,115 +171,115 @@ import TabItem from '../../tab-item'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'TabsExample',
-	components: {
-		[Tabs.name]: Tabs,
-		[Tab.name]: Tab,
-		[TabsItems.name]: TabsItems,
-		[TabItem.name]: TabItem,
-		[Icon.name]: Icon,
-		[Button.name]: Button,
-	},
-	setup() {
-		const active: Ref<number> = ref(0)
-		const loading: Ref<boolean> = ref(true)
-		const s: Ref<any> = ref(null)
-		const s1: Ref<any> = ref(null)
-		const activeBottom: Ref<number> = ref(0)
-		const activeRelation: Ref<any> = ref(0)
-		const activeName: Ref<string> = ref('测试1')
-		const list = reactive<any>([
-			'测试1',
-			'测试2',
-			'测试3',
-			'测试4',
-			'长文字嘎嘎嘎嘎嘎',
-			'测试5',
-			'测试6',
-			'测试7',
-			'测试8',
-			'测试9',
-		])
+  name: 'TabsExample',
+  components: {
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [TabsItems.name]: TabsItems,
+    [TabItem.name]: TabItem,
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+  },
+  setup() {
+    const active: Ref<number> = ref(0)
+    const loading: Ref<boolean> = ref(true)
+    const s: Ref<any> = ref(null)
+    const s1: Ref<any> = ref(null)
+    const activeBottom: Ref<number> = ref(0)
+    const activeRelation: Ref<any> = ref(0)
+    const activeName: Ref<string> = ref('测试1')
+    const list = reactive<any>([
+      '测试1',
+      '测试2',
+      '测试3',
+      '测试4',
+      '长文字嘎嘎嘎嘎嘎',
+      '测试5',
+      '测试6',
+      '测试7',
+      '测试8',
+      '测试9',
+    ])
 
-		const list2 = reactive<any>([])
-		list2.push(
-			{
-				id: 1,
-				name: '瓜瓜',
-			},
-			{
-				id: 2,
-				name: '咋咋',
-			},
-			{
-				id: 3,
-				name: '拉拉',
-			},
-			{
-				id: 4,
-				name: '瓜瓜',
-			},
-			{
-				id: 5,
-				name: '咋咋',
-			},
-			{
-				id: 6,
-				name: '拉拉',
-			},
-			{
-				id: 7,
-				name: '瓜瓜',
-			},
-			{
-				id: 8,
-				name: '咋咋',
-			},
-			{
-				id: 9,
-				name: '拉拉',
-			}
-		)
+    const list2 = reactive<any>([])
+    list2.push(
+      {
+        id: 1,
+        name: '瓜瓜',
+      },
+      {
+        id: 2,
+        name: '咋咋',
+      },
+      {
+        id: 3,
+        name: '拉拉',
+      },
+      {
+        id: 4,
+        name: '瓜瓜',
+      },
+      {
+        id: 5,
+        name: '咋咋',
+      },
+      {
+        id: 6,
+        name: '拉拉',
+      },
+      {
+        id: 7,
+        name: '瓜瓜',
+      },
+      {
+        id: 8,
+        name: '咋咋',
+      },
+      {
+        id: 9,
+        name: '拉拉',
+      }
+    )
 
-		const handleChange = (...args: any[]) => {
-			console.log(...args)
-		}
+    const handleChange = (...args: any[]) => {
+      console.log(...args)
+    }
 
-		setTimeout(() => {
-			loading.value = false
-		}, 2000)
+    setTimeout(() => {
+      loading.value = false
+    }, 2000)
 
-		return {
-			loading,
-			active,
-			activeBottom,
-			activeName,
-			activeRelation,
-			list,
-			list2,
-			s,
-			s1,
-			handleChange,
-			push() {
-				list2.push({
-					id: Date.now(),
-					name: '尾插',
-				})
-			},
-			unshift() {
-				list2.unshift({
-					id: Date.now(),
-					name: '头插',
-				})
-			},
-			pop() {
-				list2.pop()
-			},
-			shift() {
-				list2.shift()
-			},
-		}
-	},
+    return {
+      loading,
+      active,
+      activeBottom,
+      activeName,
+      activeRelation,
+      list,
+      list2,
+      s,
+      s1,
+      handleChange,
+      push() {
+        list2.push({
+          id: Date.now(),
+          name: '尾插',
+        })
+      },
+      unshift() {
+        list2.unshift({
+          id: Date.now(),
+          name: '头插',
+        })
+      },
+      pop() {
+        list2.pop()
+      },
+      shift() {
+        list2.shift()
+      },
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/tabs/index.ts b/packages/varlet-ui/src/tabs/index.ts
index 89b3dc0ed6c..d0d817bcf77 100644
--- a/packages/varlet-ui/src/tabs/index.ts
+++ b/packages/varlet-ui/src/tabs/index.ts
@@ -2,7 +2,7 @@ import { App } from 'vue'
 import Tabs from './Tabs.vue'
 
 Tabs.install = function (app: App) {
-	app.component(Tabs.name, Tabs)
+  app.component(Tabs.name, Tabs)
 }
 
 export default Tabs
diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts
index 82a90acf4ce..f4be333efbc 100644
--- a/packages/varlet-ui/src/tabs/props.ts
+++ b/packages/varlet-ui/src/tabs/props.ts
@@ -2,71 +2,71 @@ import { pickProps } from '../utils/components'
 import { props as stickyProps } from '../sticky/props'
 
 export const props = {
-	// 活动标签标识
-	active: {
-		type: [String, Number],
-		default: 0,
-	},
-	'onUpdate:active': {
-		type: Function,
-	},
-	// 排列方向
-	layoutDirection: {
-		type: String,
-		default: 'horizontal',
-	},
+  // 活动标签标识
+  active: {
+    type: [String, Number],
+    default: 0,
+  },
+  'onUpdate:active': {
+    type: Function,
+  },
+  // 排列方向
+  layoutDirection: {
+    type: String,
+    default: 'horizontal',
+  },
   // 内容排列方向
   itemDirection: {
 	  type: String,
     default: 'horizontal'
   },
-	// 底部固定
-	fixedBottom: {
-		type: Boolean,
-		default: false,
-	},
-	// 激活颜色
-	activeColor: {
-		type: String,
-	},
-	// 未激活颜色
-	inactiveColor: {
-		type: String,
-	},
-	// 禁用颜色
-	disabledColor: {
-		type: String,
-	},
-	// 标签背景
-	color: {
-		type: String,
-	},
-	// 指示器背景
-	indicatorColor: {
-		type: String,
-	},
-	// 指示器大小
-	indicatorSize: {
-		type: String,
-	},
-	// 阴影深度
-	elevation: {
-		type: Number,
-		default: 0,
-	},
-	// 开启粘性
-	sticky: {
-		type: Boolean,
-		default: false,
-	},
-	// 粘性位置
-	offsetTop: pickProps(stickyProps, 'offsetTop'),
-	// 点击标签事件
-	onClick: {
-		type: Function,
-	},
-	// 激活标签切换事件
-	onChange: {
-		type: Function,
-	},
+  // 底部固定
+  fixedBottom: {
+    type: Boolean,
+    default: false,
+  },
+  // 激活颜色
+  activeColor: {
+    type: String,
+  },
+  // 未激活颜色
+  inactiveColor: {
+    type: String,
+  },
+  // 禁用颜色
+  disabledColor: {
+    type: String,
+  },
+  // 标签背景
+  color: {
+    type: String,
+  },
+  // 指示器背景
+  indicatorColor: {
+    type: String,
+  },
+  // 指示器大小
+  indicatorSize: {
+    type: String,
+  },
+  // 阴影深度
+  elevation: {
+    type: Number,
+    default: 0,
+  },
+  // 开启粘性
+  sticky: {
+    type: Boolean,
+    default: false,
+  },
+  // 粘性位置
+  offsetTop: pickProps(stickyProps, 'offsetTop'),
+  // 点击标签事件
+  onClick: {
+    type: Function,
+  },
+  // 激活标签切换事件
+  onChange: {
+    type: Function,
+  },
 }
diff --git a/packages/varlet-ui/src/utils/components.ts b/packages/varlet-ui/src/utils/components.ts
index 22dad373c89..644213bdd32 100644
--- a/packages/varlet-ui/src/utils/components.ts
+++ b/packages/varlet-ui/src/utils/components.ts
@@ -1,22 +1,22 @@
 import {
-	createApp,
-	Component,
-	h,
-	getCurrentInstance,
-	inject,
-	onUnmounted,
-	computed,
-	ComputedRef,
-	provide,
-	reactive,
-	VNode,
-	isVNode,
-	ComponentInternalInstance,
-	onMounted,
-	onBeforeUnmount,
-	nextTick,
-	Ref,
-	ref,
+  createApp,
+  Component,
+  h,
+  getCurrentInstance,
+  inject,
+  onUnmounted,
+  computed,
+  ComputedRef,
+  provide,
+  reactive,
+  VNode,
+  isVNode,
+  ComponentInternalInstance,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  Ref,
+  ref,
 } from 'vue'
 import { isArray, removeItem } from './shared'
 
@@ -39,221 +39,221 @@ export interface BaseParentProvider<C> {
 export function pickProps(props: any, propsKey: string): any
 export function pickProps(props: any, propsKey: string[]): any
 export function pickProps(props: any, propsKey: any): any {
-	return Array.isArray(propsKey)
-		? propsKey.reduce((pickedProps: any, key) => {
-				pickedProps[key] = props[key]
-				return pickedProps
+  return Array.isArray(propsKey)
+    ? propsKey.reduce((pickedProps: any, key) => {
+      pickedProps[key] = props[key]
+      return pickedProps
 		  }, {})
-		: props[propsKey]
+    : props[propsKey]
 }
 
 export function mount(component: Component): MountInstance {
-	const app = createApp(component)
-	const host = document.createElement('div')
-	document.body.appendChild(host)
-
-	return {
-		instance: app.mount(host),
-		unmount() {
-			app.unmount(host)
-			document.body.removeChild(host)
-		},
-	}
+  const app = createApp(component)
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  return {
+    instance: app.mount(host),
+    unmount() {
+      app.unmount(host)
+      document.body.removeChild(host)
+    },
+  }
 }
 
 export function mountInstance(
-	component: any,
-	props: Record<string, any> = {},
-	eventListener: Record<string, any> = {}
+  component: any,
+  props: Record<string, any> = {},
+  eventListener: Record<string, any> = {}
 ): {
 	unmountInstance: () => void
 } {
-	const Host = {
-		setup() {
-			return () =>
-				h(component, {
-					...props,
-					...eventListener,
-				})
-		},
-	}
-
-	const { unmount } = mount(Host)
-	return { unmountInstance: unmount }
+  const Host = {
+    setup() {
+      return () =>
+        h(component, {
+          ...props,
+          ...eventListener,
+        })
+    },
+  }
+
+  const { unmount } = mount(Host)
+  return { unmountInstance: unmount }
 }
 
 export function flatVNodes(subTree: any) {
-	const vNodes: VNode[] = []
+  const vNodes: VNode[] = []
 
-	const flat = (subTree: any) => {
-		if (subTree?.component) {
-			flat(subTree?.component.subTree)
-			return
-		}
+  const flat = (subTree: any) => {
+    if (subTree?.component) {
+      flat(subTree?.component.subTree)
+      return
+    }
 
-		if (Array.isArray(subTree?.children)) {
-			subTree.children.forEach((child: any) => {
-				if (isVNode(child)) {
-					vNodes.push(child)
+    if (Array.isArray(subTree?.children)) {
+      subTree.children.forEach((child: any) => {
+        if (isVNode(child)) {
+          vNodes.push(child)
 
-					flat(child)
-				}
-			})
-		}
-	}
+          flat(child)
+        }
+      })
+    }
+  }
 
-	flat(subTree)
+  flat(subTree)
 
-	return vNodes
+  return vNodes
 }
 
 export function useAtChildrenCounter(key: symbol) {
-	const instances: ComponentInternalInstance[] = reactive([])
-	const parentInstance: ComponentInternalInstance = getCurrentInstance() as ComponentInternalInstance
+  const instances: ComponentInternalInstance[] = reactive([])
+  const parentInstance: ComponentInternalInstance = getCurrentInstance() as ComponentInternalInstance
 
-	const sortInstances = () => {
-		const vNodes: any[] = flatVNodes(parentInstance.subTree)
+  const sortInstances = () => {
+    const vNodes: any[] = flatVNodes(parentInstance.subTree)
 
-		instances.sort((a, b) => {
-			return vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode)
-		})
-	}
+    instances.sort((a, b) => {
+      return vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode)
+    })
+  }
 
-	const collect = (instance: ComponentInternalInstance) => {
-		instances.push(instance)
-		sortInstances()
-	}
+  const collect = (instance: ComponentInternalInstance) => {
+    instances.push(instance)
+    sortInstances()
+  }
 
-	const clear = (instance: ComponentInternalInstance) => {
-		removeItem(instances, instance)
-	}
+  const clear = (instance: ComponentInternalInstance) => {
+    removeItem(instances, instance)
+  }
 
-	provide<ChildrenCounter>(key, {
-		collect,
-		clear,
-		instances,
-	})
+  provide<ChildrenCounter>(key, {
+    collect,
+    clear,
+    instances,
+  })
 
-	const length: ComputedRef<number> = computed(() => instances.length)
+  const length: ComputedRef<number> = computed(() => instances.length)
 
-	return {
-		length,
-	}
+  return {
+    length,
+  }
 }
 
 export function useAtParentIndex(key: symbol) {
-	if (!keyInProvides(key)) {
-		return { index: null }
-	}
+  if (!keyInProvides(key)) {
+    return { index: null }
+  }
 
-	const childrenCounter: ChildrenCounter = inject<ChildrenCounter>(key) as ChildrenCounter
+  const childrenCounter: ChildrenCounter = inject<ChildrenCounter>(key) as ChildrenCounter
 
-	const { collect, clear, instances } = childrenCounter
+  const { collect, clear, instances } = childrenCounter
 
-	const instance: ComponentInternalInstance = getCurrentInstance() as ComponentInternalInstance
+  const instance: ComponentInternalInstance = getCurrentInstance() as ComponentInternalInstance
 
-	onMounted(() => {
-		nextTick().then(() => collect(instance))
-	})
-	onUnmounted(() => {
-		nextTick().then(() => clear(instance))
-	})
+  onMounted(() => {
+    nextTick().then(() => collect(instance))
+  })
+  onUnmounted(() => {
+    nextTick().then(() => clear(instance))
+  })
 
-	const index = computed(() => instances.indexOf(instance))
+  const index = computed(() => instances.indexOf(instance))
 
-	return {
-		index,
-	}
+  return {
+    index,
+  }
 }
 
 export function useChildren<P, C>(key: symbol) {
-	const childProviders: C[] = []
-
-	const collect = (childProvider: C) => {
-		childProviders.push(childProvider)
-	}
-
-	const clear = (childProvider: C) => {
-		removeItem(childProviders, childProvider)
-	}
-
-	const bindChildren = (parentProvider: P) => {
-		provide<P & BaseParentProvider<C>>(key, {
-			collect,
-			clear,
-			...parentProvider,
-		})
-	}
-
-	return {
-		childProviders,
-		bindChildren,
-	}
+  const childProviders: C[] = []
+
+  const collect = (childProvider: C) => {
+    childProviders.push(childProvider)
+  }
+
+  const clear = (childProvider: C) => {
+    removeItem(childProviders, childProvider)
+  }
+
+  const bindChildren = (parentProvider: P) => {
+    provide<P & BaseParentProvider<C>>(key, {
+      collect,
+      clear,
+      ...parentProvider,
+    })
+  }
+
+  return {
+    childProviders,
+    bindChildren,
+  }
 }
 
 export function useParent<P, C>(key: symbol) {
-	if (!keyInProvides(key)) {
-		return {
-			parentProvider: null,
-			bindParent: null,
-		}
-	}
-
-	const rawParentProvider = inject<P & BaseParentProvider<C>>(key) as P & BaseParentProvider<C>
-
-	const { collect, clear, ...parentProvider } = rawParentProvider
-
-	const bindParent = (childProvider: C) => {
-		onMounted(() => collect(childProvider))
-		onBeforeUnmount(() => clear(childProvider))
-	}
-
-	return {
-		parentProvider,
-		bindParent,
-	}
+  if (!keyInProvides(key)) {
+    return {
+      parentProvider: null,
+      bindParent: null,
+    }
+  }
+
+  const rawParentProvider = inject<P & BaseParentProvider<C>>(key) as P & BaseParentProvider<C>
+
+  const { collect, clear, ...parentProvider } = rawParentProvider
+
+  const bindParent = (childProvider: C) => {
+    onMounted(() => collect(childProvider))
+    onBeforeUnmount(() => clear(childProvider))
+  }
+
+  return {
+    parentProvider,
+    bindParent,
+  }
 }
 
 export function keyInProvides(key: symbol) {
-	const instance = getCurrentInstance() as any
+  const instance = getCurrentInstance() as any
 
-	return key in instance.provides
+  return key in instance.provides
 }
 
 export function useValidation() {
-	const errorMessage: Ref<string> = ref('')
-
-	const validate = async (rules: any, value: any): Promise<boolean> => {
-		if (!isArray(rules) || !rules.length) {
-			return true
-		}
-
-		const resArr = await Promise.all(rules.map((rule) => rule(value)))
-
-		return !resArr.some((res) => {
-			if (res !== true) {
-				errorMessage.value = res.toString()
-				return true
-			}
-
-			return false
-		})
-	}
-
-	const resetValidation = () => {
-		errorMessage.value = ''
-	}
-
-	const validateWithTrigger = async <T>(validateTrigger: T[], trigger: T, rules: any, value: any) => {
-		if (validateTrigger.includes(trigger)) {
-			;(await validate(rules, value)) && (errorMessage.value = '')
-		}
-	}
-
-	return {
-		errorMessage,
-		validate,
-		resetValidation,
-		validateWithTrigger,
-	}
+  const errorMessage: Ref<string> = ref('')
+
+  const validate = async (rules: any, value: any): Promise<boolean> => {
+    if (!isArray(rules) || !rules.length) {
+      return true
+    }
+
+    const resArr = await Promise.all(rules.map((rule) => rule(value)))
+
+    return !resArr.some((res) => {
+      if (res !== true) {
+        errorMessage.value = res.toString()
+        return true
+      }
+
+      return false
+    })
+  }
+
+  const resetValidation = () => {
+    errorMessage.value = ''
+  }
+
+  const validateWithTrigger = async <T>(validateTrigger: T[], trigger: T, rules: any, value: any) => {
+    if (validateTrigger.includes(trigger)) {
+      ;(await validate(rules, value)) && (errorMessage.value = '')
+    }
+  }
+
+  return {
+    errorMessage,
+    validate,
+    resetValidation,
+    validateWithTrigger,
+  }
 }
diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
index 9d2a381a0c8..34ed8c5e2e7 100644
--- a/packages/varlet-ui/src/utils/elements.ts
+++ b/packages/varlet-ui/src/utils/elements.ts
@@ -1,88 +1,88 @@
 export function getTop(element: HTMLElement): number {
-	const { top } = element.getBoundingClientRect()
+  const { top } = element.getBoundingClientRect()
 
-	return top + (document.body.scrollTop || document.documentElement.scrollTop)
+  return top + (document.body.scrollTop || document.documentElement.scrollTop)
 }
 
 export function getScrollTop(element: Element | Window): number {
-	const top = 'scrollTop' in element ? element.scrollTop : element.pageYOffset
+  const top = 'scrollTop' in element ? element.scrollTop : element.pageYOffset
 
-	// iOS scroll bounce cause minus scrollTop
-	return Math.max(top, 0)
+  // iOS scroll bounce cause minus scrollTop
+  return Math.max(top, 0)
 }
 
 export function getLeft(element: HTMLElement): number {
-	return element.getBoundingClientRect().left
+  return element.getBoundingClientRect().left
 }
 
 export function inViewport(element: HTMLElement): boolean {
-	const { top, bottom, left, right } = element.getBoundingClientRect()
+  const { top, bottom, left, right } = element.getBoundingClientRect()
 
-	const xInViewport = left < window.innerWidth && right > 0
-	const yInViewport = top < window.innerHeight && bottom > 0
+  const xInViewport = left < window.innerWidth && right > 0
+  const yInViewport = top < window.innerHeight && bottom > 0
 
-	return xInViewport && yInViewport
+  return xInViewport && yInViewport
 }
 
 export function getParentScroller(el: HTMLElement, direction?: 'x' | 'y'): HTMLElement | Window {
-	let element = el
+  let element = el
 
-	while (element) {
-		if (!element.parentNode) {
-			break
-		}
+  while (element) {
+    if (!element.parentNode) {
+      break
+    }
 
-		element = element.parentNode as HTMLElement
+    element = element.parentNode as HTMLElement
 
-		if (element === document.body || element === document.documentElement) {
-			break
-		}
+    if (element === document.body || element === document.documentElement) {
+      break
+    }
 
-		const scrollRE = /(scroll|auto)/
+    const scrollRE = /(scroll|auto)/
 
-		const { overflow, overflowX, overflowY } = window.getComputedStyle(element)
-		const passOverflow = scrollRE.test(overflow)
-		const passOverflowX = (direction === 'x' || direction == null) && scrollRE.test(overflowX)
-		const passOverflowY = (direction === 'y' || direction == null) && scrollRE.test(overflowY)
-		if (passOverflow || passOverflowX || passOverflowY) {
-			return element
-		}
-	}
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element)
+    const passOverflow = scrollRE.test(overflow)
+    const passOverflowX = (direction === 'x' || direction == null) && scrollRE.test(overflowX)
+    const passOverflowY = (direction === 'y' || direction == null) && scrollRE.test(overflowY)
+    if (passOverflow || passOverflowX || passOverflowY) {
+      return element
+    }
+  }
 
-	return window
+  return window
 }
 
 export function isPx(value: unknown): boolean {
-	if (typeof value === 'number') {
-		return true
-	}
-	return typeof value === 'string' && value.endsWith('px')
+  if (typeof value === 'number') {
+    return true
+  }
+  return typeof value === 'string' && value.endsWith('px')
 }
 
 export function isRem(value: unknown): boolean {
-	if (typeof value === 'number') {
-		return false
-	}
+  if (typeof value === 'number') {
+    return false
+  }
 
-	return typeof value === 'string' && value.endsWith('rem')
+  return typeof value === 'string' && value.endsWith('rem')
 }
 
 export function formatPx(value: string | number) {
-	return typeof value === 'number' ? value : +value.replace('px', '')
+  return typeof value === 'number' ? value : +value.replace('px', '')
 }
 
 export function remToPx(rem: string | number): number {
-	if (typeof rem === 'number') {
-		return rem
-	}
+  if (typeof rem === 'number') {
+    return rem
+  }
 
-	const value = +rem.replace('rem', '')
+  const value = +rem.replace('rem', '')
 
-	const rootFontSize = window.getComputedStyle(document.documentElement).fontSize
+  const rootFontSize = window.getComputedStyle(document.documentElement).fontSize
 
-	return value * parseFloat(rootFontSize)
+  return value * parseFloat(rootFontSize)
 }
 
 export function requestAnimationFrame(fn: FrameRequestCallback): number {
-	return window.requestAnimationFrame ? window.requestAnimationFrame(fn) : window.setTimeout(fn, 16)
+  return window.requestAnimationFrame ? window.requestAnimationFrame(fn) : window.setTimeout(fn, 16)
 }
diff --git a/packages/varlet-ui/src/utils/shared.ts b/packages/varlet-ui/src/utils/shared.ts
index efceec5e047..ce3b107d9f1 100644
--- a/packages/varlet-ui/src/utils/shared.ts
+++ b/packages/varlet-ui/src/utils/shared.ts
@@ -13,86 +13,86 @@ export const isString = (val: unknown): val is string => typeof val === 'string'
 export const isNumber = (val: unknown): val is number => typeof val === 'number'
 
 export const isBaseObject = (val: unknown): val is Record<string, any> =>
-	Object.prototype.toString.call(val) === '[object Object]'
+  Object.prototype.toString.call(val) === '[object Object]'
 
 export const isArray = (val: unknown): val is Array<any> => Array.isArray(val)
 
 export const isURL = (val: string) => /^(http)|(\.*\/)/.test(val)
 
 export const isEmpty = (val: unknown) =>
-	val === undefined || val === null || val === '' || (Array.isArray(val) && !val.length)
+  val === undefined || val === null || val === '' || (Array.isArray(val) && !val.length)
 
 export const removeItem = (arr: Array<unknown>, item: unknown) => {
-	if (arr.length) {
-		const index: number = arr.indexOf(item)
-		if (index > -1) {
-			return arr.splice(index, 1)
-		}
-	}
+  if (arr.length) {
+    const index: number = arr.indexOf(item)
+    if (index > -1) {
+      return arr.splice(index, 1)
+    }
+  }
 }
 
 export const throttle = (method: any, mustRunDelay = 200): (() => void) => {
-	let timer: number
-	let start: number
-	return function loop(this: unknown, ...args) {
-		const now = Date.now()
-		if (!start) {
-			start = now
-		}
-		if (timer) {
-			window.clearTimeout(timer)
-		}
-		if (now - start >= mustRunDelay) {
-			method.apply(this, args)
-			start = now
-		} else {
-			timer = window.setTimeout(() => {
-				loop.apply(this, args)
-			}, 50)
-		}
-	}
+  let timer: number
+  let start: number
+  return function loop(this: unknown, ...args) {
+    const now = Date.now()
+    if (!start) {
+      start = now
+    }
+    if (timer) {
+      window.clearTimeout(timer)
+    }
+    if (now - start >= mustRunDelay) {
+      method.apply(this, args)
+      start = now
+    } else {
+      timer = window.setTimeout(() => {
+        loop.apply(this, args)
+      }, 50)
+    }
+  }
 }
 
 export const debounce = (method: any, delay = 200) => {
-	let timer: number
-	return function (this: unknown, ...args: any[]) {
-		timer && window.clearTimeout(timer)
-		timer = window.setTimeout(() => {
-			method.apply(this, args)
-		}, delay)
-	}
+  let timer: number
+  return function (this: unknown, ...args: any[]) {
+    timer && window.clearTimeout(timer)
+    timer = window.setTimeout(() => {
+      method.apply(this, args)
+    }, delay)
+  }
 }
 
 export const checkIntersectionObserverAPI = (): boolean => 'IntersectionObserver' in window
 
 export const createInViewportObserver = <T>(handler: (el: T) => void): IntersectionObserver => {
-	return new IntersectionObserver((intersectionObserverEntries: IntersectionObserverEntry[]) => {
-		intersectionObserverEntries.forEach((intersectionObserverEntry: IntersectionObserverEntry) => {
-			if (intersectionObserverEntry.intersectionRatio > 0) {
-				handler((intersectionObserverEntry.target as unknown) as T)
-			}
-		})
-	})
+  return new IntersectionObserver((intersectionObserverEntries: IntersectionObserverEntry[]) => {
+    intersectionObserverEntries.forEach((intersectionObserverEntry: IntersectionObserverEntry) => {
+      if (intersectionObserverEntry.intersectionRatio > 0) {
+        handler((intersectionObserverEntry.target as unknown) as T)
+      }
+    })
+  })
 }
 
 export const createCache = <T>(max: number): CacheInstance<T> => {
-	const cache: T[] = []
-
-	return {
-		cache,
-		has(key: T) {
-			return cache.includes(key)
-		},
-		add(key: T) {
-			if (this.has(key)) {
-				return
-			}
-
-			this.cache.length === max && cache.shift()
-			this.cache.push(key)
-		},
-		remove(key: T) {
-			this.has(key) && removeItem(this.cache, key)
-		},
-	}
+  const cache: T[] = []
+
+  return {
+    cache,
+    has(key: T) {
+      return cache.includes(key)
+    },
+    add(key: T) {
+      if (this.has(key)) {
+        return
+      }
+
+      this.cache.length === max && cache.shift()
+      this.cache.push(key)
+    },
+    remove(key: T) {
+      this.has(key) && removeItem(this.cache, key)
+    },
+  }
 }
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index a3e22f5626d..3315602939e 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -1,204 +1,204 @@
 module.exports = {
-	namespace: 'var',
-	title: 'varlet',
-	host: '0.0.0.0',
-	port: 8080,
-	pc: {
-		title: 'Varlet 组件库示例',
-		description: 'Varlet 组件库示例',
-		logo: 'https://cn.vuejs.org/images/logo.png',
-		header: {
-			logo: 'https://cn.vuejs.org/images/logo.png',
-			search: {
-				zh_CN: '搜索文档...',
-				en_US: 'Search...',
-			},
-			i18nButton: {
-				zh_CN: 'En',
-				en_US: '中文',
-			},
-		},
-		menu: [
-			{
-				text: {
-					zh_CN: '快速开始',
-				},
-				isTitle: true,
-			},
-			{
-				text: {
-					zh_CN: 'Ripple 水波指令',
-					en_US: 'Ripple',
-				},
-				doc: 'ripple',
-			},
-			{
-				text: {
-					zh_CN: 'Skeleton 骨架屏',
-					en_US: 'Skeleton',
-				},
-				doc: 'skeleton',
-			},
-			{
-				text: {
-					zh_CN: 'Loading 加载',
-					en_US: 'Loading',
-				},
-				doc: 'loading',
-			},
-			{
-				text: {
-					zh_CN: 'Button 按钮',
-					en_US: 'Button',
-				},
-				doc: 'button',
-			},
-			{
-				text: {
-					zh_CN: 'Popup 弹出层',
-					en_US: 'Popup',
-				},
-				doc: 'popup',
-			},
-			{
-				text: {
-					zh_CN: 'Snackbar 消息条',
-					en_US: 'Snackbar',
-				},
-				doc: 'snackbar',
-			},
-			{
-				text: {
-					zh_CN: 'Progress 进度条',
-					en_US: 'Progress',
-				},
-				doc: 'progress',
-			},
-			{
-				text: {
-					zh_CN: 'PullRefresh 下拉刷新',
-					en_US: 'PullRefresh',
-				},
-				doc: 'pull-refresh',
-			},
-			{
-				text: {
-					zh_CN: 'Chip 标签',
-					en_US: 'Chip',
-				},
-				doc: 'chip',
-			},
-			{
-				text: {
-					zh_CN: 'Badge 徽标',
-					en_US: 'Badge',
-				},
-				doc: 'badge',
-			},
-			{
-				text: {
-					zh_CN: 'ExpansionPanels 拓展面板',
-					en_US: 'ExpansionPanels',
-				},
-				doc: 'Expansion-panels',
-			},
-			{
-				text: {
-					zh_CN: 'Tabs 选项卡',
-					en_US: 'Tabs',
-				},
-				doc: 'tabs',
-			},
-			{
-				text: {
-					zh_CN: 'List 无限滚动列表',
-					en_US: 'List',
-				},
-				doc: 'list',
-			},
-			{
-				text: {
-					zh_CN: 'Sticky 粘性布局',
-					en_US: 'Sticky',
-				},
-				doc: 'sticky',
-			},
-			{
-				text: {
-					zh_CN: 'Menu 菜单',
-					en_US: 'Menu',
-				},
-				doc: 'menu',
-			},
-			{
-				text: {
-					zh_CN: 'Lazy 懒加载',
-					en_US: 'Lazy',
-				},
-				doc: 'lazy',
-			},
-			{
-				text: {
-					zh_CN: 'Dialog 对话框',
-					en_US: 'Dialog',
-				},
-				doc: 'dialog',
-			},
-			{
-				text: {
-					zh_CN: 'Image 图片',
-					en_US: 'Image',
-				},
-				doc: 'image',
-			},
-			{
-				text: {
-					zh_CN: 'Icon 图标',
-					en_US: 'Icon',
-				},
-				doc: 'icon',
-			},
-			{
-				text: {
-					zh_CN: 'Rate 评分',
-					en_US: 'Rate',
-				},
-				doc: 'rate',
-			},
-			{
-				text: {
-					zh_CN: 'Input 输入框',
-					en_US: 'Input',
-				},
-				doc: 'input',
-			},
-			{
-				text: {
-					zh_CN: 'IndexBar 索引栏',
-					en_US: 'IndexBar',
-				},
-				doc: 'index-bar',
-			},
-			{
-				text: {
-					zh_CN: 'Switch 开关',
-					en_US: 'Switch',
-				},
-				doc: 'switch',
-			},
-			{
-				text: {
-					zh_CN: 'Slider 滑块',
-					en_US: 'slider',
-				},
-				doc: 'slider',
-			},
-		],
-		language: 'zh_CN',
-	},
-	mobile: {
-		title: 'Varlet 组件库示例',
-		description: 'Varlet 组件库示例',
-		logo: 'https://cn.vuejs.org/images/logo.png',
-	},
+  namespace: 'var',
+  title: 'varlet',
+  host: '0.0.0.0',
+  port: 8080,
+  pc: {
+    title: 'Varlet 组件库示例',
+    description: 'Varlet 组件库示例',
+    logo: 'https://cn.vuejs.org/images/logo.png',
+    header: {
+      logo: 'https://cn.vuejs.org/images/logo.png',
+      search: {
+        zh_CN: '搜索文档...',
+        en_US: 'Search...',
+      },
+      i18nButton: {
+        zh_CN: 'En',
+        en_US: '中文',
+      },
+    },
+    menu: [
+      {
+        text: {
+          zh_CN: '快速开始',
+        },
+        isTitle: true,
+      },
+      {
+        text: {
+          zh_CN: 'Ripple 水波指令',
+          en_US: 'Ripple',
+        },
+        doc: 'ripple',
+      },
+      {
+        text: {
+          zh_CN: 'Skeleton 骨架屏',
+          en_US: 'Skeleton',
+        },
+        doc: 'skeleton',
+      },
+      {
+        text: {
+          zh_CN: 'Loading 加载',
+          en_US: 'Loading',
+        },
+        doc: 'loading',
+      },
+      {
+        text: {
+          zh_CN: 'Button 按钮',
+          en_US: 'Button',
+        },
+        doc: 'button',
+      },
+      {
+        text: {
+          zh_CN: 'Popup 弹出层',
+          en_US: 'Popup',
+        },
+        doc: 'popup',
+      },
+      {
+        text: {
+          zh_CN: 'Snackbar 消息条',
+          en_US: 'Snackbar',
+        },
+        doc: 'snackbar',
+      },
+      {
+        text: {
+          zh_CN: 'Progress 进度条',
+          en_US: 'Progress',
+        },
+        doc: 'progress',
+      },
+      {
+        text: {
+          zh_CN: 'PullRefresh 下拉刷新',
+          en_US: 'PullRefresh',
+        },
+        doc: 'pull-refresh',
+      },
+      {
+        text: {
+          zh_CN: 'Chip 标签',
+          en_US: 'Chip',
+        },
+        doc: 'chip',
+      },
+      {
+        text: {
+          zh_CN: 'Badge 徽标',
+          en_US: 'Badge',
+        },
+        doc: 'badge',
+      },
+      {
+        text: {
+          zh_CN: 'ExpansionPanels 拓展面板',
+          en_US: 'ExpansionPanels',
+        },
+        doc: 'Expansion-panels',
+      },
+      {
+        text: {
+          zh_CN: 'Tabs 选项卡',
+          en_US: 'Tabs',
+        },
+        doc: 'tabs',
+      },
+      {
+        text: {
+          zh_CN: 'List 无限滚动列表',
+          en_US: 'List',
+        },
+        doc: 'list',
+      },
+      {
+        text: {
+          zh_CN: 'Sticky 粘性布局',
+          en_US: 'Sticky',
+        },
+        doc: 'sticky',
+      },
+      {
+        text: {
+          zh_CN: 'Menu 菜单',
+          en_US: 'Menu',
+        },
+        doc: 'menu',
+      },
+      {
+        text: {
+          zh_CN: 'Lazy 懒加载',
+          en_US: 'Lazy',
+        },
+        doc: 'lazy',
+      },
+      {
+        text: {
+          zh_CN: 'Dialog 对话框',
+          en_US: 'Dialog',
+        },
+        doc: 'dialog',
+      },
+      {
+        text: {
+          zh_CN: 'Image 图片',
+          en_US: 'Image',
+        },
+        doc: 'image',
+      },
+      {
+        text: {
+          zh_CN: 'Icon 图标',
+          en_US: 'Icon',
+        },
+        doc: 'icon',
+      },
+      {
+        text: {
+          zh_CN: 'Rate 评分',
+          en_US: 'Rate',
+        },
+        doc: 'rate',
+      },
+      {
+        text: {
+          zh_CN: 'Input 输入框',
+          en_US: 'Input',
+        },
+        doc: 'input',
+      },
+      {
+        text: {
+          zh_CN: 'IndexBar 索引栏',
+          en_US: 'IndexBar',
+        },
+        doc: 'index-bar',
+      },
+      {
+        text: {
+          zh_CN: 'Switch 开关',
+          en_US: 'Switch',
+        },
+        doc: 'switch',
+      },
+      {
+        text: {
+          zh_CN: 'Slider 滑块',
+          en_US: 'slider',
+        },
+        doc: 'slider',
+      },
+    ],
+    language: 'zh_CN',
+  },
+  mobile: {
+    title: 'Varlet 组件库示例',
+    description: 'Varlet 组件库示例',
+    logo: 'https://cn.vuejs.org/images/logo.png',
+  },
 }

From 0b9d7e48187eb7a7c49d0d6eac708f30070b5e49 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 28 Jan 2021 13:00:30 +0800
Subject: [PATCH 6/6] fix: modify name of import loading

---
 packages/varlet-ui/src/button/Button.vue | 48 +++++++-------
 packages/varlet-ui/src/switch/Switch.vue | 82 ++++++++++++------------
 2 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
index ce03ffdf66e..bd0ea888d38 100644
--- a/packages/varlet-ui/src/button/Button.vue
+++ b/packages/varlet-ui/src/button/Button.vue
@@ -1,32 +1,32 @@
 <template>
-	<button
-		v-ripple="{ disabled }"
-		class="var--box var-button"
-		:class="[
-			`var-button--${size}`,
-			block ? 'var--flex' : 'var--inline-flex',
-			disabled ? 'var-button--disabled' : null,
-			plain ? `var-button--plain-${type}` : `var-button--${type}`,
-			plain ? 'var-button--plain' : 'var-elevation--2',
-			round ? 'var-button--round' : null,
-			outline ? 'var-button--outline' : null,
-		]"
-		:style="{
-			color: textColor,
-			background: color,
-		}"
-		:disabled="disabled"
-		@click="handleClick"
-		@touchstart="handleTouchstart"
-	>
-		<var-loading :type="loadingType" :size="loadingSize" v-if="loading" />
-		<slot v-else />
-	</button>
+  <button
+    v-ripple="{ disabled }"
+    class="var--box var-button"
+    :class="[
+      `var-button--${size}`,
+      block ? 'var--flex' : 'var--inline-flex',
+      disabled ? 'var-button--disabled' : null,
+      plain ? `var-button--plain-${type}` : `var-button--${type}`,
+      plain ? 'var-button--plain' : 'var-elevation--2',
+      round ? 'var-button--round' : null,
+      outline ? 'var-button--outline' : null,
+    ]"
+    :style="{
+      color: textColor,
+      background: color,
+    }"
+    :disabled="disabled"
+    @click="handleClick"
+    @touchstart="handleTouchstart"
+  >
+    <var-loading :type="loadingType" :size="loadingSize" v-if="loading" />
+    <slot v-else />
+  </button>
 </template>
 
 <script lang="ts">
 import Ripple from '../ripple'
-import Loading from '../Loading'
+import Loading from '../loading'
 import { defineComponent } from 'vue'
 import { props } from './props'
 
diff --git a/packages/varlet-ui/src/switch/Switch.vue b/packages/varlet-ui/src/switch/Switch.vue
index bb5cc4e716d..3f767747cf3 100644
--- a/packages/varlet-ui/src/switch/Switch.vue
+++ b/packages/varlet-ui/src/switch/Switch.vue
@@ -1,34 +1,34 @@
 <template>
-	<div class="var-switch">
-		<div
-			class="var-switch-block"
-			:class="[disabled || formDisabled ? 'var-switch__disable' : null]"
-			@click="switchActive"
-			:style="styleComputed.switch"
-		>
-			<div
-				:style="styleComputed.track"
-				class="var-switch__track"
-				:class="[modelValue ? 'var-switch__track-active' : null, errorMessage ? 'var-switch__track-error' : null]"
-			></div>
-			<div
-				class="var-switch__ripple"
-				:style="styleComputed.ripple"
-				v-ripple="{
-					disabled: !ripple || disabled || loading || formDisabled,
-				}"
-			>
-				<div
-					:style="styleComputed.handle"
-					class="var-switch__handle var-elevation--2"
-					:class="[modelValue ? 'var-switch__handle-active' : null, errorMessage ? 'var-switch__handle-error' : null]"
-				>
-					<var-loading v-if="loading" :radius="size / 2 - 2" />
-				</div>
-			</div>
-		</div>
-		<var-form-details :error-message="errorMessage" />
-	</div>
+  <div class="var-switch">
+    <div
+      class="var-switch-block"
+      :class="[disabled || formDisabled ? 'var-switch__disable' : null]"
+      @click="switchActive"
+      :style="styleComputed.switch"
+    >
+      <div
+        :style="styleComputed.track"
+        class="var-switch__track"
+        :class="[modelValue ? 'var-switch__track-active' : null, errorMessage ? 'var-switch__track-error' : null]"
+      ></div>
+      <div
+        class="var-switch__ripple"
+        :style="styleComputed.ripple"
+        v-ripple="{
+          disabled: !ripple || disabled || loading || formDisabled,
+        }"
+      >
+        <div
+          :style="styleComputed.handle"
+          class="var-switch__handle var-elevation--2"
+          :class="[modelValue ? 'var-switch__handle-active' : null, errorMessage ? 'var-switch__handle-error' : null]"
+        >
+          <var-loading v-if="loading" :radius="size / 2 - 2" />
+        </div>
+      </div>
+    </div>
+    <var-form-details :error-message="errorMessage" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -38,16 +38,16 @@ import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
 import { SwitchProvider } from './provide'
 import { props } from './props'
 import FormDetails from '../form-details'
-import Loading from '../Loading'
+import Loading from '../loading'
 import Ripple from '../ripple'
 
 type StyleProps = {
-	width: string
-	height: string
-	left: string
-	borderRadius: string
-	backgroundColor: string
-	color: string
+  width: string
+  height: string
+  left: string
+  borderRadius: string
+  backgroundColor: string
+  color: string
 }
 
 export default defineComponent({
@@ -103,10 +103,10 @@ export default defineComponent({
       props.onClick?.()
       if (
         props.disabled ||
-				props.loading ||
-				props.readonly ||
-				formProvider?.disabled.value ||
-				formProvider?.readonly.value
+        props.loading ||
+        props.readonly ||
+        formProvider?.disabled.value ||
+        formProvider?.readonly.value
       )
         return
       props.onChange?.(!props.modelValue)