Vue 实现一个命令式弹窗组件功能


Posted in Javascript onSeptember 25, 2019

前言

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

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

使用方式:

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

目录结构

Vue 实现一个命令式弹窗组件功能

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

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

知识点

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

1. extend

Vue 实现一个命令式弹窗组件功能

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

2. $mount

Vue 实现一个命令式弹窗组件功能

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

3. $el

Vue 实现一个命令式弹窗组件功能

 既然要添加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)
  //加载dom
  document.body.appendChild(newInstance.$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 实现一个命令式弹窗组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 #Javascript
微信小程序制作扭蛋机代码实例
Sep 24 #Javascript
layer.prompt输入层的例子
Sep 24 #Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 #Javascript
解决layer.prompt无效的问题
Sep 24 #Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 #Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Django中url的反向查询的方法
2018/03/14 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
护理自荐信
2013/10/22 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
高一军训的心得体会
2014/09/01 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
委托公证书格式
2015/01/26 职场文书
趵突泉导游词
2015/02/03 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
公司奖励通知
2015/04/21 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
基于PyQt5制作一个群发邮件工具
2022/04/08 Python