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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
vue计算属性及使用详解
Apr 02 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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中session跨子域的三种实现方法
2016/07/25 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
Prototype Class对象学习
2009/07/19 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python实用代码片段收集贴
2015/06/03 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python 私有函数的实例详解
2017/09/11 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python实现月食效果实例代码
2019/06/18 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python中qutip用法示例详解
2020/10/02 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
一套带网友答案的.NET笔试题
2016/12/06 面试题
优秀的毕业生的自我评价
2013/12/12 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Html5新增了哪些功能
2021/04/16 HTML / CSS
springboot读取nacos配置文件
2022/05/20 Java/Android