소스 검색

change allowClear to clearable && add test

baiyaaaaa 8 년 전
부모
커밋
254fc6a20f

+ 1 - 1
examples/docs/en-US/cascader.md

@@ -476,7 +476,7 @@ Search and select options directly.
 | popup-class | className of popup overlay   | string |      —         |     —    |
 | placeholder | input placeholder | string    |      —         |     —    |
 | disabled  | 是否禁用    | boolean   |  — | false   |
-| allowClear  | whether allow clear    | boolean   |  — | false   |
+| clearable  | whether allow clear    | boolean   |  — | false   |
 | expand-trigger  | trigger mode of expandind the current item | string | click / hover | 'click'   |
 | filterable  | whether the options can be searched | boolean | — | — |
 | size  | size | string | large / small / mini | — |

+ 1 - 1
examples/docs/zh-CN/cascader.md

@@ -480,7 +480,7 @@
 | popup-class | 自定义浮层类名   | string |      —         |     —    |
 | placeholder | 输入框占位文本 | string    |      —         |     —    |
 | disabled  | 是否禁用    | boolean   |  — | false   |
-| allowClear  | 是否支持清除    | boolean   |  — | false   |
+| clearable  | 是否支持清除    | boolean   |  — | false   |
 | expand-trigger  | 次级菜单的展开方式 | string | click / hover | 'click'   |
 | filterable  | 是否支持搜索选项 | boolean | — | — |
 | size  | 尺寸 | string | large / small / mini | — |

+ 2 - 2
packages/cascader/src/main.vue

@@ -27,7 +27,7 @@
         <i
           key="1"
           v-if="inputHover && displayValue !== ''"
-          class="el-input__icon el-icon-circle-close"
+          class="el-input__icon el-icon-circle-close el-cascader__clearIcon"
           @click="clearValue"
         ></i>
         <i
@@ -134,7 +134,7 @@ export default {
   methods: {
     showMenu() {
       if (!this.menu) {
-        this.menu = new Vue(ElCascaderMenu).$mount(document.createElement('div'));
+        this.menu = new Vue(ElCascaderMenu).$mount();
         this.menu.options = this.options;
         this.menu.expandTrigger = this.expandTrigger;
         this.menu.changeOnSelect = this.changeOnSelect;

+ 0 - 1
packages/theme-default/src/cascader.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 @import "./input.css";
 @import "./common/var.css";
-/*@import "./core/dropdown.css";*/
 
 @component-namespace el {
 

+ 63 - 1
test/unit/specs/cascader.spec.js

@@ -81,12 +81,74 @@ describe('Cascader', () => {
             expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
             expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
             expect(vm.selectedOptions[2]).to.be.equal('xihu');
-            done();
+
+            triggerEvent(vm.$refs.cascader.$el, 'mouseenter');
+            vm.$nextTick(_ => {
+              vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon').click();
+              vm.$nextTick(_ => {
+                expect(vm.selectedOptions.length).to.be.equal(0);
+                done();
+              });
+            });
           }, 500);
         });
       });
     }, 300);
   });
+  it('not allow clearable', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          :clearable="false"
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    triggerEvent(vm.$refs.cascader.$el, 'mouseenter');
+    vm.$nextTick(_ => {
+      expect(vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon')).to.not.exist;
+      done();
+    });
+  });
   it('disabled options', done => {
     vm = createVue({
       template: `