温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue dialog模态框如何封装

发布时间:2022-07-06 09:26:30 来源:亿速云 阅读:182 作者:iii 栏目:开发技术

这篇“Vue dialog模态框如何封装”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue dialog模态框如何封装”文章吧。

效果如图

Vue dialog模态框如何封装

首先我们需要一个遮罩层

<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>
          <!-- 传入的标题 -->
          <h6>{{ title }}</h6>
          <!-- 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;
      };
    },
  },

以上就是关于“Vue dialog模态框如何封装”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI