mipengine · hanxxliu · Jun 17, 2019 · Jun 17, 2019 · Jun 17, 2019 · Jun 18, 2019
diff --git a/components/mip-img-rang/README.md b/components/mip-img-rang/README.md
@@ -0,0 +1,36 @@
+# mip-img-rang
+
+'mip-img-rang' 根据用户的需求处理图片的大小，这是CSS固定图片大小满足不了需求的时候利用js 预处理达到预期效果。
+
+标题|内容
+----|----
+类型|
+支持布局|
+所需脚本| https://c.mipcdn.com/static/v2/mip-img-rang/mip-img-rang.js
+
+## 说明
+
+组件功能说明
+通过预加载来控制图片的宽度和高度，来达到用户视觉满意效果
+
+## 示例
+
+示例说明
+将需要控制的图片置于mip-img-rang 标签类，call 是需要改变的图片的宽高定义，rang 改变的值
+
+// 代码示例
+ <mip-img-rang call="height" rang="160">
+<ul><li><mip-img src="XXX" popup></mip-img></li><li><mip-img src="XXX" popup></mip-img></li><li><mip-img src="XXX" popup></mip-img></li></ul>
+</mip-img-rang>	
+
+## 属性 mip-img-rang
+
+### call | rang
+
+说明：call 是需要改变的图片的宽高定义，rang 改变的值。此处只比较当宽度大于高度的时候触发的条件。
+
+必选项：是
+
+单位：无
+
+默认值：无
diff --git a/components/mip-img-rang/example/cccc.jpg b/components/mip-img-rang/example/cccc.jpg
diff --git a/components/mip-img-rang/example/index.html b/components/mip-img-rang/example/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html mip>
+<head>
+<meta charset="utf-8" />
+<meta name="applicable-device" content="mobile" />
+<link rel="dns-prefetch" href="***" />
+<meta http-equiv="Cache-Control" content="no-transform" />
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<meta name="applicable-device" content="mobile" />
+<title>***</title>
+<link type="text/css" rel="stylesheet" href="https://c.mipcdn.com/static/v1/mip.css">
+</head>
+<body>
+
+<div class="basebox">
+	<div class="img_item Qimgs">
+	  <mip-img-rang call="height" rang="160">
+		<ul>
+
+		<li><mip-img src="http://img.tehuisell.com/img2019/6/16/16/2019061616192039016.jpg"  popup></mip-img></li>
+      <li><mip-img src="http://img.tehuisell.com/img2019/6/16/16/2019061616192063120.jpg"  popup></mip-img></li>
+      <li><mip-img src="http://img.tehuisell.com/img2019/6/16/16/2019061616192081863.jpg"  popup></mip-img></li>
+
+		</ul>
+	  </mip-img-rang>	
+	</div>
+
+</div>	
+
+<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
+<script src="/mip-img-rang/mip-img-rang.js"></script>
+<script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script>
+</body>
+</html>
diff --git a/components/mip-img-rang/example/sss.jpg b/components/mip-img-rang/example/sss.jpg
diff --git a/components/mip-img-rang/example/zzz.jpg b/components/mip-img-rang/example/zzz.jpg
diff --git a/components/mip-img-rang/index.less b/components/mip-img-rang/index.less
@@ -0,0 +1,6 @@
+mip-img-rang {
+  .wrapper {
+    margin: 0 auto;
+    text-align: center;
+  }
+}
diff --git a/components/mip-img-rang/mip-img-rang.js b/components/mip-img-rang/mip-img-rang.js
@@ -0,0 +1,25 @@
+import './index.less'
+
+export default class MIPImgRang extends MIP.CustomElement {
+  build () {
+    let wrapper = document.getElementsByTagName('mip-img-rang')[0]
+	let media = wrapper.getAttribute("call");
+	let rang = parseInt(wrapper.getAttribute("rang"));
+	let img = wrapper.getElementsByTagName('mip-img');
+	for(var i = 0;i<img.length;i++){
+		let image = new Image();
+		image.src = img[i].getAttribute('src');
+		if(image.width > image.height){
+	      if(media=="height"){
+		    wrapper.style.height=rang+10+'px';
+		    img[i].style.height=rang+'px';
+			img[i].style.width='auto';
+	      }else if(media=="width"){
+		    wrapper.style.width=rang+'px';
+		    img[i].style.width=rang+'px'; 
+		  }
+	    }
+      } 
+	}
+
+}
diff --git a/components/mip-node/README.md b/components/mip-node/README.md
@@ -0,0 +1,28 @@
+# mip-node
+
+标题|内容
+----|----
+类型|通用
+支持布局|N/S
+所需脚本| https://c.mipcdn.com/static/v2/mip-node/mip-node.js
+
+## 说明
+
+组件功能说明
+## 示例
+
+示例说明
+
+通过mip-node添加带有特殊属性的节点。
+<mip-node node-type="ababab" node-dom="ccc" node-value="xxxx" node-oth="xzxzzxz"></mip-node>
+## 属性
+node-type | node-dom | node-value | node-oth
+
+**说明**：
+添加特定的节点如div|p|i等并为他们嘱上特殊的属性。 
+
+**必选项**：是
+
+**单位**：无
+
+**默认值**：div | 默认内容
diff --git a/components/mip-node/example/index.html b/components/mip-node/example/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html mip>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
+    <title>MIP page</title>
+    <link rel="canonical" href="对应的原页面地址">
+    <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+    <style mip-custom>
+      /* 自定义样式 */
+      h2 {
+        margin: 50px auto;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h2>ffffe</h2>
+      <h2>vvvvvv</h2>
+      <mip-node node-type="text/css" node-dom="bbd" node-value="../bbh/xxx.css" node-oth="mip-code{font-size:12px;}"></mip-node>
+    </div>
+    <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+    <script src="https://c.mipcdn.com/static/v2/mip-node/mip-node.js"></script>
+  </body>
+</html>
diff --git a/components/mip-node/index.less b/components/mip-node/index.less
@@ -0,0 +1,6 @@
+mip-node {
+  .wrapper {
+    margin: 0 auto;
+    text-align: center;
+  }
+}
diff --git a/components/mip-node/mip-node.js b/components/mip-node/mip-node.js
@@ -0,0 +1,26 @@
+import './index.less'
+
+export default class MIPNode extends MIP.CustomElement {
+  build () {
+	var element = this.element;  
+	var type = element.getAttribute('node-type') || ' ';
+	var vNode = element.getAttribute('node-value') || ' ';
+	var dom = element.getAttribute('node-dom') || ' <div> ';
+	var other = element.getAttribute('node-oth') || '我是默认内容';
+	var loadNode = document.createElement(dom);
+	loadNode.type = type;
+    loadNode.src = vNode;
+    element.appendChild(loadNode);
+	  loadNode.onload = function () {
+               var callNode = document.createElement(dom);
+               var callHtml = [
+                'try {'+other+'}',
+                'catch (e) {console.error("Mip-Error-Call:"," > ',
+                ' > "+e.name+": "+e.message+"");}'
+                ];
+            callNode.type = type;
+            callNode.innerHTML = callHtml.join('');
+            element.appendChild(callNode);
+        };	
+  }
+}