骨架屏类型简化，波纹介绍修改

vue/src/assets/styles/index.scss

@@ -116,6 +116,7 @@ a:hover {
     font-size: 16px;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     color: #337ab7;
+    user-select: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 

vue/src/components/Skeleton/QSkeleton.sass

@@ -12,44 +12,13 @@
         content: '\00a0'
 
     &--type
-    &-text
+        &-circle
-      transform: scale(1, .5)
-
-    &-circle,
-    &-QAvatar
             height: 48px
             width: 48px
             border-radius: 50%
 
-    &-QBtn
-      width: 90px
-      height: 36px
-    &-QBadge
-      width: 70px
-      height: 16px
-    &-QChip
-      width: 90px
-      height: 28px
-      border-radius: 16px
-    &-QToolbar
-      height: 50px
-    &-QCheckbox,
-    &-QRadio
-      width: 40px
-      height: 40px
-      border-radius: 50%
-    &-QToggle
-      width: 56px
-      height: 40px
-      border-radius: 7px
-    &-QSlider,
-    &-QRange
-      height: 40px
-    &-QInput
-      height: 56px
-
     &--bordered
-    border: 1px solid rgba(0,0,0,.05)
+        border: 1px solid rgba(0, 0, 0, .05)
 
     &--square
         border-radius: 0
@@ -59,8 +28,10 @@
 
     &--anim-pulse
         animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
+
     &--anim-pulse-x
         animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
+
     &--anim-pulse-y
         animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
 
@@ -70,6 +41,7 @@
         position: relative
         overflow: hidden
         z-index: 1
+
         &:after
             content: ''
             position: absolute
@@ -80,23 +52,24 @@
             z-index: 0
 
     &--anim-blink:after
-    background: rgba(255,255,255,.7)
+        background: rgba(255, 255, 255, .7)
         animation: q-skeleton--fade 1.5s linear .5s infinite
+
     &--anim-wave:after
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent)
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent)
         animation: q-skeleton--wave 1.5s linear .5s infinite
 
     &--dark
         background: rgba(255, 255, 255, 0.05)
 
         &.q-skeleton--bordered
-      border: 1px solid rgba(255,255,255,.25)
+            border: 1px solid rgba(255, 255, 255, .25)
 
         &.q-skeleton--anim-wave:after
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent)
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
 
         &.q-skeleton--anim-blink:after
-      background: rgba(255,255,255,.2)
+            background: rgba(255, 255, 255, .2)
 
 @keyframes q-skeleton--fade
     0%

vue/src/components/Skeleton/constant.js

@@ -1,9 +1,5 @@
 export const skeletonTypes = [
-    'text', 'rect', 'circle',
+    'text', 'circle'
-    'QBtn', 'QBadge', 'QChip', 'QToolbar',
-    'QCheckbox', 'QRadio', 'QToggle',
-    'QSlider', 'QRange', 'QInput',
-    'QAvatar'
 ]
 export const skeletonAnimations = [
     'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'

vue/src/components/Skeleton/index.vue

@@ -9,7 +9,7 @@
             type: {
                 type: String,
                 validator: v => skeletonTypes.includes(v),
-                default: 'rect'
+                default: 'text'
             },
             animation: {
                 type: String,

vue/src/views/example/components/ripple.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-ripple class="tip-row">
-        点击触发波纹
+        点击触发波纹，详情请见<a href="https://quasar.dev/vue-directives/material-ripple" target="_blank">quasar</a>
     </div>
 </template>