h5学习笔记：ant design 弹窗提示

最近要调研一下Ant Design，之前使用了Element组件也很多人用。
Ant Design 的 React 和Vuejs 十分强大好用。但是文档总觉得缺了一些Js方法的引导方法。找了老半天也没有教授弹个全局窗口方法。其实对我初学者来讲就是纯粹想把组件弹窗出来看看效果而已。

1.model弹窗

例如，我们在学习过程就是想弹一个模态窗口。我们在第一时间想到alert，希望this.$alert(“我弹窗了”)这样就可以显示。 可惜就是没有提供。
在找文档时候，发现ant design提供了提供Modal里面多个方法使用。

Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm

但是我们更加希望可以直接this.model方法就可以引用到了。于是可以采取下面方法来解决这个小问题。
第一步引入Modal模态对话框。然后采取全局引用方法对在main.js 入口对其使用。
Vue.prototype.$modal = Modal

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue/dist/antd'

import 'ant-design-vue/dist/antd.css'
import Modal from 'ant-design-vue/lib/modal/index' //引入模态
Vue.config.productionTip = false
Vue.use(Antd); 
Vue.prototype.$modal = Modal//这里引入提示

new Vue({
  render: h => h(App),
}).$mount('#app')

使用的时候可以按如下方式弹窗出来，得益于prototype的属性，可以采取this.$modal方法弹窗出来。

  this.$modal.confirm({title:'提示',content:'是否删除？',okText:'确定',cancelText:'取消',onOk:()=>{
         
    },onCancel:()=>{
         
    }});

一个小窗口就出来了。model有多个方法info，success，error，warning，confirm样式有所不一样。

2.message提示

ant design还可以进行另外一种提示全局提示message，

组件提供了一些静态方法，使用方式和参数如下：

message.success(content, [duration], onClose)
message.error(content, [duration], onClose)
message.info(content, [duration], onClose)
message.warn(content, [duration], onClose) // alias of warning
message.loading(content, [duration], onClose)

使用起来也是直接采取this.$message方法达到对应的目的

   this.$message.info('提示取消了');
   this.$message.error('提示取消了');
   this.$message.info('提示取消了');
   this.$message.warn('提示取消了');
   this.$message.loading('提示取消了');

3.notification提示

同理使用方法也上面也是一样。notification是通知框。
this.$notification.open(…)

notification.success(config)
notification.error(config)
notification.info(config)
notification.warning(config)
notification.warn(config)
notification.open(config)
notification.close(key: String)
notification.destroy()

我们引用文档一个代码查看一下，里面提供一个基础通知框。

    openNotification() {
      this.$notification.open({
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });
    },

弹窗后样式表现就是这样了。

4.小结

文档里面并没有提供类似js引导方法，若果有会更加友好，目前只是组件方法使用。只能先埋个坑在里面了。对于日常我们经常要使用这些反馈组件，我个人觉得在文档基础上可以专题把全局的引入方法和使用引导一下，文档会更加完善。目前只是使用2.0，目前vuejs3.0 又会改变开发体验，还需要查看一下新的变化。要不然过一段时间又忘记了。