vue弹窗消息组件的使用方法


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下

本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果。所以暂时算是半成品。

练习代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ys-alert-component</title>
 <style>
 input {
 border-radius: 5px;
 border: 1px solid #2f9df9;
 background-color: #39befb;
 background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb),
 to(#2091fc));
 background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb),
 to(#2091fc));
 background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
 background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
 color: #FFFFFF;
 height: 28px;
 padding: 0 20px;
 cursor: pointer;
 line-height: 28px;
 display: inline-block;
 margin-right: 5px;
 outline: none;
 }
 .ys-alert {
 display: inline-block;
 height: 26px;
 padding: 8px 25px;
 min-width: 200px;
 border-radius: 5px;
 box-shadow: 0 4px 12px rgba(0,0,0,.5);
 background: #b8d2f3;
 margin: 50px;
 }
 .icon {
 float: left;
 width: 26px;
 height: 26px;
 border: 3px solid #fff;
 border-radius: 50%;
 font-size: 16px;
 line-height: 20px;
 font-weight: bold;
 text-align: center;
 color: #fff;
 box-sizing: border-box;
 margin-right: 8px;
 }
 .content {
 float: left;
 line-height: 26px;
 font-size: 15px;
 color: #fff;
 }
 /*成功的样式*/
 .success {
 background: #9bdda7;
 }
 /*失败的样式*/
 .error {
 background: #f7d13b;
 }
 /*警告样式*/
 .warning {
 background: #e98c97;
 } 
 </style>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 <input type="button" value="呼唤默认的按钮" @click="alertShow('info')">
 <input type="button" value="呼唤成功的按钮" @click="alertShow('success')">
 <input type="button" value="呼唤失败的按钮" @click="alertShow('error')">
 <input type="button" value="呼唤警告的按钮" @click="alertShow('warning')">
 <input type="button" value="呼唤美美哒博客" @click="alertShow('yuki')">
 <ys-alert-component 
 icon-bar="O" 
 type="info" 
 v-if="info" 
 alert-content="我是默认的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
 icon-bar="V" 
 type="success" 
 v-if="success" 
 alert-content="我是成功的按钮哟"> 
 </ys-alert-component>
 <ys-alert-component 
 icon-bar="X" 
 type="error" 
 v-if="error" 
 alert-content="我是失败的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
 icon-bar="!" 
 type="waring" 
 v-if="warning" 
 alert-content="我是警告的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
 icon-bar="E" 
 type="" 
 v-if="yuki" 
 alert-content="我是灰色定制的按钮哟" 
 style="background-color: #ccc; color: #fff;">
 <div slot="alert-content">
 <span>章鱼不丸子</span>
 <a href="http://www.yuki.kim" rel="external nofollow" >http://www.yuki.kim</a>
 </div>
 </ys-alert-component>
 </div>
 <script>
 /*
 props:
 type:
  info: 默认
  success: 成功
  error: 失败
  warning:警告
 iconBar: 字符串,我没有图标,就用字母写的。很low...
 alertContent: 定制提醒的内容
 hideIcon: 隐藏或者显示丑丑的图标
 slot:
 alert-content: 定制提醒信息内容及icon整套模板

 methods:
 无,没有写方法

 */
 Vue.component("ys-alert-component", {
 props: {
 iconBar: {
  type: String,
  default: ""
 },
 alertContent: {
  type: String,
  default: "请定制提醒内容"
 },
 hideIcon: {
  type: Boolean,
  default: false
 },
 type: {
  type: String,
  default: ""
 }
 },
 template:`
 <div class="ys-alert" :class="type">
  <slot name="alert-content">
  <div class="icon" >{{ iconBar }}</div>
  <div class="content">
  {{ alertContent }}
  </div>
  </slot>
 </div>`

 })


 var vm = new Vue({
 el: "#app",
 data: {
 info: false,
 error: false,
 success: false,
 warning: false,
 yuki: false
 },
 methods: {
 alertShow (type) {
  switch (type) {
  case "info" :
  this.info = !this.info;
  //setTimeout("vm.info = !vm.info", 2000);
  break;
  case "error" :
  this.error = !this.error;
  //setTimeout("vm.error = !vm.error", 2000);
  break;
  case "success" :
  this.success = !this.success;
  //setTimeout("vm.success = !vm.success", 2000);
  break;
  case "warning" :
  this.warning = !this.warning;
  //setTimeout("vm.warning = !vm.warning", 2000);
  break;
  default:
  this.yuki = !this.yuki;
  //setTimeout("vm.yuki = !vm.yuki", 2000);
  }
 }
 }
 })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
javascript整除实现代码
Nov 23 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
js不常见操作运算符总结
Nov 20 Javascript
layui实现动态和静态分页
Apr 28 #Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
You might like
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
怎样使用Python脚本日志功能
2016/08/14 Python
Django自定义认证方式用法示例
2017/06/23 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python3爬取torrent种子链接实例
2020/01/16 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python如何根据时间序列数据作图
2020/05/12 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
运动会通讯稿50字
2014/01/30 职场文书
电工工作职责范本
2014/02/22 职场文书
爱心捐助倡议书
2014/05/19 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
任命书标准格式
2015/03/02 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
python中的None与NULL用法说明
2021/05/25 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript