sdk4.0/src/Obj/Element/cy_html_tabs.js

class cy_tabs {
  constructor(boxElm, clickTabCallBack, sdk) {
    let elm
    if(typeof boxElm === 'string') {
      elm = document.getElementById(boxElm);
    }
    else {
      elm = boxElm
    }
    // let elm = document.getElementById(id);
    let pane = elm.getElementsByTagName('DIV-cy-tab-pane')

    let tabTop = `<div class="DIV-cy-tab-top">`
    let tabContent = `<div class="DIV-cy-tab-content">`
    let tabindex = 0
    for (let i = 0; i < pane.length; i++) {
      let flag = false
      if (sdk && sdk.tabHide && Array.isArray(sdk.tabHide)) {
        for (let m = 0; m < sdk.tabHide.length; m++) {
          if (pane[i].getAttribute('label') === sdk.tabHide[m]) {
            flag = true
            break
          }
        }
      }
      if (flag) {
        continue
      }
      let style = 'display: none;'
      let active = ''
      if (tabindex == 0) {
        style = ''
        active = 'is-active'
      }
      tabTop = tabTop + `
            <div class="DIV-cy-tab-pane-title">
                <div class="DIV-cy-tab-pane-title-p `+ active + `" tabindex="` + tabindex + `"><span>` + pane[i].getAttribute('label') + `</span></div>
            </div>
            `
      tabContent = tabContent + `<div class="DIV-cy-tab-content-pane ${pane[i].className}" style="` + style + `">` + pane[i].innerHTML + `</div>`
      tabindex++
    }
    tabTop = tabTop + `</div>`
    tabContent = tabContent + `</div>`

    let BoxElm = document.createElement('div');
    if(typeof boxElm === 'string') {
      BoxElm.setAttribute('id', boxElm)
    }
    BoxElm.setAttribute('class', 'DIV-cy-tabs')
    BoxElm.innerHTML = tabTop + tabContent
    elm.parentNode.insertBefore(BoxElm, elm);
    elm.parentNode.removeChild(elm);

    // 点击事件
    let tabs = BoxElm.getElementsByClassName('DIV-cy-tab-pane-title-p')
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', (e) => {
        let tabindex = e.target.getAttribute('tabindex')
        let contentElm = BoxElm.getElementsByClassName('DIV-cy-tab-content-pane')
        clickTabCallBack && clickTabCallBack(tabindex)
        for (let i = 0; i < contentElm.length; i++) {
          if (i === parseInt(tabindex)) {
            contentElm[i].style.display = ''
            tabs[i].className = 'DIV-cy-tab-pane-title-p is-active'
          }
          else {
            contentElm[i].style.display = 'none'
            tabs[i].className = 'DIV-cy-tab-pane-title-p'
          }
        }
        contentElm[parseInt(tabindex)].style.display = ''
      })
    }

    this.clickTabCallBack = clickTabCallBack
  }

  clickTabCallBack() {
    if (this.clickTabCallBack) {
      this.clickTabCallBack()
    }
  }
}

export default cy_tabs