前言

在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件

涉及知识点:extend、$mount、$el

使用方式:

this.$Confirm({
title:'自定义标题'
}).then(res=>{
console.log(res)
})

目录结构

index.vue:组件布局、样式、交互逻辑

index.js:挂载组件、暴露方法

知识点

在此之前,了解下涉及的知识点

1. extend

使用这个api,可以将引入的vue组件变成vue构造函数,实例化后方便进行扩展

2. $mount

我们希望弹窗组件是在使用时才显示出来,那么就需要动态的向body中添加元素。使用$mount方法可以手动挂载一个vue实例,和 extend 刚好搭配使用,这个也是弹窗组件命令式的关键。

3. $el

既然要添加dom元素,通过实例的$el属性,正好可以取到dom元素,之后就是使用原生方法进行添加节点啦~

代码实现

index.vue

<template>
<div class="wrap">
<div class="main">
<div class="content">
{{title}}
</div>
<div class="btn-grounp">
<div class="btn cancel" @click="cancel">{{cancelText}}</div>
<div class="btn confirm" @click="confirm">{{confirmText}}</div>
</div>
</div>
</div>
</template> <script>
export default {
name:'',
data () {
return {
title:'这是一个弹窗',
confirmText:'确定',
cancelText:'取消'
};
},
methods: {
show(cb){
typeof cb === 'function' && cb.call(this,this)
return new Promise(resolve=>{
this.resolve = resolve
})
},
confirm(){
this.resolve('confirm')
this.hide()
},
cancel(){
this.resolve('cancel')
this.hide()
},
hide(){
document.body.removeChild(this.$el)
this.$destroy()
}
},
} </script> <style scoped>
.wrap{
position: fixed;
top: 0;
bottom:0;
left:0;
right:0;
display:flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.3);
}
.main{
width: 30%;
padding: 10px;
background: #fff;
box-shadow: 0 0 10px 1px #ddd;
border-radius: 5px;
}
.content{
color:#424242;
font-size: 20px;
}
.btn-grounp{
margin-top: 15px;
display:flex;
justify-content: flex-end;
}
.btn{
margin-left: 15px;
padding: 5px 20px;
border-radius: 5px;
font-size: 16px;
color:#fff;
}
.confirm{
background: lightblue;
}
.cancel{
background: lightcoral;
}
</style>

index.js

import Vue from 'vue'
import comfirm from './index.vue' let newInstance = null //将vue组件变为构造函数
let ConfirmConstructor = Vue.extend(comfirm) let init = (options)=>{
//实例化组件
newInstance = new ConfirmConstructor()
//合并配置选项
Object.assign(newInstance,options)
//使用$mount()后 可以理解为创建虚拟的dom
document.body.appendChild(newInstance.$mount().$el)
}
let caller = (options)=>{
//options 为调用组件方法时传入的配置选项
if(!newInstance){
init(options)
}
return newInstance.show(vm =>{newInstance = null})
}
export default {
install(vue){
vue.prototype.$Confirm = caller
}
}

main.js

上面我对外暴露的对象中含有install方法,这里可以使用Vue.use注册组件(使用Vue.use后,会查找install方法进行调用),将组件调用方法挂载到Vue原型上。

import Confirm from './components/confirm'
Vue.use(Confirm)

写在最后

这个弹窗组件比较简陋,还有很多地方可以完善

Vue - 简单实现一个命令式弹窗组件的更多相关文章

  1. 利用Vue v-model实现一个自定义的表单组件

    原文请点此链接  http://blog.csdn.net/yangbingbinga/article/details/61915038

  2. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  3. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  4. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  5. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. uniapp自定义简单弹窗组件

    2.0(2019-08-31) 船新版本的信息弹窗组件 插件市场地址:http://ext.dcloud.net.cn/plugin?id=672 可以弹出很多条信息,并单独控制消失时间.点击消失. ...

  7. vue实现一个简易Popover组件

    概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...

  8. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  9. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

随机推荐

  1. 从EFCore上下文的使用到深入剖析DI的生命周期最后实现自动属性注入

    故事背景 最近在把自己的一个老项目从Framework迁移到.Net Core 3.0,数据访问这块选择的是EFCore+Mysql.使用EF的话不可避免要和DbContext打交道,在Core中的常 ...

  2. python 做一个简单的登录接口

    # -*- conding :utf-8 -*-# File Name: homewoe# Create Date: 2019/11/20 / 9:15# Change Activity: 2019/ ...

  3. JQury自动切换图片

    [标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. android逆向总结

    首先项目里的java文件,以及项目引用到的第三方jar或aar包里面的class,统统都编译成classes.dex放在apk包的根目录,项目的资源目录和AndroidManifest.xml被处理生 ...

  5. 024.掌握Pod-部署MongoDB

    一 前期准备 1.1 前置条件 集群部署:Kubernetes集群部署参考003--019. glusterfs-Kubernetes部署:参考<附010.Kubernetes永久存储之Glus ...

  6. AE安装部署以及监测ArcEngine runtime 9.3是否安装

    目的:用ArcEngine9.3开发项目以后,用Visual Studio2008打包工具打包: 同时监测别的机器上是否有ArcEngine Runtime或者Desktop的支持. 解决方案: 1. ...

  7. 将py文件打包为exe文件方法

    前提: pip是依赖python的,首先检查下windows机器上有没有安装python,或者有没有添加到环境变量中,如果都没有需要安装或者加入环境变量 安装pip 下载地址: https://pyp ...

  8. java中的运算,+-* /% | ^ &

    java中运算都是操作符号,那么整形默认为int,双精度默认为都double 整数 看案例: 无法编译通过:操作默认为int,接受结果为int,所以这个地方编译无法通过,所以需要强制类型转换 再看案例 ...

  9. 用IDCNN和CRF做端到端的中文实体识别

    实体识别和关系抽取是例如构建知识图谱等上层自然语言处理应用的基础.实体识别可以简单理解为一个序列标注问题:给定一个句子,为句子序列中的每一个字做标注.因为同是序列标注问题,除去实体识别之外,相同的技术 ...

  10. vscode + platformIO开发stm32f4

    我的电脑环境 win10 vscode 1.36.1 vscode安装插件 安装完这个插件后会提示你安装 platformIOCore,按照提示安装即可.安装过程可能比较缓慢, 可能需要翻墙. 新建项 ...