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

最新推荐文章于 2024-07-01 08:00:00 发布
最新推荐文章于 2024-07-01 08:00:00 发布
阅读量1k 收藏 5
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45237990/article/details/123280675
版权
本文介绍了如何在Vue项目中封装一个全局弹框组件，并将其定义在原型上，避免污染全局作用域。步骤包括创建组件文件、在main.js中引入并挂载到原型，以及组件的使用方法。
摘要由CSDN通过智能技术生成

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"
最低0.47元/天 解锁文章
香猪月
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue+elementUI MessageBox 弹框自定义弹窗样式
weixin_43829905的博客
03-21 2673
vue+elementUI MessageBox 弹框自定义弹窗样式vue+elementUI MessageBox 弹框自定义弹窗样式 vue+elementUI MessageBox 弹框自定义弹窗样式 效果： 代码： beforeRouteLeave(to, from, next) { // 监听路由离开时弹出弹窗是否需要保存资料的功能 const h = this.$createElement; setTimeout(() => { // 这里加个定时器可以避
vue封装可复用组件confirm,并绑定在vue原型上的示例
10-16
今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 自定义模态对话框弹窗
mossbaoo的博客
09-10 2098
模态对话框弹窗效果： 父组件（应用页面）主要代码： <template> <view class="app-container"> <modal-dialog showText="确定要取消收藏吗？" :isShowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog> </view> .
使用 Vue 实现包含单选框的弹窗功能（附Demo）
最新发布
码农研究僧的博客
07-01 1584
不用表单的样式，主要在弹窗中实现单选框的选项，以Demo为主，供Vue2以及Vue3的Demo思路
vue extend的使用以及自定义弹窗实例
weixin_45558926的博客
12-29 1246
白话Vue.extend（自定义弹窗） ​ 在使用vue开发中，大部分情况下我们都使用组件的方式进行渲染，但是在某些情况下，组件渲染确实带来很多问题（主要是麻烦），比如说，我需要一个确认弹窗，那么，一般情况下，大概会有下面一个流程：引入弹窗组件 =》声明部分弹窗需要的变量 =》 点击弹窗触发按钮 =》临时存储弹窗可能需要的部分变量参数 =》 弹窗回掉方法； ​ 如果一个文件中包含多个弹窗信息，那么其中的重复工作量可以想象，确实比较麻烦，那么问题来，可不可以把这个问题简单化呢，嗯，，，我想到了一个偷懒的方法，
vue3 antd项目实战——Modal弹窗自定义遮罩 （利用maskStyle属性自定义遮罩样式）
XSL_HR的博客
01-13 4513
在后台管理系统的项目开发中，弹窗组件用到的地方很多。由于自带的默认样式不太符合视觉要求，因此需要利用maskStyle属性来自定义modal弹窗的遮罩样式。
vue封装弹框组件
Shmily的博客
05-28 2059
vue封装弹框组件 1、引入弹框组件 <Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" /> 2、点击显示弹框 <button @click="onClick">点击</button> 3、在组建内使用 import Popout from './Popout' export default { components: { Popout }, data
vue移动端弹框组件的实例
10-17
本文将深入讲解一个基于 Vue 的移动端弹框组件——vue-layer-mobile，帮助开发者更好地理解和使用这个组件。 vue-layer-mobile 是一个模仿 layer-mobile 的 Vue 组件，提供了丰富的弹框样式和功能，简化了移动端...
基于uniapp/vue的弹框组件
11-26
在本文中，我们将深入探讨一个基于uni-app和vue的弹框组件，这正是利用了这两种技术的组件化特性。uni-app是一个多端开发框架，它可以将同一份代码编译到iOS、Android、H5、小程序等多个平台，而vue则是一种轻量级的...
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
vue+element-ui 实现弹窗验证用户信息
weixin_51300999的博客
03-24 3937
<el-card > <div style="margin-top: 15px;"> <el-row :gutter="20"> <!-- 整个行占的宽度是24个格子，span=9就是占其中的9个格子 --> <el-col :span="9"><el-input placeholder="请输入内容...
Vue设置漂亮的alert、confirm、自定义提示
geidongdong的博客
11-27 3084
无标题 如果你想学习如何使用Vue创造出漂亮的Alert, 可以仔细阅读这篇文章，了解一下。该效果参考链接: 原官网。 这个样式还是蛮不错的，而且可以根据源代码自定义效果，国内相关的使用的文章和项目很少，但有两点主要问题：该效果为英文显示，像如何修改Alert中“OK”、“Cancel”变成“好的”、“取消”这种的没有解释，一是使用的人真的不多，原Github上使用的才几百+。第二点是官网样例都是Typescript的，使用Vue框架的一般都是用Javascript等等，博主也是搞了几个小时才弄懂应该怎么修
Vue3 如何实现一个带遮罩的 dialog 对话框
fang_my的博客
02-14 2559
目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }
vue3手动封装弹出框组件message
greed
09-24 914
vue3手动封装弹出框组件message 封装组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i class="iconfont" :class="[style[typ
vue3 | 弹窗Dialog组件封装
ydongabc
04-27 4287
只暴露提供一个入口函数—show()，保持组件内部封闭性。数据交互尽量通过 show 方法来传递，减少外部状态依赖。固定的配置项参数才考虑用 props。
vue项目中封装弹窗组件
我的博客
11-16 1966
父组件 <el-link type="primary" :underline="false" @click="openEdit(row)" >查看 </el-link> <!-- 使用 --> <adio :data="current" :visible.sync="showEdit" ></adio>``` //注册组件 import adio from "@/views/users/
vue封装单文件弹窗组件
2303_76218115的博客
02-17 1880
vue弹窗封装的正确姿势
在vue中封装一个简单的弹窗组件
haodanzj的博客
08-02 1104
vue中的一个弹窗组件
vue3封装dialog弹框组件父组件点击显示
05-23
首先，你需要在父组件中引入 Dialog 弹框组件，并在父组件的 template 中添加一个触发显示弹框的按钮。例如： ```vue <template> <div> <button @click="showDialog">显示弹框</button> <Dialog v-model="dialogVisible"></Dialog> </div> </template> ``` 在上面的代码中，我们添加了一个按钮，当用户点击该按钮时，会触发 showDialog 方法。同时，我们引入了一个名为 Dialog 的组件，并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。 接下来，在父组件的 script 中，我们需要定义 showDialog 方法以及 dialogVisible 变量。例如： ```vue <script> import Dialog from './Dialog.vue' export default { components: { Dialog }, data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中，我们首先引入了 Dialog 组件，然后在 data 中定义了 dialogVisible 变量，并将其默认值设置为 false。接着，我们定义了一个名为 showDialog 的方法，该方法将 dialogVisible 设置为 true，从而显示 Dialog 弹框组件。 最后，我们需要在 Dialog 弹框组件中添加一个关闭按钮，并将其与 dialogVisible 变量绑定起来。例如： ```vue <template> <div> <div class="dialog-mask" v-if="visible" @click="close"></div> <div class="dialog-wrapper" v-if="visible"> <div class="dialog-content"> <div class="dialog-header"> <h3 class="dialog-title">Dialog 标题</h3> <button class="dialog-close-btn" @click="close">×</button> </div> <div class="dialog-body"> <p>Dialog 内容</p> </div> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, required: true } }, methods: { close() { this.$emit('update:visible', false) } } } </script> ``` 在上面的代码中，我们添加了一个名为 close 的方法，该方法会将 dialogVisible 设置为 false，并通过 $emit 方法将更新后的值传递给父组件。同时，我们在弹框组件中添加了一个关闭按钮，并在按钮的 click 事件中调用 close 方法。 这样，当用户点击父组件中的按钮时，就会触发 showDialog 方法，从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时，会触发 close 方法，从而关闭弹框。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值