深色模式
Modal 模态框
简单模态框,对 el-dialog 进行了二次封装,提供了一些扩展功能。
基本用法
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
模态框宽高
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
加载中状态
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
隐藏操作栏
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
自定义操作栏
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
自定义按钮文本
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
嵌套模态框
点击查看代码
vue
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19