sf-dialog 对话框组件

sf-dialog 介绍

1.该组件是对el-dialog进行了二次封装；
2.该组件会从vuex中获取设备device的信息，如果当前使用的是手机，对话框会全屏显示，如果使用的是电脑，则会根据fullscreen属性值判断是否全屏显示；
3.该组件会通过provide传出一个isInDialog=“true”的数据，在该组件内嵌套使用的组件会通过inject接收到isInDialog，用来确定这些嵌套的组件是否为对话框组件的子组件；

注：本文只罗列出封装的一些属性/方法，其余为Element组件原生属性
参照Element-UI官方文档
https://element.eleme.cn/#/zh-CN/component/dialog

sf-dialog Attributes

sf-dialog 使用

<template>
  <div>
    <sf-card>
      <sf-button type="primary" @click="openDialog">sf-dialog组件</sf-button>
      <sf-dialog
        :visible="openDialogVisible"
        :title="title"
      >
        <sf-table>
          <el-table-column label="姓名"></el-table-column>
          <el-table-column label="年龄"></el-table-column>
          <el-table-column label="性别"></el-table-column>
        </sf-table>
      </sf-dialog>
    </sf-card>
  </div>
</template>
<script >
export default {
  data() {
    return {
      openDialogVisible: false,
      title: 'sf-dialog对话框'
    }
  },
  methods: {
    openDialog() {
      this.openDialogVisible = true
    }
  }
}
</script>

sf-table组件内接收isInDialog，并根据isInDialog的值确定表格的最大高度是多少，sf-table的部分js源码如下

<template>
   ...
</template>
 <script >
export default {
   inject: {
     isInDialog: {
       default: false
     }
   },
   computed: {
     calcTableHeight() {
       // 如果设置了最大高度 并且不是base 和 none
       if (this.maxHeight && !['base', 'none'].includes(this.maxHeight)) {
         return this.maxHeight
       }
       // 未设置最大高度 并且 在Dialog中 则不设置
       if (this.maxHeight === 'none' || (!this.maxHeight && this.isInDialog)) {
         return undefined
       }
       ...
       return undefined
     },
   }
 }
 </script>

打开dialog的按钮

对话框打开时的效果