vue实现模态框的通用写法

亦凉 2022-06-08 03:15 219阅读 0赞

> 在看了element组件的源码后发现，所有模态框其实实现方法都差不多，主要用到了vue在组件化上的双向绑定。代码：

<template lang="html">
      <transition name="el-fade-in-linear">
        <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
          <div class="g-dialog-header">
            <div class="left">
              模态框
            </div>
            <div class="right">
              <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i>
            </div>
          </div>
          <div class="g-dialog-container">
    
          </div>
        </div>
      </transition>
    </template>
    
    <script> export default { props: { visible: Boolean }, created() { }, data() { return { myVisible: this.visible, }, computed: {}, methods: { }, components: {}, watch: { myVisible: function (val) { this.$emit('update:visible', val) }, visible: function (val) { this.myVisible = val } } } </script>
    
    <style lang="css" scoped> </style>

上面代码主要的部分是watch里面的代码，实现监听数据变化，及时更新。所以在使用的时候就很方便了，在component注册组件之后：

<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>

> 注：这里必须使用sync，要不是无法双向绑定的

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 模态框的使用

vue模态框使用： Vue模态框可以使用多种方式实现，以下是其中一种基于Vue.js和Bootstrap的实现方式： 1.引入Bootstrap的CSS和JS文件到V

喜欢ヅ旅行/ 2023年10月04日 23:03/ 0 赞/ 18 阅读

相关 vue 嵌套增删改+模态框

![在这里插入图片描述][20200902102145218.gif_pic_center] 效果如上，代码如下： <!DOCTYPE html> <ht

水深无声/ 2022年12月03日 08:37/ 0 赞/ 50 阅读

相关 ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）

用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法父页面完全接管子页面（利于子页面复用）父页面代码

心已赠人/ 2022年11月03日 04:12/ 0 赞/ 267 阅读

相关用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实

系统管理员/ 2022年09月26日 11:55/ 0 赞/ 184 阅读

相关模态框缓冲效果实现

项目模态框是通过ajax异步来获得数据的，这就造成一个问题，当请求过多或数据量太大，数据展现的不是很及时，用户体验不是很好。于是想到通过缓冲效果来增强用户体验。步骤：

客官°小女子只卖身不卖艺/ 2022年07月13日 00:45/ 0 赞/ 166 阅读

相关 vue实现模态框的通用写法

> 在看了element组件的源码后发现，所有模态框其实实现方法都差不多，主要用到了vue在组件化上的双向绑定。代码：  <tem

亦凉/ 2022年06月08日 03:15/ 0 赞/ 220 阅读

相关 Vue sweet-modal-vue 通用型的模态框

场景组件介绍 && 优势安装用法备注用

浅浅的花香味﹌/ 2022年05月17日 05:14/ 0 赞/ 174 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 286 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 400 阅读

相关 Jsp自定义tag标签实现通用模态框

一、自定义tag标签的好处：程序员可以自定义一些特定功能的标签, 用来达到封装代码, 分工, 重用性等多种好处. 二、需求多处需要使用模态框，信息提示、警告、删除确...

亦凉/ 2021年04月27日 15:20/ 0 赞/ 652 阅读