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相关的面试题,帮助大家提升 ...
最新文章
- Code Hunt SECTOR2(Loops) SECTOR3(Loops2)
- python列表输入不加逗号_用python打印不带括号或逗号的列表
- python中文昵称-python3随机生成中文字符(随机生成两字或三字的名字)
- JS-WEB-API(存储)
- SAPGUI里实现自定义的语法检查
- matlab算概率,用matlab计算概率,再次吐槽某些吧友国战比赛七框选将的建议
- java发送请求_Java发送Http请求
- css 一些好玩的属性,推荐一些比较有用的css3新属性
- Material 和 ShareMaterial 区别
- openim php sdk,imsdk_restapi-php-sdk
- 95后频频离职,是员工本人问题?
- 本地安装AD插件教程,Altium AD插件安装 DXP插件安装 本地安装 导CAD DWG DXF
- 如何设置计算机用户名和密码忘了怎么办,电脑密码忘记了怎么办
- 关闭windows自动更新小妙招
- 周末阅读:北漂程序员边城的幸福生活
- Java递归解压zip压缩包
- 软件测试面试题:如何测试一个纸杯?
- 2020华为软件精英挑战赛历程总结——复赛篇
- 贝叶斯算法c语言,01 贝叶斯算法 - 朴素贝叶斯
- 百度 ping php,百度ping方法示例代码 自动ping百度
热门文章
- Java注解实现之how to use path variable @PathVariable
- SAP OData Gateway里uri type为metadata的请求处理逻辑
- 最新PHP秒赞,快乐秒赞 php版
- 如何解决ipconfig、ping不是内部或外部命令
- python编程入门第九讲,第九讲作业---函数
- spring生命周期_理解Spring应用上下文生命周期
- outlook本地存储设置_商务文档为什么要存储在OneDrive for business 上?
- python正则表达式判断数字_Python机器学习之手写数字辨识及正则表达式
- 计算机网络分代核心的属性,高职单招计算机类模拟试卷二(环职职专)
- logo自动旋转 html,HTML/CSS3 Logo选择器