文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue dialog模态框的封装方法

2024-04-02 19:55

关注

前言

这个是基于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的封装。

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