Vue dialog模态框的封装方法

 更新时间:2022年07月05日 16:27:57   作者:kanami154  
这篇文章主要为大家详细介绍了Vue dialog模态框的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

这个是基于vue2的模态框封装,仿照elementUI而写的组件。

效果如图

首先我们需要一个遮罩层

<template>
    <div class="myDialog">
        <div v-if="visable" class="dialog_mask" @click="close"></div>
    </div>
</template>
<style>
  .dialog_mask {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.418);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 122;
  }
</style>

然后是主体部分

<!-- 模态框内容部分 -->
      <div v-if="visable" class="dialog_window" @mousedown="moveDialog">
        <header>
          <!-- 传入的标题 -->
          <h5>{{ title }}</h5>
          <!-- x号关闭 -->
          <span @click="close">x</span>
        </header>
        <!-- 插槽插入中间的内容 -->
        <div class="ctx">
          <slot></slot>
        </div>
        <!-- 插槽插入底部按钮 -->
        <div class="footer">
          <slot name="footer"></slot>
        </div>
</div>

props传入的值

props: {
    visable: {  // 数据显示隐藏
      type: Boolean,
      default: false,
    },
    title: {  // 标题
      type: String,
    },
    move: {  // 是否可拖动
      type: Boolean,
      default: false,
    }
  },

对应的事件

methods: {
    close() {  // 关闭功能
      this.$emit("update:visable", false); // .sync修饰符  父子组件同步更新
      this.callBack(this.visable);
    },
    moveDialog(e) {  // 拖动
      if (!this.move) return false;
      let odiv = e.target;
 
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
 
      document.onmousemove = (e) => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
 
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    },
  },

以上就是dialog的封装。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 彻底搞懂Transition内置组件

    彻底搞懂Transition内置组件

    这篇文章主要为大家介绍了Transition内置组件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue源码中的检测方法的实现

    vue源码中的检测方法的实现

    这篇文章主要介绍了vue源码中的检测方法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3.0中setup中异步转同步的实现

    vue3.0中setup中异步转同步的实现

    这篇文章主要介绍了vue3.0中setup中异步转同步的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • VUE2.0+Element-UI+Echarts封装的组件实例

    VUE2.0+Element-UI+Echarts封装的组件实例

    下面小编就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中使用unity3D如何实现webGL将要呈现的效果

    vue中使用unity3D如何实现webGL将要呈现的效果

    这篇文章主要介绍了vue中使用unity3D如何实现webGL将要呈现的效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 关于vue的路由模式及修改方法

    关于vue的路由模式及修改方法

    这篇文章主要介绍了关于vue的路由模式及修改方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue后台项目如何使用router.addRoutes动态加入路由的思路

    vue后台项目如何使用router.addRoutes动态加入路由的思路

    这篇文章主要介绍了vue后台项目如何使用router.addRoutes动态加入路由的思路,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue的keep-alive用法技巧

    vue的keep-alive用法技巧

    在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码,需要的朋友们学习下。
    2019-08-08
  • vant 解决tab切换插件标题样式自定义的问题

    vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue 展示.md文件的方法详解

    Vue 展示.md文件的方法详解

    这篇文章主要介绍了Vue 展示.md文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05

最新评论