busboy2014

导航

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

posted on 2018-05-09 02:05  busboy2014  阅读(120)  评论(0)  编辑  收藏  举报