mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
888 lines
44 KiB
JavaScript
888 lines
44 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[234],{
|
||
|
||
/***/ 521:
|
||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||
|
||
"use strict";
|
||
// ESM COMPAT FLAG
|
||
__webpack_require__.r(__webpack_exports__);
|
||
|
||
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
|
||
var vue_esm_browser = __webpack_require__(0);
|
||
|
||
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/zh-CN/tabs.md?vue&type=template&id=122fd422
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_1 = {
|
||
class: "content element-doc"
|
||
};
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
||
id: "tabs-biao-qian-ye"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#tabs-biao-qian-ye"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Tabs 标签页")], -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "分隔内容上有关联但属于不同类别的数据集合。", -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "ji-chu-yong-fa"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#ji-chu-yong-fa"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 基础用法")], -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "基础的、简洁的标签页。", -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "value"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性来指定当前选中的标签页。")])], -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<template>\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\n <el-tab-pane label=\"用户管理\" name=\"first\">用户管理</el-tab-pane>\n <el-tab-pane label=\"配置管理\" name=\"second\">配置管理</el-tab-pane>\n <el-tab-pane label=\"角色管理\" name=\"third\">角色管理</el-tab-pane>\n <el-tab-pane label=\"定时任务补偿\" name=\"fourth\">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: 'second'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n</script>\n")], -1);
|
||
|
||
var tabsvue_type_template_id_122fd422_hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "xuan-xiang-qia-yang-shi"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#xuan-xiang-qia-yang-shi"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 选项卡样式")], -1);
|
||
|
||
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "选项卡样式的标签页。", -1);
|
||
|
||
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("只需要设置 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性为 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "card"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 就可以使选项卡改变为标签风格。")])], -1);
|
||
|
||
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<template>\n <el-tabs v-model=\"activeName\" type=\"card\" @tab-click=\"handleClick\">\n <el-tab-pane label=\"用户管理\" name=\"first\">用户管理</el-tab-pane>\n <el-tab-pane label=\"配置管理\" name=\"second\">配置管理</el-tab-pane>\n <el-tab-pane label=\"角色管理\" name=\"third\">角色管理</el-tab-pane>\n <el-tab-pane label=\"定时任务补偿\" name=\"fourth\">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n</script>\n")], -1);
|
||
|
||
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "qia-pian-hua"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#qia-pian-hua"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 卡片化")], -1);
|
||
|
||
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "卡片化的标签页。", -1);
|
||
|
||
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("将"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("设置为"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "border-card"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("。")])], -1);
|
||
|
||
var _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<el-tabs type=\"border-card\">\n <el-tab-pane label=\"用户管理\">用户管理</el-tab-pane>\n <el-tab-pane label=\"配置管理\">配置管理</el-tab-pane>\n <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n</el-tabs>\n")], -1);
|
||
|
||
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "wei-zhi"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#wei-zhi"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 位置")], -1);
|
||
|
||
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("可以通过 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "tab-position"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 设置标签的位置")], -1);
|
||
|
||
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("标签一共有四个方向的设置 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "tabPosition=\"left|right|top|bottom\"")])], -1);
|
||
|
||
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<template>\n <el-radio-group v-model=\"tabPosition\" style=\"margin-bottom: 30px;\">\n <el-radio-button label=\"top\">top</el-radio-button>\n <el-radio-button label=\"right\">right</el-radio-button>\n <el-radio-button label=\"bottom\">bottom</el-radio-button>\n <el-radio-button label=\"left\">left</el-radio-button>\n </el-radio-group>\n\n <el-tabs :tab-position=\"tabPosition\" style=\"height: 200px;\">\n <el-tab-pane label=\"用户管理\">用户管理</el-tab-pane>\n <el-tab-pane label=\"配置管理\">配置管理</el-tab-pane>\n <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n tabPosition: 'left'\n };\n }\n };\n</script>\n")], -1);
|
||
|
||
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "zi-ding-yi-biao-qian-ye"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#zi-ding-yi-biao-qian-ye"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 自定义标签页")], -1);
|
||
|
||
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("可以通过具名 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "slot"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 来实现自定义标签页的内容")], -1);
|
||
|
||
var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<el-tabs type=\"border-card\">\n <el-tab-pane>\n <template #label>\n <span><i class=\"el-icon-date\"></i> 我的行程</span>\n </template>\n 我的行程\n </el-tab-pane>\n <el-tab-pane label=\"消息中心\">消息中心</el-tab-pane>\n <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n</el-tabs>\n")], -1);
|
||
|
||
var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "dong-tai-zeng-jian-biao-qian-ye"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#dong-tai-zeng-jian-biao-qian-ye"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 动态增减标签页")], -1);
|
||
|
||
var _hoisted_24 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "增减标签页按钮只能在选项卡样式的标签页下使用", -1);
|
||
|
||
var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n <el-tab-pane\n :key=\"item.name\"\n v-for=\"(item, index) in editableTabs\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n</script>\n")], -1);
|
||
|
||
var _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "zi-ding-yi-zeng-jia-biao-qian-ye-chu-fa-qi"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#zi-ding-yi-zeng-jia-biao-qian-ye-chu-fa-qi"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 自定义增加标签页触发器")], -1);
|
||
|
||
var _hoisted_27 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<div style=\"margin-bottom: 20px;\">\n <el-button\n size=\"small\"\n @click=\"addTab(editableTabsValue)\"\n >\n add tab\n </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n <el-tab-pane\n v-for=\"(item, index) in editableTabs\"\n :key=\"item.name\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n</script>\n")], -1);
|
||
|
||
var _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"tabs-attributes\"><a class=\"header-anchor\" href=\"#tabs-attributes\">¶</a> Tabs Attributes</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>value / v-model</td><td>绑定值，选中选项卡的 name</td><td>string</td><td>—</td><td>第一个选项卡的 name</td></tr><tr><td>type</td><td>风格类型</td><td>string</td><td>card/border-card</td><td>—</td></tr><tr><td>closable</td><td>标签是否可关闭</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>addable</td><td>标签是否可增加</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>editable</td><td>标签是否同时可增加和关闭</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>tab-position</td><td>选项卡所在位置</td><td>string</td><td>top/right/bottom/left</td><td>top</td></tr><tr><td>stretch</td><td>标签的宽度是否自撑开</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>before-leave</td><td>切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。</td><td>Function(activeName, oldActiveName)</td><td>—</td><td>—</td></tr></tbody></table><h3 id=\"tabs-events\"><a class=\"header-anchor\" href=\"#tabs-events\">¶</a> Tabs Events</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>tab-click</td><td>tab 被选中时触发</td><td>被选中的标签 tab 实例</td></tr><tr><td>tab-remove</td><td>点击 tab 移除按钮后触发</td><td>被删除的标签的 name</td></tr><tr><td>tab-add</td><td>点击 tabs 的新增按钮后触发</td><td>—</td></tr><tr><td>edit</td><td>点击 tabs 的新增按钮或 tab 被关闭后触发</td><td>(targetName, action)</td></tr></tbody></table><h3 id=\"tab-pane-attributes\"><a class=\"header-anchor\" href=\"#tab-pane-attributes\">¶</a> Tab-pane Attributes</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>label</td><td>选项卡标题</td><td>string</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>name</td><td>与选项卡绑定值 value 对应的标识符，表示选项卡别名</td><td>string</td><td>—</td><td>该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'</td></tr><tr><td>closable</td><td>标签是否可关闭</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>lazy</td><td>标签是否延迟渲染</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table>", 6);
|
||
|
||
function tabsvue_type_template_id_122fd422_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
|
||
|
||
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
|
||
|
||
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
|
||
|
||
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
|
||
|
||
var _component_element_demo3 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo3");
|
||
|
||
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
|
||
|
||
var _component_element_demo5 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo5");
|
||
|
||
var _component_element_demo6 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo6");
|
||
|
||
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", tabsvue_type_template_id_122fd422_hoisted_1, [tabsvue_type_template_id_122fd422_hoisted_2, tabsvue_type_template_id_122fd422_hoisted_3, tabsvue_type_template_id_122fd422_hoisted_4, tabsvue_type_template_id_122fd422_hoisted_5, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [tabsvue_type_template_id_122fd422_hoisted_7];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [tabsvue_type_template_id_122fd422_hoisted_6];
|
||
}),
|
||
_: 1
|
||
}), tabsvue_type_template_id_122fd422_hoisted_8, _hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_11];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_10];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_12, _hoisted_13, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_15];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_14];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_16, _hoisted_17, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_19];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_18];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_20, _hoisted_21, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo4)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_22];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_23, _hoisted_24, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo5)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_25];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_26, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
||
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo6)];
|
||
}),
|
||
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_27];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_28]);
|
||
}
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/tabs.md?vue&type=template&id=122fd422
|
||
|
||
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
||
var helpers_extends = __webpack_require__(7);
|
||
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
||
|
||
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/zh-CN/tabs.md?vue&type=script&lang=ts
|
||
|
||
|
||
/* harmony default export */ var tabsvue_type_script_lang_ts = ({
|
||
name: 'component-doc',
|
||
components: {
|
||
"element-demo0": function () {
|
||
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createTextVNode("用户管理");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("配置管理");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createTextVNode("角色管理");
|
||
|
||
var _hoisted_4 = /*#__PURE__*/_createTextVNode("定时任务补偿");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_tabs, {
|
||
modelValue: _ctx.activeName,
|
||
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.activeName = $event;
|
||
}),
|
||
onTabClick: _ctx.handleClick
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_tab_pane, {
|
||
label: "用户管理",
|
||
name: "first"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "配置管理",
|
||
name: "second"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "角色管理",
|
||
name: "third"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "定时任务补偿",
|
||
name: "fourth"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue", "onTabClick"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
activeName: 'second'
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick: function handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo1": function () {
|
||
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createTextVNode("用户管理");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("配置管理");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createTextVNode("角色管理");
|
||
|
||
var _hoisted_4 = /*#__PURE__*/_createTextVNode("定时任务补偿");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_tabs, {
|
||
modelValue: _ctx.activeName,
|
||
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.activeName = $event;
|
||
}),
|
||
type: "card",
|
||
onTabClick: _ctx.handleClick
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_tab_pane, {
|
||
label: "用户管理",
|
||
name: "first"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "配置管理",
|
||
name: "second"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "角色管理",
|
||
name: "third"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "定时任务补偿",
|
||
name: "fourth"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue", "onTabClick"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
activeName: 'first'
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick: function handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo2": function () {
|
||
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createTextVNode("用户管理");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("配置管理");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createTextVNode("角色管理");
|
||
|
||
var _hoisted_4 = /*#__PURE__*/_createTextVNode("定时任务补偿");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_tabs, {
|
||
type: "border-card"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_tab_pane, {
|
||
label: "用户管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "配置管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "角色管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "定时任务补偿"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
})]);
|
||
}
|
||
|
||
var democomponentExport = {};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo3": function () {
|
||
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createTextVNode("top");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("right");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createTextVNode("bottom");
|
||
|
||
var _hoisted_4 = /*#__PURE__*/_createTextVNode("left");
|
||
|
||
var _hoisted_5 = /*#__PURE__*/_createTextVNode("用户管理");
|
||
|
||
var _hoisted_6 = /*#__PURE__*/_createTextVNode("配置管理");
|
||
|
||
var _hoisted_7 = /*#__PURE__*/_createTextVNode("角色管理");
|
||
|
||
var _hoisted_8 = /*#__PURE__*/_createTextVNode("定时任务补偿");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_radio_button = _resolveComponent("el-radio-button");
|
||
|
||
var _component_el_radio_group = _resolveComponent("el-radio-group");
|
||
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_radio_group, {
|
||
modelValue: _ctx.tabPosition,
|
||
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.tabPosition = $event;
|
||
}),
|
||
style: {
|
||
"margin-bottom": "30px"
|
||
}
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_radio_button, {
|
||
label: "top"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio_button, {
|
||
label: "right"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio_button, {
|
||
label: "bottom"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio_button, {
|
||
label: "left"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"]), _createVNode(_component_el_tabs, {
|
||
"tab-position": _ctx.tabPosition,
|
||
style: {
|
||
"height": "200px"
|
||
}
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_tab_pane, {
|
||
label: "用户管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_5];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "配置管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_6];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "角色管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_7];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "定时任务补偿"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_8];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["tab-position"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
tabPosition: 'left'
|
||
};
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo4": function () {
|
||
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createVNode("span", null, [/*#__PURE__*/_createVNode("i", {
|
||
class: "el-icon-date"
|
||
}), /*#__PURE__*/_createTextVNode(" 我的行程")], -1);
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode(" 我的行程 ");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createTextVNode("消息中心");
|
||
|
||
var _hoisted_4 = /*#__PURE__*/_createTextVNode("角色管理");
|
||
|
||
var _hoisted_5 = /*#__PURE__*/_createTextVNode("定时任务补偿");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_tabs, {
|
||
type: "border-card"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_tab_pane, null, {
|
||
label: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "消息中心"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "角色管理"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_tab_pane, {
|
||
label: "定时任务补偿"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_5];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
})]);
|
||
}
|
||
|
||
var democomponentExport = {};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo5": function () {
|
||
var _renderList = vue_esm_browser["N" /* renderList */],
|
||
_Fragment = vue_esm_browser["b" /* Fragment */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */],
|
||
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
|
||
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */];
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_tabs, {
|
||
modelValue: _ctx.editableTabsValue,
|
||
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.editableTabsValue = $event;
|
||
}),
|
||
type: "card",
|
||
editable: "",
|
||
onEdit: _ctx.handleTabsEdit
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.editableTabs, function (item, index) {
|
||
return _openBlock(), _createBlock(_component_el_tab_pane, {
|
||
key: item.name,
|
||
label: item.title,
|
||
name: item.name
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createTextVNode(_toDisplayString(item.content), 1
|
||
/* TEXT */
|
||
)];
|
||
}),
|
||
_: 2
|
||
}, 1032, ["label", "name"]);
|
||
}), 128
|
||
/* KEYED_FRAGMENT */
|
||
))];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue", "onEdit"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
editableTabsValue: '2',
|
||
editableTabs: [{
|
||
title: 'Tab 1',
|
||
name: '1',
|
||
content: 'Tab 1 content'
|
||
}, {
|
||
title: 'Tab 2',
|
||
name: '2',
|
||
content: 'Tab 2 content'
|
||
}],
|
||
tabIndex: 2
|
||
};
|
||
},
|
||
methods: {
|
||
handleTabsEdit: function handleTabsEdit(targetName, action) {
|
||
if (action === 'add') {
|
||
var newTabName = ++this.tabIndex + '';
|
||
this.editableTabs.push({
|
||
title: 'New Tab',
|
||
name: newTabName,
|
||
content: 'New Tab content'
|
||
});
|
||
this.editableTabsValue = newTabName;
|
||
}
|
||
|
||
if (action === 'remove') {
|
||
var tabs = this.editableTabs;
|
||
var activeName = this.editableTabsValue;
|
||
|
||
if (activeName === targetName) {
|
||
tabs.forEach(function (tab, index) {
|
||
if (tab.name === targetName) {
|
||
var nextTab = tabs[index + 1] || tabs[index - 1];
|
||
|
||
if (nextTab) {
|
||
activeName = nextTab.name;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
this.editableTabsValue = activeName;
|
||
this.editableTabs = tabs.filter(function (tab) {
|
||
return tab.name !== targetName;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}(),
|
||
"element-demo6": function () {
|
||
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
||
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
||
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
||
_createVNode = vue_esm_browser["o" /* createVNode */],
|
||
_renderList = vue_esm_browser["N" /* renderList */],
|
||
_Fragment = vue_esm_browser["b" /* Fragment */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */],
|
||
_toDisplayString = vue_esm_browser["T" /* toDisplayString */];
|
||
var _hoisted_1 = {
|
||
style: {
|
||
"margin-bottom": "20px"
|
||
}
|
||
};
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode(" add tab ");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_button = _resolveComponent("el-button");
|
||
|
||
var _component_el_tab_pane = _resolveComponent("el-tab-pane");
|
||
|
||
var _component_el_tabs = _resolveComponent("el-tabs");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_createVNode(_component_el_button, {
|
||
size: "small",
|
||
onClick: _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.addTab(_ctx.editableTabsValue);
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
})]), _createVNode(_component_el_tabs, {
|
||
modelValue: _ctx.editableTabsValue,
|
||
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
||
return _ctx.editableTabsValue = $event;
|
||
}),
|
||
type: "card",
|
||
closable: "",
|
||
onTabRemove: _ctx.removeTab
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.editableTabs, function (item, index) {
|
||
return _openBlock(), _createBlock(_component_el_tab_pane, {
|
||
key: item.name,
|
||
label: item.title,
|
||
name: item.name
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createTextVNode(_toDisplayString(item.content), 1
|
||
/* TEXT */
|
||
)];
|
||
}),
|
||
_: 2
|
||
}, 1032, ["label", "name"]);
|
||
}), 128
|
||
/* KEYED_FRAGMENT */
|
||
))];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue", "onTabRemove"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
editableTabsValue: '2',
|
||
editableTabs: [{
|
||
title: 'Tab 1',
|
||
name: '1',
|
||
content: 'Tab 1 content'
|
||
}, {
|
||
title: 'Tab 2',
|
||
name: '2',
|
||
content: 'Tab 2 content'
|
||
}],
|
||
tabIndex: 2
|
||
};
|
||
},
|
||
methods: {
|
||
addTab: function addTab(targetName) {
|
||
var newTabName = ++this.tabIndex + '';
|
||
this.editableTabs.push({
|
||
title: 'New Tab',
|
||
name: newTabName,
|
||
content: 'New Tab content'
|
||
});
|
||
this.editableTabsValue = newTabName;
|
||
},
|
||
removeTab: function removeTab(targetName) {
|
||
var tabs = this.editableTabs;
|
||
var activeName = this.editableTabsValue;
|
||
|
||
if (activeName === targetName) {
|
||
tabs.forEach(function (tab, index) {
|
||
if (tab.name === targetName) {
|
||
var nextTab = tabs[index + 1] || tabs[index - 1];
|
||
|
||
if (nextTab) {
|
||
activeName = nextTab.name;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
this.editableTabsValue = activeName;
|
||
this.editableTabs = tabs.filter(function (tab) {
|
||
return tab.name !== targetName;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}()
|
||
}
|
||
});
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/tabs.md?vue&type=script&lang=ts
|
||
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/tabs.md
|
||
|
||
|
||
|
||
tabsvue_type_script_lang_ts.render = tabsvue_type_template_id_122fd422_render
|
||
|
||
/* harmony default export */ var tabs = __webpack_exports__["default"] = (tabsvue_type_script_lang_ts);
|
||
|
||
/***/ })
|
||
|
||
}]); |