import  Message  from './src/main.js';

export default Message ;

引入时: 

由于Message组件并没有 install 方法供Vue来操作的,而是直接返回的,因此按照官方文档单独引入的方法是会报错的,需要给 Message 添加 install 方法

 Message.install = function (Vue, options) {

    Vue.prototype.$message = Message;

 }

所有可以使用js方法调用的组件都是使用  Vue.prototype.$xxx = xxx 的格式注册到Vue的原型对象上的。由于在Vue2.x中,根组件是Vue构造函数的实例,而Vue在创建子组件时,会把根组件的原型方法添加到子组件上。

或者:在main.js中引入时,使用Vue.prototype.$xxx = xxx 的格式注册到Vue的原型对象上;

import MessageBox from 'elemnet-ui';

Vue.prototype.$confirm= MessageBox.confirm;

调用时:

          可以使用promise的.then和.catch,或者使用 async...await;

this.$messageBox.confirm('确定删除该项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          let res = await api.deleteReplyInfo(replyId);
          //确定时,打印出来的是字符串'confirm' ,
          //取消时,打印出来的是字符串'cancel'
           if(res !=='confirm'){
                return
             }
          }
        } catch (error) {
          console.log(error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