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

# mip-close-dom

mip-close-dom 关闭组件：点击关闭按钮，关闭外层dom

标题|内容
----|----
类型|通用
支持布局|responsive,fixed-height,fill,container,fixed
所需脚本|https://c.mipcdn.com/static/v1/mip-close-dom/mip-close-dom.js

## 示例

### 基本用法
```html
<style>
    body{
        padding: 20px;
    }
    .close-section{
        padding: 20px;
        background-color: #fff;
        box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
        position:relative;
    }
</style>
<section class="close-section">
    <mip-close-dom class="close-btn" target="outer"> </mip-close-dom>
    这里是一行可以被关闭的文字
</section>
```

## 属性

### target

说明：指向需要被关闭的dom，支持queryselector
必选项：否
类型：字符串
取值范围：'outer',queryselector内容
默认值：outer

/**
 * @file mip-close-dom样式文件
 */

mip-close-dom {
    &.close-btn{
        background-color: #ff0000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.4);
        color: #fff;
        font-size: 40px;
        
        position: absolute;
        right: -20px;
        top: -20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    &.close-btn:before,
    &.close-btn:after{
        content: '';
        width: 2px;
        height: 25px;
        display: inline-block;
        position: absolute;
        background: #fff;
        top: 8px;
        left: 19px;
    }
    
    &.close-btn:before{
        transform: rotate(45deg);
        -webkit-transform:rotate(45deg);
    }
    
    &.close-btn:after{
        transform: rotate(-45deg);
        -webkit-transform:rotate(-45deg);
    }
    
    &.close-btn.touchdown{
        background: #cc0000;
    }
}

/**
 * @file mip-close-dom 组件
 * @author
 */

define(function (require) {
    'use strict';

    var customElement = require('customElement').create();

    /**
     * 第一次进入可视区回调，只会执行一次
     */
    customElement.prototype.firstInviewCallback = function () {
        var ele = this.element;
        ele.addEventListener('click', function(){
            var target = ele.parentElement;
            target.parentElement.removeChild(target);    
        }, false);
        ele.addEventListener('mousedown', function(){
            ele.classname += 'touchdown';
        });
        ele.addEventListener('mouseup', function(){
            ele.className.replace('touchdown','')
        });
    };

    return customElement;
});

{
    "name": "mip-close-dom",
    "version": "1.0.0",
    "description": "关闭组件：点击关闭按钮，关闭外层dom",
    "contributors": [
        {
            "name": "Jason",
            "email": "1225746467@qq.com"
        }
    ],
    "engines": {
        "mip": ">=1.1.0"
    }
}