frontend / zui

Download as
Browse Code »

Commit b288b114ba3cd637d0bb50f23af263f90ad1711a

Authored by 刘汉宸
1 parent 7c798701
Exists in master

[新增] 加载

Showing 12 changed files with 338 additions and 76 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @b288b11
... ... @@ -87,6 +87,12 @@ const _components = [
87 87 meta: { title: 'Popup 弹出框' },
88 88 component: () => import('@/views/docs/component/popup.md'),
89 89 },
  90 + {
  91 + path: 'loading',
  92 + name: 'loading',
  93 + meta: { title: 'Loading 加载' },
  94 + component: () => import('@/views/docs/component/loading.md'),
  95 + },
90 96 ]
91 97 },
92 98 {
... ...
examples/views/docs/component/loading.md 0 → 100644
  Diff comments   View file @b288b11
... ... @@ -0,0 +1,33 @@
  1 +# Loading 加载
  2 +
  3 +说明
  4 +
  5 +## 基础用法
  6 +
  7 +说明
  8 +
  9 +::: snippet 示例
  10 +
  11 +```html
  12 +<template>
  13 + <div>
  14 + <zui-loading></zui-loading>
  15 + <zui-loading color="red"></zui-loading>
  16 + <zui-loading color="deepskyblue" type="loading"></zui-loading>
  17 + <zui-loading>加载中...</zui-loading>
  18 + <zui-loading vertical>加载中...</zui-loading>
  19 + <zui-loading vertical size="3rem" text-size="1rem">加载中...</zui-loading>
  20 + </div>
  21 +</template>
  22 +
  23 +<script>
  24 +export default {
  25 + data() {
  26 + return {
  27 + }
  28 + },
  29 +}
  30 +</script>
  31 +```
  32 +
  33 +:::
0 34 \ No newline at end of file
... ...
packages/button/index.css
  Diff comments   View file @b288b11
... ... @@ -2,8 +2,8 @@
2 2 color: #323233;
3 3 background-color: #fff;
4 4 border: 1px solid #ebedf0;
5   - padding: 5px 15px;
6   - font-size: 14px;
  5 + padding: 0.25rem 1rem;
  6 + font-size: 0.875rem;
7 7 cursor: pointer;
8 8 transition: background-color 300ms;
9 9 display: flex;
... ... @@ -12,13 +12,13 @@
12 12 }
13 13  
14 14 .zui-button.sm {
15   - padding: 2px 4px;
16   - font-size: 10px;
  15 + padding: 0.125rem 0.25rem;
  16 + font-size: 0.625rem;
17 17 }
18 18  
19 19 .zui-button.lg {
20   - padding: 10px 20px;
21   - font-size: 18px;
  20 + padding: 0.625rem 1.25rem;
  21 + font-size: 1.125rem;
22 22 }
23 23  
24 24 .zui-button:active {
... ... @@ -49,7 +49,7 @@
49 49 }
50 50  
51 51 .zui-button.link {
52   - padding: 5px 15px;
  52 + padding: 0.25rem 1rem;
53 53 background: inherit;
54 54 border: inherit;
55 55 color: #FCD404;
... ...
packages/button/index.vue
  Diff comments   View file @b288b11
... ... @@ -30,11 +30,11 @@ export default {
30 30 },
31 31 borderRadius: function() {
32 32 if (this.round) {
33   - return '20px';
  33 + return '1.25rem';
34 34 } else if (this.square) {
35 35 return '0';
36 36 } else {
37   - return '4px';
  37 + return '0.25rem';
38 38 }
39 39 },
40 40 classRender: function() {
... ...
packages/cell/index.css
  Diff comments   View file @b288b11
... ... @@ -5,10 +5,10 @@
5 5 display: flex;
6 6 box-sizing: border-box;
7 7 width: 100%;
8   - padding: 10px 16px;
  8 + padding: 0.625rem 1rem;
9 9 overflow: hidden;
10 10 color: #323233;
11   - font-size: 14px;
  11 + font-size: 0.875rem;
12 12 background-color: #fff;
13 13 }
14 14  
... ... @@ -23,18 +23,18 @@
23 23 .zui-cell__left-icon {
24 24 display: flex;
25 25 align-items: center;
26   - margin-right: 5px;
  26 + margin-right: 0.375rem;
27 27 }
28 28  
29 29 .zui-cell__right-icon {
30 30 display: flex;
31 31 align-items: center;
32   - margin-left: 5px;
  32 + margin-left: 0.375rem;
33 33 }
34 34  
35 35 .zui-cell__left-icon, .zui-cell__right-icon {
36 36 min-width: 1em;
37   - font-size: 16px;
  37 + font-size: 1rem;
38 38 }
39 39  
40 40 .zui-cell:not(:last-child)::after {
... ... @@ -44,7 +44,7 @@
44 44 pointer-events: none;
45 45 right: 0;
46 46 bottom: 0;
47   - left: 16px;
  47 + left: 1rem;
48 48 border-bottom: 1px solid #ebedf0;
49 49 -webkit-transform: scaleY(0.5);
50 50 transform: scaleY(0.5);
... ... @@ -78,8 +78,7 @@
78 78 }
79 79  
80 80 .zui-cell__label {
81   - margin-top: 3px;
  81 + padding-top: 0.25rem;
82 82 color: #969799;
83   - font-size: 12px;
84   - line-height: 18px;
  83 + font-size: 0.75rem;
85 84 }
... ...
packages/checkbox/index.css
  Diff comments   View file @b288b11
... ... @@ -9,7 +9,7 @@
9 9 }
10 10  
11 11 .zui-checkbox .zui-checkbox__icon .zui-icon {
12   - font-size: 24px;
  12 + font-size: 1.5rem;
13 13 color: #a6a6a6;
14 14 transition: color 300ms;
15 15 cursor: pointer;
... ... @@ -20,5 +20,5 @@
20 20 }
21 21  
22 22 .zui-checkbox .zui-checkbox-label {
23   - padding-left: 10px;
  23 + padding-left: 0.625rem;
24 24 }
25 25 \ No newline at end of file
... ...
packages/icon/index.css
  Diff comments   View file @b288b11
