<script>
|
import MultiValueItem from './MultiValueItem'
|
import Input from './Input'
|
import Placeholder from './Placeholder'
|
|
export default {
|
name: 'vue-treeselect--multi-value',
|
inject: [ 'instance' ],
|
|
methods: {
|
renderMultiValueItems() {
|
const { instance } = this
|
|
return instance.internalValue
|
.slice(0, instance.limit)
|
.map(instance.getNode)
|
.map(node => (
|
<MultiValueItem key={`multi-value-item-${node.id}`} node={node} />
|
))
|
},
|
|
renderExceedLimitTip() {
|
const { instance } = this
|
const count = instance.internalValue.length - instance.limit
|
|
if (count <= 0) return null
|
|
return (
|
<div class="vue-treeselect__limit-tip vue-treeselect-helper-zoom-effect-off" key="exceed-limit-tip">
|
<span class="vue-treeselect__limit-tip-text">{ instance.limitText(count) }</span>
|
</div>
|
)
|
},
|
},
|
|
render() {
|
const { renderValueContainer } = this.$parent
|
const transitionGroupProps = {
|
props: {
|
tag: 'div',
|
name: 'vue-treeselect__multi-value-item--transition',
|
appear: true,
|
},
|
}
|
|
return renderValueContainer(
|
<transition-group class="vue-treeselect__multi-value" {...transitionGroupProps}>
|
{this.renderMultiValueItems()}
|
{this.renderExceedLimitTip()}
|
<Placeholder key="placeholder" />
|
<Input ref="input" key="input" />
|
</transition-group>,
|
)
|
},
|
}
|
</script>
|
