vue2中自定义MessageBox弹框、弹出复杂内容

程序员张张2025-01-13 19:07

🐳 引言

关于 MessageBox 弹框，Element UI 官方的介绍是：从场景上来说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。不过，MessageBox是可以自定义配置内容的，因此我想尝试使用 MessageBox 来展示复杂的内容，实现一个公共的全局弹框功能。

🐳 关于$createElement

$createElement 是 Vue 实例上的一个方法，用于创建虚拟节点 VNode。$createElement 的功能非常强大，它为开发者提供了极大的灵活性。这里我们主要简要介绍一些常用的使用方法，了解其核心功能和应用场景。

1. 创建dom元素

首先，通过 $createElement 实现自定义配置内容，我希望将一个 list 数组中的内容渲染到 MessageBox 中。代码如下：

msgBox.vue 复制代码 
<script>
export default {
  name: "msgBox",
  data() {
    return {
      list: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const h = this.$createElement;
      this.$msgbox({
        title: "自定义弹框",
        showCancelButton: true,
        message: h("div", null, [
          this.list.map(item => {
            return h("div", { class: "msg-item" }, [
              h("div", null, item.name),
              h("div", null, item.date),
              h("div", null, item.address)
            ]);
          })
        ])
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.msg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 10px;
}
</style>
2. 加载Element UI组件

上面我们仅演示了如何通过$createElement加载简单的dom元素，但现在我希望进一步利用$createElement来加载Element-UI中的组件。代码如下：

msgBox.vue 复制代码 
<script>
import { Collapse } from "element-ui";
import { CollapseItem } from "element-ui";
export default {
  name: "msgBox",
  components: {
    Collapse,
    CollapseItem
  },
  data() {
    return {
      activeNames: ["1"],
      list: [
        {
          id: "1",
          title: "一致性 Consistency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 1"
        },
        {
          id: "2",
          title: "反馈 Feedback",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 2"
        },
        {
          id: "3",
          title: "效率 Efficiency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 3"
        },
        {
          id: "4",
          title: "可控 Controllability",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 4"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const h = this.$createElement;
      this.$msgbox({
        title: "自定义弹框",
        showCancelButton: true,
        message: h("div", null, [
          h(
            Collapse,
            {
              props: { value: this.activeNames },
              on: {
                change: this.handleChange
              }
            },
            [
              this.list.map(item => {
                return h(
                  CollapseItem,
                  {
                    props: {
                      name: item.id,
                      title: item.title
                    }
                  },
                  [h("div", null, [h("p", null, item.content)])]
                );
              })
            ]
          )
        ])
      });
    },
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>
3. 加载自定义组件

如果采用上述方法来加载Element-UI中的组件显得过于繁琐，这并非我所期望的效果。既然$createElement能够用于加载组件，我们便可以在公共组件中编写代码，进而通过$createElement来加载这些自定义的公共组件。

创建一个公共组件，代码如下：

demo.vue 复制代码 
<template>
  <div class="content">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <div>{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
    <div>
      <div class="msg-item" v-for="item in list" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.title }}</div>
        <div>{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  props: {
    initData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      activeNames: ["1"],
      list: [
        {
          id: "1",
          title: "一致性 Consistency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 1"
        },
        {
          id: "2",
          title: "反馈 Feedback",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 2"
        },
        {
          id: "3",
          title: "效率 Efficiency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 3"
        },
        {
          id: "4",
          title: "可控 Controllability",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 4"
        }
      ]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #fff;
  .msg-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 10px;
  }
}
</style>

在MessageBox中使用公共组件，代码如下：

msgBox.vue 复制代码 
<script>
import Demo from "./demo.vue";
export default {
  name: "msgBox",
  components: {
    Demo
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const h = this.$createElement;
      this.$msgbox({
        title: "自定义弹框",
        showCancelButton: true,
        message: h(Demo)
      });
    }
  }
};
</script>

🐳 封装自定义MessageBox

为了提升代码的复用性和开发效率，我计划将之前通过 $createElement 加载自定义公共组件的逻辑进行封装，将其转化为一个全局公共方法。通过这种方式，我们可以实现一个通用的全局弹框功能，从而在项目的任何地方轻松调用，避免重复代码，同时增强代码的可维护性和一致性。代码如下：

  1. 挂载全局方法，代码如下：
main.js 复制代码 
Vue.prototype.msgBox = function(props) {
  const h = this.$createElement
  this.$msgbox({
    title: props.title || '提示',
    showCancelButton: props.showBtns || false,
    showConfirmButton: props.showBtns || false,
    closeOnClickModal: false,
    closeOnPressEscape: false,
    customClass: 'msg-container',
    message: h('div', { style: { height: props.height || 'auto', width: props.width || 'auto', overflow: 'auto' } }, [
      h(props.component, { props: { initData: { ...props.initData } } }) // 调用组件传入的值
    ])
  })
}
  1. 修改公共组件，代码如下：
demo.vue 复制代码 
<template>
  <div class="content">
    <el-collapse v-model="initData.activeNames" @change="handleChange">
      <el-collapse-item
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <div>{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
    <div>
      <div class="msg-item" v-for="item in list" :key="item.id">
        <div>{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  props: {
    initData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: [
        {
          id: "1",
          title: "一致性 Consistency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 1"
        },
        {
          id: "2",
          title: "反馈 Feedback",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 2"
        },
        {
          id: "3",
          title: "效率 Efficiency",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 3"
        },
        {
          id: "4",
          title: "可控 Controllability",
          content:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 4"
        }
      ]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background: #fff;
  .msg-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 10px;
  }
}
</style>
  1. 在MessageBox中使用封装的全局函数，代码如下：
msgBox.vue 复制代码 
<template> </template>
<script>
import Demo from "./demo.vue";
export default {
  name: "msgBox",
  components: {
    Demo
  },
  data() {
    return {
      activeNames: ["1"]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.msgBox({
        title: "自定义弹框",
        width: "600px",
        height: "400px",
        component: Demo,
        initData: {
          activeNames: this.activeNames
        }
      });
    }
  }
};
</script>
<style>
.msg-container {
  width: auto; /* 将最外层的宽度限制去掉 */
}
</style>

最终效果如下：

以上就是本次分享的全部内容。目前这里还只是一个初步的版本，并非最终的完整形态。我将在未来的分享中继续完善和补充更多细节，敬请期待！

🐳 文章小尾巴

感谢你看到最后，最后再说两点~

①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。

②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是程序员张张，一个热爱编程也爱生活的程序员

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

相关推荐
风无雨7 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl11 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口：getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰，体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应！现代 Web 应用性能优化：从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend：cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失？六招教你轻松找回来！
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的，所以我准备给AI出一个设计规范
前端·javascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04深度神经网络训练过程与常见概念05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Ubuntu环境下统计进程资源利用率08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10【无标题】