... ... @@ -14,17 +14,17 @@
14 14 top: 0;
15 15 right: 0;
16 16 box-sizing: border-box;
17   - min-width: 16px;
18   - padding: 0 3px;
  17 + min-width: 1rem;
  18 + padding: 0 0.125rem;
19 19 color: #fff;
20 20 font-weight: 500;
21   - font-size: 12px;
  21 + font-size: 0.75rem;
22 22 font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
23   - line-height: 14px;
  23 + line-height: 0.875rem;
24 24 text-align: center;
25 25 background-color: #ee0a24;
26 26 border: 1px solid #fff;
27   - border-radius: 16px;
  27 + border-radius: 1rem;
28 28 -webkit-transform: translate(50%, -50%);
29 29 transform: translate(50%, -50%);
30 30 -webkit-transform-origin: 100%;
... ... @@ -32,7 +32,7 @@
32 32 }
33 33  
34 34 .zui-info.dot {
35   - height: 14px;
36   - width: 14px;
37   - min-width: 14px !important;
  35 + height: 0.875rem;
  36 + width: 0.875rem;
  37 + min-width: 0.875rem !important;
38 38 }
39 39 \ No newline at end of file
... ...
packages/loading/index.css 0 → 100644
  Diff comments   View file @b288b11
... ... @@ -0,0 +1,151 @@
  1 +.zui-loading {
  2 + position: relative;
  3 + color: #c8c9cc;
  4 + font-size: 0;
  5 + vertical-align: middle;
  6 +}
  7 +.zui-loading__spinner {
  8 + position: relative;
  9 + display: inline-block;
  10 + width: 30px;
  11 + max-width: 100%;
  12 + height: 30px;
  13 + max-height: 100%;
  14 + vertical-align: middle;
  15 + animation: zui-rotate 0.8s linear infinite;
  16 +}
  17 +.zui-loading__spinner--spinner {
  18 + animation-timing-function: steps(12);
  19 +}
  20 +.zui-loading__spinner--spinner i {
  21 + position: absolute;
  22 + top: 0;
  23 + left: 0;
  24 + width: 100%;
  25 + height: 100%;
  26 +}
  27 +.zui-loading__spinner--spinner i::before {
  28 + display: block;
  29 + width: 2px;
  30 + height: 25%;
  31 + margin: 0 auto;
  32 + background-color: currentColor;
  33 + border-radius: 40%;
  34 + content: ' ';
  35 +}
  36 +.zui-loading__spinner--circular {
  37 + animation-duration: 2s;
  38 +}
  39 +.zui-loading__circular {
  40 + display: block;
  41 + width: 100%;
  42 + height: 100%;
  43 +}
  44 +.zui-loading__circular circle {
  45 + animation: zui-circular 1.5s ease-in-out infinite;
  46 + stroke: currentColor;
  47 + stroke-width: 3;
  48 + stroke-linecap: round;
  49 +}
  50 +.zui-loading__text {
  51 + display: inline-block;
  52 + margin-left: 8px;
  53 + color: #969799;
  54 + font-size: 14px;
  55 + vertical-align: middle;
  56 +}
  57 +.zui-loading--vertical {
  58 + display: flex;
  59 + flex-direction: column;
  60 + align-items: center;
  61 +}
  62 +.zui-loading--vertical .zui-loading__text {
  63 + margin: 8px 0 0;
  64 +}
  65 +
  66 +@keyframes zui-circular {
  67 + 0% {
  68 + stroke-dasharray: 1, 200;
  69 + stroke-dashoffset: 0;
  70 + }
  71 +
  72 + 50% {
  73 + stroke-dasharray: 90, 150;
  74 + stroke-dashoffset: -40;
  75 + }
  76 +
  77 + 100% {
  78 + stroke-dasharray: 90, 150;
  79 + stroke-dashoffset: -120;
  80 + }
  81 +}
  82 +
  83 +@keyframes zui-rotate {
  84 + from {
  85 + transform: rotate(0deg);
  86 + }
  87 +
  88 + to {
  89 + transform: rotate(360deg);
  90 + }
  91 +}
  92 +
  93 +.zui-loading__spinner--spinner i:nth-of-type(1) {
  94 + transform: rotate(30deg);
  95 + opacity: 1;
  96 +}
  97 +
  98 +.zui-loading__spinner--spinner i:nth-of-type(2) {
  99 + transform: rotate(60deg);
  100 + opacity: 0.9375;
  101 +}
  102 +
  103 +.zui-loading__spinner--spinner i:nth-of-type(3) {
  104 + transform: rotate(90deg);
  105 + opacity: 0.875;
  106 +}
  107 +
  108 +.zui-loading__spinner--spinner i:nth-of-type(4) {
  109 + transform: rotate(120deg);
  110 + opacity: 0.8125;
  111 +}
  112 +
  113 +.zui-loading__spinner--spinner i:nth-of-type(5) {
  114 + transform: rotate(150deg);
  115 + opacity: 0.75;
  116 +}
  117 +
  118 +.zui-loading__spinner--spinner i:nth-of-type(6) {
  119 + transform: rotate(180deg);
  120 + opacity: 0.6875;
  121 +}
  122 +
  123 +.zui-loading__spinner--spinner i:nth-of-type(7) {
  124 + transform: rotate(210deg);
  125 + opacity: 0.625;
  126 +}
  127 +
  128 +.zui-loading__spinner--spinner i:nth-of-type(8) {
  129 + transform: rotate(240deg);
  130 + opacity: 0.5625;
  131 +}
  132 +
  133 +.zui-loading__spinner--spinner i:nth-of-type(9) {
  134 + transform: rotate(270deg);
  135 + opacity: 0.5;
  136 +}
  137 +
  138 +.zui-loading__spinner--spinner i:nth-of-type(10) {
  139 + transform: rotate(300deg);
  140 + opacity: 0.4375;
  141 +}
  142 +
  143 +.zui-loading__spinner--spinner i:nth-of-type(11) {
  144 + transform: rotate(330deg);
  145 + opacity: 0.375;
  146 +}
  147 +
  148 +.zui-loading__spinner--spinner i:nth-of-type(12) {
  149 + transform: rotate(360deg);
  150 + opacity: 0.3125;
  151 +}
