fix

components/align/Align.vue

@@ -36,6 +36,7 @@ export default {
     monitorBufferTime: PropTypes.number.def(50),
     monitorWindowResize: PropTypes.bool.def(false),
     disabled: PropTypes.bool.def(false),
+    visible: PropTypes.bool.def(false),
   },
   data () {
     this.aligned = false
@@ -55,8 +56,8 @@ export default {
     const prevProps = this.prevProps
     const props = this.$props
     let reAlign = false
-    if (!props.disabled) {
+    if (!props.disabled && this.visible) {
-      if (prevProps.disabled || !isEqual(prevProps.align, props.align)) {
+      if (prevProps.disabled || prevProps.align !== props.align) {
         reAlign = true
       } else {
         const lastTarget = prevProps.target()

components/trigger/Popup.vue

@@ -129,10 +129,13 @@ export default {
       const transitionEvent = {
         beforeEnter: (el) => {
           el.style.display = el.__vOriginalDisplay
-          this.$refs.alignInstance.forceAlign()
+          // this.$refs.alignInstance.forceAlign()
         },
         enter: (el, done) => {
+          // align updated后执行动画
+          this.$nextTick(() => {
             animate(el, `${transitionName}-enter`, done)
+          })
         },
         leave: (el, done) => {
           animate(el, `${transitionName}-leave`, done)
@@ -169,6 +172,7 @@ export default {
           monitorWindowResize
           align={align}
           onAlign={this.onAlign}
+          visible={visible}
         >
           <PopupInner
             {...popupInnerProps}

components/vc-select/Select.vue

@@ -6,7 +6,7 @@ import classes from 'component-classes'
 import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu'
 import warning from 'warning'
 import Option from './Option'
-import { hasProp, getSlotOptions } from '../_util/props-util'
+import { hasProp, getSlotOptions, getKey } from '../_util/props-util'
 import getTransitionProps from '../_util/getTransitionProps'
 import { cloneElement, getClass, getPropsData, getValueByProp as getValue, getEvents } from '../_util/vnode'
 import BaseMixin from '../_util/BaseMixin'
@@ -98,6 +98,7 @@ export default {
     if (sValue.length > 0) {
       this._valueOptions = this.getOptionsByValue(sValue)
     }
+    console.log(sValue)
     return {
       sValue,
       inputValue,
@@ -166,11 +167,23 @@ export default {
     }
   },
   methods: {
-    updateLabelAndTitleMap () {
+    updateLabelAndTitleMap (children = []) {
-      const labelMap = {}
+      this.titleMap = {}
-      const titleMap = {}
+      this.updateTitleMap(this.$slots.default)
-      this.labelMap = labelMap
+    },
-      this.titleMap = titleMap
+    updateTitleMap (children = []) {
+      children.forEach(child => {
+        if (!child) {
+          return
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          this.updateTitleMap(child.componentOptions.children)
+        } else {
+          const key = getValuePropValue(child)
+          this.titleMap[key] = getValue(child, 'title')
+          this.labelMap[key] = this.getLabelFromOption(child)
+        }
+      })
     },
     updateState () {
       const { combobox, $slots } = this

components/vc-select/demo/single.vue

@@ -6,7 +6,7 @@ export default {
   data () {
     return {
       destroy: false,
-      value: '01',
+      value: 'hello',
     }
   },
   methods: {
@@ -58,7 +58,7 @@ export default {
           firstActiveValue='2'
           backfill
         >
-          <Option value='01' text='jack' title='jack'>
+          <Option key='hello' text='jack' title='jack'>
             <b
               style={{
                 color: 'red',

components/vc-select/demo/tags.vue

@@ -0,0 +1,70 @@
+<script>
+import Select, { Option } from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {
+      disabled: false,
+      value: ['name2', 'name3'],
+      maxTagCount: undefined,
+    }
+  },
+  methods: {
+    onChange (value, option) {
+      console.log(`changed ${value}`, option)
+      this.value = value
+    },
+
+    onSelect (value, option) {
+      console.log(`selected ${value}`, option.props)
+    },
+
+    onDeselect (value, option) {
+      console.log(`deselected ${value}`, option)
+    },
+
+    toggleDisabled () {
+      this.disabled = !this.disabled
+    },
+
+    toggleMaxTagCount (count) {
+      this.maxTagCount = count
+    },
+  },
+
+  render () {
+    const children = []
+    for (let i = 10; i < 36; i++) {
+      children.push(<Option key={i.toString(36) + i} test={i}>{i.toString(36) + i}</Option>)
+    }
+    return (<div>
+      <h2>tags select（scroll the menu）</h2>
+
+      <div>
+        <Select
+          placeholder='placeholder'
+          tags
+          dropdownMenuStyle={{ maxHeight: '200px' }}
+          style={{ width: '500px' }}
+          disabled={this.disabled}
+          maxTagCount={this.maxTagCount}
+          maxTagTextLength={10}
+          value={this.value}
+          onChange={this.onChange}
+          onSelect={this.onSelect}
+          onDeselect={this.onDeselect}
+          tokenSeparators={[' ', ',']}
+        >
+          {children}
+        </Select>
+      </div>
+      <p>
+        <button onClick={this.toggleDisabled}>toggle disabled</button>
+        <button onClick={() => this.toggleMaxTagCount(0)}>toggle maxTagCount (0)</button>
+        <button onClick={() => this.toggleMaxTagCount(1)}>toggle maxTagCount (1)</button>
+      </p>
+    </div>)
+  },
+}
+</script>

components/vc-select/util.js

@@ -1,4 +1,5 @@
 import { getPropsData, getSlotOptions, getKey, getAttrs } from '../_util/props-util'
+import { cloneVNodes } from '../_util/vnode'
 export function getValuePropValue (child) {
   const props = getPropsData(child)
   if ('value' in props) {
@@ -21,9 +22,9 @@ export function getPropValue (child, prop) {
   }
   if (prop === 'children') {
     if (child.$slots) {
-      return child.$slots.default
+      return cloneVNodes(child.$slots.default, true)
     } else {
-      return child.componentOptions.children
+      return cloneVNodes(child.componentOptions.children, true)
     }
   }
   const data = getPropsData(child)

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/vc-select/demo/${d}.vue`),
+    component: import(`../components/vc-select/demo/single.vue`),
   }
 }
 export default [