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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
React key值的作用和使用详解
Aug 23 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中进行身份认证
2006/10/09 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
图片自动更新(说明)
2006/10/02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python实现静态web服务器
2019/09/03 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python Paramiko使用示例
2020/09/21 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
金融专业个人求职信范文
2013/11/28 职场文书
访谈节目策划方案
2014/05/15 职场文书
校外活动方案
2014/08/28 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
大学生求职简历自我评价
2015/03/02 职场文书