0 152 \ No newline at end of file
... ...
packages/loading/index.vue 0 → 100644
  Diff comments   View file @b288b11
... ... @@ -0,0 +1,73 @@
  1 +<template>
  2 + <div :class="classRender">
  3 + <span :class="spanClassRender" :style="spanStyleRender">
  4 + <template v-if="showSpinner">
  5 + <i v-for="i in 12" :key="i"></i>
  6 + </template>
  7 + <svg v-else class="zui-loading__circular" viewBox="25 25 50 50" :style="spanStyleRender">
  8 + <circle cx="50" cy="50" r="20" fill="none" />
  9 + </svg>
  10 + </span>
  11 + <template v-if="$slots.default">
  12 + <span class="zui-loading__text" :style="textStyleRender">
  13 + <slot></slot>
  14 + </span>
  15 + </template>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +export default {
  21 + name: 'Loading',
  22 + props: {
  23 + color: String,
  24 + size: {
  25 + type: [Number, String],
  26 + default: '2rem'
  27 + },
  28 + vertical: Boolean,
  29 + textSize: [Number, String],
  30 + type: {
  31 + type: String,
  32 + default: 'circular',
  33 + },
  34 + },
  35 + computed: {
  36 + classRender: function() {
  37 + return {
  38 + 'zui-loading': true,
  39 + ['zui-loading--' + this.type]: this.type,
  40 + 'zui-loading--vertical': this.vertical,
  41 + };
  42 + },
  43 + spanClassRender: function() {
  44 + return {
  45 + 'zui-loading__spinner': true,
  46 + ['zui-loading__spinner--' + this.type]: this.type,
  47 + };
  48 + },
  49 + spanStyleRender: function() {
  50 + var style = { color: this.color };
  51 + if (this.size) {
  52 + var iconSize = typeof this.size == 'number' ? this.size + 'px' : this.size;
  53 + style.width = iconSize;
  54 + style.height = iconSize;
  55 + }
  56 + return style;
  57 + },
  58 + textStyleRender: function() {
  59 + var textSize = typeof this.textSize == 'number' ? this.textSize + 'px' : this.textSize;
  60 + return {
  61 + fontSize: textSize
  62 + };
  63 + },
  64 + showSpinner: function() {
  65 + return this.type == 'spinner';
  66 + }
  67 + }
  68 +};
  69 +</script>
  70 +
  71 +<style>
  72 +@import "./index.css";
  73 +</style>
