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 相关文章推荐
iframe实用操作锦集
Apr 22 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
JS实现图片切换特效
Dec 23 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
使用cx_freeze把python打包exe示例
2014/01/24 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
详解python tcp编程
2020/08/24 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
幼儿园数学教学反思
2014/02/02 职场文书
小学庆六一活动方案
2014/02/28 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
社区活动总结范文
2015/05/07 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python