2.开发Mip组件的第一个demo

　　　　　　　　　　　　　　　　　　　　　　　　点击关闭按钮，关闭外层dom

1.控制台创建1个Mip组件文件项目：mip addelement 组件名称

2.在Hbulider中打开组件项目

1》README.md：配置组件介绍和写HTML代码

2》less文件中写样式

3》js文件中写逻辑关系

3.完整Demo，效果：关闭组件：点击关闭按钮，关闭外层dom

 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

JS

 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 }

Less