diff --git a/packages/devui-vue/devui/alert/index.ts b/packages/devui-vue/devui/alert/index.ts
index c906b85153..b70a9e3372 100644
--- a/packages/devui-vue/devui/alert/index.ts
+++ b/packages/devui-vue/devui/alert/index.ts
@@ -1,9 +1,7 @@
import type { App } from 'vue';
import Alert from './src/alert';
-Alert.install = function (app: App) {
- app.component(Alert.name, Alert);
-};
+export * from './src/alert-types';
export { Alert };
@@ -12,6 +10,6 @@ export default {
category: '反馈',
status: '100%',
install(app: App): void {
- app.use(Alert as any);
+ app.component(Alert.name, Alert);
},
};
diff --git a/packages/devui-vue/devui/alert/src/alert-close-icon.tsx b/packages/devui-vue/devui/alert/src/alert-close-icon.tsx
deleted file mode 100644
index d8025b3a81..0000000000
--- a/packages/devui-vue/devui/alert/src/alert-close-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const AlertCloseIcon = () => (
-
-);
-export default AlertCloseIcon;
diff --git a/packages/devui-vue/devui/alert/src/alert-types.ts b/packages/devui-vue/devui/alert/src/alert-types.ts
new file mode 100644
index 0000000000..73eec4ab44
--- /dev/null
+++ b/packages/devui-vue/devui/alert/src/alert-types.ts
@@ -0,0 +1,28 @@
+import { ExtractPropTypes } from 'vue';
+
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
+
+export const alertProps = {
+ type: {
+ type: String as () => AlertType,
+ default: 'info',
+ },
+ cssClass: {
+ type: String,
+ default: '',
+ },
+ closeable: {
+ type: Boolean,
+ default: true,
+ },
+ showIcon: {
+ type: Boolean,
+ default: true,
+ },
+ dismissTime: {
+ type: Number,
+ default: 0,
+ },
+} as const;
+
+export type AlertProps = ExtractPropTypes;
diff --git a/packages/devui-vue/devui/alert/src/alert.scss b/packages/devui-vue/devui/alert/src/alert.scss
index 5b880a12e3..1b48cd5b4b 100644
--- a/packages/devui-vue/devui/alert/src/alert.scss
+++ b/packages/devui-vue/devui/alert/src/alert.scss
@@ -1,8 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/theme/font';
+@import '../../styles-var/devui-var.scss';
.devui-alert {
color: $devui-text;
diff --git a/packages/devui-vue/devui/alert/src/alert.tsx b/packages/devui-vue/devui/alert/src/alert.tsx
index 827874df05..74808fb5da 100644
--- a/packages/devui-vue/devui/alert/src/alert.tsx
+++ b/packages/devui-vue/devui/alert/src/alert.tsx
@@ -1,36 +1,14 @@
import { defineComponent, ref, Transition, onMounted } from 'vue';
-import AlertCloseIcon from './alert-close-icon';
-import AlertTypeIcon from './alert-type-icon';
+import AlertCloseIcon from './components/alert-close-icon';
+import AlertTypeIcon from './components/alert-type-icon';
+import { alertProps } from './alert-types';
import './alert.scss';
-export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
-
export default defineComponent({
name: 'DAlert',
- props: {
- type: {
- type: String as () => AlertType,
- default: 'info',
- },
- cssClass: {
- type: String,
- default: '',
- },
- closeable: {
- type: Boolean,
- default: true,
- },
- showIcon: {
- type: Boolean,
- default: true,
- },
- dismissTime: {
- type: Number,
- default: 0,
- },
- },
+ props: alertProps,
emits: ['close'],
setup(props, ctx) {
const hide = ref(false);
diff --git a/packages/devui-vue/devui/alert/src/components/alert-close-icon.tsx b/packages/devui-vue/devui/alert/src/components/alert-close-icon.tsx
new file mode 100644
index 0000000000..84daaace35
--- /dev/null
+++ b/packages/devui-vue/devui/alert/src/components/alert-close-icon.tsx
@@ -0,0 +1,21 @@
+const AlertCloseIcon = (): unknown => (
+
+);
+export default AlertCloseIcon;
diff --git a/packages/devui-vue/devui/alert/src/alert-type-icon.tsx b/packages/devui-vue/devui/alert/src/components/alert-type-icon.tsx
similarity index 77%
rename from packages/devui-vue/devui/alert/src/alert-type-icon.tsx
rename to packages/devui-vue/devui/alert/src/components/alert-type-icon.tsx
index 171ba01899..5923c152e9 100644
--- a/packages/devui-vue/devui/alert/src/alert-type-icon.tsx
+++ b/packages/devui-vue/devui/alert/src/components/alert-type-icon.tsx
@@ -1,6 +1,6 @@
-import { AlertType } from './alert';
+import type { AlertType } from '../alert-types';
-const AlertTypeIcon = (props: { type: AlertType }) => (
+const AlertTypeIcon = (props: { type: AlertType }): unknown => (