开发一个简单的 Vue 弹窗组件

hiyang 发布于2019-08-23 18:06 / 3447人阅读

摘要：取消确认现在弹窗组件的结构已经搭建出来了。另外还有两个方法，分别是点击取消和确认的回调函数，它们的作用是触发对应的事件。到这里，一个简单的弹窗组件已经完成了样式后面再说。一个弹窗组件的拖拽一般通过三个事件来控制，分别是。

更多文章

一个弹窗组件通常包含两个部分，分别是遮罩层和内容层。

遮罩层是背景层，一般是半透明或不透明的黑色。

内容层是放我们要展示的内容的容器。

现在弹窗组件的结构已经搭建出来了。

类 modal-bg: 遮罩层

类 modal-container: 内容层容器

类 modal-header: 内容层头部

类 modal-main: 内容层主体部分（用来展示内容）

类 modal-footer: 内容层脚部

属性 v-show: 控制弹窗的展示与关闭

属性 title: 标题

方法 hideModal: 点击取消的回调函数

方法 submit: 点击确认的回调函数

插槽 slot: 用来展示内容

定义完 HTML 结构，还得定义组件的 props 属性，用来接收父组件的传参，以方便在父组件通过属性来控制弹窗。

export default {
    name: "modal",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
    },
    methods: {
        hideModal() {
            this.$emit("hideModal")
        },

        submit() {
            this.$emit("submit")
        },
    }
}

从上述代码可知，组件只有两个 prop 属性，分别是 show（控制弹窗展示与关闭）和 title（弹窗标题）。
另外还有两个方法，分别是点击取消和确认的回调函数，它们的作用是触发对应的事件。
到这里，一个简单的弹窗组件已经完成了（样式后面再说）。

如何调用

一个组件写完了，要怎么调用呢？

假设这个组件的文件名为 Modal.vue，我们在父组件里这样调用（假设父组件和弹窗组件在同一文件夹下）。


    这里放弹窗的内容

import Modal from "./Modal.vue"
export default {
    data() {
      return {
        title: "弹窗标题",
        show: true,
      }
    },
    components: {
        Modal
    },
    methods: {
        hideModal() {
            // 取消弹窗回调
            this.show = false
        },

        submit() {
            // 确认弹窗回调
            this.show = false
        }
    }
}

把子组件要求的两个属性和两个方法都写上，现在来看看这个弹窗的效果。

一个简单的弹窗组件就这样完成了。

改进样式

现在市面上的 UI 库特别多，所以一些通用的组件样式不建议自己写，直接用现成的就好。在这个组件上，我们可以使用 element-ui，改造后变成这样。

嗯... 看起来只有两个按钮变化了，不过没关系，后面的内容部分肯定还有用得上的时候。

功能

看起来这个简单的弹窗组件真的是非常简单，我们可以在此基础上适当的增加一些功能，例如：拖拽。

一个弹窗组件的拖拽一般通过三个事件来控制，分别是 mousedown、mousemove、mouseup。

mousedown 用来获取鼠标点击时弹窗的坐标

mousemove 用来计算鼠标移动时弹窗的坐标

mouseup 取消弹窗的移动

先来看代码。

在弹窗上增加了三个事件 mousedown、mousemove、mouseup，用来控制弹窗移动（点击弹窗头部进行拖拽）。

    data() {
        return {
            x: 0, // 弹窗 X 坐标
            y: 0, // 弹窗 Y 坐标
            node: null, // 弹窗元素
            isCanMove: false // 是否能拖动弹窗
        }
    },
    mounted() {
        // 将弹窗元素赋值给 node
        this.node = document.querySelector(".modal-container")
    },
    setStartingPoint(e) {
        this.x = e.clientX - this.node.offsetLeft
        this.y = e.clientY - this.node.offsetTop
        this.isCanMove = true
    },

    modalMove(e) {
        if (this.isCanMove) {
            this.node.style.left = e.clientX - this.x + "px"
            this.node.style.top = e.clientY - this.y + "px"
        } 
    },

    cancelMove() {
        this.isCanMove = false
    }

通过这些新增的代码，这个弹窗就具有了拖拽的功能。

最后附上这个弹窗组件的完整代码

GPU云服务器云服务器 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104688.html

vue插件开发练习--实用弹窗

摘要：前言上回说了组件组件开发练习焦点图切换的一个练习项目，这次换下口味，说下的插件练手的项目。和组件开发的目录相比，区别就在于这个文件夹上。开发过程把项目跑起来首先，先弄这个组件。最后还需要一个变量，控制弹窗是否显示。 1.前言上回说了组件（vue组件开发练习--焦点图切换）的一个练习项目，这次换下口味，说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件，这个可能就更简单了，基...

muzhuyu 2019-08-22 11:06 评论0 收藏0
从Dialog管理谈到Vue渲染原理

摘要：在组件内，我们触及不到组件的模板，所以简单的在动态模板上添加并不能完成事件监听。简单来说，依赖收集是在渲染函数渲染的函数中进行的，在中一旦通过使用了这个变量，通过这个变量的就收集到了正在执行的渲染函数这一个依赖。作为一个中后台表单&表格工程师，经常需要在一个页面中处理多个弹窗。我自己的项目中，一个复杂的审核页面中的弹窗数量超过了30个，如何管理大量的弹窗就成为了一个需要考虑的问题。 ...

darkbug 2019-08-23 13:56 评论0 收藏0
关于 vue 弹窗组件的一些感想

摘要：最近是用开发了一套组件库在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是开发中必备的，使用频率相当高，最常见的莫过于，，这些曾经我们都会用来调试程序不同的组件库对于弹窗的处理也是不一样的。最近是用 vue 开发了一套组件库 vue-carbon , 在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是 web 开发中必备的，使用频率相...

idealcn 2019-08-22 10:36 评论0 收藏0
基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.

摘要：基于开发的插件包含仿照原生样式来源一些想法刚开始的时候想要用现成的弹窗组件来着但是查找一圈没有发现比较合适项目的所以才自己开发了一个包含四种并且可以单个引入的组件开发实际上比较简单有兴趣的可以看下源码实现步骤很清晰关于样式的问题是直接从魅 wc-messagebox 基于 vue 2.0 开发的插件包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

Darkgel 2019-08-21 11:41 评论0 收藏0
论如何用Vue实现一个弹窗-一个简单的组件实现

摘要：前言最近在使用框架，用到了对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。前言最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家...

xialong 2019-08-22 16:38 评论0 收藏0