Select add allowCreate prop

2019-09-09 13:45:01 +08:00 · 2019-09-09 13:45:01 +08:00 · 255b69abd6
commit 255b69abd6
parent 616c19f5be
5 changed files with 115 additions and 51 deletions
--- a/examples/routers/select.vue
+++ b/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
+                });
            }
        }
    }
--- a/package-lock.json
+++ b/package-lock.json
@ -14191,9 +14191,9 @@
            "optional": true
        },
        "v-click-outside-x": {
-            "version": "4.0.19",
-            "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-4.0.19.tgz",
-            "integrity": "sha512-QY2XhLJWDCypJKJz+FftvpYa1nzq7mzUP756H7ucu89c/8Rx1aog9gOhPEwDK16A+y3LGvPuAYScKr6/7xh18Q=="
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz",
+            "integrity": "sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg=="
        },
        "v8flags": {
            "version": "2.1.1",
--- a/package.json
+++ b/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"
--- a/src/components/select/select-head.vue
+++ b/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();
--- a/src/components/select/select.vue
+++ b/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){