@zhxcloud/cloud-components/packages/tab/src/main.jsx

多平台组件库

import { get } from '@zhxcloud/cloud-share/dist/utils'
import './tab.scss'

const name = 'RcTab'

const RcTabFn = config => ({
  name,

  props: {
    config: {
      type: Array,
      default: () => []
    },
    filter: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      curTab: {},
      nextTab: {},
      sequence: [],
      contentLoading: false
    }
  },

  watch: {
    config() {
      this.init('watch')
    }
  },

  created() {
    this.init('create')
    console.log(this.tabFilter)
  },
  computed: {
    tabFilter() {
      let tabConfig
      if (this.filter.length > 0) {
        tabConfig = this.config.filter(item => this.filter.indexOf(item.title) !== -1)
        if (tabConfig.length > 0) {
          tabConfig[0].active = true
        }
      } else {
        tabConfig = this.config
      }
      // let tabConfig = this.config.filter(item => this.filter.indexOf(item.title) !== -1)
      return tabConfig
    }
  },
  methods: {
    init(type) {
      const activeInit = get(
        // this.config.filter(i => i.active),
        this.tabFilter.filter(i => i.active),
        '0',
        {}
      )
      this.handleTabClick(activeInit, type)
    },

    setContentLoading(flag) {
      this.contentLoading = flag
    },

    handleTabClick(tab, type) {
      if (tab.clickFn) {
        this.setContentLoading(true)
        tab.clickFn({
          setTab: () => {
            this.curTab = tab
          },
          closeLoading: () => {
            this.setContentLoading(false)
          },
          param: [this.curTab, tab],
          type
        })
      } else {
        this.curTab = tab
      }
    }
  },

  render() {
    const { config, $scopedSlots, $slots, curTab, contentLoading, tabFilter } = this
    const renderContentFn = $scopedSlots.default ? $scopedSlots.default : () => ''
    return (
      <div class="rc-tab">
        <div class="rc-tab__header">
          {/* arr.filter(item => arr1.indexOf(item) !== -1) */}
          {/* {config.filter(item => {
            return this.filter.indexOf(item.title) === -1
          }).map(tab => { */}
          {tabFilter.map(tab => {
            return (
              <div
                key={tab.title}
                class={{
                  'rc-tab__item': true,
                  active: curTab.title === tab.title,
                  disabled: contentLoading
                }}
                vOn:click={() => {
                  if (curTab.title === tab.title || contentLoading) return
                  // 传递 callBack
                  this.handleTabClick(tab)
                }}
              >
                {tab.title}
              </div>
            )
          })}
        </div>
        <div class="rc-tab__content" vLoading={contentLoading}>
          {[renderContentFn({ curTab }), $slots.default]}
        </div>
      </div>
    )
  }
})

function RcTab(config) {
  return RcTabFn(config)
}

RcTab.cname = name

export default RcTab