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

2019-06-14 admin

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

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

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

<template>
    <div class="modal-bg" v-show="show">
        <div class="modal-container">
            <div class="modal-header">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <button @click="hideModal">取消</button>
                <button @click="submit">确认</button>
            </div>
        </div>
    </div>
</template>

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

  • 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,我们在父组件里这样调用 (假设父组件和弹窗组件在同一文件夹下)。

<Modal :show="show" :title="title" @hideModal="hideModal" @submit="submit">
    <p>这里放弹窗的内容</p>
</Modal>
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,改造后变成这样。

<template>
    <div class="modal-bg" v-show="show">
        <div class="modal-container">
            <div class="modal-header">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>

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

功能

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

一个弹窗组件的拖拽一般通过三个事件来控制,分别是 mousedownmousemovemouseup

  • mousedown 用来获取鼠标点击时弹窗的坐标
  • mousemove 用来计算鼠标移动时弹窗的坐标
  • mouseup 取消弹窗的移动

先来看代码。

<template>
    <div class="modal-bg" v-show="show" @mouseup="cancelMove">
        <div class="modal-container" :class="position">
            <div class="modal-header" @mousedown="setStartingPoint" @mousemove="modalMove" @mouseup="cancelMove">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>

在弹窗的头部增加了三个事件 mousedownmousemovemouseup,用来控制弹窗移动(点击弹窗头部进行拖拽)。

    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
    }

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

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

<template>
    <div class="modal-bg" v-show="show" @mouseup="cancelMove">
        <div class="modal-container">
            <div class="modal-header" @mousedown="setStartingPoint" @mousemove="modalMove" @mouseup="cancelMove">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'modal',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            x: 0,
            y: 0,
            node: null,
            isCanMove: false
        }
    },
    mounted() {
        this.node = document.querySelector('.modal-container')
    },
    methods: {
        hideModal() {
            this.$emit('hideModal')
        },

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

        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
        }
    }
}
</script>
<style scoped>
.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10;
}
.modal-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.modal-header {
    height: 56px;
    background: #409EFF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 57px;
    border-top: 1px solid #ddd;
}
.modal-footer button {
    width: 100px;
}
.modal-main {
    padding: 15px 40px;
    font-size: 12px;
    color: #444;
}
</style>

[转载]原文链接:https://segmentfault.com/a/1190000019480688

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67284.html

文章标题:开发一个简单的 Vue 弹窗组件

相关文章
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
回到顶部