forked from opentiny/tiny-vue
docs(sites): [pager, form] optimize docs and demos (#1135)
This commit is contained in:
gimmyhehe
GitHub
parent
44468866fe
commit
aef96eda64
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="demo-form">
|
||||
<tiny-form ref="formRef" :model="createData" @validate="validate">
|
||||
<tiny-form-item label="姓名" prop="name" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
|
||||
<tiny-input v-model="createData.name"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="昵称">
|
||||
<tiny-input v-model="createData.nickname"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item>
|
||||
<tiny-button @click="submit" type="primary">提交</tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Form as TinyForm,
|
||||
FormItem as TinyFormItem,
|
||||
Input as TinyInput,
|
||||
Button as TinyButton,
|
||||
Modal as TinyModal
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const createData = ref({
|
||||
name: '',
|
||||
nickname: ''
|
||||
})
|
||||
const formRef = ref()
|
||||
function validate() {
|
||||
TinyModal.message({ message: '校验事件触发了', status: 'info' })
|
||||
}
|
||||
function submit() {
|
||||
formRef.value.validate(() => {
|
||||
// empty
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form {
|
||||
width: 380px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表单事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('form#events')
|
||||
|
||||
const demo = page.locator('#events')
|
||||
const messageModal = page.locator('.tiny-modal.active')
|
||||
|
||||
await demo.getByRole('button', { name: '提交' }).click()
|
||||
await expect(messageModal).toHaveText('校验事件触发了')
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="demo-form">
|
||||
<tiny-form ref="form" :model="createData" @validate="validate">
|
||||
<tiny-form-item label="姓名" prop="name" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
|
||||
<tiny-input v-model="createData.name"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="昵称">
|
||||
<tiny-input v-model="createData.nickname"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item>
|
||||
<tiny-button @click="submit" type="primary">提交</tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, FormItem, Input, Button, Modal as TinyModal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyForm: Form,
|
||||
TinyFormItem: FormItem,
|
||||
TinyInput: Input,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createData: {
|
||||
name: '',
|
||||
nickname: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
TinyModal.message({ message: '校验事件触发了', status: 'info' })
|
||||
},
|
||||
submit() {
|
||||
this.$refs.form.validate(() => {
|
||||
// empty
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form {
|
||||
width: 380px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +1,19 @@
|
|||
<template>
|
||||
<div class="demo-form">
|
||||
<tiny-form
|
||||
ref="ruleFormRef"
|
||||
hide-required-asterisk
|
||||
:model="createData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
show-message
|
||||
>
|
||||
<tiny-form-item label="姓名" prop="users" required>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
|
||||
<tiny-form-item label="姓名" prop="users">
|
||||
<tiny-input v-model="createData.users"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="日期" prop="datepicker">
|
||||
<tiny-form-item label="日期" prop="datepicker" ref="dateRef">
|
||||
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="URL" prop="url">
|
||||
<tiny-input v-model="createData.url"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item>
|
||||
<tiny-button type="primary" @click="validateField"> 校验特定字段 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearValidate"> 移除特定字段校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
|
|
@ -37,6 +31,7 @@ import {
|
|||
} from '@opentiny/vue'
|
||||
|
||||
const ruleFormRef = ref()
|
||||
const dateRef = ref()
|
||||
|
||||
const createData = reactive({
|
||||
users: '',
|
||||
|
|
@ -48,7 +43,7 @@ const rules = ref({
|
|||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{ min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
|
||||
],
|
||||
datepicker: { type: 'date' },
|
||||
datepicker: { type: 'date', required: true },
|
||||
url: { type: 'url', required: true }
|
||||
})
|
||||
|
||||
|
|
@ -56,6 +51,10 @@ function clearValidate() {
|
|||
ruleFormRef.value.clearValidate(['url', 'datepicker'])
|
||||
}
|
||||
|
||||
function resetField() {
|
||||
dateRef.value.resetField()
|
||||
}
|
||||
|
||||
async function validateField() {
|
||||
const errArray = []
|
||||
await ruleFormRef.value.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
|
||||
|
|
@ -64,7 +63,7 @@ async function validateField() {
|
|||
}
|
||||
})
|
||||
if (errArray.length > 0) {
|
||||
console.log(errArray)
|
||||
// empty
|
||||
} else {
|
||||
Modal.alert('日期和url通过校验')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,18 @@ test('特定表单项校验', async ({ page }) => {
|
|||
|
||||
const demo = page.locator('#form-validate-field')
|
||||
const getTooltipByText = (text: string) => page.locator('.tiny-tooltip').getByText(text)
|
||||
const validBtn = demo.getByRole('button', { name: '校验' }).first()
|
||||
|
||||
await demo.getByRole('button', { name: '校验特定字段' }).click()
|
||||
await validBtn.click()
|
||||
await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
|
||||
await expect(getTooltipByText('必填')).toBeVisible()
|
||||
await demo.getByRole('button', { name: '移除特定字段校验' }).click()
|
||||
await demo.getByRole('button', { name: '移除校验' }).click()
|
||||
await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
|
||||
await expect(getTooltipByText('必填')).not.toBeVisible()
|
||||
await validBtn.click()
|
||||
await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
|
||||
await expect(getTooltipByText('必填')).toBeVisible()
|
||||
await demo.getByRole('button', { name: '重置日期' }).click()
|
||||
await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
|
||||
await expect(getTooltipByText('必填')).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
<template>
|
||||
<div class="demo-form">
|
||||
<tiny-form
|
||||
ref="ruleFormRef"
|
||||
hide-required-asterisk
|
||||
:model="createData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
show-message
|
||||
>
|
||||
<tiny-form-item label="姓名" prop="users" required>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
|
||||
<tiny-form-item label="姓名" prop="users">
|
||||
<tiny-input v-model="createData.users"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="日期" prop="datepicker">
|
||||
<tiny-form-item label="日期" prop="datepicker" ref="dateRef">
|
||||
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="URL" prop="url">
|
||||
<tiny-input v-model="createData.url"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item>
|
||||
<tiny-button type="primary" @click="validateField"> 校验特定字段 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearValidate"> 移除特定字段校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
|
|
@ -69,6 +63,9 @@ export default {
|
|||
},
|
||||
clearValidate() {
|
||||
this.$refs.ruleFormRef.clearValidate(['url', 'datepicker'])
|
||||
},
|
||||
resetField() {
|
||||
this.$refs.dateRef.resetField()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
<tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
|
||||
提交
|
||||
</tiny-button>
|
||||
<tiny-button type="success" @click="clearFormValid"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
|
|
@ -132,6 +133,10 @@ function handleSubmitPromise() {
|
|||
function clearFormValid() {
|
||||
ruleFormRef.value.clearValidate()
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
ruleFormRef.value.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
<tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
|
||||
提交
|
||||
</tiny-button>
|
||||
<tiny-button type="success" @click="clearFormValid"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
|
||||
<tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
|
|
@ -140,6 +141,9 @@ export default {
|
|||
},
|
||||
clearFormValid() {
|
||||
this.$refs.ruleFormRef.clearValidate()
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.ruleFormRef.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="title">
|
||||
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
|
||||
</div>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
|
||||
<tiny-form-item label="用户名" prop="username">
|
||||
<tiny-input v-model="createData.username"></tiny-input>
|
||||
</tiny-form-item>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="title">
|
||||
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
|
||||
</div>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
|
||||
<tiny-form-item label="用户名" prop="username">
|
||||
<tiny-input v-model="createData.username"></tiny-input>
|
||||
</tiny-form-item>
|
||||
|
|
|
|||
|
|
@ -60,9 +60,10 @@ export default {
|
|||
demoId: 'form-validation',
|
||||
name: { 'zh-CN': '表单校验、移除校验', 'en-US': 'Form Validation/Clear Validation' },
|
||||
desc: {
|
||||
'zh-CN': `<p>通过 <code>rules</code> 设置校验规则， <code>rules</code> 的详情见 <a href="#IFormRules">IFormRules</a>
|
||||
<br />
|
||||
调用 <code>clearValidate</code> 方法移除表单项的校验结果。传入待移除的表单项的 <code>prop</code> 属性或者 <code>prop</code> 组成的数组，如不传则移除整个表单的校验结果。</p>`,
|
||||
'zh-CN': `<p>通过 <code>rules</code> 设置校验规则，
|
||||
调用 <code>clearValidate</code> 方法移除表单项的校验结果。传入待移除的表单项的 <code>prop</code> 属性或者 <code>prop</code> 组成的数组，如不传则移除整个表单的校验结果，
|
||||
调用 <code>resetFields</code> 方法重置表单并移除校验结果。
|
||||
</p>`,
|
||||
'en-US': `<p>Includes common verification rules such as mandatory fields, date, time, URL, and email. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost.
|
||||
<br />
|
||||
Use <code>clearValidate</code> method to clear the validation result.
|
||||
|
|
@ -76,7 +77,7 @@ export default {
|
|||
'name': { 'zh-CN': '特定表单项校验', 'en-US': 'Form field Validation' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>validateField</code> 方法对特定表单项进行校验， <code>clearValidate</code> 方法移除特定表单项校验。</p>',
|
||||
'<p>通过 <code>validateField</code> 方法对特定表单项进行校验， <code>clearValidate</code> 方法移除特定表单项校验， <code>resetField</code> 重置表单项并移除校验。</p>',
|
||||
'en-US':
|
||||
'<p>Verify specific form items using the <code>validateField</code> method, and remove specific form item validation using the <code>clearValidate</code> method.</p>'
|
||||
},
|
||||
|
|
@ -221,6 +222,15 @@ export default {
|
|||
'Set the <code>tip</code> type error prompt through <code>popper-options</code>. For example, when the parent element of the form is a scrolling element and the page scrolls, the prompt will be misaligned. Change the <code>bubbling</code> attribute Set to <code>true</code> to resolve this issue.'
|
||||
},
|
||||
codeFiles: ['popper-options.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events',
|
||||
name: { 'zh-CN': '表单事件', 'en-US': 'Form events' },
|
||||
desc: {
|
||||
'zh-CN': '<p>任一表单项被校验后触发 <code>validate</code>事件</p>',
|
||||
'en-US': 'The <code>validate</code> event is triggered after any form item is verified.'
|
||||
},
|
||||
codeFiles: ['events.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -498,7 +508,7 @@ export default {
|
|||
'zh-CN': '任一表单项被校验后触发',
|
||||
'en-US': 'Triggered after any form item is verified'
|
||||
},
|
||||
demoId: 'form-validation'
|
||||
demoId: 'events'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -599,7 +609,7 @@ export default {
|
|||
'zh-CN': '是否显示校验错误信息',
|
||||
'en-US': 'Whether to display verification error information'
|
||||
},
|
||||
demoId: 'form-validation'
|
||||
demoId: 'novalid-tip'
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
|
|
@ -641,7 +651,7 @@ export default {
|
|||
'zh-CN': '指定校验提示框显示的位置',
|
||||
'en-US': 'Specify the position where the verification dialog box is displayed'
|
||||
},
|
||||
demoId: 'form-validation'
|
||||
demoId: 'validation-position'
|
||||
},
|
||||
{
|
||||
name: 'validate-type',
|
||||
|
|
@ -695,7 +705,7 @@ export default {
|
|||
'zh-CN': '对该表单项进行重置，将其值重置为初始值并移除校验结果',
|
||||
'en-US': 'Reset the table item to the initial value and remove the verification result.'
|
||||
},
|
||||
demoId: 'form-validation'
|
||||
demoId: 'form-validate-field'
|
||||
}
|
||||
],
|
||||
'events': []
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export default {
|
|||
'en-US':
|
||||
'Indicates whether to add an element in the <p> <code>popper-append-to-body</code> paging drop-down list box to the body element node.</p>'
|
||||
},
|
||||
'codeFiles': ['page-append-to-body.vue']
|
||||
'codeFiles': ['popper-append-to-body.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-class',
|
||||
|
|
@ -338,7 +338,7 @@ export default {
|
|||
'en-US':
|
||||
'Whether to insert the pop-up box into the body element. You can set this attribute to false (refer to the select component)'
|
||||
},
|
||||
'demoId': 'page-append-to-body'
|
||||
'demoId': 'popper-append-to-body'
|
||||
},
|
||||
{
|
||||
'name': 'popper-class',
|
||||
|
|
|
|||
Loading…
Reference in New Issue