admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 标注 Form 组件支持不校验隐藏子组件的版本

Browse Source
This commit is contained in:
Moonofweisheng 2025-01-20 15:37:18 +08:00
parent 1dc48cfce9
commit e5a24c4873
1 changed files with 1 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/component/form.md
View File

@ -486,70 +486,10 @@ function handleValidate() {
::: :::
## 不对隐藏组件做校验 ## 不对隐藏组件做校验 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">1.6.0</el-tag>
在表单中，如果某个组件使用 `v-if` 隐藏，则不会对该组件进行校验。 在表单中，如果某个组件使用 `v-if` 隐藏，则不会对该组件进行校验。
::: details 查看不对隐藏组件做校验示例
::: code-group
```html [vue]
<wd-form ref="form" :model="model" :rules="rules">
<wd-cell-group border>
<wd-input
label="用户名"
label-width="100px"
prop="value1"
clearable
v-model="model.value1"
placeholder="请输入用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<wd-input
v-if="showPassword"
label="密码"
label-width="100px"
prop="value2"
show-password
clearable
v-model="model.value2"
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
</wd-cell-group>
<view class="footer">
<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
</view>
</wd-form>
```
```typescript [typescript]
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { reactive, ref } from 'vue'
const { success: showSuccess } = useToast()
const model = reactive<{
value1: string
value2: string
}>({
value1: '',
value2: ''
})
})
}
</script>
```
```css [css]
.footer {
padding: 12px;
}
```
:::
## 复杂表单 ## 复杂表单
结合`Input 输入框`、`Textarea 输入框`、`Picker 选择器`、 `Calendar 日历选择器`、 `ColPicker 多列选择器`、`SelectPicker 单复选选择器`、`Cell 单元格` 和 `DatetimePicker 日期时间选择器`实现一个复杂表单。 结合`Input 输入框`、`Textarea 输入框`、`Picker 选择器`、 `Calendar 日历选择器`、 `ColPicker 多列选择器`、`SelectPicker 单复选选择器`、`Cell 单元格` 和 `DatetimePicker 日期时间选择器`实现一个复杂表单。