提交 | 用户 | age
|
c0e4c9
|
1 |
<template> |
31ff05
|
2 |
<PageWrapper title="富文本嵌入表单示例"> |
c0e4c9
|
3 |
<CollapseContainer title="富文本表单"> |
J |
4 |
<BasicForm |
|
5 |
:labelWidth="100" |
|
6 |
:schemas="schemas" |
|
7 |
:actionColOptions="{ span: 24 }" |
|
8 |
@submit="handleSubmit" |
|
9 |
> |
|
10 |
</BasicForm> |
|
11 |
</CollapseContainer> |
31ff05
|
12 |
</PageWrapper> |
c0e4c9
|
13 |
</template> |
J |
14 |
<script lang="ts"> |
|
15 |
import { defineComponent, h } from 'vue'; |
|
16 |
import { BasicForm, FormSchema } from '/@/components/Form/index'; |
|
17 |
import { CollapseContainer } from '/@/components/Container/index'; |
|
18 |
import { useMessage } from '/@/hooks/web/useMessage'; |
|
19 |
import { Tinymce } from '/@/components/Tinymce/index'; |
31ff05
|
20 |
import { PageWrapper } from '/@/components/Page'; |
c0e4c9
|
21 |
|
J |
22 |
const schemas: FormSchema[] = [ |
|
23 |
{ |
|
24 |
field: 'title', |
|
25 |
component: 'Input', |
|
26 |
label: 'title', |
|
27 |
defaultValue: 'defaultValue', |
|
28 |
rules: [{ required: true }], |
|
29 |
}, |
|
30 |
{ |
|
31 |
field: 'tinymce', |
|
32 |
component: 'Input', |
|
33 |
label: 'tinymce', |
|
34 |
defaultValue: 'defaultValue', |
|
35 |
rules: [{ required: true }], |
|
36 |
render: ({ model, field }) => { |
|
37 |
return h(Tinymce, { |
|
38 |
value: model[field], |
|
39 |
onChange: (value: string) => { |
|
40 |
model[field] = value; |
|
41 |
}, |
|
42 |
}); |
|
43 |
}, |
|
44 |
}, |
|
45 |
]; |
|
46 |
export default defineComponent({ |
31ff05
|
47 |
components: { BasicForm, CollapseContainer, PageWrapper }, |
c0e4c9
|
48 |
setup() { |
J |
49 |
const { createMessage } = useMessage(); |
|
50 |
|
|
51 |
return { |
|
52 |
schemas, |
|
53 |
handleSubmit: (values: any) => { |
|
54 |
createMessage.success('click search,values:' + JSON.stringify(values)); |
|
55 |
}, |
|
56 |
}; |
|
57 |
}, |
|
58 |
}); |
|
59 |
</script> |