feat: update cascader from 0.14.0 to 0.16.0
parent
f24d5efb2b
commit
be5be9b775
|
@ -1,4 +1,4 @@
|
||||||
|
import { getComponentFromProp } from '../_util/props-util'
|
||||||
import PropTypes from '../_util/vue-types'
|
import PropTypes from '../_util/vue-types'
|
||||||
import Trigger from '../trigger'
|
import Trigger from '../trigger'
|
||||||
import Menus from './Menus'
|
import Menus from './Menus'
|
||||||
|
@ -65,6 +65,8 @@ export default {
|
||||||
// onKeyDown: PropTypes.func,
|
// onKeyDown: PropTypes.func,
|
||||||
expandTrigger: PropTypes.string.def('click'),
|
expandTrigger: PropTypes.string.def('click'),
|
||||||
fieldNames: PropTypes.object.def({ label: 'label', value: 'value', children: 'children' }),
|
fieldNames: PropTypes.object.def({ label: 'label', value: 'value', children: 'children' }),
|
||||||
|
expandIcon: PropTypes.any,
|
||||||
|
loadingIcon: PropTypes.any,
|
||||||
},
|
},
|
||||||
mixins: [BaseMixin],
|
mixins: [BaseMixin],
|
||||||
model: {
|
model: {
|
||||||
|
@ -285,6 +287,8 @@ export default {
|
||||||
let menus = <div />
|
let menus = <div />
|
||||||
let emptyMenuClassName = ''
|
let emptyMenuClassName = ''
|
||||||
if (options && options.length > 0) {
|
if (options && options.length > 0) {
|
||||||
|
const loadingIcon = getComponentFromProp(this, 'loadingIcon')
|
||||||
|
const expandIcon = getComponentFromProp(this, 'expandIcon') || '>'
|
||||||
const menusProps = {
|
const menusProps = {
|
||||||
props: {
|
props: {
|
||||||
...$props,
|
...$props,
|
||||||
|
@ -292,6 +296,8 @@ export default {
|
||||||
defaultFieldNames: this.defaultFieldNames,
|
defaultFieldNames: this.defaultFieldNames,
|
||||||
activeValue: sActiveValue,
|
activeValue: sActiveValue,
|
||||||
visible: sPopupVisible,
|
visible: sPopupVisible,
|
||||||
|
loadingIcon,
|
||||||
|
expandIcon,
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
...$listeners,
|
...$listeners,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
|
import { getComponentFromProp } from '../_util/props-util'
|
||||||
import PropTypes from '../_util/vue-types'
|
import PropTypes from '../_util/vue-types'
|
||||||
import arrayTreeFilter from 'array-tree-filter'
|
import arrayTreeFilter from 'array-tree-filter'
|
||||||
import BaseMixin from '../_util/BaseMixin'
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
@ -17,6 +17,8 @@ export default {
|
||||||
dropdownMenuColumnStyle: PropTypes.object,
|
dropdownMenuColumnStyle: PropTypes.object,
|
||||||
defaultFieldNames: PropTypes.object,
|
defaultFieldNames: PropTypes.object,
|
||||||
fieldNames: PropTypes.object,
|
fieldNames: PropTypes.object,
|
||||||
|
expandIcon: PropTypes.any,
|
||||||
|
loadingIcon: PropTypes.any,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
this.menuItems = {}
|
this.menuItems = {}
|
||||||
|
@ -44,6 +46,8 @@ export default {
|
||||||
},
|
},
|
||||||
getOption (option, menuIndex) {
|
getOption (option, menuIndex) {
|
||||||
const { prefixCls, expandTrigger } = this
|
const { prefixCls, expandTrigger } = this
|
||||||
|
const loadingIcon = getComponentFromProp(this, 'loadingIcon')
|
||||||
|
const expandIcon = getComponentFromProp(this, 'expandIcon')
|
||||||
const onSelect = (e) => {
|
const onSelect = (e) => {
|
||||||
this.__emit('select', option, menuIndex, e)
|
this.__emit('select', option, menuIndex, e)
|
||||||
}
|
}
|
||||||
|
@ -57,10 +61,18 @@ export default {
|
||||||
key: Array.isArray(key) ? key.join('__ant__') : key,
|
key: Array.isArray(key) ? key.join('__ant__') : key,
|
||||||
}
|
}
|
||||||
let menuItemCls = `${prefixCls}-menu-item`
|
let menuItemCls = `${prefixCls}-menu-item`
|
||||||
|
let expandIconNode = null
|
||||||
const hasChildren = option[this.getFieldName('children')] &&
|
const hasChildren = option[this.getFieldName('children')] &&
|
||||||
option[this.getFieldName('children')].length > 0
|
option[this.getFieldName('children')].length > 0
|
||||||
if (hasChildren || option.isLeaf === false) {
|
if (hasChildren || option.isLeaf === false) {
|
||||||
menuItemCls += ` ${prefixCls}-menu-item-expand`
|
menuItemCls += ` ${prefixCls}-menu-item-expand`
|
||||||
|
if (!option.loading) {
|
||||||
|
expandIconNode = (
|
||||||
|
<span class={`${prefixCls}-menu-item-expand-icon`}>
|
||||||
|
{expandIcon}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (expandTrigger === 'hover' && hasChildren) {
|
if (expandTrigger === 'hover' && hasChildren) {
|
||||||
expandProps.on = {
|
expandProps.on = {
|
||||||
|
@ -76,8 +88,10 @@ export default {
|
||||||
if (option.disabled) {
|
if (option.disabled) {
|
||||||
menuItemCls += ` ${prefixCls}-menu-item-disabled`
|
menuItemCls += ` ${prefixCls}-menu-item-disabled`
|
||||||
}
|
}
|
||||||
|
let loadingIconNode = null
|
||||||
if (option.loading) {
|
if (option.loading) {
|
||||||
menuItemCls += ` ${prefixCls}-menu-item-loading`
|
menuItemCls += ` ${prefixCls}-menu-item-loading`
|
||||||
|
loadingIconNode = loadingIcon || null
|
||||||
}
|
}
|
||||||
let title = ''
|
let title = ''
|
||||||
if (option.title) {
|
if (option.title) {
|
||||||
|
@ -90,6 +104,8 @@ export default {
|
||||||
return (
|
return (
|
||||||
<li {...expandProps}>
|
<li {...expandProps}>
|
||||||
{option[this.getFieldName('label')]}
|
{option[this.getFieldName('label')]}
|
||||||
|
{expandIconNode}
|
||||||
|
{loadingIconNode}
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
// based on rc-cascader 0.14.0
|
// based on rc-cascader 0.16.0
|
||||||
import Cascader from './Cascader'
|
import Cascader from './Cascader'
|
||||||
export default Cascader
|
export default Cascader
|
||||||
|
|
Loading…
Reference in New Issue