使用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>

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

使用es6实现iview的选项卡切换相关推荐

vue tab切换_iviewUITabs选项卡切换组件
概述选项卡切换组件,常用于平级区域大块内容的的收纳和展现. 源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs 使用: ...
iviewUI-Tabs选项卡切换组件
概述选项卡切换组件,常用于平级区域大块内容的的收纳和展现. 源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs 使用: ...
前端实现选项卡切换功能
目录选项卡_0.0 HTML _ 结构部分 : CSS _ 样式部分 : JS 代码实现 : 底码 : 优化 : 底码优化精简版: forEach 实现选项卡 : ES6 语法 : let 实现选项 ...
iview tabs 选项卡设置自定义样式
选项卡切换组件,常用于平级区域大块内容的的收纳和展现.iview里面我们可以来自定义tabs切换的样式. 默认的就是这种; <template><Tabs type="ca ...
tabs选项卡切换效果（jquery版）
以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果. 效果图如下: html 代码如下: <!DO ...
android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果
原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout . 其实TabLayout实现切换效果还是蛮简单的,跟tabpag ...
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

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

使用es6实现iview的选项卡切换相关推荐

最新文章

热门文章