一个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中
在component中
this.$toast("XXXXXXXXX");
一个vue的全局提示框组件的更多相关文章
- Vue 自定义全局消息框组件
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...
- 在vue项目中添加全局提示框
1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- 学习EXTJS6(4)基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- vue自定义下拉框组件
创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...
随机推荐
- Absolute Horizontal And Vertical Centering In CSS
Quick CSS Trick: How To Center an Object Exactly In The Center Centering in CSS: A Complete Guide Ab ...
- Javaee 方法的构建和调用
主类: package Szy02; public class Person { String name; int age; String sex; public Person(){ } public ...
- ubuntu的安装
前言 对计算机的学习来说,使用Linux系统是有好处的,Windows是商业的,无法学习操作系统的内在东西,所以选择折腾Linux. 我选择了ubuntu作为学习系统,Linux发行版没有什么最好之说 ...
- Python for Tkinter
# tkinter常用组件- 按钮 - button(按钮组件) - RadioButton(单选框组件) - CheckButton(选择按钮组件) - Listbox(列表框组件) - 文本输入组 ...
- Tensorflow高效读取数据的方法
最新上传的mcnn中有完整的数据读写示例,可以参考. 关于Tensorflow读取数据,官网给出了三种方法: 供给数据(Feeding): 在TensorFlow程序运行的每一步, 让Python代码 ...
- 【 AIM Tech Round 5 (rated, Div. 1 + Div. 2) C】Rectangles
[链接] 我是链接,点我呀:) [题意] 给你n个矩形. 让你找出一个点(x,y) 使得这个点在其中至少(n-1)个矩形中. [题解] 若干个矩形交在一起的话. 它们所有的公共区域也会是一个矩形. 这 ...
- BA-闭式冷却塔系统
- lpa标签传播算法解说及代码实现
package lpa; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public class L ...
- ISAM Indexed Sequential Access Method 索引顺序存取方法
ISAM Indexed Sequential Access Method 索引顺序存取方法 学习了:https://baike.baidu.com/item/ISAM/3013855 是IBM发展起 ...
- UML期末绘图及细节总结
往届期末绘图的题目例如以下所看到的: Read the providing materials carefully, and then do tasks. 2.1: Use Case Diagram ...