0 74 \ No newline at end of file
... ...
packages/popup/index.css
  Diff comments   View file @b288b11
... ... @@ -40,10 +40,10 @@
40 40 }
41 41 .zui-popup.inner-popup .zui-popup-box {
42 42 background-color: #fff;
43   - border-radius: 4px 4px 0 0;
  43 + border-radius: 0.25rem 0.25rem 0 0;
44 44 }
45 45 .zui-popup.large-radius.inner-popup .zui-popup-box {
46   - border-radius: 20px 20px 0 0;
  46 + border-radius: 1.25rem 1.25rem 0 0;
47 47 }
48 48 .zui-popup-mask {
49 49 width: 100%;
... ... @@ -202,11 +202,11 @@
202 202 @-moz-keyframes fly-in {
203 203 0% {
204 204 opacity: 0.5;
205   - transform: scale(0.5) translate3d(0, 50px, 0);
  205 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
206 206 }
207 207 45% {
208 208 opacity: 1;
209   - transform: scale(1.05) translate3d(0, -50px, 0);
  209 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
210 210 }
211 211 100% {
212 212 transform: scale(1) translate3d(0, 0, 0);
... ... @@ -215,11 +215,11 @@
215 215 @-webkit-keyframes fly-in {
216 216 0% {
217 217 opacity: 0.5;
218   - transform: scale(0.5) translate3d(0, 50px, 0);
  218 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
219 219 }
220 220 45% {
221 221 opacity: 1;
222   - transform: scale(1.05) translate3d(0, -50px, 0);
  222 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
223 223 }
224 224 100% {
225 225 transform: scale(1) translate3d(0, 0, 0);
... ... @@ -228,11 +228,11 @@
228 228 @-o-keyframes fly-in {
229 229 0% {
230 230 opacity: 0.5;
231   - transform: scale(0.5) translate3d(0, 50px, 0);
  231 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
232 232 }
233 233 45% {
234 234 opacity: 1;
235   - transform: scale(1.05) translate3d(0, -50px, 0);
  235 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
236 236 }
237 237 100% {
238 238 transform: scale(1) translate3d(0, 0, 0);
... ... @@ -241,11 +241,11 @@
241 241 @keyframes fly-in {
242 242 0% {
243 243 opacity: 0.5;
244   - transform: scale(0.5) translate3d(0, 50px, 0);
  244 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
245 245 }
246 246 45% {
247 247 opacity: 1;
248   - transform: scale(1.05) translate3d(0, -50px, 0);
  248 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
249 249 }
250 250 100% {
251 251 transform: scale(1) translate3d(0, 0, 0);
... ...
packages/tabBar/index.css
  Diff comments   View file @b288b11
1 1 .zui-tab-bar {
2 2 position: relative;
3   - padding-left: 16px;
4   - padding-right: 16px;
  3 + padding-left: 1rem;
  4 + padding-right: 1rem;
5 5 background-color: #fff;
6 6 }
7 7 .zui-tab-bar-inner {
... ... @@ -21,10 +21,10 @@
21 21 align-items: center;
22 22 justify-content: center;
23 23 color: #aaa;
24   - font-size: 14px;
  24 + font-size: 0.875rem;
25 25 font-weight: 600;
26   - min-height: 50px;
27   - padding: 0 16px;
  26 + min-height: 3.125rem;
  27 + padding: 0 1rem;
28 28 margin: 0 auto;
29 29 box-sizing: border-box;
30 30 -webkit-user-select: none;
... ...
packages/tag/index.css
  Diff comments   View file @b288b11
1 1 .zui-tag {
2   - font-size: 14px;
  2 + font-size: 0.875rem;
3 3 text-align: center;
4 4 display: inline-block;
5 5 -webkit-user-select: none;
... ... @@ -11,30 +11,30 @@
11 11 }
12 12 .zui-tag .shape-dot {
13 13 border-radius: 50%;
14   - height: 16px;
15   - width: 16px;
  14 + height: 1rem;
  15 + width: 1rem;
16 16 }
17 17 .zui-tag .shape-dot.size-tiny {
18   - height: 8px;
19   - width: 8px;
  18 + height: 0.5rem;
  19 + width: 0.5rem;
20 20 }
21 21 .zui-tag .shape-square {
22   - padding: 0 6px;
  22 + padding: 0 0.375rem;
23 23 border-radius: 50%;
24 24 }
25 25 .zui-tag .shape-square {
26   - padding: 0 6px;
  26 + padding: 0 0.375rem;
27 27 border-radius: 0;
28 28 }
29 29 .zui-tag .shape-fillet {
30   - padding: 1px 4px;
31   - border-radius: 1px;
  30 + padding: 0.0625rem 0.25rem;
  31 + border-radius: 0.0625rem;
32 32 }
33 33 .zui-tag .shape-quarter {
34 34 position: relative;
35 35 display: flex;
36   - width: 28px;
37   - height: 28px;
  36 + width: 1.75rem;
  37 + height: 1.75rem;
38 38 background: transparent;
39 39 overflow: hidden;
40 40 }
... ... @@ -58,34 +58,34 @@
58 58 }
59 59 .zui-tag .shape-quarter .quarter-wrap {
60 60 display: inline-block;
61   - padding: 8px 6px 5px 13px;
  61 + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
62 62 }
63 63 .zui-tag .shape-quarter .quarter-wrap-hidden {
64 64 visibility: hidden;
65 65 display: inline-block;
66   - padding: 8px 6px 5px 13px;
  66 + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
67 67 }
68 68 .zui-tag .shape-quarter.size-small {
69   - width: 20px;
70   - height: 20px;
  69 + width: 1.25rem;
  70 + height: 1.25rem;
71 71 }
72 72 .zui-tag .shape-quarter.size-tiny {
73   - width: 12px;
74   - height: 12px;
  73 + width: 0.75rem;
  74 + height: 0.75rem;
75 75 }
76 76 .zui-tag .shape-coupon {
77 77 position: relative;
78   - padding: 0 5px;
  78 + padding: 0 0.3125rem;
79 79 background: transparent !important;
80 80 }
81 81 .zui-tag .shape-coupon .coupon-container {
82   - padding: 1px 0;
  82 + padding: 0.0625rem 0;
83 83 }
84 84 .zui-tag .shape-coupon .left-coupon,
85 85 .zui-tag .shape-coupon .right-coupon {
86 86 position: absolute;
87 87 top: 0;
88   - width: 5px;
  88 + width: 0.3125rem;
89 89 height: 100%;
90 90 }
91 91 .zui-tag .shape-coupon .left-coupon {
... ... @@ -95,42 +95,42 @@
95 95 right: 0;
96 96 }
97 97 .zui-tag .shape-coupon.size-small {
98   - padding: 0 4px;
  98 + padding: 0 0.25rem;
99 99 }
100 100 .zui-tag .shape-coupon.size-small .left-coupon,
101 101 .zui-tag .shape-coupon.size-small .right-coupon {
102   - width: 4px;
  102 + width: 0.25rem;
103 103 }
104 104 .zui-tag .shape-coupon.size-tiny {
105   - padding: 0 2.5px;
  105 + padding: 0 0.15625rem;
106 106 }
107 107 .zui-tag .shape-coupon.size-tiny .left-coupon,
108 108 .zui-tag .shape-coupon.size-tiny .right-coupon {
109   - width: 2.5px;
  109 + width: 0.15625rem;
110 110 }
111 111 .zui-tag .shape-bubble {
112   - width: 25px;
113   - padding: 3px 0;
  112 + width: 1.5625rem;
  113 + padding: 0.1875rem 0;
114 114 border-radius: 50%;
115 115 border-bottom-left-radius: 0;
116 116 box-sizing: border-box;
117 117 }
118 118 .zui-tag .shape-bubble.size-small {
119   - width: 19px;
120   - padding: 1.5px 0;
  119 + width: 1.1875rem;
  120 + padding: 0.09375rem 0;
121 121 }
122 122 .zui-tag .shape-bubble.size-tiny {
123   - width: 12px;
124   - padding: 1px 0;
  123 + width: 0.75rem;
  124 + padding: 0.0625rem 0;
125 125 }
126 126 .zui-tag .size-large {
127   - font-size: 13px;
  127 + font-size: 0.8125rem;
128 128 }
129 129 .zui-tag .size-small {
130   - font-size: 10px;
  130 + font-size: 0.625rem;
131 131 }
132 132 .zui-tag .size-tiny {
133   - font-size: 6px;
  133 + font-size: 0.375rem;
134 134 }
135 135 .zui-tag .type-fill {
136 136 color: #fff;
... ...