vue实现原理this.$message实例详解

 更新时间:2024年03月08日 09:45:03   作者:Hhua.  
这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

vue实现原理this.$message

components 通用组件文件夹下 创建 esConfirm文件夹

创建 index.js js文件

import Vue from 'vue';
import Confirm from './index.vue'; // 引入组件
let newInstance;
const ConfirmInstance = Vue.extend(Confirm); // 创建构造函数
const initInstance = () => { // 执行方法后完成挂载
	newInstance = new ConfirmInstance(); // 实例化
	document.body.appendChild(newInstance.$mount().$el);
// 实例化后手动挂载,得到$el真实Dom,将其添加到body最后
}
export default options => {
//导出一个方法,接受配置参数
if (!newInstance) {
	initInstance(); // 挂载
}
Object.assign(newInstance, options);
// 实例化后newInstance就是一个对象了,所以data内的数据会
// 挂载到this下,传入一个对象与之合并
return newInstance.show(vm => { // 显示弹窗
	newInstance = null; // 将实例对象清空
})
}

esConfirm文件夹下创建组件 index.vue

<template>
  <!-- 二次确认弹窗 -->
  <el-dialog width="440px" class="delete-confirm" :visible.sync="confirmDialigShow" :show-close="false"
    :close-on-click-modal="false">
    <div class="top">
      <img class="danger" :src="require('./danger.png')">
      <div class="title">{{ title }}</div>
    </div>
    <div class="bottom">{{ content }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="showCancelButton" size="small" @click="cancel">{{ cancelButtonText || '取消' }}</el-button>
      <el-button size="small" type="primary" @click="confirm">{{ confirmButtonText || '确定' }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      title: '提示',
      content: '该数据删除将无法恢复,是否确认删除?',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      showCancelButton: true,
      confirmDialigShow: true
    }
  },
  methods: {
    show(cb) {
      this.showFlag = true
      typeof cb === "function" && cb.call(this, this)
      return new Promise((resolve, reject) => {
        this.reject = reject
        this.resolve = resolve
      })
    },
    cancel() {
      this.reject("cancel")
      this.hide()
    },
    confirm() {
      this.resolve("confirm")
      this.hide()
    },
    hide() {
      this.showFlag = false
      document.body.removeChild(this.$el)
      this.$destroy()
    }
  }
}
</script>
<style lang='scss' scoped>
.delete-confirm {
  // width: 440px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .danger {
      width: 30px;
      height: 24px;
      margin-right: 12px;
    }
    .title {
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
  }
  .bottom {
    font-size: 14px;
    font-weight: 400;
    color: #324457;
    line-height: 22px;
    margin-top: 20px;
  }
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep {
    .el-dialog {
      margin-top: 20vh !important;
    }
    .el-dialog__body {
      padding: 24px;
    }
    .el-dialog__footer {
      border: none;
      line-height: 0;
      padding: 8px 24px 24px 0 !important;
    }
  }
}
</style>

在main.js 注册组件

import esConfirm from '@/components/esConfirm/index.js'
Vue.prototype.$esConfirm = esConfirm

调用

this.$esConfirm({
title: '是否删除?'
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})

Vue中的信息提示this.$message方法的使用

代码:

                    this.$message({
                        message:'保存成功了,我是message',
                        type: 'success'
                    })

效果:

在这里插入图片描述

type的其他参数:
success(成功) 、warning(警告)、info(消息)、error(错误)

可以在请求成功之后执行:

axios.post("http://localhost:3312/user/save",this.form).then((resp)=>{
                let data = resp.data
                if(data.success){
                   ......
                    this.$message({
                        message:'保存成功了,我是message',
                        type: 'success'
                    })
                }
         })

到此这篇关于vue实现原理this.$message的文章就介绍到这了,更多相关vue this.$message内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue+Springboot实现接口签名的示例代码

    Vue+Springboot实现接口签名的示例代码

    这篇文章主要介绍了Vue+Springboot实现接口签名的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vue实现图书管理小案例

    Vue实现图书管理小案例

    这篇文章主要为大家详细介绍了Vue实现图书管理小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    这篇文章主要介绍了解决elementui中NavMenu 导航菜单高亮问题(解决多种情况),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解.vue文件解析的实现

    详解.vue文件解析的实现

    这篇文章主要介绍了详解.vue文件解析的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue axios封装httpjs,接口公用配置拦截操作

    vue axios封装httpjs,接口公用配置拦截操作

    这篇文章主要介绍了vue axios封装httpjs,接口公用配置拦截操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Ant Design Upload 文件上传功能的实现

    Ant Design Upload 文件上传功能的实现

    这篇文章主要介绍了Ant Design Upload 文件上传功能的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue之Watcher源码解析(2)

    Vue之Watcher源码解析(2)

    这篇文章主要为大家详细介绍了Vue源码之Watcher的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue实现防抖的实例代码

    vue实现防抖的实例代码

    这篇文章主要给大家介绍了关于vue实现防抖的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue实现封装一个切片上传组件

    Vue实现封装一个切片上传组件

    平时业务开发中用el-upload能满足大部分场景,但是对于一些大文件的上传时会比较慢,所以自己基于el-upload封装了一个切片上传组件,希望对大家有所帮助
    2023-03-03
  • Vue 中使用 WebWorker的示例代码

    Vue 中使用 WebWorker的示例代码

    这篇文章主要介绍了Vue中使用WebWorker的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论