vue3自定义dialog、modal组件的方法

vue3-layer:基于Vue3.0开发的PC桌面端自定义对话框组件。

基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景,拥有10+种弹窗类型、30+种自定义参数配置、7+种弹窗动画效果,支持拖拽、缩放、最大化、全屏及自定义激活当前置顶层等功能。

前几天分享过一个Vue3.0移动端弹层组件V3Popup,如果感兴趣也可以去看看。

https://www.jb51.net/article/203415.htm

v3layer在开发设计之初灵感来自有赞Vant3.0、饿了么Element-Plus等组件化模式。

快速引入

在main.js中全局引入组件。

import { createApp } from 'vue'
import App from './App.vue'

// 引入Element-Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入弹窗组件v3layer
import V3Layer from './components/v3layer'

createApp(App).use(ElementPlus).use(V3Layer).mount('#app')

v3layer在调用上同样支持组件式+函数式两种方式。

组件写法

<v3-layer
 v-model="showAlert"
 title="标题信息"
 content="<div style='color:#f57b16;padding:30px;'>这里是内容信息!</div>"
 z-index="2030"
 lockScroll="false"
 xclose
 resize
 dragOut
 :btns="[
  {text: '取消', click: () => showAlert=false},
  {text: '确认', style: 'color:#f90;', click: handleConfirm},
 ]"
/>
 <template #content>自定义插槽内容信息!</template>
</v3-layer>

函数写法

let $el = v3layer({
 title: '标题信息',
 content: '<div style='color:#ff5252;padding:50px;'>这里是内容信息!</div>',
 shadeClose: false,
 zIndex: 2030,
 lockScroll: false,
 xclose: true,
 resize: true,
 dragOut: true,
 btns: [
  {text: '取消', click: () => { $el.close() }},
  {text: '确认', click: () => handleConfirm},
 ]
});

遵循极简的调用原则,只需输入参数配置即可快速调用弹窗,实现想要的效果。

参数配置

v3layer支持如下30+自定义参数配置,灵活搭配出各种效果。

