Skip to content

Commit

Permalink
docs: ✏️ 标注 Form 组件支持不校验隐藏子组件的版本
Browse files Browse the repository at this point in the history
  • Loading branch information
Moonofweisheng committed Jan 20, 2025
1 parent 1dc48cf commit e5a24c4
Showing 1 changed file with 1 addition and 61 deletions.
62 changes: 1 addition & 61 deletions docs/component/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 日期时间选择器`实现一个复杂表单。
Expand Down

0 comments on commit e5a24c4

Please sign in to comment.