u

code/base-project/base-vue/packages/ao-design/src/spin/index.scss

@@ -0,0 +1,35 @@
+@use '../_styles/theme/index' as *;
+
+$spin-prefix: #{$prefix}-spin;
+
+.#{$spin-prefix}-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.#{$spin-prefix} {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: $primary-color;
+  }
+
+  &-tip {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #000;
+  }
+
+  &.rounded {
+    border-radius: inherit;
+  }
+}

code/base-project/base-vue/packages/ao-design/src/spin/index.tsx

@@ -0,0 +1,52 @@
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon'
+import './index.scss'
+
+export default defineComponent({
+  name: 'Spin',
+  props: {
+    loading: { type: Boolean, default: false },
+    opacity: { type: Number as PropType<number>, default: 0.6 },
+    rounded: { type: Boolean, default: true },
+    icon: { type: String as PropType<string>, default: 'mingcute:loading-line' },
+    size: { type: Number as PropType<number>, default: 16 },
+    rotate: { type: Number as PropType<number>, default: 360 },
+    tip: { type: String as PropType<string>, default: '' },
+  },
+  setup(props, { slots }) {
+    const prefixCls = getPrefixCls('spin')
+
+    return () => {
+      if (!props.loading && !slots.default)
+        return null
+
+      return (
+        <div class={`${prefixCls}-wrapper`}>
+          {slots.default?.()}
+          {props.loading && (
+            <div
+              class={`${prefixCls}`}
+              style={{
+                background: slots.default ? `rgba(255,255,255,${props.opacity})` : 'transparent',
+                borderRadius: props.rounded ? '4px' : 0,
+              }}
+            >
+              <div class={`${prefixCls}-content`}>
+                <Icon
+                  icon={props.icon}
+                  width={props.size}
+                  height={props.size}
+                  spin
+                  rotate={props.rotate}
+                />
+                {props.tip && <span class={`${prefixCls}-tip`}>{props.tip}</span>}
+              </div>
+            </div>
+          )}
+        </div>
+      )
+    }
+  },
+})