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