vue2组件封装实战系列之alert组件

已于 2024-06-07 16:50:27 修改
阅读量276 收藏
点赞数 1
分类专栏： vue2组件的封装实战 文章标签： vue.js 前端
于 2024-06-07 16:31:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/139530289
版权
本文介绍如何在Vue2中封装一个GfAlert组件，用于提示用户通知和警告信息。通过属性配置，展示组件效果和使用方法。
摘要由CSDN通过智能技术生成

组件之 GfAlert

消息组件一般用于提示用户，比如通知，警告等消息。

效果预览

在这里插入图片描述

属性

参数 类型 说明 可选值 默认值
title String 显示的标题
type String 类型
effect
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
专栏目录
订阅专栏
vue2组件封装实战系列之message组件之方法式调用
峰会路转的博客
06-12 198
消息组件有点类似 alert 组件，区别是 message 组件是不用写在页面上，而是通过调用方法来弹窗显示。然后全局挂在的 vue 的原型上面,这样，我们就实现了自己的 命令式 message 组件。消息提示, 用于页面顶部消息栏的展示, 默认是居中显示, 可以通过设置属性来改变位置。这里我们要件两个文件，一个是组件的静态模版，一个是组件的 js 逻辑。有不明白的地方可以评论区留言，或者加我微信，一起探讨！
vue2组件封装实战系列目录
峰会路转的博客
06-07 118
本系列教程是vue2的一套技术文章，参考的对象是曾经极为辉煌的elementui组件库，虽然现在已经都开始使用vue3了，但是研究这套组件库，对于提升我们的封装思维还是有很大作用的！！所以活不多少，直接开干！如果觉得对你有帮助的话，可以订阅此专栏，有任何问题，可以评论交流心得。不足之处，还希望多多指教。vue2组件封装实战系列之tag组件vue2组件封装实战系列之space组件vue2组件封装实战系列之aside组件。
vue2 封装弹框组件
最新发布
lryh_的博客
07-31 392
安装 element-ui。在父组件中使用弹框组件。main.js 导入。
终于写出了vue2的事件点击alert弹窗，下一步写vue3的
weixin_40945354的博客
03-26 923
正确版本： <!DOCTPYE html> <html> <head> <title>ruguog</title> </head> <body> <div id="app"> <input type="button" value="hamimelon!" @click="test"/> </div> <script
Vue实现Alert插件
qq_35500568的博客
04-23 5038
实现alert插件 在Vue中我们可以使用 Vue.component(tagName, options) 进行全局注册，也可以是在组件内部使用 components 选项进行局部组件的注册。 全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。 有一些全局组件，类似于Message 、Toast 、 Loading 、 Notification 、Alert 通过原型的方
Vue封装一个自己的组件(Alert信息提示框)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 4824
前言： 在项目中经常遇到提示信息组件，我们·一般会用ui库来做。但是当ui库无法满足自己的需求（比如自定样式，ui库的样式很难改变）。下面就是简单封装一个自己的Alert信息提示框。 一、实现思路 1.我们要做得是alert组件所以要预设几个字段 title -标题 message -提示信息 duration -显示时间 2.给出创建组件的方法 3.挂载到全局vue实例 4.调用 二、实现过程 1.创建一个ui组件（Alert） <template> &lt...
Vue3警告提示（Alert）
Mr Dear的博客
07-18 4334
警告提示，展现需要关注的信息，支持：五种类型；无边框；可关闭；辅助性文字介绍；辅助图标；自定义图标；自定义关闭文字；自定义操作项；总之，功能丰富，简单易用，总能满足你的想象😁😁
【Vue-仿照element-ui自己动手封装ui组件】—— alert、confirm 弹窗
qq_33625873的博客
03-08 2410
概述 很久之前就一直想要自己搭建一个个人博客，但下班回家的我只想做条咸鱼，这两天周末闲着没事干有想起了这件事，但从何下手？看了一下主流的几个ui框架挺好看的但大家都在用没有新鲜感，于是决定自己试着做一套试试 水平有限，用到的方法、代码实现、风格等可能比较初级，仅作为学习分享，如有大佬路过还请多多指教 实现alert和comfirm 先看效果如图 需求分析 1、要能自定义弹窗标题、消息文本，弹窗按钮文本 2、要支持全局的函数式调用，一处引入随从调用 3、弹窗组件要有比较高的权重，覆盖在顶层却不能像普通组件一
Vue组件编写之Alert提示框组件编写
weixin_42118522的博客
05-11 1423
Alert提示框的vue组件编写 最近一直学习vue，跟着视频敲代码，敲了两三个组件后，终于对编写组件有一个大致的思路了，以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路。 主要分为三个部分：组件引入(注册路由器)、定义组件内容样式及实现组件间通信。 (注册路由器使用路由组件也可放到最后一步，个人习惯先引入然后定义组件及样式便于观察组件显示效果) 下面是本组件引入后显示效果，通过登匹配验证为false触发alert提示框显示，点击确认关闭提示框：: 组件引入 一种是写入路由，要先在在rou
vue组件化可以调用html页面,vue组件（将页面公用的头部组件化）
weixin_39756540的博客
06-04 1473
呃……重新捡起前面用vue-cli快速生成的项目。之前是做过一个多页面的改造，以及引入vux的ui组件，这次在这个项目的基础上，再来聊聊vue中的component。别问我为啥总是写关于vue的博客，都是为了生计(………………)关于一些组件的概念之类的就不一一介绍了，官方文档说的很详细。下面进入正题，直接下载项目一 拿出之前的项目二 在这种需求下 ，自然就要使用我们的组件了，在index.js中添...
vue.extend实现alert模态框弹窗组件
08-27
主要为大家详细介绍了vue.extend实现alert模态框弹窗组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue一步步实现alert功能
01-19
原生alert的缺点 会阻塞一切操作，影响用户体验 很多浏览器会默认静止alert，例如微信。 原生alert框样式丑陋。 项目地址: web-style 项目里有css样式和vue组件。目标是快速构建后台系统。有一定自适应的设计。 css 思路:最外层是一个黑色透明撑满全屏幕的div并且是fixed的div.modal-mask。 在mask内部是一个垂直居中的div框大小可以固定。垂直居中方法有几种可选。我选用的是flex。关键性的css代码如下 .modal-mask{ position: fixed; top: 0; left: 0; right: 0; b
Vue2+Vue3基础入门到实战项目（二）——课程学习笔记
upgrade_bro的博客
08-25 813
Vue2+Vue3基础入门到实战项目（二），主打记录式、陪伴式、身临式学习；Vue的生命周期、工程化开发-vue-cli、组件化、注册组件、页面拆分……
vue弹出alert_vue+webpack 实现简单的弹窗(alert)组件
weixin_39663378的博客
12-23 306
话不多说，下面是alert组件的代码(需要引用node-sass sass-loader scss-loader，主要是为了用scss样式) 提示{{message}}{{negativeText}}{{positiveText}}export default {name: 'my-alert',props: {isShow: {type: Boolean,default: fals...
Vue2通知提醒框（Notification）
Mr Dear的博客
09-13 1万+
全局展示通知提醒信息，在系统四个角显示通知提醒信息。
vue弹出alert_用vue2.x注册一个全局的弹窗alert组件、confirm组件
weixin_35675138的博客
01-30 807
一、在实际的开发当中，弹窗是少不了的，默认系统的弹窗样式太丑，难以满足项目的实际需求，所以需要自己定义弹窗组件，把弹窗组价定义为全局的，这样减少每次使用的时候引入麻烦，节省开发时间。本文将分享如何定义一个全局的弹窗组件。下边开始上代码。二、实际代码如下：1.在components目录下的public目录新建一个文件夹alert，然后新建两个文件alert.vue和alert.scss。组件的样式代...
vue实现全局组件----$alert
热门推荐
Only_ruiwen的博客
06-30 1万+
在element中，有一些全局的组件，类似于this.message(),this.message(),this.message(),this.toast()这种，通过原型的方式挂载在vue的全局上面，以供我们全局使用，平时自己用的多，那么我现在就尝试自己来实现一下。 一.普通组件方式 我们实现一个普通的提示框(Alert)组件不难，一般都是这样写: <template> <...
vue弹窗组件
weixin_40308535的博客
05-21 750
基于VUE的input双向绑定机制 // 弹窗 <template> <div> <div v-show="visible" :value="value" class="mod"> <div class="mod_body"> <div v-if="useClose" class="close" @c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值