mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-06 12:39:46 +08:00
chore(Cascader): fix some issues (#9756)
This commit is contained in:
neverland
GitHub
parent
94539d8f74
commit
5d85f9ca9e
@ -259,7 +259,7 @@ export default defineComponent({
|
||||
})}
|
||||
>
|
||||
{slots['options-top']
|
||||
? slots['options-top']({ activeTab: activeTab.value })
|
||||
? slots['options-top']({ tabIndex: activeTab.value })
|
||||
: null}
|
||||
{renderOptions(options, selected, tabIndex)}
|
||||
</Tab>
|
||||
|
||||
@ -200,16 +200,17 @@ export default {
|
||||
### Custom Content
|
||||
|
||||
```html
|
||||
<van-cascader
|
||||
v-model="code"
|
||||
title="Select Area"
|
||||
:options="options"
|
||||
:field-names="fieldNames"
|
||||
>
|
||||
<template #options-top="{ activeTab }">
|
||||
<span>Current level {{activeTab}}</span>
|
||||
<van-cascader v-model="code" title="Select Area" :options="options">
|
||||
<template #options-top="{ tabIndex }">
|
||||
<div class="current-level">Current level is {{ tabIndex }}</div>
|
||||
</template>
|
||||
</van-cascader>
|
||||
|
||||
<style>
|
||||
.current-level {
|
||||
padding: 10px 16px 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -218,11 +219,6 @@ import { ref } from 'vue';
|
||||
export default {
|
||||
setup() {
|
||||
const code = ref('');
|
||||
const fieldNames = {
|
||||
text: 'name',
|
||||
value: 'code',
|
||||
children: 'items',
|
||||
};
|
||||
const options = [
|
||||
{
|
||||
name: 'Zhejiang',
|
||||
@ -239,7 +235,6 @@ export default {
|
||||
return {
|
||||
code,
|
||||
options,
|
||||
fieldNames,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -287,7 +282,7 @@ export default {
|
||||
| --- | --- | --- |
|
||||
| title | Custom title | - |
|
||||
| option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
|
||||
| options-top | Custom the content above options | - |
|
||||
| options-top `v3.2.7` | Custom the content above options | _{ tabIndex: number }_ |
|
||||
|
||||
### Types
|
||||
|
||||
|
||||
@ -210,16 +210,17 @@ export default {
|
||||
### 自定义选项上方内容
|
||||
|
||||
```html
|
||||
<van-cascader
|
||||
v-model="code"
|
||||
title="请选择所在地区"
|
||||
:options="options"
|
||||
:field-names="fieldNames"
|
||||
>
|
||||
<template #options-top="{ activeTab }">
|
||||
<span>当前为第{{ tabIndex }}级</span>
|
||||
<van-cascader v-model="code" title="请选择所在地区" :options="options">
|
||||
<template #options-top="{ tabIndex }">
|
||||
<div class="current-level">当前为第 {{ tabIndex }} 级</div>
|
||||
</template>
|
||||
</van-cascader>
|
||||
|
||||
<style>
|
||||
.current-level {
|
||||
padding: 10px 16px 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -228,11 +229,6 @@ import { ref } from 'vue';
|
||||
export default {
|
||||
setup() {
|
||||
const code = ref('');
|
||||
const fieldNames = {
|
||||
text: 'name',
|
||||
value: 'code',
|
||||
children: 'items',
|
||||
};
|
||||
const options = [
|
||||
{
|
||||
name: '浙江省',
|
||||
@ -249,7 +245,6 @@ export default {
|
||||
return {
|
||||
code,
|
||||
options,
|
||||
fieldNames,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -299,7 +294,7 @@ export default {
|
||||
| --- | --- | --- |
|
||||
| title | 自定义顶部标题 | - |
|
||||
| option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
|
||||
| options-top | 自定义选项上方的内容 | - |
|
||||
| options-top `v3.2.7` | 自定义选项上方的内容 | _{ tabIndex: number }_ |
|
||||
|
||||
### 类型定义
|
||||
|
||||
|
||||
@ -26,8 +26,9 @@ const t = useTranslate({
|
||||
{ text: '杭州市', value: '330100' },
|
||||
{ text: '宁波市', value: '330200' },
|
||||
],
|
||||
currentLevel: (level: number) => `当前为第 ${level} 级`,
|
||||
customContent: '自定义选项上方内容',
|
||||
customFieldNames: '自定义字段名',
|
||||
customContent: '自定义内容',
|
||||
},
|
||||
'en-US': {
|
||||
area: 'Area',
|
||||
@ -46,8 +47,9 @@ const t = useTranslate({
|
||||
{ text: 'Hangzhou', value: '330100' },
|
||||
{ text: 'Ningbo', value: '330200' },
|
||||
],
|
||||
customFieldNames: 'Custom Field Names',
|
||||
currentLevel: (level: number) => `Current level is ${level}`,
|
||||
customContent: 'Custom Content',
|
||||
customFieldNames: 'Custom Field Names',
|
||||
},
|
||||
});
|
||||
|
||||
@ -268,10 +270,16 @@ const onFinish = (
|
||||
@close="customContentState.show = false"
|
||||
@finish="onFinish(customContentState, $event)"
|
||||
>
|
||||
<template #options-top="{ activeTab }">
|
||||
<span>当前为第{{ activeTab }}级</span>
|
||||
<template #options-top="{ tabIndex }">
|
||||
<div class="current-level">{{ t('currentLevel', tabIndex) }}</div>
|
||||
</template>
|
||||
</van-cascader>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.current-level {
|
||||
padding: 10px 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -93,4 +93,27 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,5 +1,25 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[` should allow more custom content 1`] = `
|
||||
<div class="van-tab__pane">
|
||||
tab index: 1
|
||||
<ul class="van-cascader__options">
|
||||
<li class="van-cascader__option van-cascader__option--selected">
|
||||
<span>
|
||||
Zhejiang
|
||||
</span>
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
|
||||
</i>
|
||||
</li>
|
||||
<li class="van-cascader__option">
|
||||
<span>
|
||||
Jiangsu
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should change close icon when using close-icon prop 1`] = `
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon">
|
||||
</i>
|
||||
|
||||
@ -245,19 +245,18 @@ test('should allow to custom the color of option', async () => {
|
||||
test(' should allow more custom content', async () => {
|
||||
const wrapper = mount(Cascader, {
|
||||
slots: {
|
||||
'options-top': ({ activeTab }) => activeTab,
|
||||
'options-top': ({ tabIndex }) => `tab index: ${tabIndex}`,
|
||||
},
|
||||
props: {
|
||||
options,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
wrapper
|
||||
await wrapper
|
||||
.findAll('.van-cascader__options')[0]
|
||||
.find('.van-cascader__option')
|
||||
.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const top = wrapper.find('.van-tab__pane');
|
||||
expect(top.text()).toBe('1');
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-tab__pane').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@ import locale from '../locale';
|
||||
export function createTranslate(name: string) {
|
||||
const prefix = camelize(name) + '.';
|
||||
|
||||
return (path: string, ...args: unknown[]): string => {
|
||||
return (path: string, ...args: unknown[]) => {
|
||||
const messages = locale.messages();
|
||||
const message = get(messages, prefix + path) || get(messages, path);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user