欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-18 16:07:21
本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下 本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果。所以暂时算是半成品。...

本文实例为大家分享了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>

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