recreational-centre-master-mini/src/components/full-dialog/index.vue

<script setup>
import { computed } from 'vue'
import { ArrowLeftBold } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: Boolean,
  title: String,
  closeTitle: String,
  tabs: Array,
  tabsDefalut: [String, Number]
})
const emit = defineEmits(['update:modelValue', 'update:tabsDefalut'])
const show = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const tabsVal = computed({
  get() {
    return props.tabsDefalut
  },
  set(value) {
    emit('update:tabsDefalut', value)
  }
})
const close = () => {
  show.value = false
}
const tabClick = () => { }
</script>

<template>
  <div class="full-dialog-container" v-show="show">
    <div class="dia-header">
      <div class="dia-title" v-if="title && !tabs">{{ title }}</div>
      <el-tabs v-if="tabs" v-model="tabsVal" @tab-click="tabClick">
        <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <el-button plain type="primary" @click="close">
        <el-icon><ArrowLeftBold /></el-icon> <span>{{ closeTitle || '返回' }}</span> </el-button>
    </div>
    <div class="dia-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.full-dialog-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 900;
  border-radius: 10px;

  :deep(.el-tabs) {
    margin: 0;
  }

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }

  .dia-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    height: 60px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .dia-title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .dia-content {
    height: calc(100% - 60px);
    margin-top: 60px;
    overflow: auto;
    padding: 20px;
  }
}
</style>