docs(site): [cascader, cascader-panel] Optimize document (#873)
This commit is contained in:
parent
83a49eef44
commit
b64a63166e
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div class="cascader-panel-demo">
|
||||
<div class="cascader-panel-demo-props">
|
||||
<div>选中值:<span>{{ value }}</span></div>
|
||||
<tiny-cascader-panel
|
||||
v-model="value"
|
||||
class="cascader-panel-demo"
|
||||
:options="optionsCascader"
|
||||
:props="{
|
||||
children: 'children',
|
||||
|
@ -219,7 +218,7 @@ const optionsCascader = ref([
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-panel-demo > :not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
.cascader-panel-demo-props > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div class="cascader-panel-demo">
|
||||
<div class="cascader-panel-demo-props">
|
||||
<div>选中值:<span>{{ value }}</span></div>
|
||||
<tiny-cascader-panel
|
||||
v-model="value"
|
||||
class="cascader-panel-demo"
|
||||
:options="optionsCascader"
|
||||
:props="{
|
||||
children: 'children',
|
||||
|
@ -227,7 +226,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-panel-demo > :not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
.cascader-panel-demo-props > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="cascader-panel-demo-event">
|
||||
<tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
|
||||
<tiny-cascader-panel
|
||||
v-model="value"
|
||||
ref="CascaderPanelRef"
|
||||
class="cascader-panel-demo"
|
||||
ref="CascaderPanel"
|
||||
:options="optionsCascader"
|
||||
@change="change"
|
||||
@expand-change="expandChange"
|
||||
|
@ -211,14 +210,14 @@ const optionsCascader = ref([
|
|||
]
|
||||
}
|
||||
])
|
||||
const CascaderPanelRef = ref()
|
||||
const cascaderPanelRef = ref()
|
||||
|
||||
function clearCheckedNodes() {
|
||||
CascaderPanelRef.value.clearCheckedNodes()
|
||||
cascaderPanelRef.value.clearCheckedNodes()
|
||||
}
|
||||
|
||||
function change(value) {
|
||||
const checkVal = CascaderPanelRef.value.getCheckedNodes()
|
||||
const checkVal = cascaderPanelRef.value.getCheckedNodes()
|
||||
let mess = ''
|
||||
|
||||
if (checkVal.length) {
|
||||
|
@ -238,7 +237,7 @@ function expandChange(value) {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-panel-demo {
|
||||
min-height: 200px;
|
||||
.cascader-panel-demo-event > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="cascader-panel-demo-event">
|
||||
<tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
|
||||
<tiny-cascader-panel
|
||||
v-model="value"
|
||||
ref="CascaderPanel"
|
||||
class="cascader-panel-demo"
|
||||
ref="cascaderPanel"
|
||||
:options="optionsCascader"
|
||||
@change="change"
|
||||
@expand-change="expandChange"
|
||||
|
@ -221,13 +220,13 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
clearCheckedNodes() {
|
||||
this.$refs.CascaderPanel.clearCheckedNodes()
|
||||
this.$refs.cascaderPanel.clearCheckedNodes()
|
||||
},
|
||||
expandChange(value) {
|
||||
Modal.message({ message: `节点展开:${value}`, status: 'info' })
|
||||
},
|
||||
change(value) {
|
||||
const checkVal = this.$refs.CascaderPanel.getCheckedNodes()
|
||||
const checkVal = this.$refs.cascaderPanel.getCheckedNodes()
|
||||
let mess = ''
|
||||
|
||||
if (checkVal.length) {
|
||||
|
@ -244,7 +243,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-panel-demo {
|
||||
min-height: 200px;
|
||||
.cascader-panel-demo-event > :not(:last-child){
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -13,25 +13,18 @@ export default {
|
|||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'change',
|
||||
'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>change</code> 点击节点后触发的事件,回调参数为 选中节点的值\n通过 <code>clearCheckedNodes</code> 清除选中的节点。\n通过 <code>getCheckedNodes</code> 获取选中的节点。</p>\n',
|
||||
'en-US':
|
||||
'<p>The event is triggered after a node is clicked through <code>change</code>. The callback parameter is the value of the selected node.\nYou can clear the selected node through <code>clearCheckedNodes</code>. \n Obtain the selected node through <code>getCheckedNodes</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['change.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-option-content',
|
||||
'name': { 'zh-CN': '自定义节点内容', 'en-US': 'Custom Node Content' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义,<code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>,分别表示当前节点的 Node 对象和数据。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use <code>scoped slot</code> to customize the node content of the options of the cascading panel. <code>scoped slot</code> transfers two fields: <code>node</code> and <code>data</code>, indicating the node object and data of the current node, respectively. </p>\n'
|
||||
'zh-CN': `<p>
|
||||
<div>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义。</div>
|
||||
<div><code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>,分别表示当前节点的 Node 对象和数据。</div>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
The <div> can customize the node contents of the cascade panel's alternatives through the <code>scoped slot</code>. </div>
|
||||
<div><code>scoped slot</code> passes in two fields, <code>node</code> and <code>data</code>, representing the Node object and data of the current node, respectively. </div>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['custom-option-content.vue']
|
||||
},
|
||||
|
@ -39,12 +32,37 @@ export default {
|
|||
'demoId': 'cascader-panel-props',
|
||||
'name': { 'zh-CN': 'Props 选项', 'en-US': 'Props Options' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p>通过 <code>children</code> 指定子级选项,默认值为 children。\n通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。\n通过 <code>label</code> 指定显示选项 label 值,默认为 label。\n通过 <code>value</code> 指定值选项 value 值,默认为 value</p>\n</div>\n',
|
||||
'en-US':
|
||||
'<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p> specifies child options with <code>children</code>. The default value is children. \n Indicates whether to return an array consisting of the values of the menus where the node is located through <code>emitPath</code>. \n Use <code>label</code> to specify the label value of the display option. The default value is label. \n Use <code>value</code> to specify the value of the value option. The default value is value</p>\n</div>\n'
|
||||
'zh-CN': `<p>
|
||||
<div>通过 <code>children</code> 指定子级选项,默认值为 children。</div>
|
||||
<div>通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。</div>
|
||||
<div>通过 <code>label</code> 指定显示选项 label 值,默认为 label。</div>
|
||||
<div>通过 <code>value</code> 指定值选项 value 值,默认为 value。</div>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
<div> specifies the child options through <code>children</code>, which defaults to children. </div>
|
||||
<div> Whether to return an array of values from the menu levels where the node resides via <code>emitPath</code>. </div>
|
||||
<div> specifies the display option label value by <code>label</code>, which defaults to label. </div>
|
||||
<div> Specifies the value option value by <code>value</code>, which defaults to value. </div>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['cascader-panel-props.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'change',
|
||||
'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
<div>通过 <code>change</code> 点击节点后触发的事件,回调参数为"选中节点的值"。</div>
|
||||
<div>通过 <code>clearCheckedNodes</code> 清除选中的节点。</div>
|
||||
<div>通过 <code>getCheckedNodes</code> 获取选中的节点。</dic>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
<div> The event triggered by clicking the node through <code>change</code>, with the callback parameter "Select the value of the node". </div>
|
||||
<div> Clear the selected nodes with <code>clearCheckedNodes</code>. </div>
|
||||
<div> Get the selected nodes from <code>getCheckedNodes</code>. </dic>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['change.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
@ -55,9 +73,12 @@ export default {
|
|||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'ICascaderPanelNodePropValue',
|
||||
'typeAnchorName': 'ICascaderPanelNodeValue',
|
||||
'typeAnchorName': 'ICascaderPanelNodePropValue',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '选中项绑定值', 'en-US': 'Bound value of the selected item' },
|
||||
'desc': {
|
||||
'zh-CN': `选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定`,
|
||||
'en-US': `Select an item binding value whose type is determined by both props.multiple and props.emitPath`
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
|
@ -87,6 +108,7 @@ export default {
|
|||
{
|
||||
'name': 'change',
|
||||
'type': '(value: ICascaderPanelNodePropValue) => void',
|
||||
'typeAnchorName': 'ICascaderPanelNodePropValue',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当选中节点变化时触发; 回调参数为 选中节点的值',
|
||||
|
@ -98,9 +120,10 @@ export default {
|
|||
{
|
||||
'name': 'expand-change',
|
||||
'type': '(value: ICascaderPanelNodeValue[]) => void',
|
||||
'typeAnchorName': 'ICascaderPanelNodeValue',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array类型)',
|
||||
'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array 类型)',
|
||||
'en-US':
|
||||
'This event is triggered when the expanded node changes. arg: The callback parameter is an array (Array type) consisting of parent option values.'
|
||||
},
|
||||
|
@ -113,7 +136,8 @@ export default {
|
|||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义备选项的节点内容,参数为 { node: ICascaderPanelNode, data: ICascaderPanelData },分别为当前节点的 Node 对象和数据',
|
||||
'zh-CN':
|
||||
'自定义备选项的节点内容,参数为 { node: ICascaderPanelNode, data: ICascaderPanelData },分别为当前节点的 Node 对象和数据',
|
||||
'en-US':
|
||||
'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
|
||||
},
|
||||
|
@ -124,6 +148,7 @@ export default {
|
|||
{
|
||||
'name': 'getCheckedNodes',
|
||||
'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
|
||||
'typeAnchorName': 'ICascaderPanelNode',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '获取选中的节点;参数为 (leafOnly) 是否只是获取子节点,默认值为 false',
|
||||
|
@ -143,7 +168,7 @@ export default {
|
|||
'casprops: ICascaderPanelConfig': [
|
||||
{
|
||||
'name': 'expandTrigger',
|
||||
'type': '"click" | "hover"',
|
||||
'type': `'click' | 'hover'`,
|
||||
'defaultValue': 'click',
|
||||
'desc': {
|
||||
'zh-CN': '次级菜单的展开方式',
|
||||
|
@ -194,7 +219,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'加载动态数据的方法,仅在 lazy 为 true 时有效;参数说明: node为当前点击的节点,resolve为数据加载完成的回调(必须调用)',
|
||||
'加载动态数据的方法,仅在 lazy 为 true 时有效;参数说明: node 为当前点击的节点,resolve 为数据加载完成的回调(必须调用)',
|
||||
'en-US':
|
||||
'Method for loading dynamic data. This parameter is valid only when lazy is set to true. Parameter description: node indicates the currently clicked node. resolve indicates the callback after data loading is complete (mandatory).'
|
||||
}
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
|
||||
value:{{ value }}
|
||||
<div class="demo-tiny-cascader-check-strictly">
|
||||
<div>value: {{ value }}</div>
|
||||
<div>
|
||||
<tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -205,3 +207,9 @@ const options = ref([
|
|||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tiny-cascader-check-strictly > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
|
||||
value:{{ value }}
|
||||
<div class="demo-tiny-cascader-check-strictly">
|
||||
<div>value: {{ value }}</div>
|
||||
<div>
|
||||
<tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -213,3 +215,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tiny-cascader-check-strictly > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<tiny-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
clearable
|
||||
separator="+"
|
||||
size="medium"
|
||||
popper-class="custom-class"
|
||||
:popper-append-to-body="false"
|
||||
></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
@ -8,6 +8,4 @@ test('可清空', async ({ page }) => {
|
|||
await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
|
||||
const textClear = await page.getByRole('textbox', { name: '请选择' }).inputValue()
|
||||
await expect(textClear).toEqual('')
|
||||
const medium = page.locator('.tiny-cascader--medium')
|
||||
await expect(medium).toBeVisible()
|
||||
})
|
||||
|
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<tiny-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
clearable
|
||||
separator="+"
|
||||
size="medium"
|
||||
popper-class="custom-class"
|
||||
:popper-append-to-body="false"
|
||||
></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<tiny-cascader :options="optionsDis"></tiny-cascader>
|
||||
<div class="cascader-demo-disabled">
|
||||
<tiny-cascader :options="optionsDis"></tiny-cascader>
|
||||
<tiny-cascader :options="optionsDis" disabled></tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Cascader as TinyCascader } from '@opentiny/vue'
|
||||
|
@ -202,3 +204,9 @@ const optionsDis = ref([
|
|||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-demo-disabled > :not(:last-child){
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
|
@ -3,9 +3,11 @@ import { test, expect } from '@playwright/test'
|
|||
test('禁用选项', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('cascader#disabled-items')
|
||||
await page.getByRole('textbox', { name: '请选择' }).click()
|
||||
const cascader = page.locator(
|
||||
'.tiny-cascader-menu > .tiny-cascader-menu__wrap > .tiny-cascader-menu__list > .is-disabled'
|
||||
)
|
||||
await expect(cascader).toBeVisible()
|
||||
await page.locator('.tiny-cascader').getByPlaceholder('请选择').nth(1).click()
|
||||
const cascader1 = page.getByRole('menuitem', { name: '指南' })
|
||||
await expect(cascader1).toHaveClass(/is-disabled/)
|
||||
|
||||
await page.getByPlaceholder('请选择').nth(1).click()
|
||||
const cascader2 = page.locator('.tiny-cascader.is-disabled .tiny-input')
|
||||
await expect(cascader2).toHaveClass(/is-disabled/)
|
||||
})
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<tiny-cascader :options="optionsDis"></tiny-cascader>
|
||||
<div class="cascader-demo-disabled">
|
||||
<tiny-cascader :options="optionsDis"></tiny-cascader>
|
||||
<tiny-cascader :options="optionsDis" disabled></tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -210,3 +213,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cascader-demo-disabled > :not(:last-child){
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
value:{{ value }}
|
||||
<div class="demo-tiny-cascader-event">
|
||||
<div>value: {{ value }}</div>
|
||||
<tiny-cascader
|
||||
v-model="value"
|
||||
ref="cascaderRef"
|
||||
filterable
|
||||
ref="cascader"
|
||||
:options="options"
|
||||
@change="handleChange"
|
||||
@blur="handleblur"
|
||||
|
@ -247,3 +246,9 @@ function handleChange(value) {
|
|||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tiny-cascader-event > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
value:{{ value }}
|
||||
<div class="demo-tiny-cascader-event">
|
||||
<div>value: {{ value }}</div>
|
||||
<tiny-cascader
|
||||
v-model="value"
|
||||
ref="cascader"
|
||||
filterable
|
||||
:options="options"
|
||||
@change="handleChange"
|
||||
@blur="handleblur"
|
||||
|
@ -251,3 +250,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tiny-cascader-event > :not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="tiny-demo-cascader-size">
|
||||
<tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Cascader as TinyCascader } from '@opentiny/vue'
|
||||
|
||||
const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
|
||||
const options = ref([
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记'
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-demo-cascader-size {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('size', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('cascader#size')
|
||||
|
||||
await expect(page.locator('.tiny-cascader.tiny-cascader--mini input')).toHaveCSS('height', '24px')
|
||||
|
||||
await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '32px')
|
||||
|
||||
await expect(page.locator('.tiny-cascader.tiny-cascader--medium input')).toHaveCSS('height', '40px')
|
||||
|
||||
})
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="tiny-demo-cascader-size">
|
||||
<tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
|
||||
<tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascader: Cascader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['zhinan', 'anzhuang', 'xiangmudengji'],
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记'
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-demo-cascader-size {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
|
@ -27,10 +27,14 @@ export default {
|
|||
'demoId': 'disabled-items',
|
||||
'name': { 'zh-CN': '禁用选项', 'en-US': 'Disable Options' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
`<p>通过在数据源中设置 <code>disabled</code> 字段来声明该选项是禁用的,在默认情况下,Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code></p>`,
|
||||
'en-US':
|
||||
'<p>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </p>'
|
||||
'zh-CN': `<p>
|
||||
<div>通过在数据源<code>option</code>中设置 <code>disabled</code> 字段来声明该选项是禁用的,在默认情况下,Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code>。</div>
|
||||
<div>也可以通过直接设置 <code>disabled</code> 可以禁用组件。</div>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
<div>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </div>
|
||||
<div> Components can also be disabled by setting <code>disabled</code> directly.</div>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['disabled-items.vue']
|
||||
},
|
||||
|
@ -53,13 +57,13 @@ export default {
|
|||
'codeFiles': ['clearable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clearable2',
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 属性设置尺寸。</p>\n',
|
||||
'en-US': '<p>Sets the size through the <code>size</code> attribute. </p>\n'
|
||||
},
|
||||
'codeFiles': ['clearable.vue']
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'default-multiple',
|
||||
|
@ -75,9 +79,9 @@ export default {
|
|||
'name': { 'zh-CN': '折叠展示 Tag', 'en-US': 'Fold Tag' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在开启多选模式后,默认情况下会展示所有已选中的选项的 Tag,可以使用 <code>collapse-tags</code> 来折叠 Tag 。\n通过 <code>disabled</code> 设置组件是否禁用,默认值为 false 。</p>\n',
|
||||
'<p>在开启多选模式后,默认情况下会展示所有已选中的选项的 Tag,可以使用 <code>collapse-tags</code> 来折叠 Tag 。</p>',
|
||||
'en-US':
|
||||
'<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. \n Use <code>disabled</code> to set whether to disable the component. The default value is false. </p>\n'
|
||||
'<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. </p>'
|
||||
},
|
||||
'codeFiles': ['collapse-tags.vue']
|
||||
},
|
||||
|
@ -106,7 +110,7 @@ export default {
|
|||
'demoId': 'auto-load',
|
||||
'name': { 'zh-CN': '动态加载', 'en-US': 'Dynamic loading' },
|
||||
'desc': {
|
||||
'zh-CN':`
|
||||
'zh-CN': `
|
||||
<p>
|
||||
当选中某一级时,动态加载该级下的选项。通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载,并通过 <code>lazyload</code> 来设置加载数据源的方法。</br>
|
||||
<code>lazyload</code> 方法有两个参数,第一个参数 node 为当前点击的节点,第二个 resolve 为数据加载完成的回调(必须调用)。</br>
|
||||
|
@ -149,16 +153,14 @@ export default {
|
|||
'demoId': 'filterable',
|
||||
'name': { 'zh-CN': '可搜索', 'en-US': 'Searchable' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
`<p>
|
||||
'zh-CN': `<p>
|
||||
将 <code>filterable</code> 赋值为 <code>true</code> 即可打开搜索功能,默认会匹配节点的 <code>label</code> 或所有父节点的 <code>label</code> (由 <code>show-all-levels</code> 决定)中包含输入值的选项。</br>
|
||||
使用<code>empty</code> 插槽设置无匹配选项时显示的内容,使用<code>debounce</code>设置搜索延迟
|
||||
使用<code>empty</code> 插槽设置无匹配选项时显示的内容,使用<code>debounce</code>设置搜索延迟。
|
||||
</p>`,
|
||||
'en-US':
|
||||
`<p>
|
||||
'en-US': `<p>
|
||||
Set <code>filterable</code> to <code>true</code> to turn on the search function, By default, the <code>label</code> of the node or the <code>label</code> of all parent nodes (as determined by <code>show-all-levels</code>) will match the option containing the input value. </br>
|
||||
Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay
|
||||
</p>`,
|
||||
Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['filterable.vue']
|
||||
},
|
||||
|
@ -197,19 +199,17 @@ export default {
|
|||
'demoId': 'events',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
`<p>
|
||||
'zh-CN': `<p>
|
||||
Cascader 级联选择器的事件有:<code>change</code>、<code>expand-change</code>、<code>blur</code>、<code>focus</code>、<code>visible-change</code>。
|
||||
使用 <code>props.emitPath</code> 能设置节点的返回类型。
|
||||
<div>使用 <code>props.emitPath</code> 能设置节点的返回类型。</div>
|
||||
</p>`,
|
||||
'en-US':
|
||||
`<p>
|
||||
'en-US': `<p>
|
||||
Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>.
|
||||
Use <code>props.emitPath</code> to set the return type of the node.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['events.vue']
|
||||
},
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
|
@ -221,7 +221,11 @@ export default {
|
|||
'type': 'ICascaderPanelNodePropValue',
|
||||
'typeAnchorName': 'ICascaderPanelNodeValue',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '选中项绑定值, 其类型由props.multiple、props.emitPath共同决定', 'en-US': 'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.' },
|
||||
'desc': {
|
||||
'zh-CN': '选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定',
|
||||
'en-US':
|
||||
'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.'
|
||||
},
|
||||
'demoId': 'clearable'
|
||||
},
|
||||
{
|
||||
|
@ -270,18 +274,18 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': '"medium" | "small" | "mini"',
|
||||
'type': `'medium' | 'small' | 'mini'`,
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'Dimension;'
|
||||
},
|
||||
'demoId': 'clearable2'
|
||||
'demoId': 'size'
|
||||
},
|
||||
{
|
||||
'name': 'placeholder',
|
||||
'type': 'string',
|
||||
'defaultValue': '请选择',
|
||||
'defaultValue': `'请选择'`,
|
||||
'desc': { 'zh-CN': '输入框占位文本', 'en-US': 'Placeholder text in the text box' },
|
||||
'demoId': 'filterable'
|
||||
},
|
||||
|
@ -319,7 +323,7 @@ export default {
|
|||
{
|
||||
'name': 'separator',
|
||||
'type': 'string',
|
||||
'defaultValue': '/',
|
||||
'defaultValue': `'/'`,
|
||||
'desc': { 'zh-CN': '选项分隔符', 'en-US': 'Option separator' },
|
||||
'demoId': 'clearable1'
|
||||
},
|
||||
|
@ -333,6 +337,7 @@ export default {
|
|||
{
|
||||
'name': 'filter-method',
|
||||
'type': '(node: ICascaderPanelNode, keyword: string) => boolean',
|
||||
'typeAnchorName': 'ICascaderPanelNode',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
|
@ -375,17 +380,18 @@ export default {
|
|||
{
|
||||
'name': 'change',
|
||||
'type': '(value: ICascaderPanelNodePropValue) => void',
|
||||
'typeAnchorName': 'ICascaderPanelNodePropValue',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当选中节点变化时触发',
|
||||
'en-US':
|
||||
'This event is triggered when the selected node changes.'
|
||||
'en-US': 'This event is triggered when the selected node changes.'
|
||||
},
|
||||
'demoId': 'events'
|
||||
},
|
||||
{
|
||||
'name': 'expand-change',
|
||||
'type': '(value: ICascaderPanelNodeValue[]) => void',
|
||||
'typeAnchorName': 'ICascaderPanelNodeValue',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当展开节点发生变化时触发',
|
||||
|
@ -400,8 +406,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当失去焦点时触发',
|
||||
'en-US':
|
||||
'This event is triggered when the focus is lost.'
|
||||
'en-US': 'This event is triggered when the focus is lost.'
|
||||
},
|
||||
'demoId': 'events'
|
||||
},
|
||||
|
@ -411,8 +416,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当获得焦点时触发',
|
||||
'en-US':
|
||||
'This event is triggered when the focus is obtained.'
|
||||
'en-US': 'This event is triggered when the focus is obtained.'
|
||||
},
|
||||
'demoId': 'events'
|
||||
},
|
||||
|
@ -422,19 +426,18 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '下拉框出现/隐藏时触发',
|
||||
'en-US':
|
||||
'This event is triggered when the drop-down list box is displayed or hidden.'
|
||||
'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
|
||||
},
|
||||
'demoId': 'events'
|
||||
},
|
||||
{
|
||||
'name': 'remove-tag',
|
||||
'type': '(removeValue: ICascaderPanelNodeValue[]) => void',
|
||||
'typeAnchorName': 'ICascaderPanelNodeValue',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '在多选模式下,移除Tag时触发',
|
||||
'en-US':
|
||||
'In multi-choice mode, this event is triggered when a tag is removed.'
|
||||
'en-US': 'In multi-choice mode, this event is triggered when a tag is removed.'
|
||||
},
|
||||
'demoId': 'default-multiple'
|
||||
}
|
||||
|
@ -452,7 +455,8 @@ export default {
|
|||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义备选项的节点内容,参数为 { node: ICascaderPanelNode, data: ICascaderPanelData },分别为当前节点的 Node 对象和数据',
|
||||
'zh-CN':
|
||||
'自定义备选项的节点内容,参数为 { node: ICascaderPanelNode, data: ICascaderPanelData },分别为当前节点的 Node 对象和数据',
|
||||
'en-US':
|
||||
'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
|
||||
}
|
||||
|
@ -462,11 +466,11 @@ export default {
|
|||
{
|
||||
'name': 'getCheckedNodes',
|
||||
'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
|
||||
'typeAnchorName': 'ICascaderPanelNode',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '获取选中的节点',
|
||||
'en-US':
|
||||
'Obtain the selected node'
|
||||
'en-US': 'Obtain the selected node'
|
||||
},
|
||||
'demoId': 'events'
|
||||
}
|
||||
|
@ -474,7 +478,7 @@ export default {
|
|||
'casprops: ICascaderPanelConfig': [
|
||||
{
|
||||
'name': 'expandTrigger',
|
||||
'type': '"click" | "hover"',
|
||||
'type': `'click' | 'hover'`,
|
||||
'defaultValue': 'click',
|
||||
'desc': {
|
||||
'zh-CN': '次级菜单的展开方式',
|
||||
|
|
Loading…
Reference in New Issue