vue在使用vuetify这个ui组件库时候,v-alert提示框设置定时显示,让提示窗在窗口上可以自动关闭

首先设置一个v-alert组件弹出框,根据v-model的值来进行弹出显示,按钮来控制

<v-app>

    <button @click="click">点击</button>

    <v-alert outlined dismissible type="success" v-model="alert" class="demowidth

           v-show="isShow(2)"

    >点击成功</v-alert>

  </v-app>

设置需要的数据

data() {

    return {

      alert: false, 

      timer: '',

      value: 0,

    };

  },

在methods中设置方法

methods: {

    click() {

      this.alert = true;

      this.timer = setInterval(this.get, 500);

    },

    get() {

      this.value += 1;

    },

    isShow(time) {

      if (this.value > time) {

        this.alert = false;

        clearInterval(this.timer);

        this.value = 0;

      }

    },

  },

这里就是利用定时器的原理来进行弹出窗的显示时间的

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
=============================================================================== 组件名称:消息提示组件 =============================================================================== 组件说明:用于替代系统默认的灰色对话框(alert等),提供丰富多彩的消息提示皮肤外观。 =============================================================================== 组件简介: 1、调用方式进行二次分装,现编写成类,然后将调用方法变成几个简单的方法调用,调用时无需new了。调用方法明了简单。 2、兼容IE6.0+、FF1.5+、Opear9+,兼容HTML4/XHTML1.0页面渲染模式。 3、支持CSS皮肤定制。目前提供了五种皮肤,Vista、QQ、dmm-green、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并关闭后该select仍保持隐藏状态,而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作(包括F5),“消息确认框”支持“tab键/左右方向键”切换确定/取消焦点。 8、支持在iframe页面中弹出消息框时遮盖最外层页面(需引用扩展文件ymPromptEx.js)。 9、只要组件js与样式目录相对位置不变,无论将组件放在哪个文件夹中都只需正确引入js文件即可,组件自动得到css的路径。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值