自定义el-dialog头部实现最大化和最小化

UNIQUE1627098817

已于 2023-01-09 22:43:53 修改

阅读量1.3k

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2023-01-09 22:38:24 首次发布

本文链接：https://blog.csdn.net/UNIQUE1627098817/article/details/128622129

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

el-dialog本身只支持标题栏右上角有关闭按钮，故需要使用slot=“title” 重写覆盖原本的标题栏。

效果图：
在这里插入图片描述

组件代码：dialogHeader.vue

<template>
  <div class="header-title">
    <span class="title-name">{{ dialogTittle }}</span>
    <span
      style="float: right; margin-right: 44px; margin-top: 9px;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>