vue的全局提示框组件实例代码

2024-11-26 08:37:23

这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：

<template>
   <!-- 全局提示框 -->
   <div v-show="visible" class="dialog-tips dialog-center">
     <div>{{message}}</div>
   </div>
</template>
<script>
export default {
 data() {
  return {
   visible: false,
   message: ""
  };
 }
};
</script>
<style lang="scss">
.dialog-tips{
  position: fixed;
  z-index: 100;
  min-width: 220px;
  padding: 40px 22px;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  .dialog-tips-icon{
    width: 54px;
    height: 54px;
    @extend %bg-contain;
    display: inline-block;
    margin-bottom: 13px;
  }
}
.dialog-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</style>

toast.js

import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的div上
  // 并将此div加入全局挂载点内部
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
  // 通过Vue的原型注册一个方法
  // 让所有实例共享这个方法
  Vue.prototype.$toast = (msg, duration = 1500) => {
    instance.message = msg;
    instance.visible = true;
    setTimeout(() => {
      instance.visible = false;
    }, duration);
  }
}
export default Toast

如何使用？

　　在main.js中

　import Vue from 'vue'
　　import Toast from './toast'
　　Vue.use(Toast);

　　在component中

this.$toast("XXXXXXXXX");

总结

以上所述是小编给大家介绍的vue的全局提示框组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

Vue组件之全局组件与局部组件的使用详解
vue2.0全局组件之pdf详解
自定义vue全局组件use使用、vuex的使用详解
详解Vue.use自定义自己的全局组件
详解vue.js全局组件和局部组件

Vue组件之全局组件与局部组件的使用详解

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l
自定义vue全局组件use使用、vuex的使用详解

自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出
详解vue.js全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo
详解Vue.use自定义自己的全局组件

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'
vue2.0全局组件之pdf详解

目的:像elementUI那样注册全局组件预览pdf文件技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen
vue的全局提示框组件实例代码

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template>  <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data
解决vue自定义全局消息框组件问题

1.发现问题在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局.采用rem布局的时候html的字体font-size是有一个标准的.我这边用的是750px的设计稿,就采用1rem = 100px. 在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的. 使用时发现:本来应该细长的提示语句变得很大! 最后发现可能是因为这个icon是继承了html设定的font-size,尝试加一些样式上去还是无效.(如果rem布局上有直接更改第三方组
iOS中 LGLAlertView 提示框的实例代码

使用与iOS8 以后,只是把系统的UIAlertController进行了封装,省的每次用的时候要写很多的代码.封装后只需要一句代码即可 , deome 地址 :https://github.com/liguoliangiOS/LGLAlertView.git 上代码LGLAlertView.h: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, LGLAlert
Asp.Net中避免重复提交和弹出提示框的实例代码

前台代码: <asp:Button ID="Button1" runat="server" Text="打印" onclick="Button1_Click" OnClientClick="this.value='数据提交中--';this.disabled=true;" UseSubmitBehavior="False" /> 后台代码: public partial cl
vue实现自定义"模态弹窗"组件实例代码

目录前言效果图实例代码总结前言对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,下面来一起看看详细的实现过程. 效果图以上截图,红色边框部分,表示 "文字.图标或者图片" 是可更改部分实例代码一.创建弹窗组件 quitDialog.vue 组件 <template> <transition-group name='fade'> <!-
vue.js实现开关(switch)组件实例代码

最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="toggle&quo
基于vue实现swipe轮播组件实例代码

项目背景图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级啊.还有,还有翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此
javascript tips提示框组件实现代码

tip.js 复制代码代码如下: function tips(obj,tag){ var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); ti
vue动态注册组件实例代码详解

写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例:  <component v-bind:is="currentView"></component> 详见vue API中关于
vue.js中toast用法及使用toast弹框的实例代码

1.首先引入 import { Toast } from 'vant' 写个小列子绑定一个click事件 2.写事件在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下一个简单的toast提示成就好了下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

vue的全局提示框组件实例代码

您可能感兴趣的文章:

相关推荐

随机推荐