fix: fix wrong z-index of snackbar and prevent touchmove event of pul…

…l-refresh example
varletjs · Apr 16, 2021 · 3be0b22 · 3be0b22
1 parent 074ef38
commit 3be0b22
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 18 deletions.
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -24,11 +24,9 @@
             </div>
           </transition>
         </div>
-        <div class="varlet-site-header__nav-link">
-          <a target="_blank" href="https://github.com/haoziqaq/varlet" class="varlet-site-header__link">
-            <var-icon name="github" color="#666" :size="28"></var-icon>
-          </a>
-        </div>
+        <a target="_blank" href="https://github.com/haoziqaq/varlet" class="varlet-site-header__nav-link">
+          <var-icon name="github" color="#666" :size="28" />
+        </a>
       </div>
     </div>
     <div class="varlet-site-content">
@@ -375,7 +373,7 @@ iframe {
       user-select: none;
       position: relative;
       z-index: 2;
-      box-shadow: 0 4px 4px #ebedf0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
       &__logo {
         display: flex;
@@ -418,12 +416,14 @@ iframe {
 
         &-link {
           border-radius: 50%;
-          width: 40px;
-          height: 40px;
+          width: 48px;
+          height: 48px;
           display: flex;
           justify-content: center;
           align-items: center;
           transition: background-color 0.3s;
+          cursor: pointer;
+          text-decoration: none;
 
           a {
             text-decoration: none;

diff --git a/packages/varlet-ui/src/pull-refresh/docs/en-US.md b/packages/varlet-ui/src/pull-refresh/docs/en-US.md
@@ -19,7 +19,7 @@ The refresh event will be Emitted when pull refresh, you should set `v-model` to
 indicates that loading is under way, and setting `v-model` to `false` after completion indicates that loading is over.
 
 ```html
-<var-pull-refresh v-model='isRefresh' @refresh='refresh'>
+<var-pull-refresh v-model="isRefresh" @refresh="refresh">
   <var-cell
     v-for="(item, index) in data"
     :key="index"
@@ -84,8 +84,8 @@ export default {
 | ----- | -------------- | -------- | 
 | `default` | Default slot | `-` |
 
-
 ### Theme Variables
+
 #### The following LESS variables can be overridden at build time to modify the theme style
 
 | Variable | Default |

diff --git a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md
@@ -18,10 +18,10 @@ createApp().use(PullRefresh)
 下拉到刷新位置时松开会触发`refresh`事件， 在事件开始时将`v-model`设置为`true`表示正在加载，完成后将`v-model`设置为`false`表示加载结束。
 
 ```html
-<var-pull-refresh v-model='isRefresh' @refresh='refresh'>
-  <var-cell 
-    v-for="(item, index) in data" 
-    :key="index" 
+<var-pull-refresh v-model="isRefresh" @refresh="refresh">
+  <var-cell
+    v-for="(item, index) in data"
+    :key="index"
     border
   >
     {{ item + ' ' + (index + 1) }}
@@ -84,6 +84,7 @@ export default {
 | `default` | 默认插槽 | `-` |
 
 ### 主题变量
+
 #### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
 
 | 变量名 | 默认值 |

diff --git a/packages/varlet-ui/src/pull-refresh/example/index.vue b/packages/varlet-ui/src/pull-refresh/example/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref, onBeforeUnmount } from 'vue'
 import PullRefresh from '..'
 import Cell from '../../cell'
 
@@ -29,6 +29,18 @@ export default defineComponent({
       }, 2000)
     }
 
+    const prevent = (event) => {
+      event.preventDefault()
+    }
+
+    onMounted(() => {
+      document.body.addEventListener('touchmove', prevent, { passive: false })
+    })
+
+    onBeforeUnmount(() => {
+      document.body.removeEventListener('touchmove', prevent)
+    })
+
     return {
       refresh,
       isRefresh,

diff --git a/packages/varlet-ui/src/snackbar/Snackbar.vue b/packages/varlet-ui/src/snackbar/Snackbar.vue
@@ -1,7 +1,7 @@
 <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">
+      <var-snackbar-core v-bind="$props" class="var-snackbar-transition">
         <slot>
           {{ content }}
         </slot>

diff --git a/packages/varlet-ui/src/snackbar/core.vue b/packages/varlet-ui/src/snackbar/core.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none' }" v-show="show">
+  <div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none', zIndex }" v-show="show">
     <div :class="snackbarClass" :style="{ zIndex }">
       <div class="var-snackbar__content" :class="[contentClass]">
         <slot>{{ content }}</slot>

diff --git a/packages/varlet-ui/src/snackbar/snackbar.less b/packages/varlet-ui/src/snackbar/snackbar.less
@@ -38,7 +38,6 @@
     right: 0;
     bottom: 0;
     transition: all 0.15s @cubic-bezier;
-    z-index: 10;
 
     &__wrapper {
       width: @snackbar-width;