captain-ui/es/tabs/src/main.js

有赞vue wap业务组件库

import "vant/es/tabs/style";
import _Tabs from "vant/es/tabs";
import "vant/es/tab/style";
import _Tab from "vant/es/tab";

var _components;

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('van-tabs', {
      staticClass: "cap-tabs",
      class: [_vm.typeClass, _vm.thresholdClass],
      attrs: {
        "sticky": _vm.sticky,
        "active": _vm.active,
        "swipe-threshold": _vm.threshold
      },
      on: {
        "click": _vm.handleTabClick
      }
    }, _vm._l(_vm.tabs, function (tab, index) {
      return _c('van-tab', {
        key: index,
        attrs: {
          "title": tab.title
        }
      }, [_vm._t("default", null, {
        tab: tab
      })], 2);
    }), 1);
  },
  name: 'cap-tabs',
  components: (_components = {}, _components[_Tab.name] = _Tab, _components[_Tabs.name] = _Tabs, _components),
  props: {
    /**
     * 标签页样式
     */
    type: {
      type: Number,
      default: 1
    },

    /**
     * 标签页是否可以横向滑动
     */
    tabSwipeable: {
      type: Boolean,
      default: true
    },

    /**
     * 超出多少个tab会横向滑动，只对滑动设置为“横向滑动”有效
     */
    swipeThreshold: {
      type: Number,
      default: 4
    },

    /**
     * 标签页数据
     */
    tabs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    sticky: Boolean
  },
  data: function data() {
    return {
      active: 0
    };
  },
  computed: {
    typeClass: function typeClass() {
      var type = this.type;
      return "cap-tabs--" + type;
    },
    thresholdClass: function thresholdClass() {
      var swipeThreshold = this.swipeThreshold,
          tabSwipeable = this.tabSwipeable;

      if (tabSwipeable) {
        return "cap-tabs--threshold-" + swipeThreshold;
      }

      return '';
    },

    /**
     * 当为固定模式时，将tab的swipeThreshold设置成很大，防止滚动
     */
    threshold: function threshold() {
      var swipeThreshold = this.swipeThreshold,
          tabSwipeable = this.tabSwipeable;

      if (!tabSwipeable) {
        return 10;
      }

      return swipeThreshold;
    }
  },
  methods: {
    handleTabClick: function handleTabClick(index) {
      this.$emit('click', index);
    }
  }
};