无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(message.success) vue封装全局弹窗警告组件this.$message.success问题 提取文章标题:Vue中封装全局弹窗警告组件 全网首发(图文详解1)

前沿技术 Micheal 4周前 (06-22) 17次浏览 已收录 扫描二维码

(message.success) vue封装全局弹窗警告组件this.$message.success问题

在Vue中封装全局弹窗警告组件,通常指的是创建一个可以在任意组件内通过this.$message.success调用的全局方法,用于展示成功提示信息。以下是详细的解决、开发和配置流程:

  • 创建全局消息组件
    首先,我们需要创建一个消息提示组件Message.vue
<template>
  <div v-if="isShow" :class="['message', type]">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      message: '',
      type: 'success', // 类型可以是 'success', 'warning', 'info', 'error'
    };
  },
  methods: {
    show(message, type = 'success') {
      this.isShow = true;
      this.message = message;
      this.type = type;
      setTimeout(() => {
        this.isShow = false;
      }, 3000); // 消息显示3秒后自动消失
    },
  },
};
</script>

<style scoped>
.message {
  /* 样式按需要定制 */
  padding: 10px;
  border-radius: 4px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
.success {
  background-color: #f0f9eb;
  color: #67c23a;
}
/* 同理为 warning, info, error 定义样式 */
</style>
  • 注册全局方法
    在Vue的主文件,通常是main.jsmain.ts中,我们可以创建一个插件来注册全局的$message方法。
import Vue from 'vue';
import MessageComponent from '@/components/Message.vue';

const Message = {};

Message.install = function (Vue) {
  const MessageConstructor = Vue.extend(MessageComponent);
  const instance = new MessageConstructor();
  instance.$mount(document.createElement('div'));
  document.body.appendChild(instance.$el);

  Vue.prototype.$message = {
    success(msg) {
      instance.show(msg, 'success');
    },
    warning(msg) {
      instance.show(msg, 'warning');
    },
    info(msg) {
      instance.show(msg, 'info');
    },
    error(msg) {
      instance.show(msg, 'error');
    },
  };
};

Vue.use(Message);
  • 使用全局弹窗
    之后,你就可以在任何一个Vue组件中使用this.$message.success来调用成功提示弹窗了。
export default {
  methods: {
    saveData() {
      // 假设保存数据的逻辑已经完成
      this.$message.success('保存成功');
    },
  },
};

这个过程提供了一个通俗易懂的方式来全局调用弹窗组件,并且可以灵活地扩展不同类型的消息提示。还可以进一步优化和定制,例如添加关闭按钮、动画效果等等。
(golang make new 区别) 浅析Golang中make和new的用法区别 Go语言中的内存分配:new vs make 全网首发(图文详解1)
(vscode nodejs) vscode安装教程以及配置node.js环境全过程 VSCode安装Node.js环境全过程 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