stencil初次尝试

import { Component, Prop, State, Event, EventEmitter } from '@stencil/core';
@Component({
    tag: 'iwe7-nav-tabs',
    styleUrl: './iwe7-nav-tabs.scss',
    shadow: false
})
export class Iwe7NavTabsComponent {
    @Prop() list: any[] = [];
    @State() currentIndex: number = 0;
    @Event() iClick: EventEmitter;
    renderItem(item: any, index: number) {
        return (
            <li role="presentation" onClick={() => this.setCurrentIndex(index)} class={this.currentIndex === index ? 'active' : ''}>
                <a href="javascript:;">
                    {item.title}
                </a>
            </li>
        );
    }

    setCurrentIndex(idx: number) {
        this.currentIndex = idx;
        this.iClick.emit(idx);
    }

    render() {
        return (
            <ul class="nav nav-tabs">
                {this.list.map((item, index) => this.renderItem(item, index))}
            </ul>
        );
    }
}

复制代码

<iwe7-nav-tabs id="tabs"></iwe7-nav-tabs>
  <script>
    const tabs = document.getElementById('tabs');
    tabs.list = [{
      title: '在线质检',
      link: '#'
    }, {
      title: '质检结果',
      link: '#'
    }, {
      title: '质检项目',
      link: '#'
    }];
    tabs.addEventListener('iClick', (e) => {
      console.log(e);
    });
  </script>
复制代码

总结：

好用到想哭，简单易上手，框架无关web components ，扩展性及通用性极好，推荐！