main

分支 (1)

管理

管理

main

doc-archive
/
DOCS zh-CN24.0cb71eee40c7d7b6716e.js

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[306],{

/***/ 712:
/***/ (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.prod.js
var vue_esm_browser_prod = __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--3-0!./website/md-loader!./website/docs/zh-CN/drawer.md?vue&type=template&id=89e87226

const drawervue_type_template_id_89e87226_hoisted_1 = {
  class: "content element-doc"
};

const drawervue_type_template_id_89e87226_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer 抽屉 ");

const drawervue_type_template_id_89e87226_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<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=&quot;visibleBinding&quot;</code> 的表达式来绑定是否显示抽屉组件</p></div>", 2);

const drawervue_type_template_id_89e87226_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("基本用法 ");

const drawervue_type_template_id_89e87226_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "呼出一个临时的侧边栏, 可以从多个方向呼出", -1);

const _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("需要设置 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "model-value"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 属性，它的"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("strong", null, "类型"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("是 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "boolean"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(",当为 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("strong", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 时显示 Drawer。Drawer 分为两个部分："), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 和 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "body"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("，"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 需要具名为 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("strong", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 的 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "slot"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", 也可以通过 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", 详细请参考 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 用法 最后，本例还展示了 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "before-close"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 的用法")])], -1);

const _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("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\"\n  destroy-on-close\n>\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<!--\n<setup>\n\n  import { defineComponent, ref } from 'vue';\n  import { ElMessageBox } from 'element-plus';\n\n  export default defineComponent({\n    setup() {\n      const drawer = ref(false);\n      const direction = ref('rtl');\n      const handleClose = (done) => {\n        ElMessageBox\n          .confirm('确认关闭')\n          .then((_) => {\n            done();\n          })\n          .catch((_) => {});\n      };\n      return {\n        drawer,\n        direction,\n        handleClose,\n      };\n    },\n  });\n\n</setup>\n-->\n")], -1);

const _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("不添加 Title ");

const _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "当你不需要标题到时候, 你还可以去掉标题", -1);

const _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("当遇到不需要 title 的场景时, 可以通过 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "withHeader"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 的值")])], -1);

const _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  点我打开\n</el-button>\n\n<el-drawer title=\"我是标题\" v-model=\"drawer\" :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<!--\n<setup>\n\n  import { defineComponent, ref } from 'vue';\n\n  export default defineComponent({\n    setup() {\n      return {\n        drawer: ref(false),\n      };\n    },\n  });\n\n</setup>\n-->\n")], -1);

const _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("自定义内容 ");

const _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("和 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Dialog"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 组件一样, "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 同样可以在其内部嵌套各种丰富的操作")], -1);

const _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-button type=\"text\" @click=\"table = true\">打开嵌套表格的 Drawer</el-button>\n<el-button type=\"text\" @click=\"dialog = true\"\n  >打开嵌套 Form 的 Drawer</el-button\n>\n<el-drawer title=\"我嵌套了表格!\" v-model=\"table\" direction=\"rtl\" 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\n        type=\"primary\"\n        @click=\"$refs.drawer.closeDrawer()\"\n        :loading=\"loading\"\n        >{{ loading ? '提交中 ...' : '确 定' }}</el-button\n      >\n    </div>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        table: false,\n        dialog: false,\n        loading: false,\n        gridData: [\n          {\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\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<!--\n<setup>\n\n  import { defineComponent, reactive, toRefs } from 'vue';\n  import { ElMessageBox } from 'element-plus';\n  export default defineComponent({\n    setup() {\n      const state = reactive({\n        table: false,\n        dialog: false,\n        loading: false,\n        gridData: [\n          {\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\n          {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄',\n          },\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      const handleClose = (done) => {\n        if (state.loading) {\n          return;\n        }\n        ElMessageBox\n          .confirm('确定要提交表单吗？')\n          .then((_) => {\n            state.loading = true;\n            state.timer = setTimeout(() => {\n              done();\n              // 动画关闭需要一定的时间\n              setTimeout(() => {\n                state.loading = false;\n              }, 400);\n            }, 2000);\n          })\n          .catch((_) => {});\n      };\n\n      const cancelForm = () => {\n        state.loading = false;\n        state.dialog = false;\n        clearTimeout(state.timer);\n      };\n\n      return {\n        ...toRefs(state),\n        handleClose,\n        cancelForm,\n      };\n    },\n  });\n\n</setup>\n-->\n")], -1);

