Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update form demo #1368

Merged
merged 4 commits into from
Aug 26, 2022
Merged

chore: update form demo #1368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d17722c
chore: update form demo
Summer-Shen Aug 24, 2022
4e1ce0b
chore: update test snapshot
Summer-Shen Aug 24, 2022
648bdd5
Merge branch 'Tencent:develop' into chore/form-demo
Summer-Shen Aug 24, 2022
2de39b5
chore: align btn with inputs in form login demo
Summer-Shen Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 7 additions & 15 deletions examples/form/demos/align.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template>
<div>
<div class="controls">
<t-radio-group v-model="formData.labelAlign" variant="default-filled">
<t-radio-button value="left">左对齐</t-radio-button>
<t-radio-button value="right">右对齐</t-radio-button>
<t-radio-button value="top">顶部对齐</t-radio-button>
</t-radio-group>
</div>
<t-space direction="vertical" size="32px">
<t-radio-group v-model="formData.labelAlign" variant="default-filled">
<t-radio-button value="left">左对齐</t-radio-button>
<t-radio-button value="right">右对齐</t-radio-button>
<t-radio-button value="top">顶部对齐</t-radio-button>
</t-radio-group>

<t-form :data="formData" :labelAlign="formData.labelAlign" :labelWidth="60">
<t-form-item name="name">
Expand All @@ -17,7 +15,7 @@
<t-input v-model="formData.password" type="password"></t-input>
</t-form-item>
</t-form>
</div>
</t-space>
</template>
<script>
const INITIAL_DATA = {
Expand All @@ -33,9 +31,3 @@ export default {
},
};
</script>

<style lang="less" scoped>
.controls {
margin-bottom: 32px;
}
</style>
56 changes: 28 additions & 28 deletions examples/form/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
<template>
<div>
<t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
<t-form-item label="姓名" name="name" :rules="requiredRules">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="手机号码" name="tel">
<t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="接收短信" name="status">
<t-switch v-model="formData.status"></t-switch>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="1">男</t-radio>
<t-radio value="2">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
<t-form-item label="姓名" name="name" :rules="requiredRules">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="手机号码" name="tel">
<t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="接收短信" name="status">
<t-switch v-model="formData.status"></t-switch>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="1">男</t-radio>
<t-radio value="2">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-space size="10px">
<!-- type = submit，表单中的提交按钮，原生行为 -->
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="primary" type="submit">提交</t-button>
<!-- type = reset，表单中的重置按钮，原生行为 -->
<t-button theme="default" variant="base" type="reset" style="margin-right: 10px">重置</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>

