深色模式
ModalInput 模态输入框
带有模态框的输入框,对 el-input 及 s-modal 进行了二次封装,用于设置复杂类型数据。
基本用法
点击查看代码
vue
<template>
<s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
@open="handleModalOpen" @ok="handleModalOk">
<s-form :model="modalForm">
<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-form>
</s-modal-input>
</template>
<script setup lang="ts">
import { cloneDeep } from "lodash";
import { ref } from "vue";
const inputValue = ref<Record<string, any>>({});
const modalForm = ref<Record<string, any>>({});
const handleModalOpen = () => {
modalForm.value = cloneDeep(inputValue.value);
};
const handleModalOk = (done: Function) => {
inputValue.value = cloneDeep(modalForm.value);
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
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
文本域模式
点击查看代码
vue
<template>
<s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
textarea @open="handleModalOpen" @ok="handleModalOk">
<s-form :model="modalForm">
<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-form>
</s-modal-input>
</template>
<script setup lang="ts">
import { cloneDeep } from "lodash";
import { ref } from "vue";
const inputValue = ref<Record<string, any>>({});
const modalForm = ref<Record<string, any>>({});
const handleModalOpen = () => {
modalForm.value = cloneDeep(inputValue.value);
};
const handleModalOk = (done: Function) => {
inputValue.value = cloneDeep(modalForm.value);
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
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
自定义模态框
点击查看代码
vue
<template>
<s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
:extModal="extModalProps" @open="handleModalOpen" @ok="handleModalOk">
<s-form ref="modalFormRef" :model="modalForm">
<s-form-item label="姓名" prop="name" :rules="[ { required: true, message: '请输入姓名', trigger: 'blur' } ]">
<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-form>
</s-modal-input>
</template>
<script setup lang="ts">
import { cloneDeep } from "lodash";
import { ref } from "vue";
const modalFormRef = ref();
const inputValue = ref<Record<string, any>>({});
const modalForm = ref<Record<string, any>>({});
const extModalProps = ref<Record<string, any>>({
width: 600,
loading: false,
destroyOnClose: true
});
const handleModalOpen = () => {
Object.assign(extModalProps.value, {
loading: true
});
setTimeout(() => {
modalForm.value = cloneDeep(inputValue.value);
Object.assign(extModalProps.value, {
loading: false
});
}, 500);
};
const handleModalOk = (done: Function) => {
modalFormRef.value?.validate((valid: boolean) => {
if (!valid) return;
Object.assign(extModalProps.value, {
loading: true
});
setTimeout(() => {
inputValue.value = cloneDeep(modalForm.value);
done && done();
Object.assign(extModalProps.value, {
loading: false
});
}, 500);
});
};
</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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58