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

Ant Design of Vue开发过程已经自带了提示库，只要调用过程填写对应标题参数就可以满足到开发需求。只不过这个方式在大量使用的时候就会显得不够简洁。在开始的时候可以组装一下。就比如

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:()=>{
         
    }});

不过这个方式依旧还可以继续改良一下。改成以下方式

Vue.prototype.$confirm= (content, title, option) => {
  return new Promise(resolve => {
    Modal.confirm({
      title,
      content,
      ...option,
      onOk: () => {
        resolve(true)
      },
      onCancel () {
        resolve(false)
      }
    })
  })
}

使用时候，只需要简化即可达到预期使用的目标。

this.$confirm('是否真的删除所有数据?','提示').then(res => {
      if (res) {
         // true 执行
      }
 })

使用async 和await 方式 组合，代码也可以组装一起使用。

   async onRemoveAll() {
      const res = await this.$confirm('是否真的删除所有数据?', '提示')
      if (res) {
        // true 执行
      }
  },