update Cascader

update Cascader

update Cascader
梁灏
1 parent bd4e3b9b
Showing 7 changed files with 54 additions and 31 deletions Show diff stats
src/components/cascader/cascader.vue
src/components/cascader/casitem.vue
src/components/cascader/caspanel.vue
src/styles/components/cascader.less
src/styles/components/select.less
src/styles/mixins/common.less
test/routers/cascader.vue
@@ -92,7 +92,8 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-show-clear`]: this.showCloseIcon
+                        [`${prefixCls}-show-clear`]: this.showCloseIcon,
+                        [`${prefixCls}-visible`]: this.visible
                     }
                 ]
             },
@@ -105,28 +106,42 @@
                     label.push(this.selected[i].label);
                 }
-                return this.renderFormat(label);
+                return this.renderFormat(label, this.selected);
             }
         },
         methods: {
             clearSelect () {
-
+                const oldVal = JSON.stringify(this.value);
+                this.value = this.selected = this.tmpSelected = [];
+                this.handleClose();
+                this.emitValue(this.value, oldVal);
+                this.$broadcast('on-clear');
             },
             handleClose () {
                 this.visible = false;
             },
             onFocus () {
                 this.visible = true;
+                if (!this.value.length) {
+                    this.$broadcast('on-clear');
+                }
             },
             updateResult (result) {
                 this.tmpSelected = result;
             },
-            updateSelected () {
-                this.$broadcast('on-find-selected', this.value);
+            updateSelected (init = false) {
+                if (!this.changeOnSelect || init) {
+                    this.$broadcast('on-find-selected', this.value);
+                }
+            },
+            emitValue (val, oldVal) {
+                if (JSON.stringify(val) !== oldVal) {
+                    this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
+                }
             }
         },
         ready () {
-            this.updateSelected();
+            this.updateSelected(true);
         },
         events: {
             // lastValue: is click the final val
@@ -140,10 +155,10 @@
                     this.selected.forEach((item) => {
                         newVal.push(item.value);
                     });
-                    this.value = newVal;
-                    if (JSON.stringify(this.value) !== oldVal) {
-                        this.$emit('on-change', this.value);
+                    if (!fromInit) {
+                        this.value = newVal;
+                        this.emitValue(this.value, oldVal);
                     }
                 }
                 if (lastValue && !fromInit) {
@@ -18,9 +18,6 @@
                     }
                 ]
             }
-        },
-        ready () {
-
         }
     }
 </script>
 \ No newline at end of file
@@ -105,6 +105,10 @@
                         }
                     }
                 }
+            },
+            'on-clear' () {
+                this.sublist = [];
+                this.tmpItem = {};
             }
         }
     }
@@ -24,14 +24,10 @@
     }
     &-arrow {
-        position: absolute;
-        top: 50%;
-        right: 8px;
-        line-height: 1;
-        margin-top: -6px;
-        font-size: @font-size-base;
-        color: @subsidiary-color;
-        .transition(all @transition-time @ease-in-out);
+        .inner-arrow();
+    }
+    &-visible &-arrow:nth-of-type(2){
+        .transform(rotate(180deg));
     }
     .@{select-dropdown-prefix-cls} {
@@ -78,7 +74,7 @@
             &-active{
                 background-color: @background-color-select-hover;
-                font-weight: bold;
+                color: @primary-color;
             }
         }
     }
@@ -41,13 +41,7 @@
     }
     &-arrow {
-        position: absolute;
-        top: 50%;
-        right: 8px;
-        line-height: 1;
-        margin-top: -6px;
-        color: @subsidiary-color;
-        .transition(all @transition-time @ease-in-out);
+        .inner-arrow();
     }
     &-visible{
@@ -18,4 +18,16 @@
     -webkit-user-select: @type;
     -moz-user-select: @type;
     user-select: @type;
+}
+
+// for select and input like component's arrow
+.inner-arrow() {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    line-height: 1;
+    margin-top: -7px;
+    font-size: @font-size-base;
+    color: @subsidiary-color;
+    .transition(all @transition-time @ease-in-out);
 }
 \ No newline at end of file
 <template>
     <div style="margin: 50px;width:300px">
-        <Cascader :data="data" :value.sync="value" @on-change="change" trigger="click"></Cascader>
+        {{ value | json }}
+        <Cascader size="large" :data="data" :value.sync="value" @on-change="change" trigger="hover" :render-format="format"></Cascader>
     </div>
 </template>
 <script>
@@ -50,8 +51,12 @@
         },
         methods: {
-            change (data) {
-                console.log(data)
+            change (data, opts) {
+                console.log(data);
+                console.log(opts)
+            },
+            format (label, data) {
+                return label[label.length - 1];
             }
         }
     }