使用es6实现iview的选项卡切换

代码如下:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡切换</title>
</head>

<body>
    <my-tabs 
        index="0" 
        titles="['首页','核心产品','项目案例']"
        contents="['<h1>公司地址:</h1><article>公司位于四川省成都市武侯区XX街道</article>','<h2>核心的产品1</h2><p>XXAPP是为XXX公司服务二产生的</p>','<a href=https://www.iviewui.com/ target=_blank>项目地址</a>']">
    </my-tabs>
    <script>
        function ewEval(str) {
            return new Function('return ' + str)();
        }
        class MyTabs extends HTMLElement {
            constructor() {
                super();
                const shadom = this.attachShadow({
                    mode: "open"
                });
                let count = ewEval(this.getAttribute('index')) || 0,
                    tabTitles = ewEval(this.getAttribute('titles')) || ['标签一', '标签二', '标签三'],
                    tabContent = ewEval(this.getAttribute('contents')) || ['标签一的内容', '标签二的内容', '标签三的内容'],
                    title_len = tabTitles.length,
                    content_len = tabContent.length;
                let header = document.createElement('header');
                for (let i = 0; i < title_len; i++) {
                    let buttons = document.createElement('button');
                    buttons.innerHTML = tabTitles[i];
                    if (count === i) buttons.classList.add('active');
                    buttons.onclick = function () {
                        let curIndex = tabTitles.indexOf(this.textContent);
                        let _buttons = shadom.querySelectorAll('button'),
                            _divs = shadom.querySelectorAll('div');
                        for (let j = 0,len = _buttons.length; j < len; j++) {
                            if (curIndex !== j) {
                                _buttons[j].classList.remove('active');
                                _divs[j].classList.remove('active');
                            }
                            _buttons[curIndex].classList.add('active');
                            _divs[curIndex].classList.add('active');
                        }
                    }
                    header.appendChild(buttons);
                }
                shadom.appendChild(header);
                for (let _i = 0; _i < content_len; _i++) {
                    let divs = document.createElement('div');
                    divs.innerHTML = tabContent[_i];
                    if (count === _i) divs.classList.add('active');
                    shadom.appendChild(divs);
                }
                let style = document.createElement('style');
                style.textContent = `
                   header{
                        border-bottom:1px solid #dcdee2;
                        height:35px;
                   }
                   button{
                       outline:none;
                       cursor:pointer;
                       color:#515a6e;
                       margin-left:15px;
                       font-size:14px;
                       transition:color .2s linear,border-bottom .2s linear;
                       background-color:transparent;
                       padding:0 13px;
                       height:35px;
                       display:inline-block;
                       border:none;
                   }
                   a{
                       text-decoration:none;
                       color:#515a6e;
                   }
                   a:hover,a:active{
                       color:#2196ff;
                   }
                   button.active{
                       color:#2196ff;
                       border-bottom:1px solid #2192ff;
                   }
                   div{
                       display:none;
                       padding:13px 0;
                   }
                   div.active{
                       display:block;
                   }`;
                shadom.appendChild(style);
            }
        }
        customElements.define('my-tabs', MyTabs);
    </script>
</body>

</html>

你可以狠狠点击此处具体示例查看效果。这里还可以进行优化。

    原文作者:前端
    原文地址: https://segmentfault.com/a/1190000018372881
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