运用webCompnents完成公司底部公共组件

作者: AAA前端 | 来源:发表于2019-01-31 16:41 被阅读0次

运用webCompnents完成公司底部公共组件
day1
底部TabBar
工作中的一些规范总结
ng2-admin拆分
laravel 视图组件
(17.06.21)Vue组件、组件的定义和使用、组件之间的数据
公共组件
业务组件库开发流程
月坤

image.png

点击切换其他会场是否展示，页面只需要引入自定义组件，传入参数设置哪个会场高亮。这样对应的8个会场就不用相同的样式、结构、以及js 都写一遍了。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【奢品年货节】会场 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script>
    (function(doc, win) {
        var htmlFont = function() {
            var docEl = doc.documentElement,
                l = docEl.clientWidth,
                f;
            f = l / 15;
            l > 750 ? docEl.style.fontSize = 50 + "px" : docEl.style.fontSize = f + "px"
        };
        htmlFont();
        win.addEventListener("resize", htmlFont, false)
    })(document, window)
</script>
<script defer src="main.js"></script>
</head>
<body>
<!-- 每个会场引入main.js 并且页面加入自定义标签即可 -->
    <custom-square l="2"></custom-square>
<!-- l对应第几个会场高亮  -->
</body>
</html>

main.js

let that;
let fixBtn = true;
class Square extends HTMLElement {
    constructor() {
        super()
        const shadow = this.attachShadow({ mode: 'open' });
        const div = document.createElement('div');
        const style = document.createElement('style');
        shadow.appendChild(style);
        shadow.appendChild(div);
    }
    connectedCallback() {
        updateStyle(this);
        that = this;
    }
}

