Vue 实现一个命令式弹窗组件功能

前言

在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件

涉及知识点:extend、$mount、$el

使用方式:

this.$Confirm({
 title:'自定义标题'
}).then(res=>{
  console.log(res)
})

目录结构

index.vue:组件布局、样式、交互逻辑

index.js:挂载组件、暴露方法

知识点

在此之前,了解下涉及的知识点

1. extend

使用这个api,可以将引入的vue组件变成vue构造函数,实例化后方便进行扩展

2. $mount

我们希望弹窗组件是在使用时才显示出来,那么就需要动态的向body中添加元素。使用$mount方法可以手动挂载一个vue实例,和 extend 刚好搭配使用,这个也是弹窗组件命令式的关键。

3. $el

既然要添加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 实现一个命令式弹窗组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • vue弹窗组件的实现示例代码

    vue弹窗组件的样子 我们先看一下,我们要实现出来的弹窗组件长什么样子: 呐,我们要用vue组件实现的弹窗就是这个样子,跟我们用js插件实现的效果一样,下面我们开始讲述怎么实现一个通用的vue弹窗组件. 实现vue弹窗组件需要的知识 是vue组件,当然最基础的是vue的知识,我假设大家是有一定vue功底的,然后你还需要了解: 1.vue的事件系统,vue组件间的单项数据流,props从父组件向子组件传递数据,子组件通过事件emit向父组件传递事件,父组件通过on监听子组件的事件来处理具体事务.

  • 很棒的vue弹窗组件

    弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-vue-modal-component

  • 关于vue.js弹窗组件的知识点总结

    首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层 关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale"> <!--省略其它内容--> </div> </template> <script&g

  • vue弹窗组件使用方法

    本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下 弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • vue的toast弹窗组件实例详解

    相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息

  • VUE实现可随意拖动的弹窗组件

    背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用. 由于不是很难,就不做过多解释了,直接上代码: <template> <el-container v-bind:id="id" v-if="dialogVisible">

  • Vue 实现一个命令式弹窗组件功能

    前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ title:'自定义标题' }).then(res=>{ console.log(res) }) 目录结构 index.vue:组件布局.样式.交互逻辑 index.js:挂载组件.暴露方法 知识点 在此之前,了解下涉及的知识点 1. extend 使用这个api,可以将引入的vue组件变成vue构造函数,

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • 基于cropper.js封装vue实现在线图片裁剪组件功能

    效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri

  • 在vue中封装的弹窗组件使用队列模式实现方法

    前言 由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器 什么是队列 队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue

  • vue实现自定义"模态弹窗"组件实例代码

    目录 前言 效果图 实例代码 总结 前言 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,下面来一起看看详细的实现过程. 效果图 以上截图,红色边框部分,表示 "文字.图标或者图片" 是可更改部分 实例代码 一.创建弹窗组件 quitDialog.vue 组件 <template> <transition-group name='fade'> <!-

  • 详解SpringBoot项目整合Vue做一个完整的用户注册功能

    目录 前言 1 实现用户注册流程 1.1 用户注册完整流程 1.2 用户注册信息及校验 2 后台接口设计 2.1 上传头像接口 2.2 用户注册接口 3 后端代码实现 3.1 用户头像上传接口编码实现 3.2 用户注册接口 4 前端代码实现 4.1 完成用户注册界面vue组件编码 4.2 工具类中增加校验方法 4.3 API文件中添加用户注册方法 4.4 全局方法中添加用户注册方法 4.5 路由列表中添加用户注册组件 4.6 登录组件中添加用户注册的跳转链接 4.7 路由跳转控制中添加白名单 5

  • vue圆环百分比进度条组件功能的实现

    有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二次传值则为执行递减动画 3.中间展示的百分比数字有缓动动画(速度同圆环进度动画一直) 4.动画完成时会触发动画完成回调 5.外部传值为圆环进度百分比(整数),圆环动画速度(整数) 效果如图所示: <template> <div class="percentloop">

  • vue实现一个单文件组件的完整过程记录

    目录 前言 单文件组件 基本概念 简单的loader 解析组件内容 注册组件 获取脚本内容 Data URI和Object URI 动态导入 实现 行为层 兼容性问题及其他 总结 前言 前端开发人员只要了解过vue.js框架可能都知道单文件组件.vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容.这是一个非常有用的解决方案,在浏览器网页中已经开始提倡这种机制.但是不幸的是,这个概念自从2017年8月被提出以来,到现在没有任何进展,像是已经要消亡了一样.然而,深入研究这个主题并试着使

  • vue实现一个简单的分页功能实例详解

    这是一个简单的分页功能,只能够前端使用,数据不能通过后台服务器进行更改,能容已经写死了. 下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下: 点击相应的按钮切换到对应的内容内容: 下面我只发核心代码,css样式就不发了,自己想怎么写怎么写 <!-- 分页内容 --> <ul class="blog-lists-box"> <

  • 基于vue实现探探滑动组件功能

    前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 ? 一. 功能分析 简单使用下探探会发现,堆叠滑动的功能很简单,用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠 图片第一张的滑动 条件成功后的滑出,条件失败后的回弹 滑出后下一张图片堆叠到顶部 体验优化 根据触摸点的不同,滑动时首图有不同角度偏移 偏移面积判定是否成功滑出 二. 具体实现 有了归纳好的功能点,我们实现

随机推荐