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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python修改字典键(key)的方法
2019/08/05 Python
python使用Geany编辑器配置方法
2020/02/21 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
银行类自荐信
2014/02/04 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
五年级学生期末评语
2014/12/26 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
frg-100简单操作(设置)说明
2022/04/05 无线电