Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<template>
<tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
</template>

<script setup>
import { ref } from 'vue'
import { TinyCheckbox } from '@opentiny/vue'

const checked = ref(true)
</script>
22 changes: 22 additions & 0 deletions examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
Original file line number Diff line number Diff line change
@@ -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/)
})
18 changes: 18 additions & 0 deletions examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
</template>

<script>
import { TinyCheckbox } from '@opentiny/vue'

export default {
components: {
TinyCheckbox
},
data() {
return {
checked: true
}
}
}
</script>
13 changes: 13 additions & 0 deletions examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@ export default {
},
codeFiles: ['basic-usage.vue']
},
// 禁用复选框
{
demoId: 'disabled',
name: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
desc: {
'zh-CN': '<p>通过 <code>disabled</code> 字段设置当前复选框是否为禁用状态。</p>',
'en-US': '<p>Set whether the current checkbox is disabled through the <code>disabled</code> field.</p>'
},
codeFiles: ['checkbox-disabled.vue']
},
{
demoId: 'checkbox-group',
name: {
Expand Down
Loading