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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
js实现自定义路由
Feb 04 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 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打开和关闭文件操作函数总结
2014/11/18 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
用jscript启动sqlserver
2007/06/21 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
运动会入场式解说词
2014/02/18 职场文书
学生安全责任书模板
2014/07/25 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
道歉信范文
2015/05/12 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
SpringBoot生成License的实现示例
2021/06/16 Java/Android
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
pandas中对文本类型数据的处理小结
2021/11/01 Python