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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Django发送html邮件的方法
2015/05/26 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
师范应届生教师求职信
2013/11/05 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
自我鉴定三原则
2014/01/13 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
小学开学标语
2014/07/01 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
java调用Restful接口的三种方法
2021/08/23 Java/Android