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