github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update cascader

pull/309/head
tangjinzhou 2018-11-29 22:20:17 +08:00
parent 1d340a9154
commit 752c82df21
7 changed files with 126 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -5,11 +5,11 @@ exports[`Cascader can be selected 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
</div>
</div>
@ -21,11 +21,11 @@ exports[`Cascader can be selected 2`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@ -40,11 +40,11 @@ exports[`Cascader can be selected 3`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="display: none;">
<div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
@ -67,8 +67,8 @@ exports[`Cascader popup correctly when panel is open 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
</div>
</div>
@ -80,11 +80,11 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li>
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul>
<ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@ -95,8 +95,9 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
`;
exports[`Cascader support controlled mode 1`] = `
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle">
<!----></i><i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
</svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg></i></span>
`;

3
components/cascader/demo/index.vue
View File

@ -10,6 +10,7 @@ import Lazy from './lazy'
import Search from './search'
import Size from './size'
import FieldsName from './fields-name'
import Suffix from './suffix'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
@ -33,6 +34,7 @@ const md = {
export default {
category: 'Components',
type: 'Data Entry',
zhType: '数据录入',
title: 'Cascader',
subtitle: '级联选择',
render () {
@ -50,6 +52,7 @@ export default {
<Search/>
<Size/>
<FieldsName />
<Suffix />
<api>
<CN slot='cn' />
<US/>

58
components/cascader/demo/suffix.md Normal file
View File

@ -0,0 +1,58 @@
<cn>
#### 后缀图标
省市区级联。
</cn>
<us>
#### Suffix
Cascade selection box for selecting province/city/district.
</us>
```html
<template>
<div>
<a-cascader style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select">
<a-icon type="smile" slot="suffixIcon" class="test"/>
</a-cascader>
<a-cascader suffixIcon="ab" style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select" />
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
}
},
methods: {
onChange(value) {
console.log(value);
}
}
}
</script>
```

1
components/cascader/index.en-US.md
View File

@ -26,6 +26,7 @@
| popupVisible | set visible of cascader popup | boolean | - |
| showSearch | Whether show search input in single mode. | boolean\|object | false |
| size | input size, one of `large` `default` `small` | string | `default` |
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
| value(v-model) | selected value | string\[] | - |
Fields in `showSearch`:

59
components/cascader/index.jsx
View File

@ -7,8 +7,9 @@ import omit from 'omit.js'
import KeyCode from '../_util/KeyCode'
import Input from '../input'
import Icon from '../icon'
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs } from '../_util/props-util'
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode'
const CascaderOptionType = PropTypes.shape({
value: PropTypes.string,
@ -74,6 +75,7 @@ const CascaderProps = {
popupVisible: PropTypes.bool,
fieldNames: FieldNamesType,
autoFocus: PropTypes.bool,
suffixIcon: PropTypes.any,
}
function defaultFilterOption (inputValue, path, names) {
@ -88,7 +90,7 @@ function defaultSortFilteredOption (a, b, inputValue, names) {
return a.findIndex(callback) - b.findIndex(callback)
}
function getFilledFieldNames (fieldNames = {}) {
function getFilledFieldNames ({ fieldNames = {}}) {
const names = {
children: fieldNames.children || 'children',
label: fieldNames.label || 'label',
@ -110,13 +112,13 @@ const Cascader = {
},
data () {
this.cachedOptions = []
const { value, defaultValue, popupVisible, showSearch, options, changeOnSelect, flattenTree, fieldNames } = this
const { value, defaultValue, popupVisible, showSearch, options, flattenTree } = this
return {
sValue: value || defaultValue || [],
inputValue: '',
inputFocused: false,
sPopupVisible: popupVisible,
flattenOptions: showSearch ? flattenTree(options, changeOnSelect, fieldNames) : undefined,
flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
}
},
mounted () {
@ -135,7 +137,7 @@ const Cascader = {
},
options (val) {
if (this.showSearch) {
this.setState({ flattenOptions: this.flattenTree(this.options, this.changeOnSelect, this.fieldNames) })
this.setState({ flattenOptions: this.flattenTree(this.options, this.$props) })
}
},
},
@ -218,8 +220,8 @@ const Cascader = {
},
getLabel () {
const { options, $scopedSlots, fieldNames } = this
const names = getFilledFieldNames(fieldNames)
const { options, $scopedSlots } = this
const names = getFilledFieldNames(this.$props)
const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender
const value = this.sValue
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value
@ -242,18 +244,18 @@ const Cascader = {
}
},
flattenTree (options, changeOnSelect, fieldNames, ancestor = []) {
const names = getFilledFieldNames(fieldNames)
flattenTree (options, props, ancestor = []) {
const names = getFilledFieldNames(props)
let flattenOptions = []
const childrenName = names.children
options.forEach((option) => {
const path = ancestor.concat(option)
if (changeOnSelect || !option[childrenName] || !option[childrenName].length) {
if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
flattenOptions.push(path)
}
if (option[childrenName]) {
flattenOptions = flattenOptions.concat(
this.flattenTree(option[childrenName], changeOnSelect, fieldNames, path)
this.flattenTree(option[childrenName], props, path)
)
}
})
@ -261,8 +263,8 @@ const Cascader = {
},
generateFilteredOptions (prefixCls) {
const { showSearch, notFoundContent, $scopedSlots, fieldNames } = this
const names = getFilledFieldNames(fieldNames)
const { showSearch, notFoundContent, $scopedSlots } = this
const names = getFilledFieldNames(this.$props)
const {
filter = defaultFilterOption,
// render = this.defaultRenderFilteredOption,
@ -308,6 +310,7 @@ const Cascader = {
const { $slots, sPopupVisible, inputValue, $listeners } = this
const { sValue: value, inputFocused } = this.$data
const props = getOptionProps(this)
const suffixIcon = getComponentFromProp(this, 'suffixIcon')
const {
prefixCls, inputPrefixCls, placeholder, size, disabled,
allowClear, showSearch = false, ...otherProps } = props
@ -318,7 +321,8 @@ const Cascader = {
})
const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? (
<Icon
type='cross-circle'
type='close-circle'
theme='filled'
class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
key='clear-icon'
@ -403,6 +407,19 @@ const Cascader = {
attrs: getAttrs(this),
}
const children = filterEmpty($slots.default)
const inputIcon = suffixIcon && (
isValidElement(suffixIcon[0])
? cloneElement(
suffixIcon[0],
{
class: {
[`${prefixCls}-picker-arrow`]: true,
},
},
) : <span class={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>) || (
<Icon type='down' class={arrowCls} />
)
const input = children.length ? children : (
<span
class={pickerCls}
@ -417,7 +434,17 @@ const Cascader = {
{this.getLabel()}
</span> : null}
{clearIcon}
<Icon type='down' key='down-icon' class={arrowCls} />
{inputIcon}
</span>
)
const expandIcon = (
<Icon type='right' />
)
const loadingIcon = (
<span class={`${prefixCls}-menu-item-loading-icon`}>
<Icon type='redo' spin />
</span>
)
const cascaderProps = {
@ -427,6 +454,8 @@ const Cascader = {
value: value,
popupVisible: sPopupVisible,
dropdownMenuColumnStyle: dropdownMenuColumnStyle,
expandIcon,
loadingIcon,
},
on: {
...$listeners,

1
components/cascader/index.zh-CN.md
View File

@ -26,6 +26,7 @@
| popupVisible | 控制浮层显隐 | boolean | - |
| showSearch | 在选择框中显示搜索框 | boolean | false |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` |
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
| value(v-model) | 指定选中项 | string\[] | - |
`showSearch` 为对象时，其中的字段：

3
components/icon/index.js
View File

@ -11,7 +11,7 @@ import {
} from './utils'
import warning from '../_util/warning'
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'
import { filterEmpty } from '../_util/props-util'
import { filterEmpty, getClass } from '../_util/props-util'
// Initial setting
VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]))
@ -51,6 +51,7 @@ const Icon = {
)
const classString = classNames({
...getClass(context),
[`anticon`]: true,
[`anticon-${type}`]: !!type,
})