Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

src/packages/popup/demo.vue

@@ -58,6 +58,49 @@
       v-model="showRight"
       :style="{ width: '20%', height: '100%' }"
     ></nut-popup>
+    <h2 class="title">关闭图标</h2>
+    <nut-cell
+      isLink
+      title="关闭图标"
+      :showIcon="true"
+      @click.native="showIcon = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      v-model="showIcon"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
+    <nut-cell
+      isLink
+      title="图标位置"
+      :showIcon="true"
+      @click.native="showIconPosition = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      close-icon-position="top-left"
+      v-model="showIconPosition"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
+
+    <nut-cell
+      isLink
+      title="自定义图标"
+      :showIcon="true"
+      @click.native="showCloseIcon = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      close-icon="tick"
+      v-model="showCloseIcon"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
 
     <h2 class="title">圆角弹框</h2>
     <nut-cell
@@ -85,7 +128,10 @@ export default {
       showBottom: false,
       showLeft: false,
       showRight: false,
-      showRound: false
+      showIcon: false,
+      showRound: false,
+      showIconPosition: false,
+      showCloseIcon: false
     };
   },
   methods: {

src/packages/popup/doc.md

@@ -35,6 +35,14 @@ export default {
 <nut-popup v-model="show" position="top" :style="{ height: '20%' }" />
 ```
 
+## 关闭图标
+
+设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置
+
+```html
+<nut-popup position="bottom" closeable  close-icon="tick" v-model="showCloseIcon" :style="{ height: '20%' }" close-icon-position="top-left"></nut-popup>
+```
+
 ## 圆角弹窗
 
 设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式
@@ -53,3 +61,7 @@ export default {
 | duration   | 动画时长，单位秒                         | Number  | -      |
 | round      | 是否显示圆角                             | boolean | -      |
 | transition | 动画类名，等价于 transtion 的 name 属性  | string  | -      |
+| closeable  | 是否显示关闭图标                        | Boolean  | false     |
+| close-icon | 关闭图标名称                  | string  | cross     |
+| close-icon-position | 关闭图标位置，可选值为top-left bottom-left bottom-right | string  | top-right  |
+

src/packages/popup/mask.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="popup-fade">
-    <div v-show="show" class="bg nut-mask" @click="onClick"></div>
+    <div v-show="show" class="bg nut-mask" ></div>
   </transition>
 </template>
 <script>
@@ -8,16 +8,7 @@ export default {
   name: "nut-popup-mask",
   props: {
     show: { type: Boolean, default: true }
-  },
-  data() {
-    return {};
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("input", false);
-    }
-  }
+  },    
 };
 </script>
 <style lang="scss" scoped>

src/packages/popup/popup.scss

@@ -1,8 +1,9 @@
+$popup-close-icon-margin: 16px; 
 .popup-fade-enter-active {
-    animation: 0.2s nut-fade-in;
+    animation: 0.3s nut-fade-in;
   }
   .popup-fade-leave-active {
-    animation: 0.2s nut-fade-out;
+    animation: 0.3s nut-fade-out;
   }
   
   .popup-slide {
@@ -68,7 +69,7 @@
     max-height: 100%;
     overflow-y: auto;
     background-color: #fff;
-    transition: transform 0.2s;
+    transition: transform 0.3s;
     -webkit-overflow-scrolling: touch;
     z-index: 2028;
   }
@@ -92,4 +93,42 @@
     }
   }
  
-  
+  
+ 
+
+.nutui-popup{
+    &__close-icon{
+        position: absolute;
+        z-index: 1;
+        color: #969799;
+        font-size: 18px;
+        cursor: pointer;
+       
+        &:active {
+            opacity: .7;
+        }
+
+        &--top-left {
+            top: $popup-close-icon-margin;
+            left: $popup-close-icon-margin;
+        }
+
+        &--top-right {
+            top: $popup-close-icon-margin;
+            right: $popup-close-icon-margin;
+        }
+
+        &--bottom-left {
+            bottom: $popup-close-icon-margin;
+            left: $popup-close-icon-margin;
+        }
+
+        &--bottom-right {
+            right: $popup-close-icon-margin;
+            bottom: $popup-close-icon-margin;
+        }
+    }
+}
+ 
+
+ 

src/packages/popup/popup.vue

@@ -6,7 +6,9 @@
       class="popup-box"
       :class="[`popup-${position}`, { round }]"
     >
-      <slot></slot>
+        <slot></slot>
+        <nut-icon v-if='closeable' @click.native='$emit("input", false)' :type="closeIcon" size="12px"  class="nutui-popup__close-icon" :class="'nutui-popup__close-icon--'+closeIconPosition">
+        </nut-icon>
     </div>
   </transition>
 </template>
@@ -28,6 +30,18 @@ export default {
       type: Boolean,
       default: true
     },
+    closeable:{
+        type: Boolean,
+        default: false 
+    },
+    closeIconPosition: {
+      type: String,
+      default: 'top-right'
+    },
+    closeIcon:{
+        type: String,
+        default: 'cross'
+    },
     round: Boolean
   },
   created() {