bri-components 1.5.14 → 1.5.15

package/src/components/controls/base/DshInput/BriInputs.vue

@@ -1,166 +1,166 @@
-<template>
-    <div class="BriInputs">
-        <Input
-            v-show="status === 'edit'"
-            v-model="curInputVal"
-            :placeholder="selfPropsObj._placeholder"
-            icon="ios-search"
-            @on-enter="clickConfirm"
-            @on-click="clickConfirm"
-        ></Input>
-
-        <div
-            v-show="status === 'show'"
-            class="BriInputs-show"
-        >
-            <span
-                class="BriInputs-show-content"
-                @click="clickAdd"
-            >
-                <span
-                    v-for="(val,index) in value[controlKey]"
-                    class="BriInputs-show-content-item"
-                    :key="index"
-                >
-                    <span
-                        class="BriInputs-show-content-item-content"
-                        @click.stop="clickEdit(val,index)"
-                    >
-                        {{val}}
-                    </span>
-                    <Icon
-                        class="BriInputs-show-content-item-del"
-                        type="ios-close"
-                        size="20"
-                        @click.stop="clickDelete(val)"
-                    />
-                </span>
-            </span>
-            <Icon
-                class="BriInputs-show-add"
-                type="md-create"
-                @click="clickAdd"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../../mixins/controlMixin.js";
-
-    export default {
-        name: "BriInputs",
-        mixins: [
-            controlMixin
-        ],
-        props: {},
-        data () {
-            return {
-                status: "edit", // show
-                curInputVal: "",
-                curIndex: -1
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            }
-        },
-        created () {
-            this.status = this.value[this.controlKey] && this.value[this.controlKey].length ? "show" : "edit";
-        },
-        methods: {
-            clickConfirm () {
-                let val = this.curInputVal.trim();
-                if (val && !this.value[this.controlKey].includes(val)) {
-                    // 有值，且不存在于当前数组中
-                    if (this.curIndex < 0) {
-                        this.value[this.controlKey].push(val);
-                    } else {
-                        this.$set(this.value[this.controlKey], this.curIndex, val);
-                    }
-                }
-                this.curInputVal = "";
-                this.status = "show";
-                this.change();
-            },
-            clickEdit (val, index) {
-                this.curInputVal = val;
-                this.curIndex = index;
-                this.status = "edit";
-            },
-            clickAdd () {
-                this.curIndex = -1;
-                this.status = "edit";
-            },
-            clickDelete (val) {
-                this.value[this.controlKey] = this.value[this.controlKey].filter(i => i != val);
-                this.change();
-                if (!this.value[this.controlKey].length) {
-                    this.status = "edit";
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriInputs {
-        width: 100%;
-
-        i {
-            font-size: 16px;
-            cursor: pointer;
-        }
-
-        &-show {
-            display: flex;
-            align-items: center;
-            border: 1px solid #e5e5e5;
-            border-radius: 4px;
-            color: #515a6e;
-            padding-left: 5px;
-            height: 34px;
-
-            &-content {
-                display: flex;
-                width: calc(100% - 30px);
-                overflow: hidden;
-
-                &-item {
-                    display: flex;
-                    margin: 2px 4px 2px 0;
-                    padding-left: 8px;
-                    border: 1px solid #e8eaec;
-                    border-radius: 3px;
-                    background: #f7f7f7;
-                    font-size: 14px;
-                    max-width: 50%;
-                    cursor: pointer;
-
-                    &-content {
-                        vertical-align: middle;
-                        display: inline-block;
-                        width: calc(100% - 20px);
-                        .dsh-ellipsis();
-                    }
-
-                    &-del {
-                        display: inline-block;
-                        width: 20px;
-                        vertical-align: middle;
-                    }
-                }
-            }
-
-            &-add {
-                flex: 1;
-                height: 34px;
-                line-height: 34px!important;
-            }
-        }
-    }
-</style>
+<template>
+    <div class="BriInputs">
+        <Input
+            v-show="status === 'edit'"
+            v-model="curInputVal"
+            :placeholder="selfPropsObj._placeholder"
+            icon="ios-search"
+            @on-enter="clickConfirm"
+            @on-click="clickConfirm"
+        ></Input>
+
+        <div
+            v-show="status === 'show'"
+            class="BriInputs-show"
+        >
+            <span
+                class="BriInputs-show-content"
+                @click="clickAdd"
+            >
+                <span
+                    v-for="(val,index) in value[controlKey]"
+                    class="BriInputs-show-content-item"
+                    :key="index"
+                >
+                    <span
+                        class="BriInputs-show-content-item-content"
+                        @click.stop="clickEdit(val,index)"
+                    >
+                        {{val}}
+                    </span>
+                    <Icon
+                        class="BriInputs-show-content-item-del"
+                        type="ios-close"
+                        size="20"
+                        @click.stop="clickDelete(val)"
+                    />
+                </span>
+            </span>
+            <Icon
+                class="BriInputs-show-add"
+                type="md-create"
+                @click="clickAdd"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../../mixins/controlMixin.js";
+
+    export default {
+        name: "BriInputs",
+        mixins: [
+            controlMixin
+        ],
+        props: {},
+        data () {
+            return {
+                status: "edit", // show
+                curInputVal: "",
+                curIndex: -1
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            }
+        },
+        created () {
+            this.status = this.value[this.controlKey] && this.value[this.controlKey].length ? "show" : "edit";
+        },
+        methods: {
+            clickConfirm () {
+                let val = this.curInputVal.trim();
+                if (val && !this.value[this.controlKey].includes(val)) {
+                    // 有值，且不存在于当前数组中
+                    if (this.curIndex < 0) {
+                        this.value[this.controlKey].push(val);
+                    } else {
+                        this.$set(this.value[this.controlKey], this.curIndex, val);
+                    }
+                }
+                this.curInputVal = "";
+                this.status = "show";
+                this.change();
+            },
+            clickEdit (val, index) {
+                this.curInputVal = val;
+                this.curIndex = index;
+                this.status = "edit";
+            },
+            clickAdd () {
+                this.curIndex = -1;
+                this.status = "edit";
+            },
+            clickDelete (val) {
+                this.value[this.controlKey] = this.value[this.controlKey].filter(i => i != val);
+                this.change();
+                if (!this.value[this.controlKey].length) {
+                    this.status = "edit";
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriInputs {
+        width: 100%;
+
+        i {
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        &-show {
+            display: flex;
+            align-items: center;
+            border: 1px solid #e5e5e5;
+            border-radius: 4px;
+            color: #515a6e;
+            padding-left: 5px;
+            height: 34px;
+
+            &-content {
+                display: flex;
+                width: calc(100% - 30px);
+                overflow: hidden;
+
+                &-item {
+                    display: flex;
+                    margin: 2px 4px 2px 0;
+                    padding-left: 8px;
+                    border: 1px solid #e8eaec;
+                    border-radius: 3px;
+                    background: #f7f7f7;
+                    font-size: 14px;
+                    max-width: 50%;
+                    cursor: pointer;
+
+                    &-content {
+                        vertical-align: middle;
+                        display: inline-block;
+                        width: calc(100% - 20px);
+                        .dsh-ellipsis();
+                    }
+
+                    &-del {
+                        display: inline-block;
+                        width: 20px;
+                        vertical-align: middle;
+                    }
+                }
+            }
+
+            &-add {
+                flex: 1;
+                height: 34px;
+                line-height: 34px!important;
+            }
+        }
+    }
+</style>