feat(demos): 移除 Naive UI Demo 中的 SafeNForm 示例 [skip ci]

This commit is contained in:
严浩
2025-11-10 00:07:22 +08:00
parent 3a3e9aead5
commit 9376f8e68e
2 changed files with 0 additions and 76 deletions

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { MessageType } from 'naive-ui';
import { useDialog, useMessage } from 'naive-ui';
import UseSafeNForm from './use-safe-n-form.vue';
definePage({ meta: {} });
@@ -61,9 +60,6 @@ const openModal = () => {
<NAlert title="信息" type="info" :bordered="false">
演示 Naive UI 各种组件的使用方法和功能特性
</NAlert>
<n-card title="SafeNForm" mt-4>
<UseSafeNForm />
</n-card>
<NCard title="Message 消息" class="mt-4">
<NSpace>
<NButton

View File

@@ -1,72 +0,0 @@
<script setup lang="ts">
const { formInst, formValue, SafeNForm, SafeNFormItem } = useSafeNForm({
initialFormValue: {
/* ⚠️:
如果没使用`SafeNFormItem`
这里`user`对象没有手动初始化的话,将会报错:
`can't access property "name", $setup.formValue.user is undefined`
*/
user: {
name: '',
age: 0,
},
phone: '',
},
});
function handleValidateClick() {
formInst.value?.validate((errors) => {
if (!errors) {
window.$nMessage!.success('Valid');
} else {
console.log(errors);
window.$nMessage!.error('Invalid');
}
});
}
</script>
<template>
<div border>
<pre>formValue: {{ JSON.stringify(formValue, null, 2) }}</pre>
</div>
<SafeNForm inline label-placement="left" label-width="auto" mt-4>
<n-form-item
label="姓名"
path="user.name"
:rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
>
<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
</n-form-item>
<SafeNFormItem
#default="{ value, setValue }"
:rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
label="姓名"
path="user.name"
>
<NInput :value="value" placeholder="SafeNFormItem" @update:value="setValue" />
</SafeNFormItem>
<n-form-item
label="电话号码"
path="phone"
:rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
>
<n-input v-model:value="formValue.phone" placeholder="电话号码" />
</n-form-item>
<SafeNFormItem
label="电话号码"
path="phone"
:rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
>
<!-- 如果没有提供插槽会默认渲染一个`<NInput>` -->
</SafeNFormItem>
<n-form-item>
<n-button attr-type="button" @click="handleValidateClick"> 验证 </n-button>
</n-form-item>
</SafeNForm>
</template>