diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue new file mode 100644 index 0000000000..990e437412 --- /dev/null +++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue @@ -0,0 +1,10 @@ + + + diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts new file mode 100644 index 0000000000..9c3a21967f --- /dev/null +++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts @@ -0,0 +1,22 @@ +import { test, expect } from '@playwright/test' + +test('禁用复选框', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + + await page.goto('checkbox#disabled') + + const checkbox = page.locator('#disabled .tiny-checkbox') + + await expect(checkbox).toHaveClass(/is-disabled/) + await expect(checkbox).toHaveClass(/is-checked/) + + // 在浏览器上下文调用原生 click,但先作类型判断,避免 TS 报错 + await checkbox.evaluate((node: Element) => { + if (node instanceof HTMLElement) { + node.click() + } + }) + + // 状态应保持不变 + await expect(checkbox).toHaveClass(/is-checked/) +}) diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue new file mode 100644 index 0000000000..774fc5cab8 --- /dev/null +++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue @@ -0,0 +1,18 @@ + + + diff --git a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js index 429a4b08fe..40cccd7a9f 100644 --- a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js +++ b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js @@ -16,6 +16,19 @@ export default { }, codeFiles: ['basic-usage.vue'] }, + // 禁用复选框 + { + demoId: 'disabled', + name: { + 'zh-CN': '禁用', + 'en-US': 'Disabled' + }, + desc: { + 'zh-CN': '

通过 disabled 字段设置当前复选框是否为禁用状态。

', + 'en-US': '

Set whether the current checkbox is disabled through the disabled field.

' + }, + codeFiles: ['checkbox-disabled.vue'] + }, { demoId: 'checkbox-group', name: {