Select add allowCreate prop

examples/routers/select.vue

@@ -1,52 +1,60 @@
 <template>
     <div style="margin: 100px;">
-        <Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
+<!--        <Select v-model="model1" filterable style="width:200px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <br><br>-->
+
+<!--        <Select v-model="model1" style="width:200px">-->
+<!--            <Icon type="ios-alarm" slot="prefix" color="red" />-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select v-model="model1" style="width:200px">-->
+<!--            <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <br><br>-->
+
+<!--        <Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <br><br>-->
+
+<!--        <Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+
+<!--        <Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
+        <Divider></Divider>
+        <Select v-model="model13" filterable allow-create @on-create="handleCreate" style="width:260px">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
+<!--        <Select v-model="model12" multiple filterable allow-create @on-create="handleCreate" style="width:260px">-->
+<!--            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
+<!--        </Select>-->
 
-        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <br><br>
-
-        <Select v-model="model1" style="width:200px">
-            <Icon type="ios-alarm" slot="prefix" color="red" />
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select v-model="model1" style="width:200px">
-            <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <br><br>
-
-        <Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <br><br>
-
-        <Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
     </div>
 </template>
 <script>
@@ -60,7 +68,7 @@
                     },
                     {
                         value: 'London',
-                        label: 'London'
+                        label: 'London2'
                     },
                     {
                         value: 'Sydney',
@@ -80,12 +88,21 @@
                     }
                 ],
                 model1: '',
-                model10: []
+                model10: [],
+                model12: [],
+                model13: ''
             }
         },
         methods: {
             more (num) {
                 return 'more' + num;
+            },
+            handleCreate (val) {
+                console.log(111,val);
+                this.cityList.push({
+                    value: val,
+                    label: val
+                });
             }
         }
     }

package-lock.json

@@ -14191,9 +14191,9 @@
             "optional": true
         },
         "v-click-outside-x": {
-            "version": "4.0.19",
+            "version": "3.7.1",
-            "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-4.0.19.tgz",
+            "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz",
-            "integrity": "sha512-QY2XhLJWDCypJKJz+FftvpYa1nzq7mzUP756H7ucu89c/8Rx1aog9gOhPEwDK16A+y3LGvPuAYScKr6/7xh18Q=="
+            "integrity": "sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg=="
         },
         "v8flags": {
             "version": "2.1.1",

package.json

@@ -51,7 +51,7 @@
         "lodash.throttle": "^4.1.1",
         "popper.js": "^1.14.6",
         "tinycolor2": "^1.4.1",
-        "v-click-outside-x": "^4.0.19"
+        "v-click-outside-x": "^3.7.1"
     },
     "peerDependencies": {
         "vue": "^2.5.2"

src/components/select/select-head.vue

@@ -34,6 +34,7 @@
             spellcheck="false"
             @keydown="resetInputState"
             @keydown.delete="handleInputDelete"
+            @keydown.enter="handleInputEnter"
             @focus="onInputFocus"
             @blur="onInputBlur"
 
@@ -101,6 +102,14 @@
             // 3.4.0
             maxTagPlaceholder: {
                 type: Function
+            },
+            // 4.0.0
+            allowCreate: {
+                type: Boolean
+            },
+            // 4.0.0
+            showNotFoundLabel: {
+                type: Boolean
             }
         },
         data () {
@@ -216,6 +225,7 @@
                 this.$emit('on-input-focus');
             },
             onInputBlur () {
+                if (this.allowCreate && this.showNotFoundLabel && this.query !== '') return;
                 if (!this.values.length) this.query = '';  // #5155
                 this.$emit('on-input-blur');
             },
@@ -232,6 +242,9 @@
                     this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1]);
                 }
             },
+            handleInputEnter () {
+                this.$emit('on-enter');
+            },
             onHeaderClick(e){
                 if (this.filterable && e.target === this.$el){
                     this.$refs.input.focus();

src/components/select/select.vue

@@ -43,11 +43,14 @@
                     :query-prop="query"
                     :max-tag-count="maxTagCount"
                     :max-tag-placeholder="maxTagPlaceholder"
+                    :allow-create="allowCreate"
+                    :show-not-found-label="showNotFoundLabel"
 
                     @on-query-change="onQueryChange"
                     @on-input-focus="isFocused = true"
                     @on-input-blur="isFocused = false"
                     @on-clear="clearSingleSelect"
+                    @on-enter="handleCreateItem"
                 >
                     <slot name="prefix" slot="prefix"></slot>
                 </select-head>
@@ -63,8 +66,9 @@
                 :transfer="transfer"
                 v-transfer-dom
             >
-                <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
+                <ul v-show="showNotFoundLabel && !allowCreate" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
                 <ul :class="prefixCls + '-dropdown-list'">
+                    <li :class="prefixCls + '-item'" v-if="showCreateItem" @click="handleCreateItem">{{ query }}</li>
                     <functional-options
                         v-if="(!remote) || (remote && !loading)"
                         :options="selectOptions"
@@ -252,6 +256,11 @@
             // 3.4.0
             maxTagPlaceholder: {
                 type: Function
+            },
+            // 4.0.0
+            allowCreate: {
+                type: Boolean,
+                default: false
             }
         },
         mounted(){
@@ -330,6 +339,11 @@
                     return this.loadingText;
                 }
             },
+            showCreateItem () {
+                let state = false;
+                if (this.allowCreate && this.query !== '') state = true;
+                return  state;
+            },
             transitionName () {
                 return this.placement === 'bottom' ? 'slide-up' : 'slide-down';
             },
@@ -699,6 +713,26 @@
                     this.hasExpectedValue = true;
                 }
             },
+            // 4.0.0 create new item
+            handleCreateItem () {
+                if (this.allowCreate && this.showNotFoundLabel) {
+                    const query = this.query;
+                    this.$emit('on-create', query);
+                    this.query = '';
+
+                    const option = {
+                        value: query,
+                        label: query,
+                        tag: undefined
+                    };
+                    if (this.multiple) {
+                        this.onOptionClick(option);
+                    } else {
+                        // 单选时如果不在 nextTick 里执行，无法赋值
+                        this.$nextTick(() => this.onOptionClick(option));
+                    }
+                }
+            }
         },
         watch: {
             value(value){