feat: update alert

components/alert/index.jsx

@@ -1,4 +1,4 @@
-import { Transition } from 'vue';
+import { Transition, inject, cloneVNode } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -12,10 +12,8 @@ import classNames from 'classnames';
 import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
-import { getComponentFromProp, isValidElement } from '../_util/props-util';
+import { getComponent, isValidElement } from '../_util/props-util';
-import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
 
 function noop() {}
 
@@ -61,8 +59,10 @@ const Alert = {
   name: 'AAlert',
   props: AlertProps,
   mixins: [BaseMixin],
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     return {
@@ -99,11 +99,10 @@ const Alert = {
     const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
     let { closable, type, showIcon } = this;
-    const { closeText, description, message, icon } = this.$props;
+    const closeText = getComponent(this, 'closeText');
-    // const closeText = getComponentFromProp(this, 'closeText');
+    const description = getComponent(this, 'description');
-    // const description = getComponentFromProp(this, 'description');
+    const message = getComponent(this, 'message');
-    // const message = getComponentFromProp(this, 'message');
+    const icon = getComponent(this, 'icon');
-    // const icon = getComponentFromProp(this, 'icon');
     // banner模式默认有 Icon
     showIcon = banner && showIcon === undefined ? true : showIcon;
     // banner模式默认为警告
@@ -133,7 +132,7 @@ const Alert = {
 
     const iconNode = (icon &&
       (isValidElement(icon) ? (
-        cloneElement(icon, {
+        cloneVNode(icon, {
           class: `${prefixCls}-icon`,
         })
       ) : (
@@ -159,9 +158,8 @@ const Alert = {
 };
 
 /* istanbul ignore next */
-Alert.install = function(Vue) {
+Alert.install = function(app) {
-  Vue.use(Base);
+  app.component(Alert.name, Alert);
-  Vue.component(Alert.name, Alert);
 };
 
 export default Alert;

examples/App.vue

@@ -1,26 +1,15 @@
 <template>
   <div>
-    <a-affix :offset-top="top">
+    <a-alert message="Warning text" banner />
-      <a-button type="primary" @click="top += 10">
-        Affix top
-      </a-button>
-    </a-affix>
     <br />
-    <a-affix :offset-bottom="bottom">
+    <a-alert
-      <a-button type="primary" @click="bottom += 10">
+      message="Very long warning text warning text text text text text text text"
-        Affix bottom
+      banner
-      </a-button>
+      closable
-    </a-affix>
+    />
+    <br />
+    <a-alert :show-icon="false" message="Warning text without icon" banner />
+    <br />
+    <a-alert type="error" message="Error text" banner />
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      top: 10,
-      bottom: 10,
-    };
-  },
-};
-</script>

examples/index.js

@@ -4,6 +4,7 @@ import App from './App.vue';
 import Button from 'ant-design-vue/button';
 import Drawer from 'ant-design-vue/drawer';
 import Affix from 'ant-design-vue/affix';
+import Alert from 'ant-design-vue/alert';
 import ConfigProvider from 'ant-design-vue/config-provider';
 import 'ant-design-vue/style.js';
 
@@ -12,4 +13,5 @@ createApp(App)
   .use(ConfigProvider)
   .use(Drawer)
   .use(Affix)
+  .use(Alert)
   .mount('#app');