2.開發Mip組件的第一個demo（點擊關閉按鈕，關閉外層dom）

1.控制檯建立1個Mip組件文件項目：mip addelement 組件名稱

2.在Hbulider中打開組件項目

1》README.md：配置組件介紹和寫HTML代碼

2》less文件中寫樣式

3》js文件中寫邏輯關係

4》package.json文件中寫版本信息、組件描述、做者信息

3.瀏覽器預覽組件：

1》mip server啓動服務

2》複製結果的第二個連接，粘貼到瀏覽器運行並查看效果

4.檢驗組件是否符合規範：mip validateelement 組件名

5.去百度審覈平臺提交組件代碼：

https://www.mipengine.org/platform/mip#/

6.完整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

README.md

 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 }

mip-close-dom.less

 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 });

mip-close-dom.js

 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 }

package.json