Element ui dialog弹窗最大化最小化关闭组件封装

简介: 封装一个最大化最小化关闭的dialog弹窗组件
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

注:往往项目上有些弹窗就会被要求可最大化最小化操作,所以今天封装了一个弹窗最大化最小化关闭的一个组件封装,废话不多说,下面直接上代码了:

首先封装一个最大化最小化关闭的dialogHeader子组件

<!--最大化最小化组件封装-->
<template>
  <div class="header-title">
      <span class="title-name">{{ dialogTittle }}</span>
      <span 
          style="float: right; color: #909399; cursor: pointer;" 
          class="el-icon-close" 
          @click="() => closed"></span>
      <span 
          style="float: right; margin-right: 10px; color:#909399; cursor: pointer;" 
          :class="flodIconClass"
          @click="() => isFullscreen"></span>
  </div>
</template>

<script>
export default {
  props: {
    dialogTittle: {
        type: String,
        default: () => ''
    },
    fullscreen: {
        type: Boolean,
        default: () => false
    }
  },
  data () {
    return {
      header_box: {
          'display': 'flex',
          'align-items': 'center'
      }
    }
  },
  computed: {
      flodIconClass() {
          return this.fullscreen ? 'el-icon-full-screen' : 'el-icon-copy-document';
      },
      isFullscreen() {
          this.$emit('is-fullscreen', !this.fullscreen);
      },
      closed() {
          this.$emit('handle-closed', 2)
      }
  },
  created() {
  
  },
  methods: {
      
  },
  mounted() {
    
  },
}
</script>

dialogHeaderpage主页面引用dialogHeader子组件使用

<template>
  <div class="hello">
    <el-button type="primary" size="small" @click="addProject">新增项目</el-button>
    <el-dialog title="新增" :class="isFullscreen ? '' : 'dialogClass_his'"
        custom-class="handleDialogClass" width="73.4%" :fullscreen="isFullscreen" v-if="dialogVisible_add"
        :visible.sync="dialogVisible_add" :show-close="false" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <dialog-header slot="title" dialog-tittle="新增" :fullscreen="isFullscreen" @handle-closed="dialogClose"
            @is-fullscreen="onFullscreen"></dialog-header>
        <div>弹窗内容</div>
    </el-dialog>
  </div>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
export default {
  components:{
      'dialog-header':dialogHeader,
  },
  data () {
    return {
      dialogVisible_add: false,
      isFullscreen: false,
    }
  },
  methods: {
    //弹出弹窗显示
    addProject(){
      this.dialogVisible_add = true;
    },
    //是否为全屏函数
    onFullscreen(fullscreen) {
        this.isFullscreen = fullscreen;
    },
    //关闭事件
    dialogClose() {
        this.dialogVisible_add = false;
    },
  },
  mounted() {

  },
}
</script>

注:

custom-class: Dialog 的自定义类名(string)

fullscreen:是否为全屏 Dialog(boolean)

show-close:是否显示关闭按钮(boolean)

close-on-click-modal: 是否可以通过点击 modal 关闭 Dialog(boolean)

close-on-press-escape: 是否可以通过按下 ESC 关闭 Dialog(boolean)

效果图如下:

image.png

image.png

文章首发掘金,未经允许禁止转载~~\
具体效果可以直接复制代码到本地看哦~ 欢迎阅读点赞给个支持⭐️⭐️⭐️
目录
相关文章
|
3月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
116 4
|
3月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
166 1
|
18天前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
223 0
|
2月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
317 12
|
2月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
765 0
|
3月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
391 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
468 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
9月前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
392 38
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
|
7月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
864 1

热门文章

最新文章