feat: 为 PInputText 组件添加帮助信息支持
All checks were successful
/ test (push) Successful in 23s
/ surge (push) Successful in 41s

This commit is contained in:
严浩
2024-12-30 14:08:11 +08:00
parent e85666fec1
commit 7a1712807f
4 changed files with 19 additions and 1 deletions

View File

@ -5,6 +5,7 @@ import SchemaComponent from 'primevue/inputtext';
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { floatLabel } from '../sections/floatLabel'; import { floatLabel } from '../sections/floatLabel';
import { messages } from '../sections/messages'; import { messages } from '../sections/messages';
import { help } from '../sections/help';
const input = createSection('input', () => ({ const input = createSection('input', () => ({
$cmp: markRaw(SchemaComponent) as never, $cmp: markRaw(SchemaComponent) as never,
@ -29,6 +30,7 @@ export const PInputText: FormKitTypeDefinition = {
input(), // input(), //
label('$label'), label('$label'),
), ),
help('$help'),
messages(), messages(),
), ),
features: [casts], features: [casts],

View File

@ -0,0 +1,14 @@
import { createSection } from '@formkit/inputs';
/**
* Help section that shows help text
*
* @public
*/
export const help = createSection('help', () => ({
$el: 'div',
if: '$help',
attrs: {
id: '$: "help-" + $id',
},
}));

View File

@ -1,4 +1,4 @@
import MessagesCmp from '@/__fk-inputs__/components/messages.vue'; import MessagesCmp from '../components/messages.vue';
import { createSection } from '@formkit/inputs'; import { createSection } from '@formkit/inputs';
import { markRaw } from 'vue'; import { markRaw } from 'vue';

View File

@ -106,6 +106,7 @@ const promiseCascadeOptions = new Promise<typeof K_FLAT_TREE>((resolve) => {
name="PInputText" name="PInputText"
label="输入框" label="输入框"
value="`default value from field`" value="`default value from field`"
help="帮助信息帮助信息帮助信息帮助信息"
some="prop" some="prop"
some-boolean-prop some-boolean-prop
validation="required" validation="required"
@ -167,6 +168,7 @@ const promiseCascadeOptions = new Promise<typeof K_FLAT_TREE>((resolve) => {
:preserve="false" :preserve="false"
name="customType" name="customType"
value="this input will display if the password is empty" value="this input will display if the password is empty"
help="helppppppppppp"
> >
<!-- <template #label> <!-- <template #label>
<div>labelll</div> <div>labelll</div>