diff --git a/components/button/button.tsx b/components/button/button.tsx
index 93dbc25..bb6327c 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -21,6 +21,7 @@ import {
isUnBorderedButtonType,
spaceChildren
} from './button-helper'
+import LoadingIcon from './loading-icon'
type Loading = number | boolean
function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@@ -183,7 +184,17 @@ const Button = defineComponent({
compactItemClassnames.value,
rootClassName
)
- const iconNode = icon && (!innerLoading.value ? icon?.() : <>L>)
+ const iconNode =
+ icon &&
+ (!innerLoading.value ? (
+ icon?.()
+ ) : (
+
+ ))
const kids =
children || children === 0
diff --git a/components/button/loading-icon.tsx b/components/button/loading-icon.tsx
new file mode 100644
index 0000000..cdca636
--- /dev/null
+++ b/components/button/loading-icon.tsx
@@ -0,0 +1,67 @@
+import { Transition, defineComponent, nextTick } from 'vue'
+import { booleanType, someType, stringType } from '@v-c/utils'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+
+export interface LoadingIconProps {
+ prefixCls: string
+ existIcon: boolean
+ loading?: boolean | object
+}
+export const loadingIconProps = {
+ prefixCls: stringType(),
+ existIcon: booleanType(),
+ loading: someType([Boolean, Object])
+}
+
+const getCollapsedWidth = (el: Element) => {
+ const node: HTMLElement = el as HTMLElement
+ if (node) {
+ node.style.width = '0'
+ node.style.opacity = '0'
+ node.style.transform = 'scale(0)'
+ }
+}
+
+const getRealWidth = (el: Element) => {
+ const node: HTMLElement = el as HTMLElement
+ nextTick(() => {
+ if (node) {
+ node.style.width = `${node.scrollWidth}px`
+ node.style.opacity = '1'
+ node.style.transform = 'scale(1)'
+ }
+ }).then()
+}
+
+const LoadingIcon = defineComponent({
+ name: 'LoadingIcon',
+ props: loadingIconProps,
+ setup(props) {
+ return () => {
+ const { loading, existIcon, prefixCls } = props
+ const visible = !!loading
+ if (existIcon) {
+ return (
+
+
+
+ )
+ }
+ return (
+
+ {visible ? (
+
+
+
+ ) : null}
+
+ )
+ }
+ }
+})
+
+export default LoadingIcon