From dd4efa8cfdca28e2ac39a82ad02d2123b34a2518 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Tue, 9 Mar 2021 11:51:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui/popup):=20=E9=87=8D=E5=86=99example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/cli, @varlet/ui
---
 .../src/compiler/compileTemplateHighlight.ts  |  12 +-
 packages/varlet-ui/src/button/button.less     |   1 +
 packages/varlet-ui/src/button/docs/en-US.md   |   2 +-
 packages/varlet-ui/src/popup/Popup.vue        |  66 ++---
 .../varlet-ui/src/popup/example/index.vue     | 256 ++++++------------
 packages/varlet-ui/src/popup/props.ts         |   8 -
 packages/varlet-ui/src/ripple/docs/en-US.md   |   3 +
 packages/varlet-ui/src/ripple/docs/zh-CN.md   |   3 +
 packages/varlet-ui/src/skeleton/docs/en-US.md |  15 +-
 packages/varlet-ui/src/skeleton/docs/zh-CN.md |   9 +
 packages/varlet-ui/src/snackbar/Snackbar.vue  |  26 +-
 packages/varlet-ui/src/utils/components.ts    |  18 ++
 packages/varlet-ui/src/utils/teleport.ts      |  17 --
 13 files changed, 178 insertions(+), 258 deletions(-)
 delete mode 100644 packages/varlet-ui/src/utils/teleport.ts

diff --git a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
index a6d0b6fa18a..442cf13c58d 100644
--- a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
+++ b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
@@ -60,7 +60,7 @@ export function compileTable(md: string, titleRe: RegExp): string {
 
 export function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string) {
   tags[componentName] = {
-    attributes: table.attributesTable.map((row: any) => row[0]),
+    attributes: table.attributesTable.map((row: any) => row[0].replace(/`/g, '')),
   }
 }
 
@@ -69,7 +69,7 @@ export function compileAttributes(table: Record<string, any>, attributes: Record
     const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${row[0]}`
     attributes[attrNamespace] = {
       type: row[2].replace(/_/g, ''),
-      description: `${row[1]} 默认值：${row[3]}`,
+      description: `${row[1]} 默认值：${row[3].replace(/`/g, '')}`,
     }
   })
 }
@@ -78,9 +78,9 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
   const { attributesTable, eventsTable, slotsTable } = table
 
   const attributes = attributesTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
-    default: row[3],
+    default: row[3].replace(/`/g, ''),
     value: {
       type: row[2].replace(/_/g, ''),
       kind: 'expression',
@@ -88,12 +88,12 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
   }))
 
   const events = eventsTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
   }))
 
   const slots = slotsTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
   }))
 
diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
index fdd9c6b8330..8db2f0402b7 100644
--- a/packages/varlet-ui/src/button/button.less
+++ b/packages/varlet-ui/src/button/button.less
@@ -33,6 +33,7 @@
   will-change: box-shadow;
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   cursor: pointer;
+  font-family: inherit;
 
   &:active {
     box-shadow: 0 3px 3px -2px @shadow-key-umbra-opacity, 0 3px 4px 0 @shadow-key-penumbra-opacity,
diff --git a/packages/varlet-ui/src/button/docs/en-US.md b/packages/varlet-ui/src/button/docs/en-US.md
index 964c88f8fa9..262394cdceb 100644
--- a/packages/varlet-ui/src/button/docs/en-US.md
+++ b/packages/varlet-ui/src/button/docs/en-US.md
@@ -156,7 +156,7 @@ export default {
 ### Theme Variables
 #### The following LESS variables can be overridden at build time to modify the theme style
 
-| 变量名 | 默认值 |
+| Variable | Default |
 | --- | --- |
 | `@button-default-color` | `#f5f5f5` |
 | `@button-primary-color` | `@color-primary` |
diff --git a/packages/varlet-ui/src/popup/Popup.vue b/packages/varlet-ui/src/popup/Popup.vue
index 285633cffc0..1bf93832a7a 100644
--- a/packages/varlet-ui/src/popup/Popup.vue
+++ b/packages/varlet-ui/src/popup/Popup.vue
@@ -1,18 +1,12 @@
 <template>
   <teleport :to="teleport" :disabled="disabled">
     <transition name="var-fade" @after-enter="onOpened" @after-leave="onClosed">
-      <div
-        class="var--box var-popup"
-        :style="{
-          'z-index': zIndex,
-        }"
-        v-show="show"
-      >
+      <div class="var--box var-popup" :style="{ zIndex: zIndex - 2 }" v-show="show">
         <div
           class="var-popup__overlay"
           :class="[overlayClass]"
           :style="{
-            'z-index': zIndex + 1,
+            zIndex: zIndex - 1,
             ...overlayStyle,
           }"
           v-if="overlay"
