u

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>
+      )
+    }
+  },
+})