1 # mip-close-dom
 2
 3 mip-close-dom 关闭组件：点击关闭按钮，关闭外层dom
 4
 5 标题|内容
 6 ----|----
 7 类型|通用
 8 支持布局|responsive,fixed-height,fill,container,fixed
 9 所需脚本|https://c.mipcdn.com/static/v1/mip-close-dom/mip-close-dom.js
10
11 ## 示例
12
13 ### 基本用法
14 ```html
15 <style>
16     body{17         padding: 20px;
18     }
19     .close-section{20         padding: 20px;
21         background-color: #fff;
22         box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
23         position:relative;
24     }
25 </style>
26 <section class="close-section">
27     <mip-close-dom class="close-btn" target="outer"> </mip-close-dom>
28     这里是一行可以被关闭的文字
29 </section>
30 ```
31
32 ## 属性
33
34 ### target
35
36 说明：指向需要被关闭的dom，支持queryselector
37 必选项：否
38 类型：字符串
39 取值范围：'outer',queryselector内容
40 默认值：outer

 1 /**
 2  * @file mip-close-dom样式文件
 3  */
 4
 5 mip-close-dom {
 6     &.close-btn{
 7         background-color: #ff0000;
 8         box-shadow: 0 2px 5px rgba(0,0,0,0.4);
 9         color: #fff;
10         font-size: 40px;
11
12         position: absolute;
13         right: -20px;
14         top: -20px;
15         width: 40px;
16         height: 40px;
17         border-radius: 50%;
18     }
19
20     &.close-btn:before,
21     &.close-btn:after{
22         content: '';
23         width: 2px;
24         height: 25px;
25         display: inline-block;
26         position: absolute;
27         background: #fff;
28         top: 8px;
29         left: 19px;
30     }
31
32     &.close-btn:before{
33         transform: rotate(45deg);
34         -webkit-transform:rotate(45deg);
35     }
36
37     &.close-btn:after{
38         transform: rotate(-45deg);
39         -webkit-transform:rotate(-45deg);
40     }
41
42     &.close-btn.touchdown{
43         background: #cc0000;
44     }
45 }

 1 /**
 2  * @file mip-close-dom 组件
 3  * @author
 4  */
 5
 6 define(function (require) {
 7     'use strict';
 8
 9     var customElement = require('customElement').create();
10
11     /**
12      * 第一次进入可视区回调，只会执行一次
13      */
14     customElement.prototype.firstInviewCallback = function () {
15         var ele = this.element;
16         ele.addEventListener('click', function(){
17             var target = ele.parentElement;
18             target.parentElement.removeChild(target);
19         }, false);
20         ele.addEventListener('mousedown', function(){
21             ele.classname += 'touchdown';
22         });
23         ele.addEventListener('mouseup', function(){
24             ele.className.replace('touchdown','')
25         });
26     };
27
28     return customElement;
29 });

 1 {
 2     "name": "mip-close-dom",
 3     "version": "1.0.0",
 4     "description": "关闭组件：点击关闭按钮，关闭外层dom",
 5     "contributors": [
 6         {
 7             "name": "Jason",
 8             "email": "1225746467@qq.com"
 9         }
10     ],
11     "engines": {
12         "mip": ">=1.1.0"
13     }
14 }