fix(ui/lazy,skeleton): 修改了skeleton样式取消了lazy尝试请求的请求数参数

affects: @varlet/ui
varletjs · Dec 24, 2020 · df1c8e1 · df1c8e1
1 parent 2f7baf3
commit df1c8e1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/packages/varlet-ui/src/lazy/example/index.vue b/packages/varlet-ui/src/lazy/example/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="lazy-example" @touchmove.stop>
+  <div class="lazy-example">
+    <img style="width: 100px; height: 100px" v-lazy="'https://asdasdadasd'" lazy-error="https://cn.vuejs.org/images/logo.png">
     <img style="width: 100px; height: 100px" v-lazy="'https://cn.vuejs.org/images/logo.png'">
     <img style="width: 100px; height: 100px" v-lazy="'https://cn.vuejs.org/images/logo.png'">
     <img style="width: 100px; height: 100px" v-lazy="'https://cn.vuejs.org/images/logo.png'">
@@ -34,7 +35,7 @@ export default defineComponent({
 .lazy-example {
   width: 100%;
   height: 60vh;
-  margin-top: 200vh;
+  margin-top: 40vh;
   overflow: auto;
 
   img {

diff --git a/packages/varlet-ui/src/lazy/index.ts b/packages/varlet-ui/src/lazy/index.ts
@@ -109,24 +109,6 @@ function unbindEvents() {
   listenTargets = []
 }
 
-function buildAttemptSRC(el: LazyHTMLElement): string {
-  const { src } = el._lazy
-
-  if (el._lazy.currentAttempt === 0) {
-    el._lazy.currentAttempt++
-    return src
-  }
-
-  const index: number = src.indexOf('?')
-  const url: string = index > -1 ? src.slice(0,  index) : src
-  const params: string = index > -1 ? src.slice(src.indexOf('?')) : ''
-
-  const searchParams = new URLSearchParams(params)
-  searchParams.set('lazyAttempt', String(++el._lazy.currentAttempt))
-
-  return `${url}?${searchParams.toString()}`
-}
-
 function mergeLazyOptions(el: LazyHTMLElement, binding: DirectiveBinding<string>) {
   const lazyInnerOptions: LazyOptions = {
     loading: el.getAttribute(LAZY_LOADING) ?? defaultLazyOptions.loading,
@@ -168,8 +150,10 @@ function attemptLoad(el: LazyHTMLElement) {
     return
   }
   el._lazy.attemptLock = true
+  el._lazy.currentAttempt++
+
+  const { src: attemptSRC }: Lazy = el._lazy
 
-  const attemptSRC: string = buildAttemptSRC(el)
   if (imageCache.has(attemptSRC)) {
     setSuccess(el, attemptSRC)
     el._lazy.attemptLock = false

diff --git a/packages/varlet-ui/src/skeleton/skeleton.less b/packages/varlet-ui/src/skeleton/skeleton.less
@@ -1,6 +1,8 @@
 @skeleton-content-padding: 16px;
 
 @skeleton-card-height: 160px;
+@skeleton-card-border-radius: 4px;
+@skeleton-card-margin-bottom: 16px;
 @skeleton-card-background-color: rgba(0, 0, 0, .12);
 
 @skeleton-animation-background: linear-gradient(
@@ -11,12 +13,16 @@
 );
 
 @skeleton-avatar-size: 34px;
+@skeleton-avatar-margin-right: 16px;
 @skeleton-avatar-background-color: rgba(0, 0, 0, .12);
 
 @skeleton-title-width: 50%;
+@skeleton-title-border-radius: 10px;
 @skeleton-title-background-color: rgba(0, 0, 0, .12);
 
-@skeleton-row-height: 16px;
+@skeleton-row-height: 12px;
+@skeleton-row-border-radius: 10px;
+@skeleton-row-margin-top: 10px;
 
 @keyframes var-skeleton-animation {
   from {
@@ -41,7 +47,8 @@
     width: 100%;
     height: @skeleton-card-height;
     background-color: @skeleton-card-background-color;
-    margin-bottom: 16px;
+    margin-bottom: @skeleton-card-margin-bottom;
+    border-radius: @skeleton-card-border-radius;
   }
 
   &__article {
@@ -57,7 +64,7 @@
     height: @skeleton-avatar-size;
     border-radius: 50%;
     background-color: @skeleton-avatar-background-color;
-    margin-right: 16px;
+    margin-right: @skeleton-avatar-margin-right;
   }
 
   &__section {
@@ -71,7 +78,7 @@
     width: @skeleton-title-width;
     height: @skeleton-row-height;
     background-color: @skeleton-title-background-color;
-    border-radius: 10px;
+    border-radius: @skeleton-title-border-radius;
   }
 
   &__row {
@@ -80,8 +87,8 @@
     width: 100%;
     height: @skeleton-row-height;
     background-color: @skeleton-title-background-color;
-    margin-top: 16px;
-    border-radius: 10px;
+    margin-top: @skeleton-row-margin-top;
+    border-radius: @skeleton-row-border-radius;
   }
 
   &__fullscreen {