<!-- 下方示例代码，有效，勿删 -->
<!-- <t-button theme="default" style="margin-right: 10px" @click="submitForm">实例方法提交</t-button>
<t-button theme="default" variant="base" style="margin-right: 10px" @click="resetForm">实例方法重置</t-button>
<!-- <t-button theme="default" @click="submitForm">实例方法提交</t-button>
<t-button theme="default" variant="base" @click="resetForm">实例方法重置</t-button>
<t-button theme="default" variant="base" @click="validateOnly">校验</t-button> -->
</t-form-item>
</t-form>
</div>
</t-space>
</t-form-item>
</t-form>
</template>
<script>
const INITIAL_DATA = {
Expand Down
96 changes: 47 additions & 49 deletions examples/form/demos/clear-validate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,52 @@
<template>
<div>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" scrollToFirstError="smooth">
<t-form-item label="用户名" help="这是用户名字段帮助说明" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item label="个人简介" help="一句话介绍自己" name="description">
<t-input v-model="formData.description"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="邮箱" name="email">
<t-input v-model="formData.email"></t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="male">男</t-radio>
<t-radio value="female">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item label="学院" name="college">
<t-select v-model="formData.college" class="demo-select-base" clearable>
<t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item
label="入学时间"
name="date"
:rules="[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]"
>
<t-input v-model="formData.date"></t-input>
</t-form-item>
<t-form-item label="个人网站" name="content.url">
<t-input v-model="formData.content.url"></t-input>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-button theme="primary" type="submit" style="margin-right: 10px"> 提交 </t-button>
<t-button theme="default" variant="base" type="reset" style="margin-right: 10px"> 重置 </t-button>
<t-button theme="default" variant="base" @click="handleClear" style="margin-right: 10px">
清空校验结果
</t-button>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" scrollToFirstError="smooth">
<t-form-item label="用户名" help="这是用户名字段帮助说明" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item label="个人简介" help="一句话介绍自己" name="description">
<t-input v-model="formData.description"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="邮箱" name="email">
<t-input v-model="formData.email"></t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="male">男</t-radio>
<t-radio value="female">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item label="学院" name="college">
<t-select v-model="formData.college" class="demo-select-base" clearable>
<t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item
label="入学时间"
name="date"
:rules="[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]"
>
<t-input v-model="formData.date"></t-input>
</t-form-item>
<t-form-item label="个人网站" name="content.url">
<t-input v-model="formData.content.url"></t-input>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-space size="10px">
<t-button theme="primary" type="submit"> 提交 </t-button>
<t-button theme="default" variant="base" type="reset"> 重置 </t-button>
<t-button theme="default" variant="base" @click="handleClear"> 清空校验结果 </t-button>
<t-button theme="default" variant="base" @click="clearFieldsValidateResult"> 清除指定字段的校验结果 </t-button>
</t-form-item>
</t-form>
</div>
</t-space>
</t-form-item>
</t-form>
</template>
<script>
const INITIAL_DATA = {
Expand Down
36 changes: 16 additions & 20 deletions examples/form/demos/custom-validator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
<template>
<div>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" @validate="onValidate">
<t-form-item label="用户名" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item
label="密码"
name="password"
help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化"
>
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="确认密码" name="rePassword" help="自定义异步校验方法">
<t-input type="password" v-model="formData.rePassword"></t-input>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" @validate="onValidate">
<t-form-item label="用户名" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item label="密码" name="password" help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化">
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="确认密码" name="rePassword" help="自定义异步校验方法">
<t-input type="password" v-model="formData.rePassword"></t-input>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-space size="10px">
<t-button theme="primary" type="submit">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
</t-form-item>
</t-form>
</div>
</t-space>
</t-form-item>
</t-form>
</template>
<script>
const INITIAL_DATA = {
Expand Down
16 changes: 9 additions & 7 deletions examples/form/demos/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<div style="margin-left: 36px">
<t-space direction="vertical" size="32px">
<t-space style="margin-left: 36px">
<t-checkbox v-model="formDisabled" variant="default-filled"> 是否禁用表单 </t-checkbox>
</div>
<br /><br />
</t-space>

<t-form
:data="formData"
ref="form"
Expand Down Expand Up @@ -56,11 +56,13 @@
></t-upload>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
<t-space size="10px">
<t-button theme="primary" type="submit">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
</t-space>
</t-form-item>
</t-form>
</div>
</t-space>
</template>
<script>
const INITIAL_DATA = {
Expand Down
41 changes: 21 additions & 20 deletions examples/form/demos/error-message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<template>
<div>
<t-space direction="vertical" size="32px">
<!-- 可以使用全局 ConfigProvider errorMessage 配置规则校验结果描述，而无需给每一个表单都配置校验信息 -->
<div>
<t-radio-group v-model="errorConfig" variant="default-filled">
<t-radio-button value="default">
<t-popup content="Form.errorMessage 为空，使用组件内置校验信息。重置后，点击提交观察校验结果信息">
使用表单默认校验信息
</t-popup>
</t-radio-button>
<t-radio-button value="config">
<t-popup content="统一配置 Form.errorMessage，使用自定义配置的校验信息。重置后，点击提交观察校验结果信息">
表单统一配置校验信息
</t-popup>
</t-radio-button>
</t-radio-group>
</div>
<br /><br />

<t-radio-group v-model="errorConfig" variant="default-filled">
<t-radio-button value="default">
<t-popup content="Form.errorMessage 为空，使用组件内置校验信息。重置后，点击提交观察校验结果信息">
使用表单默认校验信息
</t-popup>
</t-radio-button>
<t-radio-button value="config">
<t-popup content="统一配置 Form.errorMessage，使用自定义配置的校验信息。重置后，点击提交观察校验结果信息">
表单统一配置校验信息
</t-popup>
</t-radio-button>
</t-radio-group>

<!-- error-message 非必需 -->
<t-form
:data="formData"
Expand Down Expand Up @@ -66,12 +65,14 @@
<t-input v-model="formData.content.url"></t-input>
</t-form-item>
<t-form-item style="margin-left: 100px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="default" variant="base" type="reset" style="margin-right: 10px">重置</t-button>
<t-button theme="default" variant="base" @click="handleClear">清空校验结果</t-button>
<t-space size="10px">
<t-button theme="primary" type="submit">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
<t-button theme="default" variant="base" @click="handleClear">清空校验结果</t-button>
</t-space>
</t-form-item>
</t-form>
</div>
</t-space>
</template>
<script>
/* eslint-disable no-template-curly-in-string */
Expand Down
26 changes: 9 additions & 17 deletions examples/form/demos/layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<template>
<div>
<div class="controls">
<t-radio-group v-model="formData.layout" variant="default-filled">
<t-radio-button value="vertical">纵向布局</t-radio-button>
<t-radio-button value="inline">行内布局</t-radio-button>
</t-radio-group>
</div>
<t-space direction="vertical" size="32px">
<t-radio-group v-model="formData.layout" variant="default-filled">
<t-radio-button value="vertical">纵向布局</t-radio-button>
<t-radio-button value="inline">行内布局</t-radio-button>
</t-radio-group>

<t-form
:data="formData"
labelWidth="calc(2em + 24px)"
Expand All @@ -15,17 +14,16 @@
@submit="onSubmit"
scrollToFirstError="smooth"
>
<t-form-item label="名字" name='name'>
<t-form-item label="名字" name="name">
<t-input v-model="formData.name"></t-input>
</t-form-item>
<t-form-item label="密码" name='password'>
<t-form-item label="密码" name="password">
<t-input v-model="formData.password" type="password"></t-input>
</t-form-item>
</t-form>
</div>
</t-space>
</template>
<script>

const INITIAL_DATA = {
layout: 'inline',
name: '',
Expand All @@ -52,9 +50,3 @@ export default {
},
};
</script>

<style lang="less" scoped>
.controls {
margin-bottom: 32px;
}
</style>
Loading