mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
655 lines
38 KiB
JavaScript
655 lines
38 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[201],{
|
||
|
||
/***/ 489:
|
||
/***/ (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/drawer.md?vue&type=template&id=37c3c833
|
||
|
||
var drawervue_type_template_id_37c3c833_hoisted_1 = {
|
||
class: "content element-doc"
|
||
};
|
||
|
||
var drawervue_type_template_id_37c3c833_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h2 id=\"drawer-chou-ti\"><a class=\"header-anchor\" href=\"#drawer-chou-ti\">¶</a> Drawer 抽屉</h2><p>有些时候, <code>Dialog</code> 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, <code>Drawer</code> 拥有和 <code>Dialog</code> 几乎相同的 API, 在 UI 上带来不一样的体验.</p><div class=\"tip\"><p>因为 Vue 提供了 <code>v-model</code> 的原生支持，所以以前的 <code>visible.sync</code> 已经不再适用，请使用 <code>v-model="visibleBinding"</code> 的表达式来绑定是否显示抽屉组件</p></div><h3 id=\"ji-ben-yong-fa\"><a class=\"header-anchor\" href=\"#ji-ben-yong-fa\">¶</a> 基本用法</h3><p>呼出一个临时的侧边栏, 可以从多个方向呼出</p>", 5);
|
||
|
||
var _hoisted_7 = /*#__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, "model-value"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性，它的"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "类型"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("是 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "boolean"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(",当为 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "true"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 时显示 Drawer。Drawer 分为两个部分："), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 和 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "body"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("，"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 需要具名为 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 的 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "slot"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", 也可以通过 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", 详细请参考 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 用法 最后，本例还展示了 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "before-close"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 的用法")])], -1);
|
||
|
||
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<el-radio-group v-model=\"direction\">\n <el-radio label=\"ltr\">从左往右开</el-radio>\n <el-radio label=\"rtl\">从右往左开</el-radio>\n <el-radio label=\"ttb\">从上往下开</el-radio>\n <el-radio label=\"btt\">从下往上开</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n 点我打开\n</el-button>\n\n<el-drawer\n title=\"我是标题\"\n v-model=\"drawer\"\n :direction=\"direction\"\n :before-close=\"handleClose\" destroy-on-close>\n <span>我来啦!</span>\n</el-drawer>\n\n<script>\n export default {\n data() {\n return {\n drawer: false,\n direction: 'rtl',\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('确认关闭？')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n</script>\n")], -1);
|
||
|
||
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "bu-tian-jia-title"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#bu-tian-jia-title"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 不添加 Title")], -1);
|
||
|
||
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "当你不需要标题到时候, 你还可以去掉标题", -1);
|
||
|
||
var _hoisted_11 = /*#__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 */])("当遇到不需要 title 的场景时, 可以通过 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "withHeader"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 的值")])], -1);
|
||
|
||
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n 点我打开\n</el-button>\n\n<el-drawer\n title=\"我是标题\"\n v-model=\"drawer\"\n :with-header=\"false\">\n <span>我来啦!</span>\n</el-drawer>\n\n<script>\n export default {\n data() {\n return {\n drawer: false,\n };\n }\n };\n</script>\n")], -1);
|
||
|
||
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "zi-ding-yi-nei-rong"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#zi-ding-yi-nei-rong"
|
||
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 自定义内容")], -1);
|
||
|
||
var _hoisted_14 = /*#__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, "Dialog"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 组件一样, "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__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-button type=\"text\" @click=\"table = true\">打开嵌套表格的 Drawer</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">打开嵌套 Form 的 Drawer</el-button>\n<el-drawer\n title=\"我嵌套了表格!\"\n v-model=\"table\"\n direction=\"rtl\"\n size=\"50%\">\n <el-table :data=\"gridData\">\n <el-table-column property=\"date\" label=\"日期\" width=\"150\"></el-table-column>\n <el-table-column property=\"name\" label=\"姓名\" width=\"200\"></el-table-column>\n <el-table-column property=\"address\" label=\"地址\"></el-table-column>\n </el-table>\n</el-drawer>\n\n<el-drawer\n title=\"我嵌套了 Form !\"\n :before-close=\"handleClose\"\n v-model=\"dialog\"\n direction=\"ltr\"\n custom-class=\"demo-drawer\"\n ref=\"drawer\"\n >\n <div class=\"demo-drawer__content\">\n <el-form :model=\"form\">\n <el-form-item label=\"活动名称\" :label-width=\"formLabelWidth\">\n <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n </el-form-item>\n <el-form-item label=\"活动区域\" :label-width=\"formLabelWidth\">\n <el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">\n <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <div class=\"demo-drawer__footer\">\n <el-button @click=\"cancelForm\">取 消</el-button>\n <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? '提交中 ...' : '确 定' }}</el-button>\n </div>\n </div>\n</el-drawer>\n\n<script>\nexport default {\n data() {\n return {\n table: false,\n dialog: false,\n loading: false,\n gridData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '80px',\n timer: null,\n };\n },\n methods: {\n handleClose(done) {\n if (this.loading) {\n return;\n }\n this.$confirm('确定要提交表单吗？')\n .then(_ => {\n this.loading = true;\n this.timer = setTimeout(() => {\n done();\n // 动画关闭需要一定的时间\n setTimeout(() => {\n this.loading = false;\n }, 400);\n }, 2000);\n })\n .catch(_ => {});\n },\n cancelForm() {\n this.loading = false;\n this.dialog = false;\n clearTimeout(this.timer);\n }\n }\n}\n</script>\n")], -1);
|
||
|
||
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
||
id: "duo-ceng-qian-tao"
|
||
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
||
class: "header-anchor",
|
||
href: "#duo-ceng-qian-tao"
|
||
}, "¶"), /*#__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["o" /* createVNode */])("code", null, "Drawer"), /*#__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, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 请一定要设置 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "append-to-body"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性为 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "true")])], -1);
|
||
|
||
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
||
class: "html"
|
||
}, "\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n 点我打开\n</el-button>\n\n<el-drawer\n title=\"我是外面的 Drawer\"\n v-model=\"drawer\"\n size=\"50%\">\n <div>\n <el-button @click=\"innerDrawer = true\">打开里面的!</el-button>\n <el-drawer\n title=\"我是里面的\"\n :append-to-body=\"true\"\n :before-close=\"handleClose\"\n v-model=\"innerDrawer\">\n <p>_(:зゝ∠)_</p>\n </el-drawer>\n </div>\n</el-drawer>\n\n<script>\n export default {\n data() {\n return {\n drawer: false,\n innerDrawer: false,\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('还有未保存的工作哦确定关闭吗？')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n</script>\n\n")], -1);
|
||
|
||
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<div class=\"tip\"><p>Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 <code>ref</code> 获取相应组件，请在 <code>open</code> 事件回调中进行。</p></div><div class=\"tip\"><p>Drawer 提供一个 <code>destroyOnClose</code> API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 <strong>true</strong> 用来保证初始状态的一致性</p></div><h3 id=\"drawer-attributes\"><a class=\"header-anchor\" href=\"#drawer-attributes\">¶</a> Drawer Attributes</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>append-to-body</td><td>Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>before-close</td><td>关闭前的回调，会暂停 Drawer 的关闭</td><td>function(done)，done 用于关闭 Drawer</td><td>—</td><td>—</td></tr><tr><td>close-on-press-escape</td><td>是否可以通过按下 ESC 关闭 Drawer</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>custom-class</td><td>Drawer 的自定义类名</td><td>string</td><td>—</td><td>—</td></tr><tr><td>destroy-on-close</td><td>控制是否在关闭 Drawer 之后将子元素全部销毁</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>modal</td><td>是否需要遮罩层</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>modal-append-to-body</td><td>遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>direction</td><td>Drawer 打开的方向</td><td>Direction</td><td>rtl / ltr / ttb / btt</td><td>rtl</td></tr><tr><td>show-close</td><td>是否显示关闭按钮</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>size</td><td>Drawer 窗体的大小, 当使用 <code>number</code> 类型时, 以像素为单位, 当使用 <code>string</code> 类型时, 请传入 'x%', 否则便会以 <code>number</code> 类型解释</td><td>number / string</td><td>-</td><td>'30%'</td></tr><tr><td>title</td><td>Drawer 的标题，也可通过具名 slot （见下表）传入</td><td>string</td><td>—</td><td>—</td></tr><tr><td>model-value / v-model</td><td>是否显示 Drawer</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>withHeader</td><td>控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id=\"drawer-slot\"><a class=\"header-anchor\" href=\"#drawer-slot\">¶</a> Drawer Slot</h3><table><thead><tr><th>name</th><th>说明</th></tr></thead><tbody><tr><td>—</td><td>Drawer 的内容</td></tr><tr><td>title</td><td>Drawer 标题区的内容</td></tr></tbody></table><h3 id=\"drawer-methods\"><a class=\"header-anchor\" href=\"#drawer-methods\">¶</a> Drawer Methods</h3><table><thead><tr><th>name</th><th>说明</th></tr></thead><tbody><tr><td>closeDrawer</td><td>用于关闭 Drawer, 该方法会调用传入的 <code>before-close</code> 方法</td></tr></tbody></table><h3 id=\"drawer-events\"><a class=\"header-anchor\" href=\"#drawer-events\">¶</a> Drawer Events</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>open</td><td>Drawer 打开的回调</td><td>—</td></tr><tr><td>opened</td><td>Drawer 打开动画结束时的回调</td><td>—</td></tr><tr><td>close</td><td>Drawer 关闭的回调</td><td>—</td></tr><tr><td>closed</td><td>Drawer 关闭动画结束时的回调</td><td>—</td></tr></tbody></table>", 10);
|
||
|
||
function drawervue_type_template_id_37c3c833_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");
|
||
|
||
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", drawervue_type_template_id_37c3c833_hoisted_1, [drawervue_type_template_id_37c3c833_hoisted_2, 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 [_hoisted_8];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_7];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_9, _hoisted_10, 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_12];
|
||
}),
|
||
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
||
return [_hoisted_11];
|
||
}),
|
||
_: 1
|
||
}), _hoisted_13, _hoisted_14, 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];
|
||
}),
|
||
_: 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]);
|
||
}
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/drawer.md?vue&type=template&id=37c3c833
|
||
|
||
// 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/drawer.md?vue&type=script&lang=ts
|
||
|
||
|
||
/* harmony default export */ var drawervue_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("从下往上开");
|
||
|
||
var _hoisted_5 = /*#__PURE__*/_createTextVNode(" 点我打开 ");
|
||
|
||
var _hoisted_6 = /*#__PURE__*/_createVNode("span", null, "我来啦!", -1);
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_radio = _resolveComponent("el-radio");
|
||
|
||
var _component_el_radio_group = _resolveComponent("el-radio-group");
|
||
|
||
var _component_el_button = _resolveComponent("el-button");
|
||
|
||
var _component_el_drawer = _resolveComponent("el-drawer");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_radio_group, {
|
||
modelValue: _ctx.direction,
|
||
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.direction = $event;
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_radio, {
|
||
label: "ltr"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio, {
|
||
label: "rtl"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio, {
|
||
label: "ttb"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_radio, {
|
||
label: "btt"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_4];
|
||
}),
|
||
_: 1
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"]), _createVNode(_component_el_button, {
|
||
onClick: _cache[2] || (_cache[2] = function ($event) {
|
||
return _ctx.drawer = true;
|
||
}),
|
||
type: "primary",
|
||
style: {
|
||
"margin-left": "16px"
|
||
}
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_5];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_drawer, {
|
||
title: "我是标题",
|
||
modelValue: _ctx.drawer,
|
||
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
||
return _ctx.drawer = $event;
|
||
}),
|
||
direction: _ctx.direction,
|
||
"before-close": _ctx.handleClose,
|
||
"destroy-on-close": ""
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_6];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue", "direction", "before-close"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
drawer: false,
|
||
direction: 'rtl'
|
||
};
|
||
},
|
||
methods: {
|
||
handleClose: function handleClose(done) {
|
||
this.$confirm('确认关闭？').then(function (_) {
|
||
done();
|
||
}).catch(function (_) {});
|
||
}
|
||
}
|
||
};
|
||
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__*/_createVNode("span", null, "我来啦!", -1);
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_button = _resolveComponent("el-button");
|
||
|
||
var _component_el_drawer = _resolveComponent("el-drawer");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_button, {
|
||
onClick: _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.drawer = true;
|
||
}),
|
||
type: "primary",
|
||
style: {
|
||
"margin-left": "16px"
|
||
}
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_drawer, {
|
||
title: "我是标题",
|
||
modelValue: _ctx.drawer,
|
||
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
||
return _ctx.drawer = $event;
|
||
}),
|
||
"with-header": false
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
drawer: false
|
||
};
|
||
}
|
||
};
|
||
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 */],
|
||
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
|
||
_openBlock = vue_esm_browser["G" /* openBlock */],
|
||
_createBlock = vue_esm_browser["j" /* createBlock */];
|
||
|
||
var _hoisted_1 = /*#__PURE__*/_createTextVNode("打开嵌套表格的 Drawer");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("打开嵌套 Form 的 Drawer");
|
||
|
||
var _hoisted_3 = {
|
||
class: "demo-drawer__content"
|
||
};
|
||
var _hoisted_4 = {
|
||
class: "demo-drawer__footer"
|
||
};
|
||
|
||
var _hoisted_5 = /*#__PURE__*/_createTextVNode("取 消");
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_button = _resolveComponent("el-button");
|
||
|
||
var _component_el_table_column = _resolveComponent("el-table-column");
|
||
|
||
var _component_el_table = _resolveComponent("el-table");
|
||
|
||
var _component_el_drawer = _resolveComponent("el-drawer");
|
||
|
||
var _component_el_input = _resolveComponent("el-input");
|
||
|
||
var _component_el_form_item = _resolveComponent("el-form-item");
|
||
|
||
var _component_el_option = _resolveComponent("el-option");
|
||
|
||
var _component_el_select = _resolveComponent("el-select");
|
||
|
||
var _component_el_form = _resolveComponent("el-form");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_button, {
|
||
type: "text",
|
||
onClick: _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.table = true;
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_button, {
|
||
type: "text",
|
||
onClick: _cache[2] || (_cache[2] = function ($event) {
|
||
return _ctx.dialog = true;
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_drawer, {
|
||
title: "我嵌套了表格!",
|
||
modelValue: _ctx.table,
|
||
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
||
return _ctx.table = $event;
|
||
}),
|
||
direction: "rtl",
|
||
size: "50%"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_table, {
|
||
data: _ctx.gridData
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_table_column, {
|
||
property: "date",
|
||
label: "日期",
|
||
width: "150"
|
||
}), _createVNode(_component_el_table_column, {
|
||
property: "name",
|
||
label: "姓名",
|
||
width: "200"
|
||
}), _createVNode(_component_el_table_column, {
|
||
property: "address",
|
||
label: "地址"
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["data"])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"]), _createVNode(_component_el_drawer, {
|
||
title: "我嵌套了 Form !",
|
||
"before-close": _ctx.handleClose,
|
||
modelValue: _ctx.dialog,
|
||
"onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
|
||
return _ctx.dialog = $event;
|
||
}),
|
||
direction: "ltr",
|
||
"custom-class": "demo-drawer",
|
||
ref: "drawer"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode("div", _hoisted_3, [_createVNode(_component_el_form, {
|
||
model: _ctx.form
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_form_item, {
|
||
label: "活动名称",
|
||
"label-width": _ctx.formLabelWidth
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_input, {
|
||
modelValue: _ctx.form.name,
|
||
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
||
return _ctx.form.name = $event;
|
||
}),
|
||
autocomplete: "off"
|
||
}, null, 8, ["modelValue"])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["label-width"]), _createVNode(_component_el_form_item, {
|
||
label: "活动区域",
|
||
"label-width": _ctx.formLabelWidth
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_select, {
|
||
modelValue: _ctx.form.region,
|
||
"onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
|
||
return _ctx.form.region = $event;
|
||
}),
|
||
placeholder: "请选择活动区域"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode(_component_el_option, {
|
||
label: "区域一",
|
||
value: "shanghai"
|
||
}), _createVNode(_component_el_option, {
|
||
label: "区域二",
|
||
value: "beijing"
|
||
})];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["label-width"])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["model"]), _createVNode("div", _hoisted_4, [_createVNode(_component_el_button, {
|
||
onClick: _ctx.cancelForm
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_5];
|
||
}),
|
||
_: 1
|
||
}, 8, ["onClick"]), _createVNode(_component_el_button, {
|
||
type: "primary",
|
||
onClick: _cache[6] || (_cache[6] = function ($event) {
|
||
return _ctx.$refs.drawer.closeDrawer();
|
||
}),
|
||
loading: _ctx.loading
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createTextVNode(_toDisplayString(_ctx.loading ? '提交中 ...' : '确 定'), 1
|
||
/* TEXT */
|
||
)];
|
||
}),
|
||
_: 1
|
||
}, 8, ["loading"])])])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["before-close", "modelValue"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
table: false,
|
||
dialog: false,
|
||
loading: false,
|
||
gridData: [{
|
||
date: '2016-05-02',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
date: '2016-05-04',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
date: '2016-05-03',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}],
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
formLabelWidth: '80px',
|
||
timer: null
|
||
};
|
||
},
|
||
methods: {
|
||
handleClose: function handleClose(done) {
|
||
var _this = this;
|
||
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
|
||
this.$confirm('确定要提交表单吗？').then(function (_) {
|
||
_this.loading = true;
|
||
_this.timer = setTimeout(function () {
|
||
done(); // 动画关闭需要一定的时间
|
||
|
||
setTimeout(function () {
|
||
_this.loading = false;
|
||
}, 400);
|
||
}, 2000);
|
||
}).catch(function (_) {});
|
||
},
|
||
cancelForm: function cancelForm() {
|
||
this.loading = false;
|
||
this.dialog = false;
|
||
clearTimeout(this.timer);
|
||
}
|
||
}
|
||
};
|
||
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(" 点我打开 ");
|
||
|
||
var _hoisted_2 = /*#__PURE__*/_createTextVNode("打开里面的!");
|
||
|
||
var _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "_(:зゝ∠)_", -1);
|
||
|
||
function render(_ctx, _cache) {
|
||
var _component_el_button = _resolveComponent("el-button");
|
||
|
||
var _component_el_drawer = _resolveComponent("el-drawer");
|
||
|
||
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_button, {
|
||
onClick: _cache[1] || (_cache[1] = function ($event) {
|
||
return _ctx.drawer = true;
|
||
}),
|
||
type: "primary",
|
||
style: {
|
||
"margin-left": "16px"
|
||
}
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_1];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_drawer, {
|
||
title: "我是外面的 Drawer",
|
||
modelValue: _ctx.drawer,
|
||
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
||
return _ctx.drawer = $event;
|
||
}),
|
||
size: "50%"
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_createVNode("div", null, [_createVNode(_component_el_button, {
|
||
onClick: _cache[2] || (_cache[2] = function ($event) {
|
||
return _ctx.innerDrawer = true;
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_2];
|
||
}),
|
||
_: 1
|
||
}), _createVNode(_component_el_drawer, {
|
||
title: "我是里面的",
|
||
"append-to-body": true,
|
||
"before-close": _ctx.handleClose,
|
||
modelValue: _ctx.innerDrawer,
|
||
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
||
return _ctx.innerDrawer = $event;
|
||
})
|
||
}, {
|
||
default: _withCtx(function () {
|
||
return [_hoisted_3];
|
||
}),
|
||
_: 1
|
||
}, 8, ["before-close", "modelValue"])])];
|
||
}),
|
||
_: 1
|
||
}, 8, ["modelValue"])]);
|
||
}
|
||
|
||
var democomponentExport = {
|
||
data: function data() {
|
||
return {
|
||
drawer: false,
|
||
innerDrawer: false
|
||
};
|
||
},
|
||
methods: {
|
||
handleClose: function handleClose(done) {
|
||
this.$confirm('还有未保存的工作哦确定关闭吗？').then(function (_) {
|
||
done();
|
||
}).catch(function (_) {});
|
||
}
|
||
}
|
||
};
|
||
return extends_default()({
|
||
render: render
|
||
}, democomponentExport);
|
||
}()
|
||
}
|
||
});
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/drawer.md?vue&type=script&lang=ts
|
||
|
||
// CONCATENATED MODULE: ./website/docs/zh-CN/drawer.md
|
||
|
||
|
||
|
||
drawervue_type_script_lang_ts.render = drawervue_type_template_id_37c3c833_render
|
||
|
||
/* harmony default export */ var drawer = __webpack_exports__["default"] = (drawervue_type_script_lang_ts);
|
||
|
||
/***/ })
|
||
|
||
}]); |