Vue封装弹框组件(定义在原型上)

最新推荐文章于 2025-04-02 00:21:24 发布

原创

最新推荐文章于 2025-04-02 00:21:24 发布

· 1.2k 阅读

5 ·

版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中封装一个全局弹框组件，并将其定义在原型上，避免污染全局作用域。步骤包括创建组件文件、在main.js中引入并挂载到原型，以及组件的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue封装弹框组件(定义在原型上)

如果需要设置 全局弹框，在main.js中，Vue实例化的代码里添加。
防止污染全局作用域,可以通过在原型上定义它们使其在每个Vue页面中可被调用。

下面是组件效果图

在这里插入图片描述

1.我们在components文件夹下创建/qaconfirm/qaconfirm.vue

<template>
 <div class="mack" v-if="isShow">
  <div class="tipbox">
   <div class="title font_b">{
  {text.title.trim()}}</div>
   <div class="mesg font_s">
     <p class="icon"><span class="font_family">&#xe63f;</span></p>   <!-- icon提示图标图片 -->
     <span>{
  {text.content.trim()}}</span>
   </div>
   <div class="footb tipbtn">
     <a-button type="primary"