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 相关文章推荐
图片之间的切换
Jun 26 Javascript
js控制frameSet示例
Sep 10 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python MD5文件生成码
2009/01/12 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python处理二进制数据的方法
2015/06/03 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python实现两款计算器功能示例
2017/12/19 Python
python 实现UTC时间加减的方法
2018/12/31 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python实现磁盘日志清理的示例
2020/11/05 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
应届护士推荐信
2013/11/16 职场文书
人事专员岗位职责
2015/02/03 职场文书
暑期实践个人总结
2015/03/06 职场文书
青年志愿者活动感想
2015/08/07 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
gateway网关接口请求的校验方式
2021/07/15 Java/Android