mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
654 lines
40 KiB
JavaScript
654 lines
40 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[77],{
|
|
|
|
/***/ 617:
|
|
/***/ (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/es/drawer.md?vue&type=template&id=6b3bf5b5
|
|
|
|
var drawervue_type_template_id_6b3bf5b5_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var drawervue_type_template_id_6b3bf5b5_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h2 id=\"drawer\"><a class=\"header-anchor\" href=\"#drawer\">¶</a> Drawer</h2><p>A veces, <code>Dialog</code> no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como <code>terminos & condiciones</code>, <code>Drawer</code> tiene una API casi idéntica a <code>Dialog</code>, pero introduce una experiencia de usuario diferente.</p><h3 id=\"uso-basico\"><a class=\"header-anchor\" href=\"#uso-basico\">¶</a> Uso básico</h3><p>Llamada de un drawer temporal, desde varias direcciones</p>", 4);
|
|
|
|
var drawervue_type_template_id_6b3bf5b5_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 */])("Debe establecer "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "model-value"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" para "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" como lo hace "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Dialog"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" para controlar la visibilidad. "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "visible"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" es del tipo "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "boolean"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" tiene partes: "), /*#__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 */])(", el "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" es un slot con nombre, también puede establecer el título a través de un atributo llamado "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", por defecto a una cadena vacía, la parte "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "body"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" es el área principal de "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", que contiene contenido definido por el usuario. Al abrir, "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" se expande desde la "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "esquina derecha a la izquierda"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" cuyo tamaño es "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "30%"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" y "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "size"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". Este caso de demostración también muestra cómo utilizar la API "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "before-close"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", consulte la sección Atributos para obtener más detalles.")])], -1);
|
|
|
|
var _hoisted_7 = /*#__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\">left to right</el-radio>\n <el-radio label=\"rtl\">right to left</el-radio>\n <el-radio label=\"ttb\">top to bottom</el-radio>\n <el-radio label=\"btt\">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n open\n</el-button>\n\n<el-drawer\n title=\"I am the title\"\n v-model=\"drawer\"\n :direction=\"direction\"\n :before-close=\"handleClose\">\n <span>Hi, there!</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('Are you sure you want to close this?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "no-title"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#no-title"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" No Title")], -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "When you no longer need a title, you can remove title from drawer.", -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 */])("Set the "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "withHeader"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" attribute to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "false"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "title"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" attribute.")])], -1);
|
|
|
|
var _hoisted_11 = /*#__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 open\n</el-button>\n\n<el-drawer\n title=\"I am the title\"\n v-model=\"drawer\"\n :with-header=\"false\">\n <span>Hi there!</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_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "personalizar-el-contenido"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#personalizar-el-contenido"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Personalizar el contenido")], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Al igual que "), /*#__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 */])(" puede hacer muchas interacciones diversas.")], -1);
|
|
|
|
var _hoisted_14 = /*#__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\">Open Drawer with nested table</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">Open Drawer with nested form</el-button>\n<el-drawer\n title=\"I have a nested table inside!\"\n v-model=\"table\"\n direction=\"rtl\"\n size=\"50%\">\n <el-table :data=\"gridData\">\n <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n </el-table>\n</el-drawer>\n\n<el-drawer\n title=\"I have a nested form inside!\"\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=\"Name\" :label-width=\"formLabelWidth\">\n <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n </el-form-item>\n <el-form-item label=\"Area\" :label-width=\"formLabelWidth\">\n <el-select v-model=\"form.region\" placeholder=\"Please select activity area\">\n <el-option label=\"Area1\" value=\"shanghai\"></el-option>\n <el-option label=\"Area2\" 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\">Cancel</el-button>\n <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? 'Submitting ...' : 'Submit' }}</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: 'Peter Parker',\n address: 'Queens, New York City'\n }, {\n date: '2016-05-04',\n name: 'Peter Parker',\n address: 'Queens, New York City'\n }, {\n date: '2016-05-01',\n name: 'Peter Parker',\n address: 'Queens, New York City'\n }, {\n date: '2016-05-03',\n name: 'Peter Parker',\n address: 'Queens, New York City'\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('Do you want to submit?')\n .then(_ => {\n this.loading = true;\n this.timer = setTimeout(() => {\n done();\n // animation takes time\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_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "drawer-anidados"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#drawer-anidados"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Drawer anidados")], -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("También puede tener varias capas de "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Drawer"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" al igual que con "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Dialog"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")], -1);
|
|
|
|
var _hoisted_17 = /*#__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 */])("Si necesita varios drawer en diferentes capas, debe establecer el atributo "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "append-to-body"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" en "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "true")])], -1);
|
|
|
|
var _hoisted_18 = /*#__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 open\n</el-button>\n\n<el-drawer\n title=\"I'm outer Drawer\"\n v-model=\"drawer\"\n size=\"50%\">\n <div>\n <el-button @click=\"innerDrawer = true\">Click me!</el-button>\n <el-drawer\n title=\"I'm inner Drawer\"\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('You still have unsaved data, proceed?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n</script>\n\n")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<div class=\"tip\"><p>El contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de <code>ref' o después de que se emita el evento </code>open'.</p></div><div class=\"tip\"><p>El Drawer proporciona una API llamada "destroyOnClose", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida "mounted" sea llamado cada vez que se abra el Cajón.</p></div><h3 id=\"atributos-de-drawer\"><a class=\"header-anchor\" href=\"#atributos-de-drawer\">¶</a> Atributos de Drawer</h3><table><thead><tr><th>Parámetros</th><th>Descripción</th><th>Tipo</th><th>Valores aceptados</th><th>Por defecto</th></tr></thead><tbody><tr><td>append-to-body</td><td>Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a <strong>true</strong></td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>before-close</td><td>Si está configurado, el procedimiento de cierre se detendrá.</td><td>function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre.</td><td>—</td><td>—</td></tr><tr><td>close-on-press-escape</td><td>Indica si el Drawer puede cerrarse pulsando ESC</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>custom-class</td><td>Nombre extra de clase para Drawer</td><td>string</td><td>—</td><td>—</td></tr><tr><td>destroy-on-close</td><td>Indica si los children deben ser destruidos después de cerrar el Drawer.</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>modal</td><td>Mostrará una capa de sombra</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>modal-append-to-body</td><td>Indica si se debe insertar una capa de sombreado en el elemento DocumentBody</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>direction</td><td>Dirección de apertura del Drawer</td><td>Direction</td><td>rtl / ltr / ttb / btt</td><td>rtl</td></tr><tr><td>show-close</td><td>Se mostrará el botón de cerrar en la parte superior derecha del Drawer</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>size</td><td>Tamaño del Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo <code>number</code>, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo <code>string</code>, se debe usar con notación <code>x%</code>, de lo contrario se interpretará como unidad de píxeles.</td><td>number / string</td><td>-</td><td>'30%'</td></tr><tr><td>title</td><td>El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>model-value</td><td>Si se muestra el Drawer, también soporta la notación <code>.sync</code></td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>wrapperClosable</td><td>Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado.</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>withHeader</td><td>Flag that controls the header section's existance, default to true, when withHeader set to false, both <code>title attribute</code> and <code>title slot</code> won't work</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h3 id=\"drawer-slot-s\"><a class=\"header-anchor\" href=\"#drawer-slot-s\">¶</a> Drawer Slot's</h3><table><thead><tr><th>Nombre</th><th>Descripción</th></tr></thead><tbody><tr><td>—</td><td>El contenido del Drawer</td></tr><tr><td>title</td><td>El titulo de la sección del Drawer</td></tr></tbody></table><h3 id=\"metodos-drawer\"><a class=\"header-anchor\" href=\"#metodos-drawer\">¶</a> Métodos Drawer</h3><table><thead><tr><th>Nombre</th><th>Descripción</th></tr></thead><tbody><tr><td>closeDrawer</td><td>Para cerrar el Drawer, este método llamará <code>before-close</code>.</td></tr></tbody></table><h3 id=\"eventos-drawer\"><a class=\"header-anchor\" href=\"#eventos-drawer\">¶</a> Eventos Drawer</h3><table><thead><tr><th>Nombre</th><th>Descripción</th><th>Parámetros</th></tr></thead><tbody><tr><td>open</td><td>Se activa antes de que comience la animación de apertura del Drawer.</td><td>—</td></tr><tr><td>opened</td><td>Se activa cuando finaliza la animación de apertura del Drawer.</td><td>—</td></tr><tr><td>close</td><td>Se activa antes de que comience la animación de cierre del Drawer.</td><td>—</td></tr><tr><td>closed</td><td>Se activa después de que finaliza la animación de cierre del Drawer.</td><td>—</td></tr></tbody></table>", 10);
|
|
|
|
function drawervue_type_template_id_6b3bf5b5_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_6b3bf5b5_hoisted_1, [drawervue_type_template_id_6b3bf5b5_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_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [drawervue_type_template_id_6b3bf5b5_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), _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_14];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_15, _hoisted_16, 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_18];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_17];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_19]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/es/drawer.md?vue&type=template&id=6b3bf5b5
|
|
|
|
// 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/es/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("left to right");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createTextVNode("right to left");
|
|
|
|
var _hoisted_3 = /*#__PURE__*/_createTextVNode("top to bottom");
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createTextVNode("bottom to top");
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createTextVNode(" open ");
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("span", null, "Hi, there!", -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: "I am the title",
|
|
modelValue: _ctx.drawer,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.drawer = $event;
|
|
}),
|
|
direction: _ctx.direction,
|
|
"before-close": _ctx.handleClose
|
|
}, {
|
|
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('Are you sure you want to close this?').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(" open ");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", null, "Hi there!", -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: "I am the 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("Open Drawer with nested table");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createTextVNode("Open Drawer with nested form");
|
|
|
|
var _hoisted_3 = {
|
|
class: "demo-drawer__content"
|
|
};
|
|
var _hoisted_4 = {
|
|
class: "demo-drawer__footer"
|
|
};
|
|
|
|
var _hoisted_5 = /*#__PURE__*/_createTextVNode("Cancel");
|
|
|
|
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: "I have a nested table inside!",
|
|
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: "Date",
|
|
width: "150"
|
|
}), _createVNode(_component_el_table_column, {
|
|
property: "name",
|
|
label: "Name",
|
|
width: "200"
|
|
}), _createVNode(_component_el_table_column, {
|
|
property: "address",
|
|
label: "Address"
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["data"])];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"]), _createVNode(_component_el_drawer, {
|
|
title: "I have a nested form inside!",
|
|
"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: "Name",
|
|
"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: "Area",
|
|
"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: "Please select activity area"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_option, {
|
|
label: "Area1",
|
|
value: "shanghai"
|
|
}), _createVNode(_component_el_option, {
|
|
label: "Area2",
|
|
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 ? 'Submitting ...' : 'Submit'), 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: 'Peter Parker',
|
|
address: 'Queens, New York City'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: 'Peter Parker',
|
|
address: 'Queens, New York City'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: 'Peter Parker',
|
|
address: 'Queens, New York City'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: 'Peter Parker',
|
|
address: 'Queens, New York City'
|
|
}],
|
|
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('Do you want to submit?').then(function (_) {
|
|
_this.loading = true;
|
|
_this.timer = setTimeout(function () {
|
|
done(); // animation takes time
|
|
|
|
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(" open ");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createTextVNode("Click me!");
|
|
|
|
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: "I'm outer 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: "I'm inner Drawer",
|
|
"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('You still have unsaved data, proceed?').then(function (_) {
|
|
done();
|
|
}).catch(function (_) {});
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/es/drawer.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/es/drawer.md
|
|
|
|
|
|
|
|
drawervue_type_script_lang_ts.render = drawervue_type_template_id_6b3bf5b5_render
|
|
|
|
/* harmony default export */ var drawer = __webpack_exports__["default"] = (drawervue_type_script_lang_ts);
|
|
|
|
/***/ })
|
|
|
|
}]); |