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

2024-08-11 20:16:16

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

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

使用Vue组件实现一个简单弹窗效果

最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件. 本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式, props . $emit 传参,具体组件代码也传上去了.如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获. 组件最后实现的效果实现步骤先搭建组件的html和css样式,遮罩层和内
跟混乱的页面弹窗说再见

对于一些快速迭代的产品来说,特别是移动端 C端产品,基于用户运营的目的,在 app首页给用户展示各种各样的弹窗是很常见的事情,在产品初期,由于迭代版本和运营策略变化地还不是太大,所以可能觉得没什么,但当产品运营到后期,各种八竿子打不着的运营策略轮番上阵,弹窗的样式.逻辑等都变了不知道多少遍的时候,问题就出来了由于前期没有做好规划,首页的弹窗组件可能放了十多个甚至更多,不仅是首页有,首页内又引入了十多个个子组件,这些子组件内也有,搞不好这些子组件内还有子组件,子组件的子组件同样还有弹窗,每个弹窗
关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale">  </div> </template> <script&g
vue.extend实现alert模态框弹窗组件

本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert
vue弹窗组件使用方法

本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
以v-model与promise两种方式实现vue弹窗组件

最近公司有一个后台业务虽然也是写在了现有的后台系统中,但是之后要为这个业务单独拉出来新建一个后台系统,所以现有的后台系统中的vue组件库,就不能用了(因为不知道将来的系统要基于什么组件库,以防给未来移植项目带来麻烦),这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单,也是想自己总结一下,有不对的地方也请指出),一开始用传统的props,$emit但是觉得要接两个取消与确认的回调这块的逻辑分散了所以就用了promise两个回调的方式把两个回调写在了一起,并不一定好,算是提供
Vue自定义弹窗指令的实现代码

目标使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
vue的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
很棒的vue弹窗组件

弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-vue-modal-component
VUE2实现事件驱动弹窗示例

前几天想了解vue如何写弹窗组件有以下两种可取的写法: 1.状态管理如果弹窗组件放在根组件,使用vuex来管理组件的show和hide.放在组件内,通过增加v-show或v-if来控制,可结合slot,定义不同需求的弹窗 2.事件管理注册一个全局事件来打开弹窗,传入需展示的文字和相关的逻辑控制,可结合promise,实现异步觉得对用像confirme和propmt这类弹窗,还是事件驱动的好.最好就是能使用promise回调. 于是手痒就写了一个.下面是代码. propmt.js impo

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

相关推荐

随机推荐