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

update label title

pull/9/head
tangjinzhou 2018-02-22 18:36:35 +08:00
parent e2709d809e
commit 59c194853b
2 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
components/vc-select/Select.vue
View File

@ -6,7 +6,7 @@ import classes from 'component-classes'
import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu' import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu'
import warning from 'warning' import warning from 'warning'
import Option from './Option' import Option from './Option'
import { hasProp, getSlotOptions, getKey } from '../_util/props-util' import { hasProp, getSlotOptions } from '../_util/props-util'
import getTransitionProps from '../_util/getTransitionProps' import getTransitionProps from '../_util/getTransitionProps'
import { cloneElement, getClass, getPropsData, getValueByProp as getValue, getEvents } from '../_util/vnode' import { cloneElement, getClass, getPropsData, getValueByProp as getValue, getEvents } from '../_util/vnode'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
@ -82,8 +82,20 @@ export default {
} else { } else {
sValue = toArray(defaultValue) sValue = toArray(defaultValue)
} }
sValue = this.addLabelToValue(sValue) if (this.labelInValue) {
sValue = this.addTitleToValue($slots.default, sValue) sValue.forEach(v => {
v.key = v.key !== undefined ? v.key : v.value
})
} else {
sValue = sValue.map(v => {
return {
key: v,
}
})
}
this.labelMap = new Map()
this.titleMap = new Map()
this.updateLabelAndTitleMap($slots.default)
let inputValue = '' let inputValue = ''
if (combobox) { if (combobox) {
inputValue = sValue.length inputValue = sValue.length
@ -98,7 +110,6 @@ export default {
if (sValue.length > 0) { if (sValue.length > 0) {
this._valueOptions = this.getOptionsByValue(sValue) this._valueOptions = this.getOptionsByValue(sValue)
} }
console.log(sValue)
return { return {
sValue, sValue,
inputValue, inputValue,
@ -114,29 +125,27 @@ export default {
}) })
}, },
watch: { watch: {
// '$props': {
// handler: function (nextProps) {
// if (hasProp(this, 'value')) {
// console.log('nextProps', nextProps)
// const { combobox, $slots } = this
// let value = toArray(this.value)
// value = this.addLabelToValue(value)
// value = this.addTitleToValue($slots.default, value)
// this.setState({
// sValue: value,
// })
// if (combobox) {
// this.setState({
// inputValue: value.length
// ? this.getLabelFromProps(value[0].key)
// : '',
// })
// }
// }
// },
// },
value (val) { value (val) {
this.updateState() let sValue = toArray(val)
if (this.labelInValue) {
sValue.forEach(v => {
v.key = v.key !== undefined ? v.key : v.value
})
} else {
sValue = sValue.map(v => {
return {
key: v,
}
})
}
this.sValue = sValue
if (this.combobox) {
this.setState({
inputValue: sValue.length
? this.getLabelFromProps(sValue[0].key)
: '',
})
}
}, },
combobox () { combobox () {
this.updateState() this.updateState()
@ -161,27 +170,22 @@ export default {
this.clearBlurTime() this.clearBlurTime()
this.clearAdjustTimer() this.clearAdjustTimer()
if (this.dropdownContainer) { if (this.dropdownContainer) {
// ReactDOM.unmountComponentAtNode(this.dropdownContainer)
document.body.removeChild(this.dropdownContainer) document.body.removeChild(this.dropdownContainer)
this.dropdownContainer = null this.dropdownContainer = null
} }
}, },
methods: { methods: {
updateLabelAndTitleMap (children = []) { updateLabelAndTitleMap (children = []) {
this.titleMap = {}
this.updateTitleMap(this.$slots.default)
},
updateTitleMap (children = []) {
children.forEach(child => { children.forEach(child => {
if (!child) { if (!child) {
return return
} }
if (getSlotOptions(child).isSelectOptGroup) { if (getSlotOptions(child).isSelectOptGroup) {
this.updateTitleMap(child.componentOptions.children) this.updateLabelAndTitleMap(child.componentOptions.children)
} else { } else {
const key = getValuePropValue(child) const key = getValuePropValue(child)
this.titleMap[key] = getValue(child, 'title') this.titleMap.set(key, getValue(child, 'title'))
this.labelMap[key] = this.getLabelFromOption(child) this.labelMap.set(key, this.getLabelFromOption(child))
} }
}) })
}, },
@ -299,13 +303,13 @@ export default {
let sValue = this.sValue let sValue = this.sValue
const props = this.$props const props = this.$props
const selectedValue = getValuePropValue(item) const selectedValue = getValuePropValue(item)
const selectedLabel = this.getLabelFromOption(item) const selectedLabel = this.labelMap.get(selectedValue)
const lastValue = sValue[sValue.length - 1] const lastValue = sValue[sValue.length - 1]
this.fireSelect({ this.fireSelect({
key: selectedValue, key: selectedValue,
label: selectedLabel, label: selectedLabel,
}) })
const selectedTitle = item.title const selectedTitle = this.titleMap.get(selectedValue)
if (isMultipleOrTags(props)) { if (isMultipleOrTags(props)) {
if (findIndexInValueByKey(sValue, selectedValue) !== -1) { if (findIndexInValueByKey(sValue, selectedValue) !== -1) {
return return
@ -372,7 +376,6 @@ export default {
}, },
onOuterFocus (e) { onOuterFocus (e) {
console.log('onOuterFocus')
if (this.disabled) { if (this.disabled) {
e.preventDefault() e.preventDefault()
return return
@ -398,7 +401,6 @@ export default {
}, },
onOuterBlur (e) { onOuterBlur (e) {
console.log('onOuterBlur')
if (this.disabled) { if (this.disabled) {
e.preventDefault() e.preventDefault()
return return
@ -504,7 +506,7 @@ export default {
} }
} }
if (!options[i]) { if (!options[i]) {
options[i] = <Option value={v.key} key={v.key}>{v.label}</Option> options[i] = <Option value={v.key} key={v.key}>{this.labelMap.get('label')}</Option>
} }
} }
}) })
@ -530,6 +532,7 @@ export default {
return this.getOptionsFromChildren(value, this.$slots.default) return this.getOptionsFromChildren(value, this.$slots.default)
}, },
getLabelBySingleValue (children, value) { getLabelBySingleValue (children, value) {
console.log('getLabelBySingleValue')
if (value === undefined) { if (value === undefined) {
return null return null
} }
@ -585,7 +588,7 @@ export default {
if (!this.labelInValue) { if (!this.labelInValue) {
vls = vls.map(v => v.key) vls = vls.map(v => v.key)
} else { } else {
vls = vls.map(vl => ({ key: vl.key, label: vl.label })) vls = vls.map(vl => ({ key: vl.key, label: this.labelMap.get('label') }))
} }
return isMultipleOrTags(this.$props) ? vls : vls[0] return isMultipleOrTags(this.$props) ? vls : vls[0]
} }
@ -675,7 +678,7 @@ export default {
sValue = [ sValue = [
{ {
key: firstOption.key, key: firstOption.key,
label: this.getLabelFromOption(firstOption), label: this.labelMap.get(firstOption.key),
}, },
] ]
this.fireChange(sValue) this.fireChange(sValue)
@ -822,7 +825,7 @@ export default {
} }
const key = getValuePropValue(item) const key = getValuePropValue(item)
const label = this.getLabelFromOption(item) const label = this.labelMap.get(key)
const backfillValue = { const backfillValue = {
key, key,
label, label,
@ -968,7 +971,7 @@ export default {
let label let label
const value = this.sValue.filter(singleValue => { const value = this.sValue.filter(singleValue => {
if (singleValue.key === selectedKey) { if (singleValue.key === selectedKey) {
label = singleValue.label label = this.labelMap.get(selectedKey)
} }
return singleValue.key !== selectedKey return singleValue.key !== selectedKey
}) })
@ -1296,7 +1299,7 @@ export default {
opacity, opacity,
}} }}
> >
{sValue[0].label} {this.labelMap.get(sValue[0].key)}
</div> </div>
) )
} }
@ -1341,8 +1344,8 @@ export default {
} }
if (isMultipleOrTags(props)) { if (isMultipleOrTags(props)) {
selectedValueNodes = limitedCountValue.map(singleValue => { selectedValueNodes = limitedCountValue.map(singleValue => {
let content = singleValue.label let content = this.labelMap.get(singleValue.key)
const title = singleValue.title || content const title = this.titleMap.get(singleValue.title) || content
if ( if (
maxTagTextLength && maxTagTextLength &&
typeof content === 'string' && typeof content === 'string' &&
@ -1484,6 +1487,9 @@ export default {
}, },
render () { render () {
this.labelMap = new Map()
this.titleMap = new Map()
this.updateLabelAndTitleMap(this.$slots.default)
const props = this.$props const props = this.$props
const multiple = isMultipleOrTags(props) const multiple = isMultipleOrTags(props)
const preOptions = this._options || [] const preOptions = this._options || []

8
components/vc-select/demo/single.vue
View File

@ -6,7 +6,7 @@ export default {
data () { data () {
return { return {
destroy: false, destroy: false,
value: 'hello', value: String(9),
} }
}, },
methods: { methods: {
@ -17,7 +17,7 @@ export default {
} else { } else {
value = e value = e
} }
console.log('onChange', value) console.log('onChange', value, ...arguments)
this.value = value this.value = value
}, },
@ -58,7 +58,7 @@ export default {
firstActiveValue='2' firstActiveValue='2'
backfill backfill
> >
<Option key='hello' text='jack' title='jack'> <Option value='01' text='jack' title='jack'>
<b <b
style={{ style={{
color: 'red', color: 'red',
@ -71,7 +71,7 @@ export default {
<Option value='21' disabled text='disabled'>disabled</Option> <Option value='21' disabled text='disabled'>disabled</Option>
<Option value='31' text='yiminghe'>yiminghe</Option> <Option value='31' text='yiminghe'>yiminghe</Option>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => { {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
return <Option key={i} text={String(i)}>{i}</Option> return <Option key={String(i)} text={String(i)}>{i}</Option>
})} })}
</Select> </Select>
</div> </div>