canrd-outside / order-erp-front · Commits

Commit 6dd7d0f928ebb4c6d7be66f4cd134fb291fc7dc2

Authored by LiuYa
Committed by GitHub
1 parent 021c6364

feat: add spin prop for Icon (#477) 

Co-authored-by: 刘亚 <liuya54892@outlook.com>
Inline Side-by-side
Showing 2 changed files with 22 additions and 3 deletions
src/components/Icon/src/SvgIcon.vue
  View file @6dd7d0f
1 <template> 1 <template>
2 - <svg :class="[prefixCls, $attrs.class]" :style="getStyle" aria-hidden="true"> 2 + <svg
  3 + :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']"
  4 + :style="getStyle"
  5 + aria-hidden="true"
  6 + >
3 <use :xlink:href="symbolId" /> 7 <use :xlink:href="symbolId" />
4 </svg> 8 </svg>
5 </template> 9 </template>
@@ -23,6 +27,10 @@ @@ -23,6 +27,10 @@
23 type: [Number, String], 27 type: [Number, String],
24 default: 16, 28 default: 16,
25 }, 29 },
  30 + spin: {
  31 + type: Boolean,
  32 + default: false,
  33 + },
26 }, 34 },
27 setup(props) { 35 setup(props) {
28 const { prefixCls } = useDesign('svg-icon'); 36 const { prefixCls } = useDesign('svg-icon');
@@ -52,4 +60,8 @@ @@ -52,4 +60,8 @@
52 vertical-align: -0.15em; 60 vertical-align: -0.15em;
53 fill: currentColor; 61 fill: currentColor;
54 } 62 }
  63 +
  64 + .svg-icon-spin {
  65 + animation: loadingCircle 1s infinite linear;
  66 + }
55 </style> 67 </style>
src/components/Icon/src/index.vue
  View file @6dd7d0f
1 <template> 1 <template>
2 - <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" /> 2 + <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" :spin="spin" />
3 <span 3 <span
4 v-else 4 v-else
5 ref="elRef" 5 ref="elRef"
6 - :class="[$attrs.class, 'app-iconify anticon']" 6 + :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']"
7 :style="getWrapStyle" 7 :style="getWrapStyle"
8 ></span> 8 ></span>
9 </template> 9 </template>
@@ -39,6 +39,7 @@ @@ -39,6 +39,7 @@
39 type: [String, Number] as PropType<string | number>, 39 type: [String, Number] as PropType<string | number>,
40 default: 16, 40 default: 16,
41 }, 41 },
  42 + spin: propTypes.bool.def(false),
42 prefix: propTypes.string.def(''), 43 prefix: propTypes.string.def(''),
43 }, 44 },
44 setup(props) { 45 setup(props) {
@@ -99,6 +100,12 @@ @@ -99,6 +100,12 @@
99 .app-iconify { 100 .app-iconify {
100 display: inline-block; 101 display: inline-block;
101 vertical-align: middle; 102 vertical-align: middle;
  103 +
  104 + &-spin {
  105 + svg {
  106 + animation: loadingCircle 1s infinite linear;
  107 + }
  108 + }
102 } 109 }
103 110
104 span.iconify { 111 span.iconify {