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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <template>
| <div class="scope">
| <div class="h">
| <el-tag size="small" effect="dark" disable-transitions>component</el-tag>
| <span>组件渲染</span>
| </div>
|
| <div class="c">
| <el-button @click="open">预览</el-button>
| <demo-code
| :files="[
| 'form/component/index.vue',
| 'form/component/select-labels.vue',
| 'form/component/select-status.vue',
| 'form/component/select-work.vue',
| 'form/component/select-work2.vue'
| ]"
| />
|
| <!-- 自定义表单组件 -->
| <cl-form ref="Form">
| <!-- 年龄插槽 -->
| <template #slot-age="{ scope }">
| <!-- scope 为表单值 -->
| <el-input-number v-model="scope.age" :min="18" :max="100"></el-input-number>
| </template>
| </cl-form>
| </div>
|
| <div class="f">
| <span class="date">2024-01-01</span>
| </div>
| </div>
| </template>
|
| <script setup lang="ts">
| import { useForm } from '@cool-vue/crud';
| import { ElMessage } from 'element-plus';
| import SelectWork from './select-work2.vue';
| import SelectLabels from './select-labels.vue';
| import SelectStatus from './select-status.vue';
|
| const Form = useForm();
|
| function open() {
| Form.value?.open({
| title: '组件配置',
|
| items: [
| {
| label: '昵称',
| prop: 'name',
| // 组件配置方式1：标签名（方便，但是不建议组件全局注册）
| value: '神仙',
| component: {
| // 必须是“全局注册”的组件名，如 element-plus 的 el-input、el-date-picker 等
| name: 'el-input'
| }
| },
| {
| label: '手机号',
| prop: 'phone',
| value: '13255022000',
| component: {
| name: 'el-input',
| // 自定义插槽
| slots: {
| prepend() {
| return '+86';
| }
| }
| }
| },
| {
| label: '年龄',
| prop: 'age',
| // 组件配置方式2：插槽（万能，就是代码多写点）
| value: 18,
| component: {
| // 必须是 "slot-" 开头
| name: 'slot-age'
| }
| },
| // -- start 组件配置方式3：组件实例（不想全局注册，但又想组件化）
| {
| label: '工作',
| prop: 'work',
| value: '设计',
| component: {
| // 双向绑定
| vm: SelectWork
| }
| },
| {
| label: '标签',
| prop: 'labels',
| value: ['多金', '深情'],
| component: {
| // scope[prop]绑定
| vm: SelectLabels
| }
| },
| {
| label: '状态',
| prop: 'status',
| value: 1,
| component: {
| // useForm 绑定
| vm: SelectStatus
| }
| }
| // -- end
| ],
| on: {
| submit(data, { close }) {
| ElMessage.info(
| `${data.name || '无名'}（${data.age || 18}岁）工作：${data.work || '无'}`
| );
| close();
| }
| }
| });
| }
| </script>
|
|
