主页 / 网络编程 /

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

网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue弹窗消息组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

练习代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ys-alert-ponent</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;
 }
 /成功的样式/
 .suess {
 background: #9bdda7;
 }
 /失败的样式/
 .error {
 background: #f7d13b;
 }
 /警告样式/
 .warning {
 background: #e98c97;
 } 
 </style>
 <script src="https://unpkg./vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 <input type="button" value="呼唤默认的按钮" @click="alertShow('info')">
 <input type="button" value="呼唤成功的按钮" @click="alertShow('suess')">
 <input type="button" value="呼唤失败的按钮" @click="alertShow('error')">
 <input type="button" value="呼唤警告的按钮" @click="alertShow('warning')">
 <input type="button" value="呼唤美美哒博客" @click="alertShow('yuki')">
 <ys-alert-ponent 
 icon-bar="O" 
 type="info" 
 v-if="info" 
 alert-content="我是默认的按钮哟">
 </ys-alert-ponent>
 <ys-alert-ponent 
 icon-bar="V" 
 type="suess" 
 v-if="suess" 
 alert-content="我是成功的按钮哟"> 
 </ys-alert-ponent>
 <ys-alert-ponent 
 icon-bar="X" 
 type="error" 
 v-if="error" 
 alert-content="我是失败的按钮哟">
 </ys-alert-ponent>
 <ys-alert-ponent 
 icon-bar="!" 
 type="waring" 
 v-if="warning" 
 alert-content="我是警告的按钮哟">
 </ys-alert-ponent>
 <ys-alert-ponent 
 icon-bar="E" 
 type="" 
 v-if="yuki" 
 alert-content="我是灰色定制的按钮哟" 
 style="background-color: #c; color: #fff;">
 <div slot="alert-content">
 <span>章鱼不丸子</span>
 <a href="http://.yuki.kim" rel="external nofollow" >http://.yuki.kim</a>
 </div>
 </ys-alert-ponent>
 </div>
 <script>
 /
 props
 type:
  info: 默认
  suess: 成功
  error: 失败
  warning警告
 iconBar 字符串，我没有图标，就用字母写的。很low...
 alertContent 定制提醒的内容
 hideIcon: 隐藏或者显示丑丑的图标
 slot
 alert-content: 定制提醒信息内容及icon整套模板

 methods
 无，没有写方法

 /
 Vue.ponent("ys-alert-ponent", {
 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,
 suess: 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 "suess" :
  this.suess = !this.suess;
  //setTimeout("vm.suess = !vm.suess", 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：学习Vue组件实例 下一篇：layui实现动态和静态分页

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by