|props参数|
v-model   是否显示弹框
id    弹窗唯一标识
title   标题
content   内容(支持String、带标签内容、自定义插槽内容)***如果content内容比较复杂,推荐使用标签式写法
type   弹框类型(toast|footer|actionsheet|actionsheetPicker|android|ios|contextmenu|drawer|iframe)
layerStyle  自定义弹窗样式
icon   toast图标(loading | success | fail)
shade   是否显示遮罩层
shadeClose  是否点击遮罩时关闭弹窗
lockScroll  是否弹窗出现时将body滚动锁定
opacity   遮罩层透明度
xclose   是否显示关闭图标
xposition  关闭图标位置(left | right | top | bottom)
xcolor   关闭图标颜色
anim   弹窗动画(scaleIn | fadeIn | footer | fadeInUp | fadeInDown | fadeInLeft | fadeInRight)
position  弹出位置(auto | ['100px','50px'] | t | r | b | l | lt | rt | lb | rb)
drawer   抽屉弹窗(top | right | bottom | left)
follow   跟随元素定位弹窗(支持元素.kk #kk 或 [e.clientX, e.clientY])
time   弹窗自动关闭秒数(1、2、3)
zIndex   弹窗层叠(默认8080)
teleport  指定挂载节点(默认是挂载组件标签位置,可通过teleport自定义挂载位置) teleport="body | #xxx | .xxx"
topmost   置顶当前窗口(默认false)
area   弹窗宽高(默认auto)设置宽度area: '300px' 设置高度area:['', '200px'] 设置宽高area:['350px', '150px']
maxWidth  弹窗最大宽度(只有当area:'auto'时,maxWidth的设定才有效)
maximize  是否显示最大化按钮(默认false)
fullscreen  全屏弹窗(默认false)
fixed   弹窗是否固定
drag   拖拽元素(可定义选择器drag:'.xxx' | 禁止拖拽drag:false)
dragOut   是否允许拖拽到窗口外(默认false)
lockAxis  限制拖拽方向可选: v 垂直、h 水平,默认不限制
resize   是否允许拉伸尺寸(默认false)
btns   弹窗按钮(参数:text|style|disabled|click)
++++++++++++++++++++++++++++++++++++++++++++++
|emit事件触发|
success   层弹出后回调(@success="xxx")
end    层销毁后回调(@end="xxx")
++++++++++++++++++++++++++++++++++++++++++++++
|event事件|
onSuccess  层打开回调事件
onEnd   层关闭回调事件

v3layer弹窗模板及逻辑处理。

<template>
 <div ref="elRef" v-show="opened" class="vui__layer" :class="{'vui__layer-closed': closeCls}" :id="id">
  <!-- //蒙版 -->
  <div v-if="JSON.parse(shade)" class="vlayer__overlay" @click="shadeClicked" :style="{opacity}"></div>
  <div class="vlayer__wrap" :class="['anim-'+anim, type&&'popui__'+type, tipArrow]" :style="[layerStyle]">
   <div v-if="title" class="vlayer__wrap-tit" v-html="title"></div>
   <div v-if="type=='toast'&&icon" class="vlayer__toast-icon" :class="['vlayer__toast-'+icon]" v-html="toastIcon[icon]"></div>
   <div class="vlayer__wrap-cntbox">
    <!-- 判断插槽是否存在 -->
    <template v-if="$slots.content">
     <div class="vlayer__wrap-cnt"><slot name="content" /></div>
    </template>
    <template v-else>
     <template v-if="content">
      <iframe v-if="type=='iframe'" scrolling="auto" allowtransparency="true" frameborder="0" :src="content"></iframe>
      <!-- message|notify|popover -->
      <div v-else-if="type=='message' || type=='notify' || type=='popover'" class="vlayer__wrap-cnt">
       <i v-if="icon" class="vlayer-msg__icon" :class="icon" v-html="messageIcon[icon]"></i>
       <div class="vlayer-msg__group"><div v-if="title" class="vlayer-msg__title" v-html="title"></div><div v-html="content"></div></div>
      </div>
      <div v-else class="vlayer__wrap-cnt" v-html="content"></div>
     </template>
    </template>
    <slot />
   </div>
   <div v-if="btns" class="vlayer__wrap-btns">
    <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" @click="btnClicked($event,index)" v-html="btn.text"></span>
   </div>
   <span v-if="xclose" class="vlayer__xclose" :class="!maximize&&xposition" :style="{'color': xcolor}" @click="close"></span>
   <span v-if="maximize" class="vlayer__maximize" @click="maximizeClicked($event)"></span>
   <span v-if="resize" class="vlayer__resize"></span>
  </div>
  <!-- 优化拖拽卡顿 -->
  <div class="vlayer__dragfix"></div>
 </div>
</template>

/**
 * @Desc  Vue3.0桌面端弹窗组件V3Layer
 * @Time  andy by 2021-1
 * @About Q:282310962 wx:xy190310
 */
<script>
 import { onMounted, onUnmounted, ref, reactive, watch, toRefs, nextTick } from 'vue'
 import domUtils from './utils/dom.js'
 // 索引,蒙层控制,定时器
 let $index = 0, $locknum = 0, $timer = {}, $closeTimer = null
 export default {
  props: {
   // ...
  },
  emits: [
   'update:modelValue'
  ],
  setup(props, context) {
   const elRef = ref(null);

   const data = reactive({
    opened: false,
    closeCls: '',
    toastIcon: {
     // ...
    },
    messageIcon: {
     // ...
    },
    vlayerOpts: {},
    tipArrow: null,
   })

   onMounted(() => {
    if(props.modelValue) {
     open();
    }
    window.addEventListener('resize', autopos, false);
   })

   onUnmounted(() => {
    window.removeEventListener('resize', autopos, false);
    clearTimeout($closeTimer);
   })

   // 监听弹层v-model
   watch(() => props.modelValue, (val) => {
    // console.log('V3Layer is now [%s]', val ? 'show' : 'hide')
    if(val) {
     open();
    }else {
     close();
    }
   })

   // 打开弹窗
   const open = () => {
    if(data.opened) return;
    data.opened = true;
    typeof props.onSuccess === 'function' && props.onSuccess();

    const dom = elRef.value;
    // 弹层挂载位置
    if(props.teleport) {
     nextTick(() => {
      let teleportNode = document.querySelector(props.teleport);
      teleportNode.appendChild(dom);

      auto();
     })
    }

    callback();
   }

   // 关闭弹窗
   const close = () => {
    if(!data.opened) return;

    let dom = elRef.value;
    let vlayero = dom.querySelector('.vlayer__wrap');
    let ocnt = dom.querySelector('.vlayer__wrap-cntbox');
    let omax = dom.querySelector('.vlayer__maximize');

    data.closeCls = true;
    clearTimeout($closeTimer);
    $closeTimer = setTimeout(() => {
     data.opened = false;
     data.closeCls = false;
     if(data.vlayerOpts.lockScroll) {
      $locknum--;
      if(!$locknum) {
       document.body.style.paddingRight = '';
       document.body.classList.remove('vui__body-hidden');
      }
     }
     if(props.time) {
      $index--;
     }
     // 清除弹窗样式
     vlayero.style.width = vlayero.style.height = vlayero.style.top = vlayero.style.left = '';
     ocnt.style.height = '';
     omax && omax.classList.contains('maximized') && omax.classList.remove('maximized');

     data.vlayerOpts.isBodyOverflow && (document.body.style.overflow = '');

     context.emit('update:modelValue', false);
     typeof props.onEnd === 'function' && props.onEnd();
    }, 200)
   }

   // 弹窗位置
   const auto = () => {
    // ...

    autopos();

    // 全屏弹窗
    if(props.fullscreen) {
     full();
    }

    // 弹窗拖动|缩放
    move();
   }

   const autopos = () => {
    if(!data.opened) return;
    let oL, oT
    let pos = props.position;
    let isFixed = JSON.parse(props.fixed);
    let dom = elRef.value;
    let vlayero = dom.querySelector('.vlayer__wrap');

    if(!isFixed || props.follow) {
     vlayero.style.position = 'absolute';
    }

    let area = [domUtils.client('width'), domUtils.client('height'), vlayero.offsetWidth, vlayero.offsetHeight]

    oL = (area[0] - area[2]) / 2;
    oT = (area[1] - area[3]) / 2;

    if(props.follow) {
     offset();
    }else {
     typeof pos === 'object' ? (
      oL = parseFloat(pos[0]) || 0, oT = parseFloat(pos[1]) || 0
     ) : (
      pos == 't' ? oT = 0 :
      pos == 'r' ? oL = area[0] - area[2] :
      pos == 'b' ? oT = area[1] - area[3] :
      pos == 'l' ? oL = 0 :
      pos == 'lt' ? (oL = 0, oT = 0) :
      pos == 'rt' ? (oL = area[0] - area[2], oT = 0) :
      pos == 'lb' ? (oL = 0, oT = area[1] - area[3]) :
      pos == 'rb' ? (oL = area[0] - area[2], oT = area[1] - area[3]) :
      null
     )

     vlayero.style.left = parseFloat(isFixed ? oL : domUtils.scroll('left') + oL) + 'px';
     vlayero.style.top = parseFloat(isFixed ? oT : domUtils.scroll('top') + oT) + 'px';
    }
   }

   // 元素跟随定位
   const offset = () => {
    let oW, oH, pS
    let dom = elRef.value
    let vlayero = dom.querySelector('.vlayer__wrap');

    oW = vlayero.offsetWidth;
    oH = vlayero.offsetHeight;
    pS = domUtils.getFollowRect(props.follow, oW, oH);
    data.tipArrow = pS[2];

    vlayero.style.left = pS[0] + 'px';
    vlayero.style.top = pS[1] + 'px';
   }

   // 最大化弹窗
   const full = () => {
    // ...
   }

   // 恢复弹窗
   const restore = () => {
    let dom = elRef.value;
    let vlayero = dom.querySelector('.vlayer__wrap');
    let otit = dom.querySelector('.vlayer__wrap-tit');
    let ocnt = dom.querySelector('.vlayer__wrap-cntbox');
    let obtn = dom.querySelector('.vlayer__wrap-btns');
    let omax = dom.querySelector('.vlayer__maximize');

    let t = otit ? otit.offsetHeight : 0
    let b = obtn ? obtn.offsetHeight : 0

    if(!data.vlayerOpts.lockScroll) {
     data.vlayerOpts.isBodyOverflow = false;
     document.body.style.overflow = '';
    }

    props.maximize && omax.classList.remove('maximized')

    vlayero.style.left = parseFloat(data.vlayerOpts.rect[0]) + 'px';
    vlayero.style.top = parseFloat(data.vlayerOpts.rect[1]) + 'px';
    vlayero.style.width = parseFloat(data.vlayerOpts.rect[2]) + 'px';
    vlayero.style.height = parseFloat(data.vlayerOpts.rect[3]) + 'px';
   }

   // 拖动|缩放弹窗
   const move = () => {
    // ...
   }

   // 事件处理
   const callback = () => {
    // 倒计时关闭
    if(props.time) {
     $index++
     // 防止重复点击
     if($timer[$index] !== null) clearTimeout($timer[$index])
     $timer[$index] = setTimeout(() => {
      close();
     }, parseInt(props.time) * 1000)
    }
   }

   // 点击最大化按钮
   const maximizeClicked = (e) => {
    let o = e.target
    if(o.classList.contains('maximized')) {
     // 恢复
     restore();
    } else {
     // 最大化
     full();
    }
   }
   // 点击遮罩层
   const shadeClicked = () => {
    if(JSON.parse(props.shadeClose)) {
     close();
    }
   }
   // 按钮事件
   const btnClicked = (e, index) => {
    let btn = props.btns[index]
    if(!btn.disabled) {
     typeof btn.click === 'function' && btn.click(e)
    }
   }

   return {
    ...toRefs(data),
    elRef,
    close,
    maximizeClicked,
    shadeClicked,
    btnClicked,
   }
  }
 }
</script>

大家如果感兴趣,可以在此基础上自行定制一些想要的效果。

另外,v3layer组件支持自定义拖拽区域 (drag:'class或id'),是否拖动到窗口外 (dragOut:true)。支持iframe弹窗类型 (type:'iframe')。

当配置 topmost:true 则会将当前活动窗口置顶显示。

好了,基于vue3.x开发自定义弹窗组件就介绍到这里。希望大家能喜欢~~💪🏻

到此这篇关于vue3自定义dialog、modal组件的方法的文章就介绍到这了,更多相关vue 自定义dialog、modal组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示 分析:当点击btn时,modal框的确弹出来了,但

  • vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • 手写Vue弹窗Modal的实现代码

    Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解.这篇文章我会从实践出发,遇到一些知识点会顺带总结一下.文章很长,一次看不完可以先收藏,如果你刚入门vue,那么相信这篇文章对你以后

  • vue3自定义dialog、modal组件的方法

    vue3-layer:基于Vue3.0开发的PC桌面端自定义对话框组件. 基于vue3构建的PC网页端自定义弹出框组件.全面覆盖各种弹窗应用场景,拥有10+种弹窗类型.30+种自定义参数配置.7+种弹窗动画效果,支持拖拽.缩放.最大化.全屏及自定义激活当前置顶层等功能. 前几天分享过一个Vue3.0移动端弹层组件V3Popup,如果感兴趣也可以去看看. https://www.jb51.net/article/203415.htm v3layer在开发设计之初灵感来自有赞Vant3.0.饿了么E

  • Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • C/C++ Qt 自定义Dialog对话框组件应用案例详解

    在上一篇文章 <C/C++ Qt 标准Dialog对话框组件应用> 中我给大家演示了如何使用Qt中内置的标准对话框组件实现基本的数据输入功能. 但有时候我们需要一次性修改多个数据,使用默认的模态对话框似乎不太够用,此时我们需要自己创建一个自定义对话框,这类对话框也是一种窗体,所以可以在其上面放置任何的通用组件,以实现更多复杂的开发需求. 目前自定义对话框与主窗体的通信有两种方式,一种是通过函数实现通信,另一种则是通过信号实现通信,我们以通过函数通信为基础,解释一下如何实现跨窗体通信. 首先需要

  • Angular使用cli生成自定义文件、组件的方法

    不得不说,和传统的复制黏贴来创建组件的方法相比,使用angular-cli的脚手架功能来创建模块.组件显得非常高效,不仅仅有了创建了文件,还包含了一些必须的代码,同时也将组件导入了最近的模块,一些重复性工作就使用cli可以节省掉.angular提供了丰富的文件类型,但是总归是有些我们自己的项目需要,我们需要创建自定义后缀的组件,这时候就不得不舍弃cli了,那么能不能使用自定义的方式来达到脚手架创建呢? angular 脚手架创建的方式 我们首先来看看angular-cli提供的一些命令是怎么创建

  • vue自定义翻页组件的方法

    本文实例为大家分享了vue自定义翻页组件的具体代码,供大家参考,具体内容如下 效果图如下: 1.在components建立page.vue文件 <template>     <div class="pagination">         <!-- 上 -->         <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">

  • vue3.0翻牌数字组件使用方法详解

    本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码,供大家参考,具体内容如下 代码 <template>   <div class="number-count-wrap" :class="numberSize">     <!-- 标题 start -->     <div class="number-title" :style="{'text-align': titleAlign}&q

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class

  • 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框

    本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,代码

  • Android编程自定义Dialog的方法分析

    本文实例讲述了Android编程自定义Dialog的方法.分享给大家供大家参考,具体如下: 功能: android 提供给我们的只有2种Dialog 即 AlertDialog & ProgressDialog 但是 Dialog 有其自身的特点:1. 不是 Activity 2. 开销比 Activity 小得多 鉴于以上的优点 我们就有定制自己Dialog 的需求 原理: 1. android 系统提供了一个class: Dialog. 而且你可以把自己的工作放在"protected

  • vue.js Table 组件自定义列宽实现核心方法

    目录 前言 colgroup 和 col 核心实现 一些常量/变量定义 初始化表头列表 initColumns 处理含有固定宽度和最小宽的列 获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新 前言 如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如: <!-- Element UI --> <el-table-column prop="date" l

随机推荐