halo-admin/docs/custom-formkit-input/README.md

117 lines
2.4 KiB
Markdown
Raw Normal View History

feat: add some formkit custom input for the system core extensions (#643) #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: Ref https://github.com/halo-dev/halo/issues/2526#issuecomment-1273094868 FormKit 文档:https://formkit.com/advanced/custom-inputs 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 目前提供如下类型: - menuCheckbox - menuRadio - menuItemSelect - postSelect - categorySelect - tagSelect - singlePageSelect - categoryCheckbox - tagCheckbox FormKit 组件的使用方式: ```vue <FormKit placeholder="请选择文章" label="文章" type="postSelect" validation="required" /> ``` FormKit Schema 的使用方式: ```yaml - $formkit: menuRadio name: menus label: 底部菜单组 ``` #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2526 #### Screenshots: <!-- 如果此 PR 有 UI 的改动,最好截图说明这个 PR 的改动。 If there are UI changes to this PR, it is best to take a screenshot to illustrate the changes to this PR. eg. Before: ![screenshot-before](https://user-images.githubusercontent.com/screenshot.png) After: ![screenshot-after](https://user-images.githubusercontent.com/screenshot.png) --> #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console 测试方式: 1. 检查后台文章设置弹框的选择分类和标签功能是否正常。 2. 检查后台添加菜单项的功能是否正常。 3. 使用主题或者插件定义 settings.yaml,使用上述任意 input 类型,检查得到的效果和值是否正常。 #### Does this PR introduce a user-facing change? ```release-note 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 ```
2022-10-18 03:32:09 +00:00
# 自定义 FormKit 输入组件
## 原由
目前在 Console 端的所有表单都使用了 FormKit但 FormKit 内置的 Input 组件并不满足所有的需求,因此需要自定义一些 Input 组件。此外,为了插件和主题能够更加方便的使用系统内的一些数据,所以同样需要自定义一些带数据的选择组件。
feat: add some formkit custom input for the system core extensions (#643) #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: Ref https://github.com/halo-dev/halo/issues/2526#issuecomment-1273094868 FormKit 文档:https://formkit.com/advanced/custom-inputs 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 目前提供如下类型: - menuCheckbox - menuRadio - menuItemSelect - postSelect - categorySelect - tagSelect - singlePageSelect - categoryCheckbox - tagCheckbox FormKit 组件的使用方式: ```vue <FormKit placeholder="请选择文章" label="文章" type="postSelect" validation="required" /> ``` FormKit Schema 的使用方式: ```yaml - $formkit: menuRadio name: menus label: 底部菜单组 ``` #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2526 #### Screenshots: <!-- 如果此 PR 有 UI 的改动,最好截图说明这个 PR 的改动。 If there are UI changes to this PR, it is best to take a screenshot to illustrate the changes to this PR. eg. Before: ![screenshot-before](https://user-images.githubusercontent.com/screenshot.png) After: ![screenshot-after](https://user-images.githubusercontent.com/screenshot.png) --> #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console 测试方式: 1. 检查后台文章设置弹框的选择分类和标签功能是否正常。 2. 检查后台添加菜单项的功能是否正常。 3. 使用主题或者插件定义 settings.yaml,使用上述任意 input 类型,检查得到的效果和值是否正常。 #### Does this PR introduce a user-facing change? ```release-note 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 ```
2022-10-18 03:32:09 +00:00
## 使用方式
目前已提供以下类型:
- `code`: 代码编辑器
- 参数
1. language: 目前支持 `yaml`, `html`, `css`, `javascript`, `json`
2. height: 编辑器高度,如:`100px`
- `attachment`: 附件选择
- `repeater`: 定义一个对象集合,可以让使用者可视化的操作集合。
feat: add some formkit custom input for the system core extensions (#643) #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: Ref https://github.com/halo-dev/halo/issues/2526#issuecomment-1273094868 FormKit 文档:https://formkit.com/advanced/custom-inputs 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 目前提供如下类型: - menuCheckbox - menuRadio - menuItemSelect - postSelect - categorySelect - tagSelect - singlePageSelect - categoryCheckbox - tagCheckbox FormKit 组件的使用方式: ```vue <FormKit placeholder="请选择文章" label="文章" type="postSelect" validation="required" /> ``` FormKit Schema 的使用方式: ```yaml - $formkit: menuRadio name: menus label: 底部菜单组 ``` #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2526 #### Screenshots: <!-- 如果此 PR 有 UI 的改动,最好截图说明这个 PR 的改动。 If there are UI changes to this PR, it is best to take a screenshot to illustrate the changes to this PR. eg. Before: ![screenshot-before](https://user-images.githubusercontent.com/screenshot.png) After: ![screenshot-after](https://user-images.githubusercontent.com/screenshot.png) --> #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console 测试方式: 1. 检查后台文章设置弹框的选择分类和标签功能是否正常。 2. 检查后台添加菜单项的功能是否正常。 3. 使用主题或者插件定义 settings.yaml,使用上述任意 input 类型,检查得到的效果和值是否正常。 #### Does this PR introduce a user-facing change? ```release-note 通过扩展 FormKit 的自定义 Input,提供系统常用资源的选择组件。 ```
2022-10-18 03:32:09 +00:00
- `menuCheckbox`:选择一组菜单
- `menuRadio`:选择一个菜单
- `menuItemSelect`:选择菜单项
- `postSelect`:选择文章
- `singlePageSelect`:选择自定义页面
- `categorySelect`:选择分类
- `categoryCheckbox`:选择多个分类
- `tagSelect`:选择标签
- `tagCheckbox`:选择多个标签
在 Vue 单组件中使用:
```vue
<script lang="ts" setup>
const postName = ref("")
</script>
<template>
<FormKit
v-model="postName"
placeholder="请选择文章"
label="文章"
type="postSelect"
validation="required"
/>
</template>
```
在 FormKit Schema 中使用(插件 / 主题设置表单定义):
```yaml
- $formkit: menuRadio
name: menus
label: 底部菜单组
```
### Repeater
Repeater 是一个集合类型的输入组件,可以让使用者可视化的操作集合。
在 Vue SFC 中以组件形式使用:
```vue
<script lang="ts" setup>
const users = ref([])
</script>
<template>
<FormKit
v-model="users"
type="repeater"
label="Users"
>
<FormKit
type="text"
label="Full Name"
name="full_name"
validation="required"
/>
<FormKit
type="email"
label="Email"
name="email"
validation="required|email"
/>
</FormKit>
</template>
```
在 FormKit Schema 中使用:
```yaml
- $formkit: repeater
name: users
label: Users
items:
- $formkit: text
name: full_name
label: Full Name
validation: required
- $formkit: email
name: email
label: Email
validation: required|email
```
最终得到的数据类似于:
```json
[
{
"full_name": "Jack",
"email": "jack@example.com"
},
{
"full_name": "John",
"email": "john@example.com"
}
]
```