深色模式
ModalForm 模态框表单
模态框表单，对 s-modal 及 el-form 进行了二次封装，用于快速创建数据编辑表单。
基本用法
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="基本模态框表单" :model="modalForm" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const handleOk = (done: Function) => {
console.log(modalForm);
done && done();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
表单校验
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="模态框表单校验" :model="modalForm" :rules="modalFormRules" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const modalFormRules = reactive({
name: [ { required: true, message: "请输入姓名", trigger: "blur" } ],
sex: [ { required: true, message: "请选择性别", trigger: "blur" } ]
});
const handleOk = (done: Function) => {
console.log(modalForm);
done && done();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
加载中状态
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="模态框表单加载中状态" :loading="modalFormLoading" :model="modalForm"
@open="handleOpen" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalFormLoading = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const handleOpen = () => {
modalFormLoading.value = true;
setTimeout(() => {
modalFormLoading.value = false;
}, 1500);
};
const handleOk = (done: Function) => {
console.log(modalForm);
modalFormLoading.value = true;
setTimeout(() => {
modalFormLoading.value = false;
done && done();
}, 1500);
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
关闭后重置表单
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="模态框关闭后重置表单" :model="modalForm" resetOnClosed @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { cloneDeep } from "lodash";
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const handleOk = (done: Function) => {
console.log(cloneDeep(modalForm), modalForm);
done && done();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
自定义模态框
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="自定义模态框" :model="modalForm" :extModal="customModalProps" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const customModalProps = reactive({
bodyStyle: { paddingRight: "4rem" },
alignCenter: true
});
const handleOk = (done: Function) => {
console.log(modalForm);
done && done();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
自定义表单
点击查看代码
vue
<template>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form v-model="modalVisible" title="自定义表单" :model="modalForm" :extForm="customFormProps" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const modalVisible = ref(false);
const modalForm = reactive({
name: undefined,
sex: undefined
});
const customFormProps = reactive({
labelWidth: 50,
showColon: true
});
const handleOk = (done: Function) => {
console.log(modalForm);
done && done();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34