support select clear

components/select/index.md

@@ -27,6 +27,7 @@
 | value    | 指定当前选中的条目 | string/Array<String>   |  无  |
 | defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
 | multiple   | 支持多选 | boolean | false |
+| allowClear   | 支持清除, 单选模式有效 | boolean | false |
 | filterOption | 是否根据输入项进行筛选 | boolean | true     |
 | tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |

style/components/select.less

@@ -3,12 +3,6 @@
 @duration: .3s;
 
 @import "../mixins/iconfont";
-//mixin
-.selection__clear() {
-  cursor: pointer;
-  float: right;
-  font-weight: bold;
-}
 
 .@{select-prefix-cls} {
   box-sizing: border-box;
@@ -62,6 +56,41 @@
     &:active {
       .active;
     }
+
+    &__clear {
+      display: inline-block;
+      font-style: normal;
+      vertical-align: baseline;
+      text-align: center;
+      text-transform: none;
+      text-rendering: auto;
+      opacity: 0;
+      position: absolute;
+      right: 8px;
+      z-index: 1;
+      background: #fff;
+      top: 50%;
+      font-size: 12px;
+      color: #ccc;
+      width: 12px;
+      height: 12px;
+      margin-top: -6px;
+      line-height: 12px;
+      cursor: pointer;
+      transition: color 0.3s ease, opacity 0.15s ease;
+      &:before {
+        display: block;
+        font-family: "anticon" !important;
+        content: "\E631";
+      }
+      &:hover {
+        color: #999;
+      }
+    }
+
+    &:hover &__clear {
+      opacity: 1;
+    }
   }
 
   &-disabled {
@@ -100,10 +129,6 @@
       line-height: 26px;
     }
 
-    .@{select-prefix-cls}-selection__clear {
-      .selection__clear();
-    }
-
     .@{select-prefix-cls}-selection__placeholder {
       color: #ccc;
     }
@@ -222,12 +247,6 @@
       padding-bottom: 4px;
     }
 
-    .@{select-prefix-cls}-selection__clear {
-      .selection__clear();
-      margin-top: 5px;
-      margin-right: 10px;
-    }
-
     > ul > li {
       margin-top: 4px;
       height: 20px;