Modal 模态框

简单模态框，对 el-dialog 进行了二次封装，提供了一些扩展功能。

基本用法

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="基本模态框" @ok="(done: Function) => done()">
    <div>基本模态框</div>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

模态框宽高

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="指定宽高" width="600px" height="450px" @ok="(done: Function) => done()">
    <div>指定模态框宽高</div>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

加载中状态

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="加载中状态" height="500px" :loading="modalLoading" @open="handleOpen" @ok="(done: Function) => done()">
    <div>模态框加载中状态</div>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
  const modalLoading = ref(false);

  const handleOpen = () => {
    modalLoading.value = true;
    setTimeout(() => {
      modalLoading.value = false;
    }, 1500);
  };
</script>

隐藏操作栏

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="隐藏操作栏" height="450px" :footer="false" @ok="(done: Function) => done()">
    <div>隐藏模态框操作栏</div>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

自定义操作栏

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="自定义操作栏" @ok="(done: Function) => done()">
    <div>自定义模态框操作栏</div>

    <template #footer>
      <el-button type="primary" @click="modalVisible = false">自定义按钮</el-button>
    </template>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

自定义按钮文本

点击查看代码

<template>
  <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="modalVisible" title="自定义按钮文本" cancelText="关 闭" okText="保 存" @ok="(done: Function) => done()">
    <div>自定义模态框操作按钮文本</div>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

嵌套模态框

点击查看代码

<template>
  <el-button type="primary" @click="outerModalVisible = true">点击打开模态框</el-button>

  <s-modal v-model="outerModalVisible" title="外部模态框" @ok="(done: Function) => done()">
    <div style="margin-bottom: 1rem;">外部模态框</div>
    <el-button type="primary" @click="innerModalVisible = true">打开内部模态框</el-button>

    <s-modal v-model="innerModalVisible" title="内部模态框" @ok="(done: Function) => done()">
      <div>内部模态框</div>
    </s-modal>
  </s-modal>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const outerModalVisible = ref(false);
  const innerModalVisible = ref(false);
</script>

Props

Slots

Emits