vue實現原理this.$message實例詳解

更新時間：2024年03月08日 09:45:03 作者：Hhua.

這篇文章主要介紹了vue實現原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

vue實現原理this.$message

components 通用組件文件夾下創(chuàng)建 esConfirm文件夾

創(chuàng)建 index.js js文件

import Vue from 'vue';
import Confirm from './index.vue'; // 引入組件
let newInstance;
const ConfirmInstance = Vue.extend(Confirm); // 創(chuàng)建構造函數
const initInstance = () => { // 執(zhí)行方法后完成掛載
	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文件夾下創(chuàng)建組件 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(錯誤)

可以在請求成功之后執(zhí)行：

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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: