diff --git a/components/mip-img-rang/README.md b/components/mip-img-rang/README.md new file mode 100644 index 00000000..3dd6cb27 --- /dev/null +++ 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 | rang + +说明：call 是需要改变的图片的宽高定义，rang 改变的值。此处只比较当宽度大于高度的时候触发的条件。 + +必选项：是 + +单位：无 + +默认值：无 diff --git a/components/mip-img-rang/example/cccc.jpg b/components/mip-img-rang/example/cccc.jpg new file mode 100644 index 00000000..1890654d Binary files /dev/null and b/components/mip-img-rang/example/cccc.jpg differ diff --git a/components/mip-img-rang/example/index.html b/components/mip-img-rang/example/index.html new file mode 100644 index 00000000..d15ab610 --- /dev/null +++ b/components/mip-img-rang/example/index.html @@ -0,0 +1,34 @@ + + + + + + + + + +*** + + + + +
+
+ +
    + +
    • +
    • +
    • + +
+ +
+ +
+ + + + + + diff --git a/components/mip-img-rang/example/sss.jpg b/components/mip-img-rang/example/sss.jpg new file mode 100644 index 00000000..c13d5684 Binary files /dev/null and b/components/mip-img-rang/example/sss.jpg differ diff --git a/components/mip-img-rang/example/zzz.jpg b/components/mip-img-rang/example/zzz.jpg new file mode 100644 index 00000000..8af6919f Binary files /dev/null and b/components/mip-img-rang/example/zzz.jpg differ diff --git a/components/mip-img-rang/index.less b/components/mip-img-rang/index.less new file mode 100644 index 00000000..bb922cbd --- /dev/null +++ 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 new file mode 100644 index 00000000..d2531ffb --- /dev/null +++ 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 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 new file mode 100644 index 00000000..09ce385f --- /dev/null +++ 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添加带有特殊属性的节点。 + +## 属性 +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 new file mode 100644 index 00000000..fb010d34 --- /dev/null +++ b/components/mip-node/example/index.html @@ -0,0 +1,26 @@ + + + + + + MIP page + + + + + +
+

ffffe

+

vvvvvv

+ +
+ + + + diff --git a/components/mip-node/index.less b/components/mip-node/index.less new file mode 100644 index 00000000..b0abf9b4 --- /dev/null +++ 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 new file mode 100644 index 00000000..6856dd3b --- /dev/null +++ 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') || '
'; + 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); + }; + } +}