test(form): [form] update button E2E test (#914)

2023-11-24 17:01:38 +08:00 · 2023-11-24 17:01:38 +08:00 · 59558b813d
parent b53895dce0
commit 59558b813d
33 changed files with 384 additions and 460 deletions
--- a/examples/sites/demos/pc/app/form/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'

 test('测试基本表单', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#frequently-used-form')
+  await page.goto('form#basic-usage')

-  const preview = page.locator('#preview')
-  const numeric = preview.locator('.tiny-numeric')
+  const demo = page.locator('#basic-usage')
+  const numeric = demo.locator('.tiny-numeric')
  const numericInput = numeric.locator('.tiny-numeric__input-inner')
  const increaseIcon = numeric.locator('.tiny-numeric__increase')
  const decreaseIcon = numeric.locator('.tiny-numeric__decrease')
@ -19,29 +19,23 @@ test('测试基本表单', async ({ page }) => {
  await expect(numericInput).toHaveValue('0')

  // 日期选择器
-  const datePicker = preview.getByRole('textbox').first()
+  const datePicker = demo.getByRole('textbox').first()
  await datePicker.click()
  await page.getByRole('cell', { name: '15' }).getByText('15').click()
  await expect(datePicker).toHaveValue(/15/)

  // 時間选择器
-  const timePicker = preview.getByRole('textbox').nth(1)
+  const timePicker = demo.getByRole('textbox').nth(1)
  await timePicker.click()
  await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
  await expect(timePicker).toHaveValue('00:30')

  // 其他输入
-  await preview.getByPlaceholder('click').hover()
+  await demo.getByPlaceholder('click').first().hover()
  await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-  await preview.getByPlaceholder('click').click()
-  await preview.getByPlaceholder('click').fill('123')
-  await preview.locator('textarea').click()
-  await preview.locator('textarea').fill('456')

  // 提交按钮
  const dialog = page.getByText('消息提示提交确认')
-  await preview.getByRole('button', { name: '提交' }).click()
+  await demo.getByRole('button', { name: '提交' }).click()
  await expect(dialog).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
-  await expect(dialog).not.toBeVisible()
 })
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@ -58,7 +58,9 @@ const rules = ref({
 })

 function handleSubmit() {
-  ruleFormRef.value.validate()
+  ruleFormRef.value.validate(() => {
+    // empty
+  })
 }

 function changeRule() {
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.spec.js
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.spec.js
@ -1,93 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试有密码校验', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#custom-validation-rule')
-
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-  const submitButton = form.getByRole('button', { name: '注册' })
-  const username = form.locator('input[type="text"]')
-  const password = form.locator('input[type="password"]')
-  const usernameValid = page.getByText('表单项被校验后触发的事件,所校验字段为:username')
-  const passwordValid = page.getByText('表单项被校验后触发的事件,所校验字段为:password')
-
-  // 校验提示出现
-  await submitButton.click()
-  await expect(usernameValid).toBeVisible()
-  await expect(page.getByText('校验不通过！！')).toBeVisible()
-  await expect(passwordValid).toBeVisible()
-  await expect(preview.getByText('必填').first()).toBeVisible()
-  await expect(preview.getByText('必填').nth(1)).toBeVisible()
-
-  const noValidUsername = '1'
-  const validUsername = '123'
-  const noValidPassword = '1'
-  const validPassword = 'Test1234'
-  await username.click()
-  await username.fill(noValidUsername)
-  await expect(preview.getByText('长度必须不小于2')).toBeVisible()
-  await username.fill(validUsername)
-  await expect(preview.getByText('长度必须不小于2')).not.toBeVisible()
-  await password.click()
-  await password.fill(noValidPassword)
-  await password.blur()
-  await expect(preview.getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')).toBeVisible()
-  await password.click()
-  await password.fill(validPassword)
-  await password.blur()
-  await expect(preview.getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')).not.toBeVisible()
-  // 检验提示不出现
-  await submitButton.click()
-  await expect(page.getByText('校验不通过！！')).not.toBeVisible()
-  await expect(passwordValid).not.toBeVisible()
-  await expect(preview.getByText('必填').first()).not.toBeVisible()
-  await expect(preview.getByText('必填').nth(1)).not.toBeVisible()
-})
-
-test('测试清除密码校验', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#custom-validation-rule')
-
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-  const cleanButton = form.getByRole('button', { name: '清除密码校验' })
-  const submitButton = form.getByRole('button', { name: '注册' })
-  const username = form.locator('input[type="text"]')
-  const password = form.locator('input[type="password"]')
-  const usernameValid = page.getByText('表单项被校验后触发的事件,所校验字段为:username')
-  const passwordValid = page.getByText('表单项被校验后触发的事件,所校验字段为:password')
-
-  // 校验提示出现
-  await cleanButton.click()
-  await submitButton.click()
-  await expect(usernameValid).toBeVisible()
-  await expect(page.getByText('校验不通过！！')).toBeVisible()
-  await expect(passwordValid).not.toBeVisible()
-  await expect(preview.getByText('必填').first()).toBeVisible()
-  await expect(preview.getByText('必填').nth(1)).not.toBeVisible()
-
-  const noValidUsername = '1'
-  const validUsername = '123'
-  const noValidPassword = '1'
-  const validPassword = 'Test1234'
-  await username.click()
-  await username.fill(noValidUsername)
-  await expect(preview.getByText('长度必须不小于2')).toBeVisible()
-  await username.fill(validUsername)
-  await expect(preview.getByText('长度必须不小于2')).not.toBeVisible()
-  await password.click()
-  await password.fill(noValidPassword)
-  await password.blur()
-  await expect(preview.getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')).not.toBeVisible()
-  await password.click()
-  await password.fill(validPassword)
-  await password.blur()
-  await expect(preview.getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')).not.toBeVisible()
-  // 检验提示不出现
-  await submitButton.click()
-  await expect(page.getByText('校验不通过！！')).not.toBeVisible()
-  await expect(passwordValid).not.toBeVisible()
-  await expect(preview.getByText('必填').first()).not.toBeVisible()
-  await expect(preview.getByText('必填').nth(1)).not.toBeVisible()
-})
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.spec.ts
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.spec.ts
@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test'
+
+test('测试有密码校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#custom-validation-rule')
+
+  const demo = page.locator('#custom-validation-rule')
+  const form = demo.locator('.tiny-form')
+  const submitButton = form.getByRole('button', { name: '注册' })
+  const username = form.locator('input[type="text"]')
+  const password = form.locator('input[type="password"]')
+
+  // 校验提示出现
+  await submitButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').first()).toBeVisible()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').nth(1)).toBeVisible()
+
+  const noValidUsername = '1'
+  const validUsername = '123'
+  const noValidPassword = '1'
+  const validPassword = 'Test1234'
+  await username.click()
+  await username.fill(noValidUsername)
+  await expect(page.locator('.tiny-tooltip').getByText('长度必须不小于2')).toBeVisible()
+  await username.fill(validUsername)
+  await expect(page.locator('.tiny-tooltip').getByText('长度必须不小于2')).not.toBeVisible()
+  await password.click()
+  await password.fill(noValidPassword)
+  await password.blur()
+  await expect(
+    page.locator('.tiny-tooltip').getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')
+  ).toBeVisible()
+  await password.click()
+  await password.fill(validPassword)
+  await password.blur()
+  await expect(
+    page.locator('.tiny-tooltip').getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')
+  ).not.toBeVisible()
+  // 检验提示不出现
+  await submitButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').first()).not.toBeVisible()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').nth(1)).not.toBeVisible()
+})
+
+test('改变校验规则', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#custom-validation-rule')
+
+  const demo = page.locator('#custom-validation-rule')
+
+  const changeButton = demo.getByRole('button', { name: '改变校验规则' })
+  await changeButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填')).toHaveCount(1)
+})
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@ -60,7 +60,9 @@ export default {
  },
  methods: {
    handleSubmit() {
-      this.$refs.ruleFormRef.validate()
+      this.$refs.ruleFormRef.validate(() => {
+        // empty
+      })
    },
    changeRule() {
      this.rules = {
--- a/examples/sites/demos/pc/app/form/display-only.spec.ts
+++ b/examples/sites/demos/pc/app/form/display-only.spec.ts
@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('表单仅展示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#display-only')
+
+  const demo = page.locator('#display-only')
+  const switchBtn = demo.locator('.tiny-switch').first()
+  const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
+
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
+  await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
+  await expect(getItem(1)).toHaveText('男')
+  await expect(getItem(2).locator('input')).not.toBeVisible()
+  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+})
--- a/examples/sites/demos/pc/app/form/form-clear-validate-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-clear-validate-composition-api.vue
@ -1,114 +0,0 @@
-<template>
-  <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
-      <tiny-form-item label="必填" prop="users" required>
-        <tiny-input v-model="createData.users"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="日期" prop="datepicker">
-        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
-      </tiny-form-item>
-      <tiny-form-item label="URL" prop="url" required>
-        <tiny-input v-model="createData.url"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
-      <tiny-form-item label="邮件" prop="email">
-        <tiny-input v-model="createData.email"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="文本">
-        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="级联选择器" prop="cascader">
-        <tiny-cascader
-          v-model="createData.cascader"
-          :options="options2"
-          :popper-append-to-body="true"
-          filterable
-        ></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid"> 移除表单校验 </tiny-button>
-        <tiny-button type="primary" @click="handleSubmit()"> 提交 </tiny-button>
-      </tiny-form-item>
-    </tiny-form>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Modal,
-  RadioGroup as TinyRadioGroup,
-  Cascader as TinyCascader
-} from '@opentiny/vue'
-
-const ruleFormRef = ref()
-
-function handleClick() {
-  Modal.message({ message: 'click' })
-}
-const options = ref([
-  { label: 'A', text: '很好', events: { click: handleClick } },
-  { label: 'B', text: '一般' }
-])
-const options2 = ref([
-  {
-    value: 'zhinan',
-    label: '指南',
-    children: [
-      {
-        value: 'anzhuang',
-        label: '安装'
-      },
-      {
-        value: 'kaifa',
-        label: '开发'
-      }
-    ]
-  }
-])
-const createData = reactive({
-  radio: '',
-  users: '',
-  url: '',
-  email: '',
-  datepicker: '',
-  textarea: '',
-  cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
-})
-const rules = ref({
-  radio: [{ required: true, message: '必填', trigger: 'blur' }],
-  users: [
-    { required: true, message: '必填', trigger: 'blur' },
-    { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-  ],
-  datepicker: { type: 'date' },
-  url: { type: 'url' },
-  email: { type: 'email' },
-  cascader: [{ required: true, message: '必填', trigger: 'blur' }]
-})
-
-function clearFormValid() {
-  ruleFormRef.value.clearValidate()
-}
-
-function handleSubmit() {
-  ruleFormRef.value.validate((valid) => {
-    if (valid) {
-      Modal.alert('提交成功')
-    }
-  })
-}
-</script>
-
-<style scoped>
-.demo-form {
-  width: 380px;
-}
-</style>
--- a/examples/sites/demos/pc/app/form/form-clear-validate.spec.js
+++ b/examples/sites/demos/pc/app/form/form-clear-validate.spec.js
@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试移除校验是否成功', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#form-clear-validate')
-
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-  const submitButton = form.getByRole('button', { name: '提交' })
-  const cleanButton = form.getByRole('button', { name: '移除表单校验' })
-  // 必填的tooltip提示
-  const requiredTip = page.locator('.tiny-tooltip').getByText('必填')
-  // 日期校验tooltip提示
-  const dateTip = page.locator('.tiny-tooltip').getByText('不符合规则的日期格式')
-
-  await submitButton.click()
-  await expect(requiredTip.first()).toBeVisible()
-  await expect(requiredTip.nth(1)).toBeVisible()
-  await expect(requiredTip.nth(2)).toBeVisible()
-  await expect(requiredTip.nth(3)).toBeVisible()
-  await expect(dateTip).toBeVisible()
-
-  await cleanButton.click()
-  await expect(requiredTip.first()).not.toBeVisible()
-  await expect(requiredTip.nth(1)).not.toBeVisible()
-  await expect(requiredTip.nth(2)).not.toBeVisible()
-  await expect(requiredTip.nth(3)).not.toBeVisible()
-  await expect(dateTip).not.toBeVisible()
-})
--- a/examples/sites/demos/pc/app/form/form-clear-validate.vue
+++ b/examples/sites/demos/pc/app/form/form-clear-validate.vue
@ -1,114 +0,0 @@
-<template>
-  <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
-      <tiny-form-item label="必填" prop="users" required>
-        <tiny-input v-model="createData.users"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="日期" prop="datepicker">
-        <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
-      </tiny-form-item>
-      <tiny-form-item label="URL" prop="url" required>
-        <tiny-input v-model="createData.url"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
-      <tiny-form-item label="邮件" prop="email">
-        <tiny-input v-model="createData.email"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="文本">
-        <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="级联选择器" prop="cascader">
-        <tiny-cascader
-          v-model="createData.cascader"
-          :options="options2"
-          :popper-append-to-body="true"
-          filterable
-        ></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid"> 移除表单校验 </tiny-button>
-        <tiny-button type="primary" @click="handleSubmit()"> 提交 </tiny-button>
-      </tiny-form-item>
-    </tiny-form>
-  </div>
-</template>
-
-<script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup, Cascader } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup,
-    TinyCascader: Cascader
-  },
-  data() {
-    return {
-      options: [
-        { label: 'A', text: '很好', events: { click: this.handleClick } },
-        { label: 'B', text: '一般' }
-      ],
-      options2: [
-        {
-          value: 'zhinan',
-          label: '指南',
-          children: [
-            {
-              value: 'anzhuang',
-              label: '安装'
-            },
-            {
-              value: 'kaifa',
-              label: '开发'
-            }
-          ]
-        }
-      ],
-      createData: {
-        radio: '',
-        users: '',
-        url: '',
-        email: '',
-        datepicker: '',
-        textarea: '',
-        cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
-      },
-      rules: {
-        radio: [{ required: true, message: '必填', trigger: 'blur' }],
-        users: [
-          { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
-        ],
-        datepicker: { type: 'date' },
-        url: { type: 'url' },
-        email: { type: 'email' },
-        cascader: [{ required: true, message: '必填', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    clearFormValid() {
-      this.$refs.ruleFormRef.clearValidate()
-    },
-    handleSubmit() {
-      this.$refs.ruleFormRef.validate((valid) => {
-        if (valid) {
-          Modal.alert('提交成功')
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.demo-form {
-  width: 380px;
-}
-</style>
--- a/examples/sites/demos/pc/app/form/form-disabled.spec.js
+++ b/examples/sites/demos/pc/app/form/form-disabled.spec.js
@ -4,20 +4,20 @@ test('测试表单禁用', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#form-disabled')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-  const disabledButton = preview.getByRole('button', { name: '禁用表单' })
-  const startButton = preview.getByRole('button', { name: '启用表单' })
+  const demo = page.locator('#form-disabled')
+  const form = demo.locator('.tiny-form')
+  const switchBtn = demo.locator('.tiny-switch').first()
+  const startButton = demo.getByRole('button', { name: '启用表单' })
  const formItem = form.locator('.tiny-form-item')
  const slider = formItem.nth(18).locator('.tiny-slider__handle')

  // 设置视口宽高，否则滑动不在视口中则无法拖动
  await page.setViewportSize({
    width: 1400,
-    height: 1200
+    height: 1500
  })

-  await disabledButton.click()
+  await switchBtn.click()
  await expect(formItem.first().locator('input')).toBeDisabled()
  await expect(formItem.nth(1).locator('input')).toBeDisabled()
  await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
@ -44,7 +44,7 @@ test('测试表单禁用', async ({ page }) => {
  const { x: newX } = await slider.boundingBox()
  expect(newX).toEqual(x)

-  await startButton.click()
+  await switchBtn.click()
  await expect(formItem.first().locator('input')).not.toBeDisabled()
  await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
  await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
--- a/examples/sites/demos/pc/app/form/form-in-row.spec.js
+++ b/examples/sites/demos/pc/app/form/form-in-row.spec.js
@ -4,8 +4,8 @@ test('测试行内表单', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#form-in-row')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-in-row')
+  const form = demo.locator('.tiny-form')
  const item1 = form.locator('.tiny-form-item').first()
  const item2 = form.locator('.tiny-form-item').nth(1)

@ -21,7 +21,7 @@ test('测试行内表单', async ({ page }) => {

  // 测试换行情况
  await page.setViewportSize({
-    width: 900,
+    width: 600,
    height: 700
  })
  await page.waitForTimeout(200)
--- a/examples/sites/demos/pc/app/form/form-row-col.spec.js
+++ b/examples/sites/demos/pc/app/form/form-row-col.spec.js
@ -4,8 +4,8 @@ test('测试表单复杂布局', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#form-row-col')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-row-col')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')

  const item1Box = await formItem.first().boundingBox()
--- a/examples/sites/demos/pc/app/form/form-validate-field.spec.ts
+++ b/examples/sites/demos/pc/app/form/form-validate-field.spec.ts
@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('特定表单项校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#form-validate-field')
+
+  const demo = page.locator('#form-validate-field')
+  const getTooltipByText = (text: string) => page.locator('.tiny-tooltip').getByText(text)
+
+  await demo.getByRole('button', { name: '校验特定字段' }).click()
+  await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
+  await expect(getTooltipByText('必填')).toBeVisible()
+  await demo.getByRole('button', { name: '移除特定字段校验' }).click()
+  await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
+  await expect(getTooltipByText('必填')).not.toBeVisible()
+})
--- a/examples/sites/demos/pc/app/form/form-validation.spec.ts
+++ b/examples/sites/demos/pc/app/form/form-validation.spec.ts
@ -4,8 +4,8 @@ test('测试表单校验规则', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#form-validation')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-validation')
+  const form = demo.locator('.tiny-form')

  // 直接提交，查看是否出现检验提示
  await form.getByRole('button', { name: '提交' }).click()
@ -21,8 +21,8 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#form-validation')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-validation')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')
  const requiredTip = page.getByRole('tooltip', { name: '必填' })

@ -44,7 +44,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
  await firstInput.click()
  await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).toBeVisible()
  await datePicker.click()
-  await page.locator('.tiny-date-picker').getByText('15').click()
+  await page.locator('.tiny-date-picker .tiny-date-table__row').getByText('15').nth(1).click()
  await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()

  // url输入框
@ -63,17 +63,6 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
  emailInput.fill(validEmail)
  await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).not.toBeVisible()

-  // 级联选择器
-  const cascade = formItem.locator('.tiny-cascader input')
-  const cascadeSelect = page.locator('.tiny-cascader-dropdown')
-  await cascade.click()
-  await firstInput.click()
-  await expect(requiredTip.first()).toBeVisible()
-  await cascade.click()
-  await cascadeSelect.getByText('指南').click()
-  await cascadeSelect.getByText('安装').click()
-  await expect(requiredTip.first()).not.toBeVisible()
-
  // numeric输入
  const numeric = formItem.locator('.tiny-numeric').first()
  const increase = numeric.locator('.tiny-numeric__increase')
--- a/examples/sites/demos/pc/app/form/group-form.spec.ts
+++ b/examples/sites/demos/pc/app/form/group-form.spec.ts
@ -4,10 +4,10 @@ test('测试分组表单', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#group-form')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#group-form')
+  const form = demo.locator('.tiny-form')
  const requiredTip = page.locator('.tiny-tooltip').getByText('必填')
-  const submitButton = preview.getByRole('button', { name: '确认' })
+  const submitButton = demo.getByRole('button', { name: '确认' })

  await expect(form).toHaveCount(2)
  await submitButton.click()
--- a/examples/sites/demos/pc/app/form/label-align-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/label-align-composition-api.vue
@ -1,6 +1,6 @@
 <template>
  <div class="demo-form">
-    <div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
+    <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
      <tiny-form-item label="用户名" prop="username" required>
        <tiny-input v-model="createData.username"></tiny-input>
--- a/examples/sites/demos/pc/app/form/label-align.spec.ts
+++ b/examples/sites/demos/pc/app/form/label-align.spec.ts
@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试表单文本对齐', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#label-align')
+
+  const demo = page.locator('#label-align')
+  const form = demo.locator('.tiny-form')
+  const formItem = form.locator('.tiny-form-item')
+  const switchBtn = demo.locator('.tiny-switch')
+  const firstItemLabel = formItem.first().locator('.tiny-form-item__label')
+
+  await expect(firstItemLabel).toHaveCSS('padding-left', '12px')
+  await switchBtn.click()
+  await expect(firstItemLabel).toHaveCSS('padding-left', '0px')
+})
--- a/examples/sites/demos/pc/app/form/label-align.vue
+++ b/examples/sites/demos/pc/app/form/label-align.vue
@ -1,6 +1,6 @@
 <template>
  <div class="demo-form">
-    <div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
+    <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
      <tiny-form-item label="用户名" prop="username" required>
        <tiny-input v-model="createData.username"></tiny-input>
--- a/examples/sites/demos/pc/app/form/label-position.spec.ts
+++ b/examples/sites/demos/pc/app/form/label-position.spec.ts
@ -2,29 +2,31 @@ import { test, expect } from '@playwright/test'

 test('测试表单文本对齐', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#label-align')
+  await page.goto('form#label-position')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#label-position')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')
-  const switchBtn = preview.locator('.tiny-switch')
+  const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
  const firstItemLabel = formItem.first().locator('.tiny-form-item__label')
  const firstItemContent = formItem.first().locator('.tiny-form-item__content')

-  await switchBtn.click()
-  await expect(form).not.toHaveClass(/label-align/)
-  await switchBtn.click()
-  await expect(form).toHaveClass(/label-align/)
+  await getBtnByText('left').click()
+  await expect(form).toHaveClass(/tiny-form--label-left/)
  let labelBox = await firstItemLabel.boundingBox()
  let contentBox = await firstItemContent.boundingBox()
-  expect(labelBox.y).toEqual(contentBox.y)
-  await preview.getByRole('button', { name: 'top' }).click()
+  expect(labelBox?.y).toEqual(contentBox?.y)
+
+  await getBtnByText('top').click()
+  await expect(form).toHaveClass(/tiny-form--label-top/)
  labelBox = await firstItemLabel.boundingBox()
  contentBox = await firstItemContent.boundingBox()
-  expect(labelBox.y).toBeLessThan(contentBox.y)
-  await preview.getByRole('button', { name: 'right' }).click()
+  expect(labelBox?.y).toBeLessThan(contentBox?.y || 0)
+
+  await getBtnByText('right').click()
+  await expect(form).toHaveClass(/tiny-form--label-right/)
  labelBox = await firstItemLabel.boundingBox()
  contentBox = await firstItemContent.boundingBox()
-  expect(contentBox.y).toEqual(labelBox.y)
+  expect(contentBox?.y).toEqual(labelBox?.y)
  await expect(firstItemLabel).toHaveCSS('text-align', 'right')
 })
--- a/examples/sites/demos/pc/app/form/message-type.spec.ts
+++ b/examples/sites/demos/pc/app/form/message-type.spec.ts
@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('文本类型错误提示位置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#message-type')
+
+  const demo = page.locator('#message-type')
+  const form = demo.locator('.tiny-form')
+  const formItem = form.locator('.tiny-form-item')
+  const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
+  const firstItemError = formItem.first().locator('.tiny-form-item__error')
+
+  await demo.getByRole('button', { name: '提交' }).click()
+  await getBtnByText('默认').click()
+  await expect(firstItemError).toHaveCSS('position', 'absolute')
+  await getBtnByText('行内').click()
+  await expect(firstItemError).toHaveCSS('display', 'inline-block')
+  await getBtnByText('块级').click()
+  await expect(firstItemError).toHaveCSS('display', 'flex')
+})
--- a/examples/sites/demos/pc/app/form/novalid-tip.spec.ts
+++ b/examples/sites/demos/pc/app/form/novalid-tip.spec.ts
@ -4,12 +4,11 @@ test('测试隐藏表单项校验提示', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#novalid-tip')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#novalid-tip')
+  const form = demo.locator('.tiny-form')
  const tooltip = page.locator('.tiny-tooltip')
  const submitButton = form.getByRole('button', { name: '注册' })

-  await expect(form.locator('.tiny-form-item').first().locator('input')).toHaveAttribute('novalid-tip', '')
  await submitButton.click()
  await expect(tooltip.getByText('必填')).toHaveCount(1)
 })
--- a/examples/sites/demos/pc/app/form/overflow-title.spec.ts
+++ b/examples/sites/demos/pc/app/form/overflow-title.spec.ts
@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('标签超长显示提示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#overflow-title')
+
+  const demo = page.locator('#overflow-title')
+  const form = demo.locator('.tiny-form')
+  const formItem = form.locator('.tiny-form-item')
+  const firstItemLabel = formItem.first().locator('.tiny-form-item__label')
+
+  await firstItemLabel.hover()
+  await expect(page.locator('.tiny-tooltip').getByText('请输入人员信息请输入人员信息')).toBeVisible()
+})
--- a/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
@ -0,0 +1,49 @@
+<template>
+  <div class="demo-form">
+    <div class="scroll-parent">
+      <tiny-form ref="formRef" :model="createData" label-width="60px" :popper-options="{ bubbling: true }">
+        <tiny-form-item label="姓名" prop="name" required>
+          <tiny-input v-model="createData.name"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item label="昵称" prop="nickname" required>
+          <tiny-input v-model="createData.nickname"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item label="描述" prop="desc" required>
+          <tiny-input v-model="createData.desc" type="textarea"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item>
+          <tiny-button type="primary" @click="submitClick"> 提交 </tiny-button>
+        </tiny-form-item>
+      </tiny-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+
+const createData = ref({
+  name: '',
+  nickname: '',
+  desc: ''
+})
+
+const formRef = ref()
+
+function submitClick() {
+  formRef.value.validate(() => {
+    // empty
+  })
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.scroll-parent {
+  height: 200px;
+  overflow: auto;
+}
+</style>
--- a/examples/sites/demos/pc/app/form/popper-options.spec.ts
+++ b/examples/sites/demos/pc/app/form/popper-options.spec.ts
@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('错误提示配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#popper-options')
+
+  const demo = page.locator('#popper-options')
+  const btn = demo.getByRole('button', { name: '提交' })
+  const tooltip = page.locator('.tiny-tooltip').getByText('必填')
+
+  await btn.click()
+  await expect(tooltip).toHaveCount(3)
+  let beforeBox = await tooltip.first().boundingBox()
+  await page.locator('#app').click()
+  await page.mouse.wheel(0, 2000)
+  let afterBox = await tooltip.first().boundingBox()
+  expect(afterBox?.y).toBeLessThan(beforeBox?.y || 0)
+})
--- a/examples/sites/demos/pc/app/form/popper-options.vue
+++ b/examples/sites/demos/pc/app/form/popper-options.vue
@ -0,0 +1,59 @@
+<template>
+  <div class="demo-form">
+    <div class="scroll-parent">
+      <tiny-form ref="form" :model="createData" label-width="60px" :popper-options="{ bubbling: true }">
+        <tiny-form-item label="姓名" prop="name" required>
+          <tiny-input v-model="createData.name"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item label="昵称" prop="nickname" required>
+          <tiny-input v-model="createData.nickname"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item label="描述" prop="desc" required>
+          <tiny-input v-model="createData.desc" type="textarea"> </tiny-input>
+        </tiny-form-item>
+        <tiny-form-item>
+          <tiny-button type="primary" @click="submitClick"> 提交 </tiny-button>
+        </tiny-form-item>
+      </tiny-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      createData: {
+        name: '',
+        nickname: '',
+        desc: ''
+      }
+    }
+  },
+  methods: {
+    submitClick() {
+      this.$refs.form.validate(() => {
+        // empty
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.scroll-parent {
+  height: 200px;
+  overflow: auto;
+}
+</style>
--- a/examples/sites/demos/pc/app/form/size.spec.js
+++ b/examples/sites/demos/pc/app/form/size.spec.js
@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试表单尺寸', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#size')
-
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-
-  // mini表单
-  await expect(form.first().locator('.tiny-form-item--mini')).toHaveCount(7)
-  await expect(form.first().getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--mini/)
-  await expect(form.first().locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
-  // small表单
-  await expect(form.nth(1).locator('.tiny-form-item--small')).toHaveCount(7)
-  await expect(form.nth(1).getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--small/)
-  await expect(form.nth(1).locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
-  // medium表单
-  await expect(form.nth(2).locator('.tiny-form-item--medium')).toHaveCount(7)
-  await expect(form.nth(2).getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--medium/)
-  await expect(form.nth(2).locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
-})
--- a/examples/sites/demos/pc/app/form/size.spec.ts
+++ b/examples/sites/demos/pc/app/form/size.spec.ts
@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test('测试表单尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#size')
+
+  const demo = page.locator('#size')
+  const form = demo.locator('.tiny-form')
+  const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
+
+  // mini表单
+  await getBtnByText('mini').click()
+  await expect(form.locator('.tiny-form-item--mini')).toHaveCount(7)
+  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--mini/)
+  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
+  // small表单
+  await getBtnByText('small').click()
+  await expect(form.locator('.tiny-form-item--small')).toHaveCount(7)
+  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--small/)
+  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
+  // medium表单
+  await getBtnByText('medium').click()
+  await expect(form.locator('.tiny-form-item--medium')).toHaveCount(7)
+  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--medium/)
+  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
+})
--- a/examples/sites/demos/pc/app/form/slot-label.spec.ts
+++ b/examples/sites/demos/pc/app/form/slot-label.spec.ts
@ -4,8 +4,8 @@ test('测试表单标签文本插槽', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#slot-label')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#slot-label')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')

  await expect(formItem.first().locator('.tiny-form-item__label')).toHaveText('必填')
--- a/examples/sites/demos/pc/app/form/smb-required.spec.ts
+++ b/examples/sites/demos/pc/app/form/smb-required.spec.ts
@ -1,13 +1,15 @@
 import { test, expect } from '@playwright/test'

-test('测试分组表单', async ({ page }) => {
+test('必填项红色星号', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#smb-required')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#smb-required')
+  const form = demo.locator('.tiny-form')
  const firstLabel = form.locator('.tiny-form-item__label').first()
+  const switchBtn = demo.locator('.tiny-switch')

+  await switchBtn.click()
  await expect(firstLabel).toBeVisible()
  let beforeElement = await page.evaluate(() => {
    const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
@ -15,20 +17,15 @@ test('测试分组表单', async ({ page }) => {
    return { display, content }
  })

-  // 默认主题下，必填项的星号出现
  expect(beforeElement.display).toBe('inline-block')
  expect(beforeElement.content).toBe('"*"')

-  // 切换到SMB主题，红色星号不出现
-  await page.getByRole('button', { name: '切换主题' }).hover()
-  await page.waitForTimeout(500)
-  await page.locator('div').filter({ hasText: 'SMB Theme' }).first().click()
-  await expect(firstLabel).toBeVisible()
+  await switchBtn.click()
  beforeElement = await page.evaluate(() => {
    const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
    const { display, content } = window.getComputedStyle(labelBefore, '::before')
    return { display, content }
  })
-  expect(beforeElement.display).toBe('none')
-  expect(beforeElement.content).toBe('"*"')
+  expect(beforeElement.display).toBe('inline')
+  expect(beforeElement.content).toBe('none')
 })
--- a/examples/sites/demos/pc/app/form/validate-debounce.spec.ts
+++ b/examples/sites/demos/pc/app/form/validate-debounce.spec.ts
@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('校验防抖处理', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#validate-debounce')
+
+  const demo = page.locator('#validate-debounce')
+  const input = demo.locator('input').nth(1)
+
+  await input.fill('11')
+  await input.fill('1111')
+  await expect(page.locator('.tiny-modal').getByText('校验失败')).toHaveCount(1)
+})
--- a/examples/sites/demos/pc/app/form/validate-type.spec.ts
+++ b/examples/sites/demos/pc/app/form/validate-type.spec.ts
@ -4,8 +4,8 @@ test('测试校验提示是否出现在form上', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#validate-type')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#validate-type')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')
  const submitButton = form.getByRole('button', { name: '提交' })

@ -16,6 +16,4 @@ test('测试校验提示是否出现在form上', async ({ page }) => {
  await expect(formItem.nth(1).locator('.tiny-form-item__error')).toHaveText('不符合规则的日期格式')
  await expect(formItem.nth(2).locator('.tiny-form-item__error')).toBeVisible()
  await expect(formItem.nth(2).locator('.tiny-form-item__error')).toHaveText('必填')
-  await expect(formItem.nth(3).locator('.tiny-form-item__error')).toBeVisible()
-  await expect(formItem.nth(3).locator('.tiny-form-item__error')).toHaveText('必填')
 })
--- a/examples/sites/demos/pc/app/form/validation-position.spec.ts
+++ b/examples/sites/demos/pc/app/form/validation-position.spec.ts
@ -4,19 +4,15 @@ test('测试检验提示出现为', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('form#validation-position')

-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#validation-position')
+  const form = demo.locator('.tiny-form')
  const formItem = form.locator('.tiny-form-item')
  const submitButton = form.getByRole('button', { name: '提交' })
  const tooltip = page.locator('.tiny-tooltip')

  await submitButton.click()
-  // 校验提示在表单项上方
-  const item1Box = await formItem.first().boundingBox()
-  const requiredTipBox = await tooltip.getByText('必填').boundingBox()
-  expect(requiredTipBox.y).toBeLessThan(item1Box.y)
  // 校验提示在表单项下方
  const item2Box = await formItem.nth(1).boundingBox()
  const dateTipBox = await tooltip.getByText('不符合规则的日期格式').boundingBox()
-  expect(item2Box.y).toBeLessThan(dateTipBox.y)
+  expect(item2Box?.y).toBeLessThan(dateTipBox?.y || 0)
 })
--- a/examples/sites/demos/pc/app/form/webdoc/form.js
+++ b/examples/sites/demos/pc/app/form/webdoc/form.js
@ -210,6 +210,17 @@ export default {
          'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>false</code> , but under the SMB theme, it defaults to <code>true</code> .'
      },
      codeFiles: ['smb-required.vue']
+    },
+    {
+      demoId: 'popper-options',
+      name: { 'zh-CN': '错误提示配置', 'en-US': 'Error tip options' },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，切页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
+        'en-US':
+          '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']
    }
  ],
  apis: [