ES2015(es6)
使用es6实现iview的选项卡切换
发布时间：2019-08-09 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用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>
@H_360_276@
你可以狠狠点击此处具体示例查看效果。这里还可以进行优化。
鄙人创建了一个QQ群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：
脚本宝典总结
以上是脚本宝典为你收集整理的使用es6实现iview的选项卡切换全部内容，希望文章能够帮你解决使用es6实现iview的选项卡切换所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的ES2015(es6)相关文章
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程