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 相关文章推荐
JavaScript 学习历程和心得分享
Dec 12 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
python类和继承用法实例
2015/07/07 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python实现网站表单提交和模板
2019/01/15 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
财务简历的自我评价
2014/03/05 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
辣妈辣妹观后感
2015/06/10 职场文书