const _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("多层嵌套 ");

const _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 组件也拥有多层嵌套的方法")], -1);

const _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("同样, 如果你需要嵌套多层 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 请一定要设置 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "append-to-body"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 属性为 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("strong", null, "true")])], -1);

const _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  点我打开\n</el-button>\n\n<el-drawer title=\"我是外面的 Drawer\" v-model=\"drawer\" 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    >\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<setup>\n\n  import { defineComponent, ref } from 'vue';\n  import { ElMessageBox } from 'element-plus';\n  export default defineComponent({\n    setup() {\n      const drawer = ref(false);\n      const innerDrawer = ref(false);\n      const handleClose = (done) => {\n        ElMessageBox\n          .confirm('还有未保存的工作哦确定关闭吗？')\n          .then((_) => {\n            done();\n          })\n          .catch((_) => {});\n      };\n      return {\n        drawer,\n        innerDrawer,\n        handleClose,\n      };\n    },\n  });\n\n</setup>\n-->\n")], -1);

const _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", {
  class: "tip"
}, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "ref"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 获取相应组件，请在 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "open"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 事件回调中进行。")])], -1);

const _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", {
  class: "tip"
}, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer 提供一个 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "destroyOnClose"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("strong", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 用来保证初始状态的一致性")])], -1);

const _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer Attributes ");

const _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<p>Drawer 和 Dialog 的属性几乎相同。</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>是否显示 Drawer</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>append-to-body</td><td>Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>lock-scroll</td><td>是否在 Drawer 出现时将 body 滚动锁定</td><td>boolean</td><td>—</td><td>true</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-click-modal</td><td>是否可以通过点击 modal 关闭 Drawer</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>close-on-press-escape</td><td>是否可以通过按下 ESC 关闭 Drawer</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>open-delay</td><td>Drawer 打开的延时时间，单位毫秒</td><td>number</td><td>—</td><td>0</td></tr><tr><td>close-delay</td><td>Drawer 关闭的延时时间，单位毫秒</td><td>number</td><td>—</td><td>0</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>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> 类型时, 请传入 &#39;x%&#39;, 否则便会以 <code>number</code> 类型解释</td><td>number / string</td><td>-</td><td>&#39;30%&#39;</td></tr><tr><td>title</td><td>Drawer 的标题，也可通过具名 slot （见下表）传入</td><td>string</td><td>—</td><td>—</td></tr><tr><td>withHeader</td><td>控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>modal-class</td><td>遮罩层的自定义类名</td><td>string</td><td>-</td><td>-</td></tr><tr><td>z-index</td><td>设置 z-index</td><td>number</td><td>-</td><td>-</td></tr></tbody></table>", 2);

const _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer Slot ");

const _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("table", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("thead", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "name"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "说明")])]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tbody", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "—"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "Drawer 的内容")]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "title"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "Drawer 标题区的内容")])])], -1);

const _hoisted_27 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer Methods ");

const _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("table", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("thead", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "name"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "说明")])]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tbody", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "handleClose"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("用于关闭 Drawer, 该方法会调用传入的 "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "before-close"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" 方法")])])])], -1);

const _hoisted_29 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Drawer Events ");

const _hoisted_30 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<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>", 1);