function updateStyle(elem) {
    const shadow = elem.shadowRoot;
    const childNodes = Array.from(shadow.childNodes);
    console.log(childNodes)
    const hhh = fixBtn ? 0 : '6.4rem';
    fixBtn = !fixBtn;
    const index = elem.getAttribute('l');
    childNodes.forEach(childNode => {
        if (childNode.nodeName === 'STYLE') {
            tem = childNode;
            childNode.textContent = `
            .bottom-fixed{width:15rem;height:${hhh};overflow:hidden;position:fixed;bottom:1.68rem;left:50%;margin-left:-7.5rem;background-color:#fff;background-size:100%;z-index:1002}
            .bottom-fixed a{float:left;width:4.46rem;height:1.58rem;line-height:1.6rem;font-size:.48rem;color:#6b6b6b;border-bottom:1px solid #e7e7e7;position:relative}
            .bb-fixed{width:15rem;height:1.78rem;background:url(https://pic21.zhen.com/appimg/A/nianhuo/bannerChoiec2.png) no-repeat;background-size:15rem 1.78rem;position:fixed;bottom:-.1rem;left:50%;z-index:1002;margin-left:-7.5rem}
            .bb-fixed a{float:left;height:1.78rem;text-indent:-9999em}
            .bb-fixed a:first-child{width:7.5rem}
            .bb-fixed a:nth-child(2){width:7.5rem}
            .bb-fixed .cur,.bb-fixed a:first-child:hover{background-position:0 0;background-size:15rem 1.78rem}
            .bb-fixed .hhc{background-position:-7.5rem 0;background-size:15rem 1.78rem}
            #zzc{position:fixed;top:0;left:0;opacity:.6;background-color:#000;z-index:1000;width:0;height:0;overflow:hidden}           
            .bottom-fixed a{float:left;width:4.46rem;height:1.58rem;line-height:1.6rem;font-size:.48rem;color:#6b6b6b;border-bottom:1px solid #e7e7e7;position:relative}
            .bottom-fixed a::after{content:"";display:inline-block;width:.56rem;height:.56rem;overflow:hidden;position:absolute;left:2.3rem;top:.5rem}
            .bottom-fixed span:nth-of-type(2n+1) a{padding-left:3.02rem;background-position:2.32rem center;background-size:.56rem;background-repeat:no-repeat}
            .bottom-fixed span:nth-of-type(2n) a{padding-left:3rem;border-left:1px solid #e7e7e7}
            .bottom-fixed .a:active,.bottom-fixed .hasChoice a{color:#bb9a6a}
            .bottom-fixed .hasChoice1::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -3.36rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice2::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -2.8rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice3::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -4.48rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice4::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -3.92rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice5::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -2.24rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice6::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -.56rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice7::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) 0 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice8::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -1.68rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice9::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -1.12rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice1::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -5.04rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice2::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -5.6rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice3::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -6.16rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice4::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -6.72rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice5::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -7.28rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice6::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -7.84rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice7::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -8.4rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice8::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -8.96rem 0/10.08rem .56rem no-repeat}
            .bottom-fixed .hasChoice .hasChoice9::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -9.52rem 0/10.08rem .56rem no-repeat}            
      `;
        } else if (childNode.nodeName === 'DIV') {
            childNode.innerHTML = `
          <div class="bottom-fixed">            
            <span class="${index == 0?'hasChoice': ''}"><a class="hasChoice1" href="https://map.baidu.com">品牌分会场</a></span>
            <span class="${index == 1?'hasChoice': ''}"><a class="hasChoice2" href="https://www.360.cn/">服装分会场</a></span>
            <span class="${index == 2?'hasChoice': ''}"><a class="hasChoice3" href="https://www.sina.com.cn/">鞋履分会场</a></span>
            <span class="${index == 3?'hasChoice': ''}"><a class="hasChoice4" href="https://www.1688.com/">箱包分会场</a></span>
            <span class="${index == 4?'hasChoice': ''}"><a class="hasChoice5" href="https://www.taobao.com/">配饰分会场</a></span>
            <span class="${index == 5?'hasChoice': ''}"><a class="hasChoice6" href="https://www.jindong.com/">品质生活分会场</a></span>
            <span class="${index == 6?'hasChoice': ''}"><a class="hasChoice7" href="https://aiqiyi.html">精品店分会场</a></span>
            <span class="${index == 7?'hasChoice': ''}"><a class="hasChoice8" href="https://youku.html">全球购分会场</a></span>
            <span class="needDel"><a class="hasChoice9" href="https://qq.html">预售分会场</a></span>
            <span class="needDel"><a></a></span>
        </div>
        <div class="bb-fixed">
            <a href="https://www.baidu.com" class="cur">主会场</a>
            <a href="javascript:void(0)" onclick="updateStyle(that)">分会场</a>
        </div>
          `
        }
    });
}
customElements.define('custom-square', Square);

运用webCompnents完成公司底部公共组件
点击切换其他会场是否展示，页面只需要引入自定义组件，传入参数设置哪个会场高亮。这样对应的8个会场就不用相同的样式、...
day1
制作首页APP组件完成header区域，使用mint-UI组件完成底部tabbar区域，使用的是MUI。 MU...
底部TabBar
组件分解页面显示组件：Scaffold底部Tabbar组件：BottomNavigationBar底部Tabba...
工作中的一些规范总结
Web前端页面规范化和交互规范 1.组件划分：组件分为公共组件、页面组件 1.1公共组件公共组件一般是页面公用...
ng2-admin拆分
拆分样式和公共组件,公共组件拆分时依赖作为参数传入,包括如下组件:
laravel 视图组件
视图组件建立完成之后，可以在组件内部写公共的组件可用变量，方便多个地方使用如果想把数据共享给所有视图，只要在服务...
(17.06.21)Vue组件、组件的定义和使用、组件之间的数据
Vue组件组件 Component 定义组件公共的组件使用组件 ...
公共组件
引入公共路由的方式：1、在全局注册，然后引入 2、在需要引入的路由注册（局部注册） 3、组件命名：https://...
业务组件库开发流程
业务组件库必要性项目经过长期维护之后往往会沉淀出很多公共组件，当一个组件编写完成之后，其他维护者想要使用这个组件...
月坤
## 页面：参观团－详情页 ### 模块： * 公共头部模块 * 公共底部模块 * 公共右侧联系方式模块 * 头部...