@@ -22,9 +16,7 @@
         <transition name="var-pop-center">
           <div
             class="var-popup__center var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'center'"
             v-show="show"
@@ -36,9 +28,7 @@
         <transition name="var-pop-up">
           <div
             class="var-popup__bottom var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'bottom'"
             v-show="show"
@@ -50,9 +40,7 @@
         <transition name="var-pop-down">
           <div
             class="var-popup__top var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'top'"
             v-show="show"
@@ -64,9 +52,7 @@
         <transition name="var-pop-right">
           <div
             class="var-popup__left var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'left'"
             v-show="show"
@@ -78,9 +64,7 @@
         <transition name="var-pop-left">
           <div
             class="var-popup__right var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'right'"
             v-show="show"
@@ -97,38 +81,40 @@
 import { defineComponent, watch } from 'vue'
 import { props } from './props'
 import { useLock } from '../context/lock'
-import { useTeleport } from '../utils/teleport'
 import { useZIndex } from '../context/zIndex'
-import { addRouteListener } from '../utils/components'
+import { addRouteListener, useTeleport } from '../utils/components'
 
 export default defineComponent({
   name: 'VarPopup',
   inheritAttrs: false,
   props,
   setup(props) {
-    // context
-    const { disabled } = useTeleport()
     const { zIndex } = useZIndex(props, 'show', 3)
-    useLock(props, 'show', 'lockScroll')
-    // events open close
-    watch(
-      () => props.show,
-      (newValue: boolean) => {
-        newValue ? props.onOpen?.() : props.onClose?.()
-      }
-    )
+    const { disabled } = useTeleport()
 
     const hidePopup = () => {
-      props.onClickOverlay?.()
-      if (props.closeOnClickOverlay === false) {
+      const { closeOnClickOverlay, onClickOverlay } = props
+
+      onClickOverlay?.()
+
+      if (!closeOnClickOverlay) {
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
-    addRouteListener(() => {
-      props.onRouteChange?.()
-    })
+    useLock(props, 'show', 'lockScroll')
+
+    watch(
+      () => props.show,
+      (newValue: boolean) => {
+        const { onOpen, onClose } = props
+        newValue ? onOpen?.() : onClose?.()
+      }
+    )
+
+    addRouteListener(() => props.onRouteChange?.())
 
     return {
       zIndex,
diff --git a/packages/varlet-ui/src/popup/example/index.vue b/packages/varlet-ui/src/popup/example/index.vue
index 49f6aaa48e4..25ed2ff41a4 100644
--- a/packages/varlet-ui/src/popup/example/index.vue
+++ b/packages/varlet-ui/src/popup/example/index.vue
@@ -1,166 +1,88 @@
 <template>
-  <div class="example">
-    <var-popup
-      v-model:show="center"
-      style="padding: 20px;"
-      class="ppp"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="bottom"
-      position="bottom"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="top"
-      position="top"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="left"
-      position="left"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="right"
-      position="right"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="overlay"
-      position="center"
-      style="padding: 20px; font-size: 20px;"
-      :overlay="false"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="overlayClass"
-      position="center"
-      style="padding: 20px;"
-      overlay-class="example__overlay"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="overlayStyle"
-      position="center"
-      style="padding: 20px;"
-      :overlay-style="{'background-color': '#000'}"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-popup
-      v-model:show="showLockScroll"
-      position="center"
-      :lock-scroll="lockScroll"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <var-button type="warning" size="large" style="margin-top: 10px; margin-right: 10px;" @click="lockScroll = !lockScroll">切换锁</var-button>
-
-      <var-button type="danger" size="large" style="margin-top: 10px" @click="center = !center">开启嵌套</var-button>
-    </var-popup>
-
-    <var-popup
-      v-model:show="closeOnClickOverlay"
-      :close-on-click-overlay="false"
-      position="center"
-      style="padding: 20px;"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-
-      <var-button type="success" size="large" style="margin-top: 10px" @click="closeOnClickOverlay = false">关闭</var-button>
-    </var-popup>
-
-    <var-popup
-      v-model:show="event"
-      style="padding: 20px;"
-      @open="() => log('open')"
-      @opened="() => log('opened')"
-      @close="() => log('close')"
-      @closed="() => log('closed')"
-    >
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-      <div>测试文字测试文字测试</div>
-    </var-popup>
-
-    <var-button type="primary" size="large" style="margin: 10px;" @click="center = true">居中弹出</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="bottom = true">下方弹出</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="top = true">上方弹出</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="left = true">左侧弹出</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="right = true">右侧弹出</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="overlay = true">取消遮罩</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="overlayClass = true">遮罩层class</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="overlayStyle = true">遮罩层style</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="showLockScroll = true">允许滚动穿透</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="closeOnClickOverlay = true">禁止点击遮罩关闭</var-button>
-    <var-button type="primary" size="large" style="margin: 10px;" @click="event = true">事件监听</var-button>
-  </div>
+  <var-button class="mt-10" block @click="center = true">居中弹出</var-button>
+  <var-popup v-model:show="center">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="bottom = true">下方弹出</var-button>
+  <var-popup position="bottom" v-model:show="bottom">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="top = true">上方弹出</var-button>
+  <var-popup position="top" v-model:show="top">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="left = true">左侧弹出</var-button>
+  <var-popup position="left" v-model:show="left">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="right = true">右侧弹出</var-button>
+  <var-popup position="right" v-model:show="right">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="overlayClass = true">遮罩层class</var-button>
+  <var-popup overlay-class="custom-overlay" v-model:show="overlayClass">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="overlayStyle = true">遮罩层style</var-button>
+  <var-popup :overlay-style="{ 'background-color': 'rgba(0, 0, 0, 0.3)' }" v-model:show="overlayStyle">
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
+
+  <var-button class="mt-10" block @click="event = true">事件监听</var-button>
+  <var-popup
+    v-model:show="event"
+    @open="() => Snackbar.info('open')"
+    @opened="() => Snackbar.success('opened')"
+    @close="() => Snackbar.warning('close')"
+    @closed="() => Snackbar.error('closed')"
+  >
+    <div class="block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-popup>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, Ref } from 'vue'
+<script>
 import Popup from '..'
 import Button from '../../button'
+import Snackbar from '../../snackbar'
+import { ref } from 'vue'
 
-export default defineComponent({
+export default {
   name: 'PopupExample',
   components: {
     [Popup.name]: Popup,
-    [Button.name]: Button
+    [Button.name]: Button,
   },
   setup() {
-    const center: Ref<boolean> = ref(false)
-    const top: Ref<boolean> = ref(false)
-    const bottom: Ref<boolean> = ref(false)
-    const left: Ref<boolean> = ref(false)
-    const right: Ref<boolean> = ref(false)
-    const overlay: Ref<boolean> = ref(false)
-    const overlayClass: Ref<boolean> = ref(false)
-    const overlayStyle: Ref<boolean> = ref(false)
-    const lockScroll: Ref<boolean> = ref(false)
-    const showLockScroll: Ref<boolean> = ref(false)
-    const closeOnClickOverlay: Ref<boolean> = ref(false)
-    const event: Ref<boolean> = ref(true)
+    const center = ref(false)
+    const top = ref(false)
+    const bottom = ref(false)
+    const left = ref(false)
+    const right = ref(false)
+    const overlayClass = ref(false)
+    const overlayStyle = ref(false)
+    const event = ref(false)
 
     return {
       center,
@@ -168,34 +90,28 @@ export default defineComponent({
       bottom,
       left,
       right,
-      overlay,
       overlayClass,
       overlayStyle,
-      lockScroll,
-      showLockScroll,
-      closeOnClickOverlay,
       event,
-      log(message: string) {
-        console.log(message)
-      }
+      Snackbar,
     }
-  }
-})
+  },
+}
 </script>
 
 <style>
-.example__overlay {
-  background-color: #001938;
+.custom-overlay {
+  background: rgba(0, 0, 0, 0.3);
 }
+</style>
 
-.ppp {
-  background: #4fc08d;
+<style scoped lang="less">
+.mt-10 {
+  margin-top: 10px;
 }
 
-
-</style>
-<style scoped lang="less">
-.example {
-  height: 2000px;
+.block {
+  padding: 20px 24px;
+  width: 70vw;
 }
 </style>
diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts
index 1dcb0cf69b1..7b9ea17675d 100644
--- a/packages/varlet-ui/src/popup/props.ts
+++ b/packages/varlet-ui/src/popup/props.ts
@@ -3,41 +3,33 @@ function positionValidator(position: string): boolean {
 }
 
 export const props = {
-  // 开关
   show: {
     type: Boolean,
     default: false,
   },
-  // 弹出位置
   position: {
     type: String,
     default: 'center',
     validator: positionValidator,
   },
-  // 是否显示遮罩层
   overlay: {
     type: Boolean,
     default: true,
   },
-  // 遮罩层class名
   overlayClass: {
     type: String,
   },
-  // 遮罩层样式
   overlayStyle: {
     type: Object,
   },
-  // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,
     default: true,
   },
-  // 是否点击遮罩层关闭
   closeOnClickOverlay: {
     type: Boolean,
     default: true,
   },
-  // teleport
   teleport: {
     default: 'body',
   },
diff --git a/packages/varlet-ui/src/ripple/docs/en-US.md b/packages/varlet-ui/src/ripple/docs/en-US.md
index 3622ddfc663..b54ae048024 100644
--- a/packages/varlet-ui/src/ripple/docs/en-US.md
+++ b/packages/varlet-ui/src/ripple/docs/en-US.md
@@ -1,5 +1,8 @@
 # Ripple Directive
 
+### Intro
+#### Causes the element to generate a ripple spread effect when clicked
+
 ### Install
 
 ```js
diff --git a/packages/varlet-ui/src/ripple/docs/zh-CN.md b/packages/varlet-ui/src/ripple/docs/zh-CN.md
index e275f1e5a16..3ea60f7d9d5 100644
--- a/packages/varlet-ui/src/ripple/docs/zh-CN.md
+++ b/packages/varlet-ui/src/ripple/docs/zh-CN.md
@@ -1,5 +1,8 @@
 # 水波指令
 
+### 介绍
+#### 使元素点击时生成一个水波扩散的效果
+
 ### 引入
 
 ```js
diff --git a/packages/varlet-ui/src/skeleton/docs/en-US.md b/packages/varlet-ui/src/skeleton/docs/en-US.md
index 41be34ca7bb..a014d2789ca 100644
--- a/packages/varlet-ui/src/skeleton/docs/en-US.md
+++ b/packages/varlet-ui/src/skeleton/docs/en-US.md
@@ -1,5 +1,8 @@
 # Skeleton
 
+### Intro
+#### Display some placeholder elements with transition effects to optimize your loading process
+
 ### Install
 
 ```js
@@ -132,9 +135,9 @@ export default {
 
 ## API
 
-### 属性
+### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 
+| Prop | Description | Type | Default | 
 | --- | --- | --- | --- | 
 | `loading` | Loading Status Set to `true` to turn on the skeleton | _boolean_ | `true` |
 | `title` | Whether to display the title | _boolean_ | `true` |
@@ -147,10 +150,16 @@ export default {
 | `rows` | The paragraph number of rows | _number \| string_ | `3` |
 | `rows-width` | The width of each line of a paragraph | _number \| string_ | `['12px', '12px', '12px']` |
 
+### Slots
+
+| Slot | Description | Params |
+| --- | --- | --- |
+| `default` | 加载成功后显示的内容 | `-` |
+
 ### Theme Variables
 #### The following LESS variables can be overridden at build time to modify the theme style
 
-| 变量名 | 默认值 |
+| Variable | Default |
 | --- | --- |
 | `@skeleton-content-padding` | `16px` |
 | `@skeleton-card-height` | `160px` |
diff --git a/packages/varlet-ui/src/skeleton/docs/zh-CN.md b/packages/varlet-ui/src/skeleton/docs/zh-CN.md
index a549ee30012..6e9d846a1da 100644
--- a/packages/varlet-ui/src/skeleton/docs/zh-CN.md
+++ b/packages/varlet-ui/src/skeleton/docs/zh-CN.md
@@ -1,5 +1,8 @@
 # 骨架屏
 
+### 介绍
+#### 显示一些带过渡效果的占位元素，优化您的加载过程。
+
 ### 引入
 
 ```js
@@ -147,6 +150,12 @@ export default {
 | `rows` | 段落行数 | _number \| string_ | `3` |
 | `rows-width` | 段落每一行的宽度 | _number \| string_ | `['12px', '12px', '12px']` |
 
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 加载成功后显示的内容 | `-` |
+
 ### 主题变量
 #### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
 | 变量名 | 默认值 |
diff --git a/packages/varlet-ui/src/snackbar/Snackbar.vue b/packages/varlet-ui/src/snackbar/Snackbar.vue
index 60b4769b4e6..264acfe064d 100644
--- a/packages/varlet-ui/src/snackbar/Snackbar.vue
+++ b/packages/varlet-ui/src/snackbar/Snackbar.vue
@@ -1,22 +1,22 @@
 <template>
-	<teleport :to="teleport" :disabled="disabled">
-		<transition name="var-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
-			<var-snackbar-core v-bind="$props" class="var--absolute var-snackbar-transition">
-				<slot>
-					{{ content }}
-				</slot>
-				<template #action>
-					<slot name="action"></slot>
-				</template>
-			</var-snackbar-core>
-		</transition>
-	</teleport>
+  <teleport :to="teleport" :disabled="disabled">
+    <transition name="var-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
+      <var-snackbar-core v-bind="$props" class="var--absolute var-snackbar-transition">
+        <slot>
+          {{ content }}
+        </slot>
+        <template #action>
+          <slot name="action"></slot>
+        </template>
+      </var-snackbar-core>
+    </transition>
+  </teleport>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import SnackbarCore from './core'
-import { useTeleport } from '../utils/teleport'
+import { useTeleport } from '../utils/components'
 import { props } from './props'
 
 export default defineComponent({
diff --git a/packages/varlet-ui/src/utils/components.ts b/packages/varlet-ui/src/utils/components.ts
index cd3df90574f..b008146eab8 100644
--- a/packages/varlet-ui/src/utils/components.ts
+++ b/packages/varlet-ui/src/utils/components.ts
@@ -17,6 +17,8 @@ import {
   nextTick,
   Ref,
   ref,
+  onActivated,
+  onDeactivated,
 } from 'vue'
 import { isArray, removeItem } from './shared'
 
@@ -297,3 +299,19 @@ export function watchPlatform(cb: (platform: string) => void) {
 
   handleHashchange()
 }
+
+export function useTeleport() {
+  const disabled: Ref<boolean> = ref(false)
+
+  onActivated(() => {
+    disabled.value = false
+  })
+
+  onDeactivated(() => {
+    disabled.value = true
+  })
+
+  return {
+    disabled,
+  }
+}
diff --git a/packages/varlet-ui/src/utils/teleport.ts b/packages/varlet-ui/src/utils/teleport.ts
deleted file mode 100644
index b6636cdfed8..00000000000
--- a/packages/varlet-ui/src/utils/teleport.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { onActivated, onDeactivated, ref, Ref } from 'vue'
-
-export function useTeleport() {
-  const disabled: Ref<boolean> = ref(false)
-
-  onActivated(() => {
-    disabled.value = false
-  })
-
-  onDeactivated(() => {
-    disabled.value = true
-  })
-
-  return {
-    disabled,
-  }
-}