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>

最终效果如下：

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

🐳 文章小尾巴

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

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

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

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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南：从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect：解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目，某个页面长时间无操作，返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04深度神经网络训练过程与常见概念05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07使用Ruby接入实时行情API教程08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）