1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | var Tabs = {
|
7 | name: "tabs",
|
8 | props: {
|
9 | defaultIndex: {
|
10 | default: 0,
|
11 | type: Number
|
12 | },
|
13 | onSelect: {
|
14 | type: Function
|
15 | }
|
16 | },
|
17 | data: function data() {
|
18 | return {
|
19 | selectedIndex: this.defaultIndex
|
20 | };
|
21 | },
|
22 | methods: {
|
23 | switchTab: function switchTab(e, index, isDisabled) {
|
24 | if (!isDisabled) {
|
25 | this.selectedIndex = index;
|
26 | this.onSelect && this.onSelect(e, index);
|
27 | }
|
28 | }
|
29 | },
|
30 | render: function render() {
|
31 | var _this = this;
|
32 |
|
33 | var h = arguments[0];
|
34 | var tabs = this.$slots.default.filter(function (component) {
|
35 | return component.componentOptions;
|
36 | });
|
37 | var tabList = [];
|
38 | tabs.forEach(function (child, index) {
|
39 | var _child$componentOptio = child.componentOptions.propsData,
|
40 | title = _child$componentOptio.title,
|
41 | titleSlot = _child$componentOptio.titleSlot,
|
42 | disabled = _child$componentOptio.disabled;
|
43 | var content = titleSlot ? _this.$slots[titleSlot] : title;
|
44 | var isDisabled = disabled === true || disabled === "";
|
45 | tabList.push(h("li", {
|
46 | "class": "vue-tab",
|
47 | attrs: {
|
48 | role: "tab",
|
49 | "aria-selected": _this.selectedIndex === index ? "true" : "false",
|
50 | "aria-disabled": isDisabled ? "true" : "false"
|
51 | },
|
52 | on: {
|
53 | "click": function click(e) {
|
54 | return _this.switchTab(e, index, isDisabled);
|
55 | }
|
56 | }
|
57 | }, [content]));
|
58 | });
|
59 | return h("div", {
|
60 | "class": "vue-tabs",
|
61 | attrs: {
|
62 | role: "tabs"
|
63 | }
|
64 | }, [h("ul", {
|
65 | "class": "vue-tablist",
|
66 | attrs: {
|
67 | role: "tablist"
|
68 | }
|
69 | }, [this.$slots.left, tabList, this.$slots.right]), tabs[this.selectedIndex]]);
|
70 | }
|
71 | };
|
72 | var Tab = {
|
73 | name: "tab",
|
74 | props: ["title", "titleSlot", "disabled"],
|
75 | render: function render() {
|
76 | var h = arguments[0];
|
77 | return h("div", {
|
78 | "class": "vue-tabpanel",
|
79 | attrs: {
|
80 | role: "tabpanel"
|
81 | }
|
82 | }, [this.$slots.default]);
|
83 | }
|
84 | };
|
85 | function install(Vue) {
|
86 | Vue.component(Tabs.name, Tabs);
|
87 | Vue.component(Tab.name, Tab);
|
88 | }
|
89 |
|
90 | export { Tab, Tabs, install };
|