mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 17:48:34 +08:00
docs: ✏️ 标注 Form 组件支持不校验隐藏子组件的版本
This commit is contained in:
parent
1dc48cfce9
commit
e5a24c4873
@ -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` 隐藏,则不会对该组件进行校验。
|
||||
|
||||
::: 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 日期时间选择器`实现一个复杂表单。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user