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 24 Javascript
javascript 写类方式之四
Jul 05 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
js实现简单的随机点名器
Sep 17 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/03/11 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Python简单生成随机姓名的方法示例
2017/12/27 Python
python中pika模块问题的深入探究
2018/10/13 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
python实现控制台输出颜色
2021/03/02 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
研究生自荐信
2013/10/09 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
创业资金计划书
2014/02/06 职场文书
公司费用报销管理制度
2015/08/04 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js