vue 定义全局弹框_用vue/react写一个全局提示弹框
vue的实现方法
1、写一个Toast组件
Toast.vue
export default {
name: "Toast",
data() {
return {
show: true
};
}
};
.toast {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
font-size: 14px;
}
.box {
height: 130px;
width: 240px;
border: 1px solid #ccc;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title,
.content {
line-height: 30px;
padding: 0 10px;
}
.title {
color: #666;
border-bottom: 1px solid #ccc;
}
.btn {
display: inline-block;
padding: 4px 10px;
color: gray;
border: 1px solid #ccc;
border-radius: 2px;
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
组件中除了拥有是否展现自身的show属性以外其他属性都没有被定义,这些属性将在下面的toast.js中通过Vue.extend出来的实例构造器的实例化对象传入。
Vue.extend 返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 Vue 实例构造器
var myVue = Vue.extend({
// 预设选项 -- 等下我们会把Toast组件作为预设传入
}) // 返回一个“扩展实例构造器”
// 然后就可以这样来使用
var vm = new myVue({
// 其他选项
})
2、 写一个toast.js
toast.js
import Toast from './Toast.vue'
import Vue from 'vue'
let ToastCmp = Vue.extend(Toast)
function toast(options) {
let div = document.createElement('div')
document.body.appendChild(div)
let { title, content, btn, callback } = options || {}
new ToastCmp({
data() {
return {
title: title || "Tips",
content: content || "contents here",
btn: btn || "confirm",
callback: () => {
callback && callback instanceof Function && callback()
this.show = false
}
}
}
}).$mount(div)
}
export default {
install: (Vue) => {
Vue.prototype.$toast = toast
}
}
3、将toast方法挂载上Vue的原型然后调用即可
react的实现方法
1、写一个toast.js
样式与vue的一样,此处省略
toast.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Toast extends Component {
constructor(props) {
super(props)
}
render() {
const { title, content, btn, callback } = this.props
return (
)
}
}
export default options => {
let { title, content, btn, callback } = options || {}
let div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(React.createElement(Toast, {
title: title || "Tips",
content: content || "contents here",
btn: btn || "confirm",
callback: () => {
callback && callback instanceof Function && callback()
document.body.removeChild(div)
}
}), div)
}
2、引入调用即可
vue 定义全局弹框_用vue/react写一个全局提示弹框相关推荐
- 使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动 首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
- 华为快应用-怎样写一个全局的变量和方法
看过博主其他博客的都知道博主是做iOS出身,后来学的前端,Java,weex,快应用这些,思想上总是偏向于iOS,所以在快应用中也总想着能写一个全局的方法,现在就把这个经验分享出来: 在快应用的工程中 ...
- vue dplayer 加载失败_最新vue脚手架项目搭建,并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
- vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
- vue 同级页面调用方法_【Vue】一个vue页面调用另一个vue页面中的方法
想仿着 vue-material 的 Demo & Document 页面的效果写一个小例子. 遇到问题的地方是: 如上图红色圈出的地方,点击 button 按钮时,无法执行 toggle() ...
- vue.js 常见面试题_使用Vue.js时应避免的常见错误
vue.js 常见面试题 Looking for a front-end framework to try out, I started with React and then tried Vue.j ...
- vue设置textarea最大字数_【Vue 学习】 Vue常用系统指令
1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰符 2 v-text .v-html.v- ...
- 移动端vue实现部门结构功能_基于Vue的组织架构树组件
由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vue).在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子! 分析 既然是树,那么每个节点都应该 ...
- vue 给取data值_一些Vue相关的面试题,帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
最新文章
- 分别打印三位整数的个位、十位、百位
- java list用法_java list的用法详解
- 号召,有兴趣做博客园自己的网络游戏的请举手..
- STM32F103 IAP升级时在app文件中放置标志字节处的地址计算
- Java基础 println 输出常量的示例
- java解析表字段_从SQL / HQL Java解析表和列名
- poj 2182 Lost Cows 解题报告
- 区块链 2.0:下一个计算范式
- TMD 之后,再无 BAT? | 畅言
- 用python画四叶草-python turtle工具绘制四叶草的实例分享
- android开发目录结构说明
- WinDbg / SOS Cheat Sheet
- 斗鱼基于etcd和ZooKeeper的注册中心实践案例
- Linux容器的安装链接
- FileReader 对象实现图片预览
- 【四二学堂】标准GPS坐标,转换成百度坐标
- java获取中文的拼音以及获取中文拼音的首字母
- 交通违章 处罚[转]
- torch.multinomial使用
- 关于usb3vision开发
热门文章
- How is data replicted from HANA to AS
- 使用windows activeX 在Webclient UI 中打开word文档
- CRM的business partner和employee在后台的搜索
- SAP S/4HANA生产订单状态含义
- SAP CRM和SAP Hybris的action profile
- sqlplus连接不上oracle,环境变量设置错误导致sqlplus 连接不上oracle
- linux服务器无密码登录不了,设置ssh无密码登录linux服务器的方法
- python怎么只打印其中一行_如何在Python中让两个print()函数的输出打印在一行内?...
- html 行内超出隐藏,css如何设置文字不换行超出隐藏?
- 中one_又破纪录了,理想ONE交付量已达30000辆,它凭什么?