function drawervue_type_template_id_89e87226_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_app_link = Object(vue_esm_browser_prod["resolveComponent"])("app-link");

  const _component_app_heading = Object(vue_esm_browser_prod["resolveComponent"])("app-heading");

  const _component_element_demo0 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo0");

  const _component_demo_block = Object(vue_esm_browser_prod["resolveComponent"])("demo-block");

  const _component_element_demo1 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo1");

  const _component_element_demo2 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo2");

  const _component_element_demo3 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo3");

  const _component_right_nav = Object(vue_esm_browser_prod["resolveComponent"])("right-nav");

  return Object(vue_esm_browser_prod["openBlock"])(), Object(vue_esm_browser_prod["createElementBlock"])("section", drawervue_type_template_id_89e87226_hoisted_1, [Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "drawer-chou-ti",
    content: "Drawer 抽屉",
    href: "#drawer-chou-ti",
    level: "2"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [drawervue_type_template_id_89e87226_hoisted_2, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#drawer-chou-ti"
    })]),
    _: 1
  }), drawervue_type_template_id_89e87226_hoisted_3, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "ji-ben-yong-fa",
    content: "基本用法",
    href: "#ji-ben-yong-fa",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [drawervue_type_template_id_89e87226_hoisted_5, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#ji-ben-yong-fa"
    })]),
    _: 1
  }), drawervue_type_template_id_89e87226_hoisted_6, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo0)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_8]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_7]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "bu-tian-jia-title",
    content: "不添加 Title",
    href: "#bu-tian-jia-title",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_9, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#bu-tian-jia-title"
    })]),
    _: 1
  }), _hoisted_10, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo1)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_12]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_11]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "zi-ding-yi-nei-rong",
    content: "自定义内容",
    href: "#zi-ding-yi-nei-rong",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_13, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#zi-ding-yi-nei-rong"
    })]),
    _: 1
  }), _hoisted_14, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo2)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_15]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "duo-ceng-qian-tao",
    content: "多层嵌套",
    href: "#duo-ceng-qian-tao",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_16, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#duo-ceng-qian-tao"
    })]),
    _: 1
  }), _hoisted_17, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo3)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_19]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_18]),
    _: 1
  }), _hoisted_20, _hoisted_21, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "drawer-attributes",
    content: "Drawer Attributes",
    href: "#drawer-attributes",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_22, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#drawer-attributes"
    })]),
    _: 1
  }), _hoisted_23, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "drawer-slot",
    content: "Drawer Slot",
    href: "#drawer-slot",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_25, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#drawer-slot"
    })]),
    _: 1
  }), _hoisted_26, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "drawer-methods",
    content: "Drawer Methods",
    href: "#drawer-methods",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_27, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#drawer-methods"
    })]),
    _: 1
  }), _hoisted_28, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "drawer-events",
    content: "Drawer Events",
    href: "#drawer-events",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_29, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#drawer-events"
    })]),
    _: 1
  }), _hoisted_30, Object(vue_esm_browser_prod["createVNode"])(_component_right_nav)]);
}
// CONCATENATED MODULE: ./website/docs/zh-CN/drawer.md?vue&type=template&id=89e87226

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--3-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 () {
      const {
        createTextVNode: _createTextVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        createElementVNode: _createElementVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createTextVNode("从左往右开");

      const _hoisted_2 = /*#__PURE__*/_createTextVNode("从右往左开");

      const _hoisted_3 = /*#__PURE__*/_createTextVNode("从上往下开");

      const _hoisted_4 = /*#__PURE__*/_createTextVNode("从下往上开");

      const _hoisted_5 = /*#__PURE__*/_createTextVNode(" 点我打开 ");

      const _hoisted_6 = /*#__PURE__*/_createElementVNode("span", null, "我来啦!", -1);

      function render(_ctx, _cache) {
        const _component_el_radio = _resolveComponent("el-radio");

        const _component_el_radio_group = _resolveComponent("el-radio-group");

        const _component_el_button = _resolveComponent("el-button");

        const _component_el_drawer = _resolveComponent("el-drawer");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_radio_group, {
          modelValue: _ctx.direction,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.direction = $event)
        }, {
          default: _withCtx(() => [_createVNode(_component_el_radio, {
            label: "ltr"
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_radio, {
            label: "rtl"
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_radio, {
            label: "ttb"
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }), _createVNode(_component_el_radio, {
            label: "btt"
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          })]),
          _: 1
        }, 8, ["modelValue"]), _createVNode(_component_el_button, {
          onClick: _cache[1] || (_cache[1] = $event => _ctx.drawer = true),
          type: "primary",
          style: {
            "margin-left": "16px"
          }
        }, {
          default: _withCtx(() => [_hoisted_5]),
          _: 1
        }), _createVNode(_component_el_drawer, {
          title: "我是标题",
          modelValue: _ctx.drawer,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.drawer = $event),
          direction: _ctx.direction,
          "before-close": _ctx.handleClose,
          "destroy-on-close": ""
        }, {
          default: _withCtx(() => [_hoisted_6]),
          _: 1
        }, 8, ["modelValue", "direction", "before-close"])]);
      }

      const democomponentExport = {
        data() {
          return {
            drawer: false,
            direction: 'rtl'
          };
        },

        methods: {
          handleClose(done) {
            this.$confirm('确认关闭？').then(_ => {
              done();
            }).catch(_ => {});
          }

        }
      };
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo1": function () {
      const {
        createTextVNode: _createTextVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        createElementVNode: _createElementVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createTextVNode(" 点我打开 ");

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, "我来啦!", -1);

      function render(_ctx, _cache) {
        const _component_el_button = _resolveComponent("el-button");

        const _component_el_drawer = _resolveComponent("el-drawer");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_button, {
          onClick: _cache[0] || (_cache[0] = $event => _ctx.drawer = true),
          type: "primary",
          style: {
            "margin-left": "16px"
          }
        }, {
          default: _withCtx(() => [_hoisted_1]),
          _: 1
        }), _createVNode(_component_el_drawer, {
          title: "我是标题",
          modelValue: _ctx.drawer,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.drawer = $event),
          "with-header": false
        }, {
          default: _withCtx(() => [_hoisted_2]),
          _: 1
        }, 8, ["modelValue"])]);
      }

      const democomponentExport = {
        data() {
          return {
            drawer: false
          };
        }

      };
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo2": function () {
      const {
        createTextVNode: _createTextVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        toDisplayString: _toDisplayString,
        createElementVNode: _createElementVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createTextVNode("打开嵌套表格的 Drawer");

      const _hoisted_2 = /*#__PURE__*/_createTextVNode("打开嵌套 Form 的 Drawer");

      const _hoisted_3 = {
        class: "demo-drawer__content"
      };
      const _hoisted_4 = {
        class: "demo-drawer__footer"
      };

      const _hoisted_5 = /*#__PURE__*/_createTextVNode("取 消");

      function render(_ctx, _cache) {
        const _component_el_button = _resolveComponent("el-button");

        const _component_el_table_column = _resolveComponent("el-table-column");

        const _component_el_table = _resolveComponent("el-table");

        const _component_el_drawer = _resolveComponent("el-drawer");

        const _component_el_input = _resolveComponent("el-input");

        const _component_el_form_item = _resolveComponent("el-form-item");

        const _component_el_option = _resolveComponent("el-option");

        const _component_el_select = _resolveComponent("el-select");

        const _component_el_form = _resolveComponent("el-form");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_button, {
          type: "text",
          onClick: _cache[0] || (_cache[0] = $event => _ctx.table = true)
        }, {
          default: _withCtx(() => [_hoisted_1]),
          _: 1
        }), _createVNode(_component_el_button, {
          type: "text",
          onClick: _cache[1] || (_cache[1] = $event => _ctx.dialog = true)
        }, {
          default: _withCtx(() => [_hoisted_2]),
          _: 1
        }), _createVNode(_component_el_drawer, {
          title: "我嵌套了表格!",
          modelValue: _ctx.table,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.table = $event),
          direction: "rtl",
          size: "50%"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_table, {
            data: _ctx.gridData
          }, {
            default: _withCtx(() => [_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[6] || (_cache[6] = $event => _ctx.dialog = $event),
          direction: "ltr",
          "custom-class": "demo-drawer",
          ref: "drawer"
        }, {
          default: _withCtx(() => [_createElementVNode("div", _hoisted_3, [_createVNode(_component_el_form, {
            model: _ctx.form
          }, {
            default: _withCtx(() => [_createVNode(_component_el_form_item, {
              label: "活动名称",
              "label-width": _ctx.formLabelWidth
            }, {
              default: _withCtx(() => [_createVNode(_component_el_input, {
                modelValue: _ctx.form.name,
                "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _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(() => [_createVNode(_component_el_select, {
                modelValue: _ctx.form.region,
                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.form.region = $event),
                placeholder: "请选择活动区域"
              }, {
                default: _withCtx(() => [_createVNode(_component_el_option, {
                  label: "区域一",
                  value: "shanghai"
                }), _createVNode(_component_el_option, {
                  label: "区域二",
                  value: "beijing"
                })]),
                _: 1
              }, 8, ["modelValue"])]),
              _: 1
            }, 8, ["label-width"])]),
            _: 1
          }, 8, ["model"]), _createElementVNode("div", _hoisted_4, [_createVNode(_component_el_button, {
            onClick: _ctx.cancelForm
          }, {
            default: _withCtx(() => [_hoisted_5]),
            _: 1
          }, 8, ["onClick"]), _createVNode(_component_el_button, {
            type: "primary",
            onClick: _cache[5] || (_cache[5] = $event => _ctx.$refs.drawer.closeDrawer()),
            loading: _ctx.loading
          }, {
            default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.loading ? '提交中 ...' : '确 定'), 1)]),
            _: 1
          }, 8, ["loading"])])])]),
          _: 1
        }, 8, ["before-close", "modelValue"])]);
      }

      const democomponentExport = {
        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(done) {
            if (this.loading) {
              return;
            }

            this.$confirm('确定要提交表单吗？').then(_ => {
              this.loading = true;
              this.timer = setTimeout(() => {
                done(); // 动画关闭需要一定的时间

                setTimeout(() => {
                  this.loading = false;
                }, 400);
              }, 2000);
            }).catch(_ => {});
          },

          cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
          }

        }
      };
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo3": function () {
      const {
        createTextVNode: _createTextVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        createElementVNode: _createElementVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createTextVNode(" 点我打开 ");

      const _hoisted_2 = /*#__PURE__*/_createTextVNode("打开里面的!");

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("p", null, "_(:зゝ∠)_", -1);

      function render(_ctx, _cache) {
        const _component_el_button = _resolveComponent("el-button");

        const _component_el_drawer = _resolveComponent("el-drawer");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_button, {
          onClick: _cache[0] || (_cache[0] = $event => _ctx.drawer = true),
          type: "primary",
          style: {
            "margin-left": "16px"
          }
        }, {
          default: _withCtx(() => [_hoisted_1]),
          _: 1
        }), _createVNode(_component_el_drawer, {
          title: "我是外面的 Drawer",
          modelValue: _ctx.drawer,
          "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.drawer = $event),
          size: "50%"
        }, {
          default: _withCtx(() => [_createElementVNode("div", null, [_createVNode(_component_el_button, {
            onClick: _cache[1] || (_cache[1] = $event => _ctx.innerDrawer = true)
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_drawer, {
            title: "我是里面的",
            "append-to-body": true,
            "before-close": _ctx.handleClose,
            modelValue: _ctx.innerDrawer,
            "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.innerDrawer = $event)
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }, 8, ["before-close", "modelValue"])])]),
          _: 1
        }, 8, ["modelValue"])]);
      }

      const democomponentExport = {
        data() {
          return {
            drawer: false,
            innerDrawer: false
          };
        },

        methods: {
          handleClose(done) {
            this.$confirm('还有未保存的工作哦确定关闭吗？').then(_ => {
              done();
            }).catch(_ => {});
          }

        }
      };
      return {
        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_89e87226_render

/* harmony default export */ var drawer = __webpack_exports__["default"] = (drawervue_type_script_lang_ts);

/***/ })

}]);