github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/2.7/es.386d142.js

1 line
1.1 MiB
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{209:function(e,t,a){var n={"./changelog.vue":304,"./component.vue":476,"./design.vue":515,"./guide.vue":473,"./index.vue":471,"./nav.vue":470,"./resource.vue":516};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=209},213:function(e,t,a){var n={"./es/alert.md":505,"./es/badge.md":504,"./es/border.md":502,"./es/breadcrumb.md":501,"./es/button.md":495,"./es/card.md":492,"./es/carousel.md":486,"./es/cascader.md":468,"./es/checkbox.md":461,"./es/collapse.md":458,"./es/color-picker.md":452,"./es/color.md":449,"./es/container.md":443,"./es/custom-theme.md":519,"./es/date-picker.md":431,"./es/datetime-picker.md":423,"./es/dialog.md":417,"./es/dropdown.md":412,"./es/form.md":408,"./es/i18n.md":529,"./es/icon.md":397,"./es/input-number.md":388,"./es/input.md":382,"./es/installation.md":530,"./es/layout.md":358,"./es/loading.md":352,"./es/menu.md":351,"./es/message-box.md":345,"./es/message.md":319,"./es/notification.md":318,"./es/pagination.md":317,"./es/popover.md":310,"./es/progress.md":509,"./es/quickstart.md":511,"./es/radio.md":498,"./es/rate.md":455,"./es/select.md":437,"./es/slider.md":434,"./es/steps.md":416,"./es/switch.md":392,"./es/table.md":391,"./es/tabs.md":364,"./es/tag.md":355,"./es/time-picker.md":307,"./es/timeline.md":503,"./es/tooltip.md":464,"./es/transfer.md":446,"./es/transition.md":499,"./es/tree.md":465,"./es/typography.md":510,"./es/upload.md":346};function o(e){var t=l(e);return a(t)}function l(e){var t=n[e];if(t+1)return t;var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}o.keys=function(){return Object.keys(n)},o.resolve=l,(e.exports=o).id=213},261:function(e,t,a){},262:function(e,t,a){},263:function(e,t,a){},264:function(e,t,a){},265:function(e,t,a){},266:function(e,t,a){},267:function(e,t,a){},289:function(e,t,a){"use strict";var n=a(261);a.n(n).a},290:function(e,t,a){"use strict";var n=a(262);a.n(n).a},291:function(e,t,a){"use strict";var n=a(263);a.n(n).a},292:function(e,t,a){"use strict";var n=a(264);a.n(n).a},293:function(e,t,a){"use strict";var n=a(265);a.n(n).a},294:function(e,t,a){"use strict";var n=a(266);a.n(n).a},295:function(e,t,a){"use strict";var n=a(267);a.n(n).a},304:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),a("h3",{attrs:{id:"2-7-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),a("p",[a("em",[e._v("2019-03-28")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),a("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),a("li",[e._v("NavMenu\n"),a("ul",[a("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),a("li",[e._v("Style\n"),a("ul",[a("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),a("h4",{attrs:{id:"optimization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),a("h3",{attrs:{id:"2-6-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"bug-fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),a("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),a("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),a("h3",{attrs:{id:"2-6-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),a("p",[a("em",[e._v("2019-03-21")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),a("li",[e._v("i18n\n"),a("ul",[a("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),a("li",[e._v("French translation update (#14643 by @smalesys)")])])])]),a("h4",{attrs:{id:"bug-fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),a("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),a("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),a("li",[e._v("Add french search index (#14565 by @iamkun)")]),a("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),a("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),a("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),a("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),a("li",[e._v("Fix typo (#14751 by @2bj)")]),a("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),a("h4",{attrs:{id:"optimization-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Chore\n"),a("ul",[a("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),a("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),a("li",[e._v("Add more ga event (#14633 by @iamkun)")]),a("li",[e._v("Update discusion group (#14741 by @iamkun)")]),a("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),a("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),a("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),a("h3",{attrs:{id:"2-6-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),a("p",[a("em",[e._v("2019-03-03")])]),a("h4",{attrs:{id:"bug-fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),a("li",[e._v("Fix doc directory in "),a("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),a("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),a("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),a("h3",{attrs:{id:"2-6-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),a("p",[a("em",[e._v("2019-03-01")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Timeline\n"),a("ul",[a("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),a("li",[e._v("DropdownItem\n"),a("ul",[a("li",[e._v("Add icon prop to "),a("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Add slot "),a("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),a("h4",{attrs:{id:"optimization-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Update input password (by @iamkun in #14480)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Add support for "),a("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Optimize code (by @elfman in #13973)")])])]),a("li",[e._v("Popup\n"),a("ul",[a("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),a("li",[e._v("Warn input as a controlled component. (by @wacky6 in #14463)")]),a("li",[e._v("Update Table doc (by @luguokong in #14329)")]),a("li",[e._v("Update input doc (by @iamkun in #14437)")]),a("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),a("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),a("li",[e._v("Build\n"),a("ul",[a("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),a("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),a("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),a("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),a("h4",{attrs:{id:"bug-fixes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),a("li",[e._v("ScrollBar\n"),a("ul",[a("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),a("li",[e._v("Tabs & Dropdown\n"),a("ul",[a("li",[e._v("Fix style (by @hetech in #14452)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),a("li",[e._v("Docs\n"),a("ul",[a("li",[e._v("Fix DatetimePicker format doc error (by @iamkun in #14290)")]),a("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),a("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),a("h3",{attrs:{id:"2-5-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),a("p",[a("em",[e._v("2019-02-01")])]),a("h4",{attrs:{id:"bug-fixes-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),a("h3",{attrs:{id:"2-5-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),a("p",[a("em",[e._v("2019-01-31")])]),a("h4",{attrs:{id:"optimization-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),a("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),a("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),a("h4",{attrs:{id:"bug-fixes-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),a("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),a("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),a("h4",{attrs:{id:"bug-fixes-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("h3",{attrs:{id:"2-5-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),a("p",[a("em",[e._v("2019-01-27")])]),a("h4",{attrs:{id:"optimization-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("Docs:\n"),a("ul",[a("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),a("h4",{attrs:{id:"bug-fixes-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Build:\n"),a("ul",[a("li",[e._v("Delete unremoved comments in umd module "),a("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),a("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),a("li",[e._v("Fix 2.5.1 build issues (by @iamkun in #14228)")])])])]),a("h3",{attrs:{id:"2-5-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),a("p",[a("em",[e._v("2019-01-26")])]),a("h4",{attrs:{id:"optimization-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),a("ul",[a("li",[e._v("DatePicker: resalta el mes y año actual (por @Debiancc en #14211)")]),a("li",[e._v("Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)")])]),a("h4",{attrs:{id:"bug-fixes-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)")]),a("li",[e._v("Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)")])]),a("h3",{attrs:{id:"2-5-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),a("p",[a("em",[e._v("2019-01-25")])]),a("h4",{attrs:{id:"bug-fixes-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)")]),a("li",[e._v("Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)")])])]),a("li",[e._v("Carrusel\n"),a("ul",[a("li",[e._v("Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)")])])]),a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Retirada de los props computados obsoletos (#13737) (por @iamkun)")]),a("li",[e._v("Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)")]),a("li",[e._v("Corregido icono que cubre el texto (#13596) (por @ziyoung)")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @PanJiaChen)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Añade el "),a("code",[e._v("key")]),e._v(" en v-for de TimeSpinner (#13547) (por @Ende93)")]),a("li",[e._v("Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("El valor de entrada no será menor que 1 (#13727) (por @elfman)")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)")]),a("li",[e._v("Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Refinado el estilo (por @ohhoney1)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)")]),a("li",[e._v("Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)")]),a("li",[e._v("Corregida la documentación del tipo de índice (#13628) (por @ilovefafa)")]),a("li",[e._v("Corrección del problema de visualización de "),a("code",[e._v("show-summary")]),e._v(" cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Corregido error de autodesplazamiento (#13696) (por @iamkun)")]),a("li",[e._v("Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)")]),a("li",[e._v("Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Corregido que "),a("code",[e._v("showCheckbox")]),e._v(" prop en "),a("code",[e._v("Tree")]),e._v(" no puede afectar a los hijos "),a("code",[e._v("tree-node")]),e._v(" (por @KidneyFlower)")]),a("li",[e._v("Actualizado documento y archivo de definición (#13540) (por @ziyoung)")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Agregada la prop "),a("code",[e._v("url")]),e._v(" para subir el archivo cuando "),a("code",[e._v("list-type")]),e._v(" cambia (#13771) (por @elfman)")])])]),a("li",[e._v("Slider\n"),a("ul",[a("li",[e._v("Corrección de la sangría del código fuente (#13955) (por @wacky6)")])])]),a("li",[e._v("I18n\n"),a("ul",[a("li",[e._v("Añadidas las traducciones de catalán que faltaban (por @jaumesala)")]),a("li",[e._v("Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)")]),a("li",[e._v("Corrección de las traducciones al finés (#14137) (por @jenkrisu)")])])]),a("li",[e._v("Doc\n"),a("ul",[a("li",[e._v("Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)")])])]),a("li",[e._v("Otros\n"),a("ul",[a("li",[e._v("Eliminar scripts innecesarios (por @ziyoung)")]),a("li",[e._v("Corregido el error de anchor link (#13753) (por @iamkun)")]),a("li",[e._v("Corrección de la capitalización inconsistente en la documentación (por @wonderjar)")]),a("li",[e._v("Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)")]),a("li",[e._v("Añadido logs de hilo a .gitignore (#13922) (por @mimimi)")]),a("li",[e._v("Eliminada la cuota de patrocinadores (#14156) (por @island205)")]),a("li",[e._v("Actualizado readme qr code src (#13960) (por @iamkun)")]),a("li",[e._v("Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)")])])])]),a("h3",{attrs:{id:"2-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),a("p",[a("em",[e._v("2018-11-21")])]),a("ul",[a("li",[e._v("Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478")]),a("li",[e._v("Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)")])]),a("h3",{attrs:{id:"2-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),a("p",[a("em",[e._v("2018-11-16")])]),a("ul",[a("li",[e._v("Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268")]),a("li",[e._v("El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208")]),a("li",[e._v("Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("loop")]),e._v(" al componente carrusel, #13217")]),a("li",[e._v("Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200")]),a("li",[e._v("Table header scoped slot puede recibir parámetros, #13263")]),a("li",[e._v("El método "),a("code",[e._v("clearFilter")]),e._v(" de la tabla soporta argumentos, #13176")]),a("li",[e._v("El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)")]),a("li",[e._v("El contenido del input del panel ColorPicker se muestra correctamente, #13278")]),a("li",[e._v("ColorPicker ya no activa la validación de formularios al arrastrar, #13299")]),a("li",[e._v("InputNumber se le ha añadido el método "),a("code",[e._v("select")]),e._v(", #13286 (por @st-sloth)")]),a("li",[e._v("Autocompletar agregó el evento "),a("code",[e._v("clear")]),e._v(", #12171(by arthurdenner) #13326")]),a("li",[e._v("Puede cerrar Menú haciendo clic fuera del Menú, #13296")]),a("li",[e._v("El método "),a("code",[e._v("validateField")]),e._v(" de Form puede recibir argumentos, #13319")]),a("li",[e._v("Cascader añadió el evento "),a("code",[e._v("visible-change")]),e._v(", #13415")]),a("li",[e._v("DatePicker agregó slot para separador de rango, #13272 (por @milworm)")]),a("li",[e._v("Tree añade las propiedades "),a("code",[e._v("iconClass")]),e._v(" y "),a("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (por @isnifer)")]),a("li",[e._v("Progress permite texto en el atributo "),a("code",[e._v("status")]),e._v(" #13198 (por @ali-master)")]),a("li",[e._v("Corregidas las "),a("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree que causaba un error, #13349 (por @dive2Pro)")])]),a("h3",{attrs:{id:"2-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),a("p",[a("em",[e._v("2018-10-26")])]),a("ul",[a("li",[e._v("El parámetro de Form's "),a("code",[e._v("clearValidate")]),e._v(" soporta cadenas, #12990 (by @codinglobster)")]),a("li",[e._v("Se agregó el atributo "),a("code",[e._v("type")]),e._v(" para Badge, #12991")]),a("li",[e._v("Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)")]),a("li",[e._v("Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)")]),a("li",[e._v("La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)")]),a("li",[e._v("Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)")]),a("li",[e._v("Arreglado que el atributo size de Select no funcionaba, #13070")]),a("li",[e._v("Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)")]),a("li",[e._v("Arreglado el último TabNav que no se podía borrar, #13039")]),a("li",[e._v("Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178")]),a("li",[e._v("Añadido title slot para Alert, #13082 (by @Kingwl)")]),a("li",[e._v("Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)")]),a("li",[e._v("Optimizada la animación de Upload cuando el archivo es eliminado, #12987")]),a("li",[e._v("Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052")])]),a("h3",{attrs:{id:"2-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),a("ul",[a("li",[e._v("No se muestra el contorno cuando Switch está enfocado, #12771")]),a("li",[e._v("Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)")]),a("li",[e._v("Añadido evento opened para Dialog, #12828")]),a("li",[e._v("Corregido el orden incorrecto de visualización de TabNav, #12846")]),a("li",[e._v("Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948")]),a("li",[e._v("Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854")]),a("li",[e._v("El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)")]),a("li",[e._v("Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898")]),a("li",[e._v("Arreglado el problema de que el atributo "),a("code",[e._v("render-header")]),e._v(" del encabezado de Table no funcionaba, #12914")])]),a("h3",{attrs:{id:"2-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),a("p",[a("em",[e._v("2018-09-14")])]),a("ul",[a("li",[e._v("Corregido que DatePicker no activaba la validación del Form, #12328 #12348")]),a("li",[e._v("Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347")]),a("li",[e._v("Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)")]),a("li",[e._v("Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)")]),a("li",[e._v("Corregida el input no resaltada en Cascader, #12341")]),a("li",[e._v("Corregido el orden incorrecto de Tabpane, #12346")]),a("li",[e._v("Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)")]),a("li",[e._v("Corregido el estilo del Submenú, #2457")]),a("li",[e._v("Corregido el resaltado después de seleccionar el Submenú, #12479")]),a("li",[e._v("Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)")]),a("li",[e._v("Corregido el valor incorrecto del input de Paginación, #12525")]),a("li",[e._v("Se ha corregido el orden en que la paginación desencadena los eventos, #12530")]),a("li",[e._v("Corregido que no se mostraba el Table Filter, #12539")]),a("li",[e._v("Corregido Tree que era incapaz de borrar nodos, #12684")]),a("li",[e._v("Corregida la altura de los Select Input que cambiaba en modo simple, #12719")]),a("li",[e._v("Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("autocomplete")]),e._v(" para Input, obsoleto "),a("code",[e._v("auto-complete")]),e._v(", #12514 (por @axetroy)")]),a("li",[e._v("Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)")])]),a("h3",{attrs:{id:"2-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),a("p",[a("em",[e._v("2018-08-09")])]),a("ul",[a("li",[e._v("Arreglada la tabla que no mostraba el ícono del filtro cuando a "),a("code",[e._v("filter")]),e._v(" se les asignaba un array vacío, #12165")]),a("li",[e._v("Arreglado Menu que no guardaba el estado activo cuando cambiaba "),a("code",[e._v("collapse")]),e._v(" #12178 (por @elfman)")]),a("li",[e._v("Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248")]),a("li",[e._v("Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262")]),a("li",[e._v("Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es "),a("code",[e._v("undefined")]),e._v(",#12322")]),a("li",[e._v("Corregida la función de consulta de Select not debounced en modo multi, #12181")]),a("li",[e._v("Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304")]),a("li",[e._v("Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203")]),a("li",[e._v("Corregida la visualización incorrecta de Main en IE, #12237")]),a("li",[e._v("Corregido el trigger de Input con dos validaciones de Form, #12260")]),a("li",[e._v("Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256")]),a("li",[e._v("Arreglado el nodo Tree no se borraba después de arrastrar, #12279")]),a("li",[e._v("Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para Autocompletar, #12241")]),a("li",[e._v("Añadido el modificador "),a("code",[e._v("sync")]),e._v(" para el atributo "),a("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),a("h3",{attrs:{id:"2-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),a("p",[a("em",[e._v("2018-07-26")])]),a("ul",[a("li",[e._v("Se ha corregido en Table que "),a("code",[e._v("class-name")]),e._v(" no funcionaba para las columnas "),a("code",[e._v("expand")]),e._v(", #12006")]),a("li",[e._v("Se ha añadido el método "),a("code",[e._v("toggleAllSelection")]),e._v(" para Table, #12047")]),a("li",[e._v("Corregida la posición incorrecta del "),a("code",[e._v("suffix slot")]),e._v(" cuando Input contiene Select, #12108")]),a("li",[e._v("Corregido que el "),a("code",[e._v("line-height")]),e._v(" de Option no se establecia, #12120")]),a("li",[e._v("Corregido que TimeSelect con valor por defecto "),a("code",[e._v("null")]),e._v(" no podia ser asignado después de ejecutar "),a("code",[e._v("resetField")]),e._v(", #12010")]),a("li",[e._v("Arreglado el evento "),a("code",[e._v("keydown")]),e._v(" que cuando no era una tecla de flecha no funciona en Tree, #12008")]),a("li",[e._v("Corregido nodo padre checked en modo lazy, #12106")]),a("li",[e._v("Añadido el parámetro "),a("code",[e._v("includeHalfChecked")]),e._v(" para getCheckedNodes de Tree, #12014")])]),a("h3",{attrs:{id:"2-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),a("p",[a("em",[e._v("2018-07-13")])]),a("ul",[a("li",[e._v("Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837")]),a("li",[e._v("Corregida la posición incorrecta del slot Input "),a("code",[e._v("suffix")]),e._v(" cuando se usaba el slot "),a("code",[e._v("suffix")]),e._v(" con el slot "),a("code",[e._v("append")]),e._v(" , #11951")]),a("li",[e._v("Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967")]),a("li",[e._v("Arreglado el nodo Tree checked cuando estaba disabled, #11847")]),a("li",[e._v("Corregido que "),a("code",[e._v("default-checked-keys")]),e._v(" no funcionaba en Tree, #11971")]),a("li",[e._v("Corregido que el "),a("code",[e._v("empty-text")]),e._v(" no era visible cuando el nodo Tree se filtraba, #11971")]),a("li",[e._v("Arreglada la posición de texto vacío sobredimensionado en Table, #11965")]),a("li",[e._v("Corregido que la fila de la tabla no se modificado el resaltado cuando "),a("code",[e._v("current-row-key")]),e._v(" era asignada a null, #11866")]),a("li",[e._v("Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864")]),a("li",[e._v("Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912")])]),a("h3",{attrs:{id:"2-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),a("p",[a("em",[e._v("2018-07-03")])]),a("ul",[a("li",[e._v("Corregido "),a("code",[e._v("allow-drop")]),e._v(" que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797")]),a("li",[e._v("Ahora puede pasar un parámetro al método "),a("code",[e._v("clearValidate")]),e._v(" de Form, especificando qué resultados de validación de "),a("code",[e._v("FormItems")]),e._v(" necesita borrar, #11821")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" para MessageBox, #11831")])]),a("h3",{attrs:{id:"2-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),a("p",[a("em",[e._v("2018-06-26")])]),a("ul",[a("li",[e._v("Ahora el "),a("code",[e._v("class-name")]),e._v(" y el "),a("code",[e._v("label-class-name")]),e._v(" de la tabla son reactivos, #11626")]),a("li",[e._v("Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando "),a("code",[e._v("highlight-current-row")]),e._v(" era "),a("code",[e._v("false")]),e._v(", #11646")]),a("li",[e._v("Corregido un error de estilo de ButtonGroup cuando sólo habia un botón "),a("code",[e._v("round")]),e._v(" o "),a("code",[e._v("circle")]),e._v(", #11605")]),a("li",[e._v("Arreglado estilo del tamaño de página del Select de Pagination, #11622")]),a("li",[e._v("Corregido un error del método "),a("code",[e._v("open")]),e._v(" de los Menús cuando se cambiaba dinámicamente "),a("code",[e._v("collapse")]),e._v(", #11646")]),a("li",[e._v("Añadidos los parámetros "),a("code",[e._v("activeName")]),e._v(" y "),a("code",[e._v("oldActiveName")]),e._v(" al gancho before-leave de Tabs, #11713")]),a("li",[e._v("Arreglado el focus en Cascader después de hacer clic fuera, #11588")]),a("li",[e._v("Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando "),a("code",[e._v("change-on-select")]),e._v(" como "),a("code",[e._v("true")]),e._v(", #11623")]),a("li",[e._v("Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672")])]),a("h3",{attrs:{id:"2-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),a("p",[a("em",[e._v("2018-06-08")])]),a("ul",[a("li",[e._v("Removida la declaración duplicada de type en Autocompletar, #11388")]),a("li",[e._v("Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427")]),a("li",[e._v("Corregido que el ícono "),a("code",[e._v("clear")]),e._v(" de Select seguia apareciendo cuando el valor inicial era "),a("code",[e._v("null")]),e._v(", #11460")]),a("li",[e._v("Arreglado que cuando el radio estaba "),a("code",[e._v("disabled")]),e._v(" mostraba el box-shadow al hacer click, #11462")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("iconClass")]),e._v(" para MessageBox, #11499")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("stretch")]),e._v(" para Tabs, #11476")]),a("li",[e._v("Arreglado el problema de orden de renderizado de TabPane cuando Tabs es "),a("code",[e._v("lazy")]),e._v(", #11461")]),a("li",[e._v("Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464")]),a("li",[e._v("Arreglado que focusing state cuando "),a("code",[e._v("before-leave")]),e._v(" devolvia una promesa resuelta, #11386")]),a("li",[e._v("Arreglado que Popover deshabilitado seguia creando poppers, #11426")]),a("li",[e._v("Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo "),a("code",[e._v("lazy")]),e._v(", #11430 (por @wangjingf)")]),a("li",[e._v("Añadido el evento "),a("code",[e._v("closed")]),e._v(" para Dialog, #11490")])]),a("h3",{attrs:{id:"2-4-0-fullerene"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),a("p",[a("em",[e._v("2018-05-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Generalidades\n"),a("ul",[a("li",[e._v("La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216")]),a("li",[e._v("Ahora puede configurar globalmente el z-index inicial de los popups, #11257")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("hide-loading")]),e._v(", #11260")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Ahora se puede usar el atributo "),a("code",[e._v("size")]),e._v(" en los botones circulares para controlar sus tamaños, #11275")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("precision")]),e._v(", #11281")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("before-leave")]),e._v(", #11259")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el método "),a("code",[e._v("sort")]),e._v(" para ordenar manualmente la tabla, #11311")])])])]),a("h4",{attrs:{id:"correccion-de-errores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#correccion-de-errores","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrección de errores")]),a("ul",[a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).")])])]),a("li",[e._v("Popover\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Arreglado el atributo "),a("code",[e._v("to")]),e._v(" que no soportaba la actualización dinámica, #11286")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método "),a("code",[e._v("beforeUpload")]),e._v(", #11297 (por @qusiba)")])])]),a("li",[e._v("Tooltip\n"),a("ul",[a("li",[e._v("Solucionado que la flecha no se posicionaba correctamente cuando el contenido estaba vacío, #11335")])])]),a("li",[e._v("Autocompletar\n"),a("ul",[a("li",[e._v("Corregido que las sugerencias de entrada eran incorrectas después de eliminar la palabra clave rápidamente, #11323")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Corregido el evento "),a("code",[e._v("active-change")]),e._v(" que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314")]),a("li",[e._v("Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348")])])]),a("li",[e._v("CheckBox\n"),a("ul",[a("li",[e._v("Arreglado que cuando el checkbox era único no soportaba validación, #11271")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Corregida la clase "),a("code",[e._v("el-popup-parent--hidden")]),e._v(" que no se eliminaba al abrir MessageBox sucesivamente, #11371")])])])]),a("h3",{attrs:{id:"2-3-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),a("p",[a("em",[e._v("2018-05-18")])]),a("ul",[a("li",[e._v("Corregido que cuando los datos de origen no tenian el campo especificado por el atributo "),a("code",[e._v("prop")]),e._v(" de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.")]),a("li",[e._v("El atributo "),a("code",[e._v("lockScroll")]),e._v(" de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.")]),a("li",[e._v("Arreglado el icono de Progreso que no se mostraba cuando su "),a("code",[e._v("status")]),e._v(" era "),a("code",[e._v("exception")]),e._v(", #11172")]),a("li",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" no funcionaba en la lista de resultados del filtro de Cascader, #11185")]),a("li",[e._v("Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.")]),a("li",[a("code",[e._v("setCurrentKey")]),e._v(" de Tree ahora acepta "),a("code",[e._v("null")]),e._v(" como parámetro para cancelar el nodo actualmente resaltado, #11205")])]),a("h3",{attrs:{id:"2-3-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),a("p",[a("em",[e._v("2018-05-11")])]),a("ul",[a("li",[e._v("Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era "),a("code",[e._v("dates")]),e._v(", #10973")]),a("li",[e._v("Arreglado que el "),a("code",[e._v("clearable Input")]),e._v(" seguía mostrando el icono de borrado cuando era sólo de lectura, #10912")]),a("li",[e._v("Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento "),a("code",[e._v("change")]),e._v(", #11017")]),a("li",[e._v("Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058")]),a("li",[e._v("Agregado el "),a("code",[e._v("slot named")]),a("code",[e._v("prefix")]),e._v(" para Select, #11063")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("clearValidate")]),e._v(" para FormItem, #11076")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("checkOnClickNode")]),e._v(" para Tree, #11111")])]),a("h3",{attrs:{id:"2-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),a("p",[a("em",[e._v("2018-04-29")])]),a("ul",[a("li",[e._v("Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834")]),a("li",[e._v("Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era "),a("code",[e._v("nulo")]),e._v(", #10912")]),a("li",[e._v("Corregido el disparador incorrecto del evento "),a("code",[e._v("active-change")]),e._v(" después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)")]),a("li",[e._v("Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945")])]),a("h3",{attrs:{id:"2-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),a("p",[a("em",[e._v("2018-04-21")])]),a("ul",[a("li",[e._v("Corregido el comportamiento incorrecto del callback "),a("code",[e._v("allow-drop")]),e._v(" de Tree cuando se usaba el parámetro "),a("code",[e._v("type")]),e._v(", #10821")]),a("li",[e._v("Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822")]),a("li",[e._v("Corregido Single Select activaba incorrectamente el evento "),a("code",[e._v("blur")]),e._v(" después de hacer clic en una opción, #10822")])]),a("h3",{attrs:{id:"2-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),a("p",[a("em",[e._v("2018-04-20")])]),a("ul",[a("li",[e._v("Arreglado los incorrectos realces en el panel de DatePicker cuando "),a("code",[e._v("type")]),e._v(" es week, #10712")]),a("li",[e._v("Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("automatic-dropdown")]),e._v(" para Select, #10042 (by @Seebiscuit)")]),a("li",[e._v("Arreglado que el valor del Rate pasaba a "),a("code",[e._v("disabled")]),e._v(" cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("type")]),e._v(" de DatePicker's puede ser "),a("code",[e._v("'dates'")]),e._v(", donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("prev-click")]),e._v(" y "),a("code",[e._v("next-click")]),e._v(" para Pagination, #10755")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("pager-count")]),e._v(" para Pagination, #10493 (by @chongjohn716)")]),a("li",[e._v("Agregado "),a("code",[e._v("type")]),e._v(" como 3rd parametro del atributo "),a("code",[e._v("allow-drop")]),e._v(" de Tree, #10792")]),a("li",[e._v("Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779")])]),a("h3",{attrs:{id:"2-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),a("p",[a("em",[e._v("2018-04-12")])]),a("ul",[a("li",[e._v("Eliminado el atributo duplicado "),a("code",[e._v("showTimeout")]),e._v(" en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)")]),a("li",[e._v("Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577")]),a("li",[e._v("Arreglado que los click de los botones "),a("code",[e._v("next")]),e._v(" y "),a("code",[e._v("prev")]),e._v(" en Pagination se deshabilitaban cuando se disparaba el evento "),a("code",[e._v("current-change")]),e._v(", #10628")]),a("li",[e._v("Arreglado que Textarea mostraba "),a("code",[e._v("undefined")]),e._v(" en SSR cuando el valor no era asignado, #10630")]),a("li",[e._v("Arreglado que se deshabilitaba el estilo del TabItem cuando "),a("code",[e._v("type")]),e._v(" era border-card, #10640")]),a("li",[e._v("Agregado "),a("code",[e._v("$index")]),e._v(" como cuarto parametro en el atributo de las columnas de Table "),a("code",[e._v("formatter")]),e._v(" , #10645")]),a("li",[e._v("Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666")])]),a("h3",{attrs:{id:"2-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),a("p",[a("em",[e._v("2018-04-04")])]),a("ul",[a("li",[e._v("Agregar atributo "),a("code",[e._v("shadow")]),e._v(" para Card, #10418 (by @YunYouJun)")]),a("li",[e._v("Se ha corregido el error de ocultar Badge cuando "),a("code",[e._v("value")]),e._v(" es "),a("code",[e._v("0")]),e._v(", #10470")]),a("li",[e._v("Arreglados algunos bugs del draggable Tree, #10474 #10494")]),a("li",[e._v("Agregado "),a("code",[e._v("placement")]),e._v(" para Autocomplete, #10475")]),a("li",[e._v("Ahora el atributo "),a("code",[e._v("default-time")]),e._v(" también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)")]),a("li",[e._v("Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(" para SubMenu, #10515")]),a("li",[e._v("Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551")]),a("li",[e._v("Se ha corregido el evento "),a("code",[e._v("change")]),e._v(" de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553")])]),a("h3",{attrs:{id:"2-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Arreglada una regresión de Autocompletar, #10442")])]),a("h3",{attrs:{id:"2-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),a("p",[a("em",[e._v("2018-03-29")])]),a("ul",[a("li",[e._v("Se ha corregido una regresión por la que el "),a("code",[e._v("type")]),e._v(" de input no se transmitia al elemento de entrada nativo, #10415")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(" para Select, #10416")])]),a("h3",{attrs:{id:"2-3-0-diamond"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),a("p",[a("em",[e._v("2018-03-28")])]),a("h4",{attrs:{id:"nuevas-caracteristicas-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nuevas-caracteristicas-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nuevas características")]),a("ul",[a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("formatter")]),e._v(" de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (by @syn-zeta)")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("collapse-transition")]),e._v(", #8809 (by @limichange)")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("select")]),e._v(" , #10229")]),a("li",[e._v("Agregado el metodo "),a("code",[e._v("blur")]),e._v(", #10356")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("predefine")]),e._v(", #10170 (by @elfman)")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("draggable")]),e._v(", "),a("code",[e._v("allow-drop")]),e._v(" y "),a("code",[e._v("allow-drag")]),e._v(", y los eventos "),a("code",[e._v("node-drag-start")]),e._v(", "),a("code",[e._v("node-drag-enter")]),e._v(", "),a("code",[e._v("node-drag-leave")]),e._v(", "),a("code",[e._v("node-drag-over")]),e._v(", "),a("code",[e._v("node-drag-end")]),e._v(" y "),a("code",[e._v("node-drop")]),e._v(", #9251 #10372 (by @elfman)")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" ahora acepta un segundo parametro, que contiene información de los ítems del formulario que no superaron la validación, #10279")]),a("li",[e._v("Agregado el evento "),a("code",[e._v("validate")]),e._v(", #10351")])])]),a("li",[e._v("Progress\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("color")]),e._v(", #10352 (by @YunYouJun)")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("circle")]),e._v(", #10359 (by @YunYouJun)")])])])]),a("h4",{attrs:{id:"bug-s-arreglados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-s-arreglados","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug's arreglados")]),a("ul",[a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot "),a("code",[e._v("title")]),e._v(" de MenuItem esté configurado, #10193 (by @PanJiaChen)")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Corregido el evento "),a("code",[e._v("current-change")]),e._v(" que se disparaba erróneamente sin interacción del usuario, #10247")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo "),a("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Solucionado el atributo "),a("code",[e._v("accept")]),e._v(" no trabajaba cuando "),a("code",[e._v("drag")]),e._v(" era true, #10278")])])])]),a("h3",{attrs:{id:"2-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),a("p",[a("em",[e._v("2018-03-14")])]),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("clear")]),e._v(" para Input, #9988 (by @blackmiaool)")]),a("li",[e._v("Ahora la entrada manual de ColorPicker soporta los modos "),a("code",[e._v("hsl")]),e._v(", "),a("code",[e._v("hsv")]),e._v(" y "),a("code",[e._v("rgb")]),e._v(", #9991")]),a("li",[e._v("Arreglado DatePicker no desencadenaba el evento "),a("code",[e._v("change")]),e._v(" cuando se borraba su valor inicial, #9986")]),a("li",[e._v("Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003")]),a("li",[e._v("Arreglado Table que con columnas "),a("code",[e._v("fixed")]),e._v(" no actualizaban correctamente su altura si se fijaba "),a("code",[e._v("max-height")]),e._v(", #10034")]),a("li",[e._v("Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(" para Pagination, #10006")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("after-enter")]),e._v(" y "),a("code",[e._v("after-leave")]),e._v(" para Popover, #10047")]),a("li",[e._v("Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar "),a("code",[e._v("resetFields")]),e._v(" de Form, #10105")]),a("li",[e._v("Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130")]),a("li",[e._v("Corregido MessageBox heredaba el atributo "),a("code",[e._v("title")]),e._v(" de su instancia anterior cuando se llamaba sin "),a("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("input-size")]),e._v(" para Slider, #10154")]),a("li",[e._v("Agregados los eventos "),a("code",[e._v("left-check-change")]),e._v(" y "),a("code",[e._v("right-check-change")]),e._v(" para Transfer, #10156")])]),a("h3",{attrs:{id:"2-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),a("p",[a("em",[e._v("2018-03-02")])]),a("ul",[a("li",[e._v("Corregido Aside, Header y Footer que se contraia en algunos layout, #9812")]),a("li",[e._v("Corregido Table con un atributo "),a("code",[e._v("height")]),e._v(" no renderizaba en SSR, #9876")]),a("li",[e._v("Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484")]),a("li",[e._v("Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento "),a("code",[e._v("change")]),e._v(", #9913")]),a("li",[e._v("Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("tooltip-class")]),e._v(" para Slider, #9957")]),a("li",[e._v("Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("target-order")]),e._v(" para Transfer, #9960")])]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),a("p",[a("em",[e._v("2018-02-12")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("popper-class")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" para SubMenu, #9604 #9771")]),a("li",[e._v("Menu Horizontal ahora soporta SubMenu multi-capas, #9741")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Agregado el evento "),a("code",[e._v("node-contextmenu")]),e._v(", #9678")]),a("li",[e._v("Ahora se puede personalizar el template del nodo usando scoped slot, #9686")]),a("li",[e._v("Agregados los metodos "),a("code",[e._v("getNode")]),e._v(", "),a("code",[e._v("remove")]),e._v(", "),a("code",[e._v("append")]),e._v(", "),a("code",[e._v("insertBefore")]),e._v(", "),a("code",[e._v("insertAfter")]),e._v(", "),a("code",[e._v("getCheckedKeys")]),e._v(", "),a("code",[e._v("getHalfCheckedNodes")]),e._v(", "),a("code",[e._v("getHalfCheckedKeys")]),e._v(" y el evento "),a("code",[e._v("check")]),e._v(", #9718 #9730")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("clearQuery")]),e._v(", #9753")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),a("h4",{attrs:{id:"bug-fixes-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[a("p",[e._v("Table")]),a("ul",[a("li",[e._v("Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento "),a("code",[e._v("row-click")]),e._v(", #9654")]),a("li",[e._v("Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668")]),a("li",[e._v("Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667")])])]),a("li",[a("p",[e._v("Container")]),a("ul",[a("li",[e._v("Corregido componentes del Container que no se estiraban en IE11, #9655")])])]),a("li",[a("p",[e._v("Loading")]),a("ul",[a("li",[e._v("Corregido Loading no se mostraba cuando el valor de "),a("code",[e._v("v-loading")]),e._v(" era cambiado a true en el "),a("code",[e._v("hook")]),a("code",[e._v("mounted")]),e._v(", #9722")])])]),a("li",[a("p",[e._v("Switch")]),a("ul",[a("li",[a("p",[e._v("Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760")]),a("p",[e._v("​")])])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),a("p",[a("em",[e._v("2018-01-31")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("Cascader\n"),a("ul",[a("li",[e._v("Agregados los eventos "),a("code",[e._v("focus")]),e._v(" y "),a("code",[e._v("blur")]),e._v(", #9184 (by @viewweiwu)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("filter-method")]),e._v(" ahora tiene un tercer parámetro "),a("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Agregados los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("clear-icon")]),e._v(", #9237 (by @AdamSGit)")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("default-time")]),e._v(", #9094 (by @nighca)")]),a("li",[a("code",[e._v("value-format")]),e._v(" ahora soporta "),a("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Ahora el valor vinculado puede ser "),a("code",[e._v("undefined")]),e._v(", #9361")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("auto-complete")]),e._v(", #9388")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Agregado el atributo "),a("code",[e._v("disabled")]),e._v(", #9529")]),a("li",[e._v("Agregado el atributo "),a("code",[e._v("validateOnRuleChange")]),e._v(", #8141")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Agregado el metodo "),a("code",[e._v("closeAll")]),e._v(", #9514")])])])]),a("h4",{attrs:{id:"bug-fixes-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("InputNumber\n"),a("ul",[a("li",[e._v("Arreglado el reseteo del valor cuando tiene punto decimal, #9116")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）")]),a("li",[e._v("Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326")]),a("li",[e._v("Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327")]),a("li",[e._v("Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462")]),a("li",[e._v("Corregido renders múltiples innecesarios en algunas condiciones, #9426")]),a("li",[e._v("Corregido un error de calculo en el ancho de la columna cuando "),a("code",[e._v("width")]),e._v(" cambiaba en TableColumn, #9426")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Corregido el metodo "),a("code",[e._v("focus")]),e._v(" que no funcionaba en modo "),a("code",[e._v("range")]),e._v(", #9437")]),a("li",[e._v('Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)')]),a("li",[e._v("Corregido fijación de fechas al navegar, #9577 (by @wacky6)")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Corregido error de estilos en IE 11, #9454")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("El menú desplegable en modo "),a("code",[e._v("collapse")]),e._v(" ahora se agrega directamente al "),a("code",[e._v("body")]),e._v(", de modo que es visible cuando está anidado en Aside, #9263")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento "),a("code",[e._v("row-click")]),e._v(", #9467")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga non-fullscreen se cambia a 2000. El "),a("code",[e._v("z-index")]),e._v(" de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522")])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[e._v("Los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" ahora solo trabajan si se dispara "),a("code",[e._v("hover")]),e._v(", #9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),a("p",[a("em",[e._v("2018-01-08")])]),a("ul",[a("li",[e._v("Corregido el problema de color del borde del Select cuando está el slot "),a("code",[e._v("prepend")]),e._v(" o "),a("code",[e._v("append")]),e._v(" del Input, #9089")]),a("li",[e._v("Corregido el parámetro "),a("code",[e._v("remove-tag")]),e._v(" de Select, #9090")]),a("li",[e._v("Añadido los atributos "),a("code",[e._v("show-timeout")]),e._v(" y "),a("code",[e._v("hide-timeout")]),e._v(" para SubMenu, #8934 (por @HugoLew)")]),a("li",[e._v("Corregido el estilo de Tooltip de "),a("code",[e._v("show-overflow-tooltip")]),e._v(" que faltaba cuando Table era importada bajo demanda, #9130")]),a("li",[e._v("Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que "),a("code",[e._v("clearSort")]),e._v(" era ejecutado en esa columna, #9100 (por @zEmily)")]),a("li",[e._v("El fichero de configuración i18n para el checo se renombra de "),a("code",[e._v("cz")]),e._v(" a "),a("code",[e._v("cs-CZ")]),e._v(", #9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),a("p",[a("em",[e._v("2017-12-29")])]),a("ul",[a("li",[e._v("Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026")]),a("li",[e._v("Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028")]),a("li",[e._v("Ahora DatePicker sólo emite el evento "),a("code",[e._v("change")]),e._v(" cuando el valor cambia verdaderamente, #9029 (by @remizovvv)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("tabindex")]),e._v(" para Input, #9041 (by @dicklwm)")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),a("p",[a("em",[e._v("2017-12-24")])]),a("ul",[a("li",[e._v("Añadida la función de enganche (hook) "),a("code",[e._v("before-remove")]),e._v(" para Upload, #8788 (by @firesh)")]),a("li",[e._v("Arreglado el valor inicial de error que no funcionaba para FormItem, #8840")]),a("li",[e._v("Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo "),a("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (por @earlymeme)")]),a("li",[e._v("Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("renderAfterExpand")]),e._v(" para Tree, #8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),a("p",[a("em",[e._v("2017-12-12")])]),a("ul",[a("li",[e._v("Agregada la documentacion en español")]),a("li",[e._v("Arreglado "),a("code",[e._v("show-timeout")]),e._v(" de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)")]),a("li",[e._v("Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776")]),a("li",[e._v("Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784")]),a("li",[a("code",[e._v("format")]),e._v(" de TimePicker ahora soporta AM/PM, #8620 (por @firesh)")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Solucionado el estilo disabled en el texto de button, #8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),a("p",[a("em",[e._v("2017-11-29")])]),a("ul",[a("li",[e._v("Corregido error de estilo de los iconos de ordenación de Table, #8405")]),a("li",[e._v("Corregido activacion para Popover cuando "),a("code",[e._v("trigger")]),e._v(" es manual, #8467")]),a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" para Autocomplete, #8446 (por @liyanlong)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator")]),e._v(" para Cascader, #8501")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("clearable")]),e._v(" para Input, #8509 (por @lbogdan)")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("background")]),e._v(" para Pagination, #8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),a("p",[a("em",[e._v("2017-11-17")])]),a("ul",[a("li",[e._v("Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283")]),a("li",[e._v("Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)")]),a("li",[e._v("Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("collapse-tags")]),e._v(" para multiple Select para reemplazar las tags con una línea de texto, #8190")]),a("li",[e._v("Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351")]),a("li",[e._v("Ahora puede usar el método "),a("code",[e._v("doLayout")]),e._v(" de Table para actualizar su diseño, #8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),a("p",[a("em",[e._v("2017-11-10")])]),a("ul",[a("li",[e._v("Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree")]),a("li",[e._v("Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042")]),a("li",[e._v("Arreglado Tree's "),a("code",[e._v("updateKeyChildren")]),e._v(" borraba incorrectamente los nodos hijos, #8100")]),a("li",[e._v("Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100")]),a("li",[e._v("Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),a("p",[a("em",[e._v("2017-11-03")])]),a("ul",[a("li",[e._v("Solucionado atributos "),a("code",[e._v("editable")]),e._v(" and "),a("code",[e._v("readonly")]),e._v(" de DatePicker de los rangos, #7922")]),a("li",[e._v("Corregido error de estilo de los Tabs anidados, #7941")]),a("li",[e._v("Corregido error de estilo del último Step de Steps verticales, #7980")]),a("li",[e._v("Corregido el tiempo de activación del evento "),a("code",[e._v("current-change")]),e._v(" para Pagination, #7995")]),a("li",[e._v("Corregido Tooltip no registrado en el Menu, #7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),a("p",[a("em",[e._v("2017-10-31")])]),a("ul",[a("li",[e._v("Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817")]),a("li",[e._v("El metodo "),a("code",[e._v("validate")]),e._v(" de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)")]),a("li",[e._v("Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838")]),a("li",[e._v("Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su "),a("code",[e._v("list-type")]),e._v(" es picture-card, #7857")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("sort-by")]),e._v(" para TableColumn, #7828 (por @wangfengming)")]),a("li",[e._v("Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)")]),a("li",[e._v("Corregido error de estilo de icono de Step vertical, #7891")]),a("li",[e._v("El área hot para las flechas de nodo en Tree se expandia, #7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),a("p",[a("em",[e._v("2017-10-28")])]),a("ul",[a("li",[e._v("Corregido error de estilo de RadioButton y CheckboxButton, #7793")]),a("li",[e._v("Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811")]),a("li",[e._v("Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),a("p",[a("em",[e._v("2017-10-27")])]),a("h4",{attrs:{id:"new-features-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Un nuevo tema: "),a("code",[e._v("theme-chalk")])]),a("li",[e._v("Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[e._v("Añadido tipografías TypeScript")]),a("li",[e._v("Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos")]),a("li",[e._v("Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones")]),a("li",[e._v("Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.")]),a("li",[e._v("Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop "),a("code",[e._v("size")]),e._v(" para configurar tamaños predeterminados para todos los componentes.")])])]),a("li",[e._v("Button\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("round")]),e._v(" añadido. Se usa para botones de esquinas redondas #6643")])])]),a("li",[e._v("TimeSelect\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6023")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Ahora puede ser navegado por "),a("code",[e._v("Up")]),e._v(" y "),a("code",[e._v("Down")]),e._v(", y presionando "),a("code",[e._v("Enter")]),e._v(" selecciona la hora #6050")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("arrow-control")]),e._v(" para hacer girar el tiempo con las flechas #7438")])])]),a("li",[e._v("Tree\n"),a("ul",[a("li",[e._v("Ahora los nodos hijo no se renderizan antes de la primera expansión #6257")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("check-descendants")]),e._v(". Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo "),a("code",[e._v("lazy")]),e._v(" #6235")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" añadido #7203")])])]),a("li",[e._v("Datepicker\n"),a("ul",[a("li",[e._v("Ahora "),a("code",[e._v("timeFormat")]),e._v(" puede dar formato al TimePicker cuando type está configurado en "),a("code",[e._v("datetimerange")]),e._v(" #6052")]),a("li",[e._v("Añadido "),a("code",[e._v("start-placeholder")]),e._v(" y "),a("code",[e._v("end-placeholder")]),e._v(". Son placeholder's para las dos casillas de input en modo range #7169")]),a("li",[e._v("Atributo "),a("code",[e._v("value-format")]),e._v(" añadido para personalizar el formato del valor enlazado, #7367")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("unlink-panels")]),e._v(" para desacoplar los dos paneles de fechas al seleccionar un rango.")])])]),a("li",[e._v("MessageBox\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7029")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("roundButton")]),e._v(" para mostrar Botones redondeados #7029")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6043")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("inputType")]),e._v(" para asignar el tipo para el input interno, #7651")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("width")]),e._v(", "),a("code",[e._v("fullscreen")]),e._v(", "),a("code",[e._v("append-to-body")]),e._v(". Ahora Dialog puede ser anidado")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #7042")]),a("li",[e._v("Añadidos "),a("code",[e._v("focus-after-closed")]),e._v(", "),a("code",[e._v("focus-after-open")]),e._v(" para mejorar la accesibilidad #6511")])])]),a("li",[e._v("ColorPicker\n"),a("ul",[a("li",[e._v("Ahora puede escribir colores en el input #6167")]),a("li",[e._v("Añadidos atributos "),a("code",[e._v("size")]),e._v(" y "),a("code",[e._v("disabled")]),e._v(" #7026")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("popper-class")]),e._v(" #7351")])])]),a("li",[e._v("Message\n"),a("ul",[a("li",[e._v("Ahora el color de los iconos puede ser sustituido por CSS #6207")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6207")]),a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6875")])])]),a("li",[e._v("Notification\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("position")]),e._v(" para configurar donde aparece Notification #6231")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" . Cuando está configurado en true, el mensaje será analizado como cadena HTML"),a("sup",[e._v("*")]),e._v(" #6231")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("showClose")]),e._v(" para ocultar el botón de cierre #6402")])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("show-score")]),e._v(" para determinar si la puntuación actual se muestra #6295")])])]),a("li",[e._v("Tabs\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("tab-position")]),e._v(" #6096")])])]),a("li",[e._v("Radio\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v(" #6690")])])]),a("li",[e._v("Checkbox\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("border")]),e._v(" y "),a("code",[e._v("size")]),e._v(" #6690")])])]),a("li",[e._v("Alert\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" agregado para que el contenido pueda ser centrado #6876")])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" #7064")]),a("li",[e._v("Añadidos los methods "),a("code",[e._v("open")]),e._v(" and "),a("code",[e._v("close")]),e._v(" para abrir y cerrar los SubMenu con programación, #7412")])])]),a("li",[e._v("Form\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("inline-message")]),e._v(" para determinar si el mensaje de validación se muestra inline #7032")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("status-icon")]),e._v(" para mostrar un icono de retroalimentación cuando se valida #7032")]),a("li",[e._v("Form y FormItem ahora tienen un atributo "),a("code",[e._v("size")]),e._v(". Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428")]),a("li",[e._v("Método "),a("code",[e._v("validate")]),e._v(" devolverá ahora una promesa si se omite la llamada de retorno, #7405")]),a("li",[e._v("Añadido método "),a("code",[e._v("clearValidate")]),e._v(" para limpiar los resultados de las validaciones de todos los form items, #7623")])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Añadido slots con nombres "),a("code",[e._v("suffix")]),e._v(" y "),a("code",[e._v("prefix")]),e._v(" y atributos "),a("code",[e._v("suffixIcon")]),e._v(" y "),a("code",[e._v("prefixIcon")]),e._v(" para añadir contenido dentro del input #7032")])])]),a("li",[e._v("Breadcrumb\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("separator-class")]),e._v(" para dar soporte a los iconos como separadores de items #7203")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("simple")]),e._v(" para activar Steps de estilo sencillo #7274")])])]),a("li",[e._v("Pagination\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("prev-text")]),e._v(" y "),a("code",[e._v("next-text")]),e._v(" para personalizar los textos de la página anterior y de la página siguiente #7005")])])]),a("li",[e._v("Loading\n"),a("ul",[a("li",[e._v("Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props "),a("code",[e._v("spinner")]),e._v(" y "),a("code",[e._v("background")]),e._v(" , #7390")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Añadido atributo "),a("code",[e._v("debounce")]),e._v(", #7413")])])]),a("li",[e._v("Upload\n"),a("ul",[a("li",[e._v("Añadidos los atributos "),a("code",[e._v("limit")]),e._v(" and "),a("code",[e._v("on-exceed")]),e._v(" para limitar la cantidad de archivos, #7405")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("time-arrow-control")]),e._v(" para activar "),a("code",[e._v("arrow-control")]),e._v(" del TimePicker anidado, #7438")])])]),a("li",[e._v("Layout\n"),a("ul",[a("li",[e._v("Añadido un nuevo breakpoint "),a("code",[e._v("xl")]),e._v(" para viewport más ancho que 1920px")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("span-method")]),e._v(" para combinar celdas")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearSort")]),e._v(" para borrar la clasificación programáticamente")]),a("li",[e._v("Añadido el método "),a("code",[e._v("clearFilter")]),e._v(" para limpiar el filtro de forma programática")]),a("li",[e._v("Para las filas ampliables, cuando se amplía una fila, se añadirá una clase "),a("code",[e._v(".expanded")]),e._v(" a su lista de clases, para que pueda personalizar su estilo.")]),a("li",[e._v("Atributo de "),a("code",[e._v("size")]),e._v(" añadido")]),a("li",[e._v("Añadido el método "),a("code",[e._v("toggleRowExpansion")]),e._v(" para expandir o contraer filas expandibles programáticamente.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("cell-style")]),e._v(" para dar estilo a las celdas")]),a("li",[e._v("Añadido atributo "),a("code",[e._v("header-row-class-name")]),e._v(" para asignar el nombre de clase para las filas de encabezado.")]),a("li",[e._v("Añadido un atributo "),a("code",[e._v("header-row-style")]),e._v(" para el estilo de encabezado")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-class-name")]),e._v(" para asignar el nombre de la clase para las celdas de encabezado.")]),a("li",[e._v("Añadido el atributo "),a("code",[e._v("header-cell-style")]),e._v(" a las celdas de encabezado de estilo")]),a("li",[e._v("El atributo prop de TableColumn ahora acepta las notaciones "),a("code",[e._v("object[key]")])]),a("li",[e._v("Atributo de "),a("code",[e._v("index")]),e._v(" añadido para TableColumn para personalizar índices de filas")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Añadido el atributo "),a("code",[e._v("reserve-keyword")]),e._v(" para reservar la palabra clave de búsqueda actual después de seleccionar una opción.")])])])]),a("h4",{attrs:{id:"bug-fixes-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),a("ul",[a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Arreglado "),a("code",[e._v("v-model")]),e._v(" que devolvia el segundo día de la semana seleccionada en modo week #6038")]),a("li",[e._v("Arreglado el primer input comenzaba borrado con el type "),a("code",[e._v("daterange")]),e._v(" #6021")])])]),a("li",[e._v("DateTimePicker\n"),a("ul",[a("li",[e._v("Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090")]),a("li",[e._v("Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076")])])]),a("li",[e._v("TimePicker\n"),a("ul",[a("li",[e._v("Arreglado "),a("code",[e._v("v-model")]),e._v(" que no se actualizaba correctamente cuando no tenia el foco #6023")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088")])])]),a("li",[e._v("Select\n"),a("ul",[a("li",[e._v("Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151")])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo "),a("code",[e._v("display: none")])]),a("li",[e._v("Arreglado Table ahora amplia su ancho cuando el elemento padre tiene "),a("code",[e._v("display: flex")])]),a("li",[e._v("Arreglado un bug que corregía las columnas de una tabla con slot con nombre "),a("code",[e._v("append")]),e._v(" que desaparecia cuando los datos eran recuperados dinámicamente.")]),a("li",[e._v("Arreglado el atributo "),a("code",[e._v("expand-row-keys")]),e._v(" que no funcionan con el valor inicial")]),a("li",[e._v("Fallo del filtro corregido al actualizar los datos")]),a("li",[e._v("Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.")]),a("li",[e._v("Corregido un error de "),a("code",[e._v("max-height")]),e._v(" dinámico")]),a("li",[e._v("Corregidos algunos errores de cálculo de estilo")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),a("ul",[a("li",[e._v("General\n"),a("ul",[a("li",[e._v("Eliminado "),a("code",[e._v("theme-default")])]),a("li",[e._v("Compatible con Vue 2.5.2+ e IE 10+")]),a("li",[e._v("Evento "),a("code",[e._v("change")]),e._v(" de componentes del formulario y evento "),a("code",[e._v("current-change")]),e._v(" de Pagination ahora sólo se activa en la interacción del usuario.")]),a("li",[e._v("El atributo "),a("code",[e._v("size")]),e._v(" del botón y los componentes del formulario aceptan ahora los tamaños "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")]),a("li",[e._v("Para facilitar el uso de iconos de terceros, los atributos "),a("code",[e._v("icon")]),e._v(" de Button y Steps y los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" del input ahora requieren un nombre de clase completo.")])])]),a("li",[e._v("Dialog\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("size")]),e._v(" eliminado. Ahora el tamaño de Dialog se puede configurar con "),a("code",[e._v("width")]),e._v(" y "),a("code",[e._v("fullscreen")])]),a("li",[e._v("Ahora la visibilidad del Diálogo no puede ser controlada por "),a("code",[e._v("v-model")])])])]),a("li",[e._v("Rate\n"),a("ul",[a("li",[a("code",[e._v("text-template")]),e._v(" a sido renombrado a "),a("code",[e._v("score-template")])])])]),a("li",[e._v("Dropdown\n"),a("ul",[a("li",[a("code",[e._v("menu-align")]),e._v(" a sido renombrado a "),a("code",[e._v("placement")]),e._v(". Ahora soporta más posiciones")])])]),a("li",[e._v("Transfer\n"),a("ul",[a("li",[a("code",[e._v("footer-format")]),e._v(" a sido renombrado a "),a("code",[e._v("format")])])])]),a("li",[e._v("Switch\n"),a("ul",[a("li",[e._v("Los atributos que comienzan con "),a("code",[e._v("on*")]),e._v(" serán analizados en eventos en JSX, haciendo que todos los atributos "),a("code",[e._v("on*")]),e._v(" de Switch no puedan trabajar en JSX. Por lo tanto, los atributos "),a("code",[e._v("on*")]),e._v(" se renombran a "),a("code",[e._v("active-*")]),e._v(", y por consiguiente los atributos "),a("code",[e._v("off-*")]),e._v(" se renombran a "),a("code",[e._v("inactivado-*")]),e._v(". Este cambio afecta a los siguientes atributos: "),a("code",[e._v("on-icon-class")]),e._v(", "),a("code",[e._v("off-icon-class")]),e._v(", "),a("code",[e._v("on-text")]),e._v(", "),a("code",[e._v("off-text")]),e._v(", "),a("code",[e._v("on-color")]),e._v(", "),a("code",[e._v("off-color")]),e._v(", "),a("code",[e._v("on-value")]),e._v(", "),a("code",[e._v("off-value")]),e._v(".")]),a("li",[e._v("Los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v(" ahora no tienen valores por defecto.")])])]),a("li",[e._v("Tag\n"),a("ul",[a("li",[e._v("El atributo type acepta ahora "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(" y "),a("code",[e._v("danger")])])])]),a("li",[e._v("Menu\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("theme")]),e._v(" eliminado. El color de Menu se puede configurar utilizando "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")])])])]),a("li",[e._v("Input\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("icon")]),e._v(" eliminado. Ahora el icono del sufijo puede configurarse usando el atributo "),a("code",[e._v("suffix-icon")]),e._v(" o el slot con nombre "),a("code",[e._v("suffix")]),e._v(".")]),a("li",[e._v("Eliminado el atributo "),a("code",[e._v("on-icon-click")]),e._v(" y el evento "),a("code",[e._v("click")]),e._v(". Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.")]),a("li",[e._v("El evento "),a("code",[e._v("change")]),e._v(" se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento "),a("code",[e._v("input")]),e._v(".")])])]),a("li",[e._v("Autocomplete\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("custom-item")]),e._v(" eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando "),a("code",[e._v("scoped slot")])]),a("li",[e._v("Atributo "),a("code",[e._v("props")]),e._v(" eliminado. Ahora puede utilizar el atributo "),a("code",[e._v("value-key")]),e._v(" para designar el nombre de la clave del objeto de sugerencia del input para su visualización.")])])]),a("li",[e._v("Steps\n"),a("ul",[a("li",[e._v("Atributo "),a("code",[e._v("center")]),e._v(" eliminado")]),a("li",[e._v("Ahora Steps llenara su contenedor padre por defecto")])])]),a("li",[e._v("DatePicker\n"),a("ul",[a("li",[e._v("Los parámetros del evento "),a("code",[e._v("change")]),e._v(" de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por "),a("code",[e._v("value-format")])])])]),a("li",[e._v("Table\n"),a("ul",[a("li",[e._v("Soporte eliminado para personalizar la plantilla de columnas mediante "),a("code",[e._v("inline-template")])]),a("li",[a("code",[e._v("sort-method")]),e._v(" ahora se alinea con "),a("code",[e._v("Array.sort")]),e._v(". Debería devolver un número en lugar de un booleano")]),a("li",[e._v("El slot "),a("code",[e._v("append")]),e._v(" se desplazo fuera del elemento "),a("code",[e._v("tbody")]),e._v(" para evitar múltiples renderizados.")]),a("li",[e._v("Evento "),a("code",[e._v("expand")]),e._v(" se renombro a "),a("code",[e._v("expand-change")])]),a("li",[e._v("Los parametros de los métodos "),a("code",[e._v("row-class-name")]),e._v(" y "),a("code",[e._v("row-style")]),e._v(" son ahora un objeto")])])])]),a("h1"),a("p",[a("i",[a("sup",[e._v("*")]),e._v(" El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está encendido, por favor asegúrese de que el contenido de "),a("code",[e._v("message")]),e._v(" es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne el "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")]),e._v("``")])])}],!1,null,null,null);o.options.__file="CHANGELOG.es.md";var l={components:{ChangeLog:o.exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),o='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,r=2;r<l;r++){var i=t[r];(a=t[r].querySelector("a"))&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==i.tagName?o+=t[r].outerHTML:o+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(n=t[r].textContent.trim())+'" target="_blank">'+n+"</a></h3>"}o=(o=o.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=o+"</li>",e.$el.remove()}},r=(a(289),Object(n.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n Lista de cambios\n ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));r.options.__file="changelog.vue";t.default=r.exports},307:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}}),t._v(" "),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{startTime:"",endTime:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}}),t._v(" "),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use el Time Picker para input de tipo time.")]),e._m(1),a("p",[e._v("Provee una lista de tiempo fijo para que los usuarios escogan.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("el-time-select")]),e._v(", se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(" y "),a("code",[e._v("step")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n v-model=\"value1\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"\n placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Un tiempo arbitrario puede ser escogido.")]),a("demo-block",[a("div",[a("p",[e._v("Al usar el tag "),a("code",[e._v("el-time-picker")]),e._v(", es posible limitar el rango de tiempo al especificar "),a("code",[e._v("selectableRange")]),e._v(". Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo "),a("code",[e._v("arrow-control")]),e._v(" esté establecido.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-time-picker\n v-model="value2"\n :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }"\n placeholder="Arbitrary time">\n </el-time-picker>\n <el-time-picker\n arrow-control\n v-model="value3"\n :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }"\n placeholder="Arbitrary time">\n </el-time-picker>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-time-select\n placeholder=\"Start time\"\n v-model=\"startTime\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select\n placeholder=\"End time\"\n v-model=\"endTime\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Es posible escoger un rango de tiempo arbitrario.")]),a("demo-block",[a("div",[a("p",[e._v("Es posible seleccionar un rango de tiempo al añadir el atributo "),a("code",[e._v("is-range")]),e._v(". También, "),a("code",[e._v("arrow-control")]),e._v(" es soportado en modo de rango.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-time-picker\n is-range\n v-model="value4"\n range-separator="To"\n start-placeholder="Start time"\n end-placeholder="End time">\n </el-time-picker>\n <el-time-picker\n is-range\n arrow-control\n v-model="value5"\n range-separator="To"\n start-placeholder="Start time"\n end-placeholder="End time">\n </el-time-picker>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"selector-de-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de Tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selector de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo fijo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de tiempo arbitrario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(TimePicker) / string(TimeSelect)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si el Time Picker está en modo de sólo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Time Picker se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input puede ser editado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si mostrar el botón de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder en un modo fuera de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el tiempo de inicio en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el tiempo de finalización en modo de rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-range")]),a("td",[e._v("si es posible escoger un rango de tiempo, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("arrow-control")]),a("td",[e._v("si es posible escoger el tiempo usando los botones de flecha, solo funciona con "),a("code",[e._v("<el-time-picker>")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left / center / right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown del Time Picker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, revisar la tabla posterior")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha por defecto del calendario")]),a("td",[e._v("Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("como "),a("code",[e._v("name")]),e._v(" en input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono de prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-time")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("start")]),a("td",[e._v("tiempo de inicio")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("09:00")])]),a("tr",[a("td",[e._v("end")]),a("td",[e._v("tiempo de finalización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("18:00")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("salto de tiempo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:30")])]),a("tr",[a("td",[e._v("minTime")]),a("td",[e._v("tiempo mínimo, cualquier tiempo antes de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("00:00")])]),a("tr",[a("td",[e._v("maxTime")]),a("td",[e._v("tiempo máximo, cualquier tiempo después de éste será deshabilitado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-para-time-picker-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones para Time Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("selectableRange")]),a("td",[e._v("rango de tiempo disponible p.ej. "),a("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("ó"),a("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[e._v("string / array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato para el selector")]),a("td",[e._v("string")]),a("td",[e._v("hour "),a("code",[e._v("HH")]),e._v(", minute "),a("code",[e._v("mm")]),e._v(", second "),a("code",[e._v("ss")])]),a("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanza cuando el usuario confirma el valor")]),a("td",[e._v("valor vinculado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se lanza cuando el input se difumina")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se lanza cuando el input se enfoca")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="time-picker.md";t.default=r.exports},310:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{visible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),a("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),a("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{visible2:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(e){t.visible2=e},expression:"visible2"}},[a("p",[t._v("Are you sure to delete this?")]),t._v(" "),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible2=!1}}},[t._v("cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible2=!1}}},[t._v("confirm")])],1),t._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("trigger")]),e._v(" es usado para definir como el popover se dispara: "),a("code",[e._v("hover")]),e._v(", "),a("code",[e._v("click")]),e._v(", "),a("code",[e._v("focus")]),e._v(" o "),a("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),a("code",[e._v('slot="reference"')]),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Named-Slots"}},[e._v("named slot")]),e._v(", or use the "),a("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),a("code",[e._v("ref")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-popover\n placement="top-start"\n title="Title"\n width="200"\n trigger="hover"\n content="this is content, this is content, this is content">\n <el-button slot="reference">Hover to activate</el-button>\n </el-popover>\n\n <el-popover\n placement="bottom"\n title="Title"\n width="200"\n trigger="click"\n content="this is content, this is content, this is content">\n <el-button slot="reference">Click to activate</el-button>\n </el-popover>\n\n <el-popover\n ref="popover"\n placement="right"\n title="Title"\n width="200"\n trigger="focus"\n content="this is content, this is content, this is content">\n </el-popover>\n <el-button v-popover:popover>Focus to activate</el-button>\n\n <el-popover\n placement="bottom"\n title="Title"\n width="200"\n trigger="manual"\n content="this is content, this is content, this is content"\n v-model="visible">\n <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n </el-popover>\n</template>\n\n<script>\n export default {\n data() {\n return {\n visible: false\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.")]),a("demo-block",[a("div",[a("p",[e._v("Reemplaza el atributo "),a("code",[e._v("content")]),e._v(" con un "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n placement="right"\n width="400"\n trigger="click">\n <el-table :data="gridData">\n <el-table-column width="150" property="date" label="date"></el-table-column>\n <el-table-column width="100" property="name" label="name"></el-table-column>\n <el-table-column width="300" property="address" label="address"></el-table-column>\n </el-table>\n <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n export default {\n data() {\n return {\n gridData: [{\n date: \'2016-05-02\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-04\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-01\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-03\',\n name: \'Jack\',\n address: \'New York City\'\n }]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n placement="top"\n width="160"\n v-model="visible2">\n <p>Are you sure to delete this?</p>\n <div style="text-align: right; margin: 0">\n <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n </div>\n <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Similar a un Tooltip, Popover está construido con "),a("code",[e._v("Vue-popper")]),e._v(". Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Información anidada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operacion-anidada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Operación anidada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un "),a("code",[e._v("dialog")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo se dispara el popover")]),a("td",[e._v("string")]),a("td",[e._v("click/focus/hover/manual")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido del popover, puede ser sustituido por un "),a("code",[e._v("slot")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del popover")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("Min width 150px")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del popover en la pantalla")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el popover está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("si el popover está visible")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("popover offset")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("popover transition animation")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros para "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("object")]),a("td",[e._v("por favor, refiérase a "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para popover")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la aparición cuando "),a("code",[e._v("trigger")]),e._v(" es hover, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("texto contenido en popover")])]),a("tr",[a("td",[e._v("reference")]),a("td",[e._v("elemento HTML que dispara el popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("show")]),a("td",[e._v("se dispara cuando se muestra el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-enter")]),a("td",[e._v("se dispara cuando la transicion de entrada termina")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide")]),a("td",[e._v("se dispara cuando se oculta el popover")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("after-leave")]),a("td",[e._v("se dispara cuando la transicion de salida termina")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="popover.md";t.default=r.exports},317:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]}),"element-demo3":n({},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),a("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si tiene que mostrar muchos datos en una página, utilice la paginación.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Asigne en el atributo "),a("code",[e._v("layout")]),e._v(" los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: "),a("code",[e._v("prev")]),e._v(" (un botón para navegar a la página anterior), "),a("code",[e._v("next")]),e._v(" (un botón para navegar a la siguiente página), "),a("code",[e._v("pager")]),e._v(" (lista de página), "),a("code",[e._v("jumper")]),e._v(" (un "),a("code",[e._v("input")]),e._v(" para saltar a una página determinada), "),a("code",[e._v("total")]),e._v(" (total de elementos), "),a("code",[e._v("size")]),e._v(" (un "),a("code",[e._v("select")]),e._v(" para seleccionar el tamaño de la página ) y "),a("code",[e._v("->")]),e._v("(todo elemento situado luego de este símbolo será movido a la derecha).")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">When you have few pages</span>\n <el-pagination\n layout="prev, pager, next"\n :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">When you have more than 7 pages</span>\n <el-pagination\n layout="prev, pager, next"\n :total="1000">\n </el-pagination>\n</div>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),a("code",[e._v("pager-count")]),e._v(" attribute.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n :page-size="20"\n :pager-count="11"\n layout="prev, pager, next"\n :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),a("p",[e._v("Usa una paginación pequeña en caso de espacio limitado.")]),a("demo-block",[a("div",[a("p",[e._v("Solo ponga el atributo "),a("code",[e._v("small")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y la Paginación se volverá pequeña.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n small\n layout="prev, pager, next"\n :total="50">\n</el-pagination>\n')])])])],2),e._m(4),a("p",[e._v("Agrega más modulos basados en su escenario.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo es un completo caso de uso. Utiliza los eventos "),a("code",[e._v("size-change")]),e._v(" y "),a("code",[e._v("current-change")]),e._v(" para manejar el tamaño de página y el cambio de página. El atributo "),a("code",[e._v("page-sizes")]),e._v(" acepta un arreglo de enteros, cada uno representa un diferente valor del atributo "),a("code",[e._v("sizes")]),e._v(" que es un "),a("code",[e._v("select")]),e._v(", ejemplo "),a("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicará que el "),a("code",[e._v("select")]),e._v(" tendrá las opciones: 100, 200, 300 o 400 elementos por página.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Total item count</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage1"\n :page-size="100"\n layout="total, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Change page size</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage2"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="sizes, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Jump to</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage3"\n :page-size="100"\n layout="prev, pager, next, jumper"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">All combined</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage4"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="total, sizes, prev, pager, next, jumper"\n :total="400">\n </el-pagination>\n </div>\n</template>\n<script>\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"paginacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"paginacion-pequena"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena","aria-hidden":"true"}},[this._v("¶")]),this._v(" Paginación pequeña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("small")]),a("td",[e._v("usar paginación pequeña")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("page-size")]),a("td",[e._v("cantidad de elementos por página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("10")])]),a("tr",[a("td",[e._v("total")]),a("td",[e._v("total de elementos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("page-count")]),a("td",[e._v("total de páginas. Asigna "),a("code",[e._v("total")]),e._v(" o "),a("code",[e._v("page-count")]),e._v(" y las páginas serán mostradas; si necesitas "),a("code",[e._v("page-sizes")]),e._v(", "),a("code",[e._v("total")]),e._v(" es "),a("strong",[e._v("requerido")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("pager-count")]),a("td",[e._v("número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor.")]),a("td",[e._v("number")]),a("td",[e._v("odd number between 5 and 21")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("current-page")]),a("td",[e._v("número actual de la página, soporta el modificador .sync")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("layout")]),a("td",[e._v("layout de la paginación, elementos separados por coma")]),a("td",[e._v("string")]),a("td",[a("code",[e._v("sizes")]),e._v(", "),a("code",[e._v("prev")]),e._v(", "),a("code",[e._v("pager")]),e._v(", "),a("code",[e._v("next")]),e._v(", "),a("code",[e._v("jumper")]),e._v(", "),a("code",[e._v("->")]),e._v(", "),a("code",[e._v("total")]),e._v(", "),a("code",[e._v("slot")])]),a("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[e._v("page-sizes")]),a("td",[e._v("opciones para la cantidad de elementos por página")]),a("td",[e._v("number[]")]),a("td",[e._v("—")]),a("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("clase propia para el "),a("code",[e._v("dropdown")]),e._v(" del "),a("code",[e._v("select")]),e._v(" del número de páginas")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prev-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("prev")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next-text")]),a("td",[e._v("texto para el botón "),a("code",[e._v("next")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Pagination esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("size-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("page-size")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("page-size")])])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando "),a("code",[e._v("current-page")]),e._v(" cambia")]),a("td",[e._v("nuevo valor de "),a("code",[e._v("current-page")])])]),a("tr",[a("td",[e._v("prev-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("prev")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])]),a("tr",[a("td",[e._v("next-click")]),a("td",[e._v("Se dispara cuando el boton "),a("code",[e._v("next")]),e._v(" recibe el click y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Elemento propio. Para utilizar esto necesitas declarar "),a("code",[e._v("slot")]),e._v(" en el "),a("code",[e._v("layout")])])])])])}],!1,null,null,null);r.options.__file="pagination.md";t.default=r.exports},318:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open}},[e._v("\n Closes automatically\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n Won't close automatically\n ")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n Success\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n Warning\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open5}},[e._v("\n Info\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open6}},[e._v("\n Error\n ")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open7}},[e._v("\n Top Right\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open8}},[e._v("\n Bottom Right\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open9}},[e._v("\n Bottom Left\n ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open10}},[e._v("\n Top Left\n ")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open11}},[this._v("\n Notification with offset\n ")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open12}},[this._v("\n Use HTML String\n ")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open13}},[this._v("\n Hide close button\n ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un mensaje de notificación global en una esquina de la página.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Element ha registrado el método"),a("code",[e._v("$notify")]),e._v(" y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de "),a("code",[e._v("title")]),e._v(" y el campo de "),a("code",[e._v("message")]),e._v(" para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando "),a("code",[e._v("duration")]),e._v(" se puede controlar su duración. Específicamente, si está configurado en "),a("code",[e._v("0")]),e._v(", no se cerrará automáticamente. Tenga en cuenta que "),a("code",[e._v("duration")]),e._v(" recibe un "),a("code",[e._v("Number")]),e._v(" en milisegundos.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open\">\n Closes automatically\n </el-button>\n <el-button\n plain\n @click=\"open2\">\n Won't close automatically\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Proporcionamos cuatro tipos: success, warning, info y error.")]),a("demo-block",[a("div",[a("p",[e._v("Element proporciona cuatro tipos de notificación: "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("error")]),e._v(". Se definen por el campo "),a("code",[e._v("type")]),e._v(" y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo "),a("code",[e._v("open5")]),e._v(" y "),a("code",[e._v("open6")]),e._v(" sin pasar un campo "),a("code",[e._v("type")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open3\">\n Success\n </el-button>\n <el-button\n plain\n @click=\"open4\">\n Warning\n </el-button>\n <el-button\n plain\n @click=\"open5\">\n Info\n </el-button>\n <el-button\n plain\n @click=\"open6\">\n Error\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("La notificación puede surgir de cualquier rincón que uno desee.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("position")]),e._v(" define desde qué esquina se desliza la notificación. Puede ser "),a("code",[e._v("top-right")]),e._v(", "),a("code",[e._v("top-left")]),e._v(", "),a("code",[e._v("bottom-right")]),e._v(" o "),a("code",[e._v("bottom-left")]),e._v(". Predeterminado: "),a("code",[e._v("top-right")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open7\">\n Top Right\n </el-button>\n <el-button\n plain\n @click=\"open8\">\n Bottom Right\n </el-button>\n <el-button\n plain\n @click=\"open9\">\n Bottom Left\n </el-button>\n <el-button\n plain\n @click=\"open10\">\n Top Left\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open7() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open8() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Personalizar el desplazamiento de notificación desde el borde de la pantalla.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("offset")]),e._v(" para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open11\">\n Notification with offset\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open11() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" se tratará como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open12\">\n Use HTML String\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: '<strong>This is <i>HTML</i> string</strong>'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),e._m(8),a("p",[e._v("Es posible ocultar el botón de cerrar")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("showClose")]),e._v(" como "),a("code",[e._v("false")]),e._v(" para que el usuario no pueda cerrar la notificación.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open13\">\n Hide close button\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-notificaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de notificaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posicion personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplazamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplazamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usando-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usando cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("ataques XSS")]),e._v(". Por lo tanto, cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" está a true, por favor asegúrese de que el contenido del mensaje es confiable, y "),a("strong",[e._v("nunca")]),e._v(" asigne "),a("code",[e._v("message")]),e._v(" al contenido proporcionado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultar boton de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodo-global"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodo global")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha añadido un método global "),a("code",[e._v("$notify")]),e._v(" para Vue.prototype. Así que en una instancia de vue se puede llamar "),a("code",[e._v("Notification")]),e._v(" como lo hacemos en esta página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importar-localmente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importar localmente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Importar "),a("code",[e._v("Notification")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso, debe llamar a "),a("code",[e._v("Notification(options)")]),e._v(". También se han registrado métodos para diferentes tipos, e.j. "),a("code",[e._v("Notification.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Notification.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("mensaje")]),a("td",[e._v("string/Vue.VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("si "),a("code",[e._v("message")]),e._v(" es tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de notificacion")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada de icono. Será anulado por "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para la notificacion")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4500")])]),a("tr",[a("td",[e._v("position")]),a("td",[e._v("posicion personalizada")]),a("td",[e._v("string")]),a("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[e._v("top-right")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("si se muestra el boton de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion que se ejecuta cuando la notificación se cierra")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("funcion que se ejecuta cuando se hace click en la notificación")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Notification")]),e._v(" y "),a("code",[e._v("this.$notify")]),e._v(" devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar "),a("code",[e._v("close")]),e._v(" para ello.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra la notificación")])])])])}],!1,null,null,null);r.options.__file="notification.md";t.default=r.exports},319:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("Show message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.openVn}},[e._v("VNode")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:!0},on:{click:e.open5}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open6}},[e._v("success")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open7}},[e._v("warning")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open8}},[e._v("error")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.")]),e._m(1),a("p",[e._v("Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.")]),a("demo-block",[a("div",[a("p",[e._v("La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo "),a("code",[e._v("$message")]),e._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n \n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de "),a("code",[e._v("type")]),e._v(" puede definir diferentes tipos, el predeterminado es "),a("code",[e._v("info")]),e._v(". En tales casos el cuerpo principal se pasa como el valor de "),a("code",[e._v("message")]),e._v(". Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como "),a("code",[e._v("open4")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="open2">success</el-button>\n <el-button :plain="true" @click="open3">warning</el-button>\n <el-button :plain="true" @click="open">message</el-button>\n <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$message(\'This is a message.\');\n },\n open2() {\n this.$message({\n message: \'Congrats, this is a success message.\',\n type: \'success\'\n });\n },\n\n open3() {\n this.$message({\n message: \'Warning, this is a warning message.\',\n type: \'warning\'\n });\n },\n\n open4() {\n this.$message.error(\'Oops, this is a error message.\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Un boton para cerrar que puede ser agregado.")]),a("demo-block",[a("div",[a("p",[e._v("Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo "),a("code",[e._v("showClose")]),e._v(". Ademas, al igual que las notificaciones, message tiene un atriubuto "),a("code",[e._v("duration")]),e._v(" que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="open5">message</el-button>\n <el-button :plain="true" @click="open6">success</el-button>\n <el-button :plain="true" @click="open7">warning</el-button>\n <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: \'This is a message.\'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: \'Congrats, this is a success message.\',\n type: \'success\'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: \'Warning, this is a warning message.\',\n type: \'warning\'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: \'Oops, this is a error message.\',\n type: \'error\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: \'Centered text\',\n center: true\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Establece la propiedad "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" en true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: \'<strong>This is <i>HTML</i> string</strong>\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utiliza el atributo "),a("code",[e._v("center")]),e._v(" para centrar el texto.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element ha agregado un método global llamado "),a("code",[e._v("$message")]),e._v(" para Vue.prototype. Entonces en una instancia de vue puede llamar a "),a("code",[e._v("Message")]),e._v(" como lo hicimos en esta pagina.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Import "),a("code",[e._v("Message")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso deberia llamar al metodo "),a("code",[e._v("Message(options)")]),e._v(". Tambien se han registrado metodos para los diferentes tipos, e.g. "),a("code",[e._v("Message.success(options)")]),e._v(". Puede llamar al metodo "),a("code",[e._v("Message.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("message")]),a("td",[e._v("texto del mensaje")]),a("td",[e._v("string / VNode")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del mensaje")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizado para el componente Message")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("showClose")]),a("td",[e._v("utilizado para mostrar un boton para cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para centrar el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("onClose")]),a("td",[e._v("funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Message")]),e._v(" y "),a("code",[e._v("this.$message")]),e._v(" regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo "),a("code",[e._v("close")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra el componente Message")])])])])}],!1,null,null,null);r.options.__file="message.md";t.default=r.exports},345:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{open2:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open2}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{methods:{open3:function(){var a=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;a.$message({type:"success",message:"Your email is:"+t})}).catch(function(){a.$message({type:"info",message:"Input canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open3}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{open4:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,a){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open4}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo4":n({},{methods:{open5:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open5}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{open6:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open6}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]}),"element-demo6":n({},{methods:{open7:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open7}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso.")]),e._m(1),e._m(2),a("p",[e._v("Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.")]),a("demo-block",[a("div",[a("p",[e._v("Desplegar una alerta utilizando el metodo "),a("code",[e._v("$alert")]),e._v(". Simula el sistema "),a("code",[e._v("alert")]),e._v(", y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos "),a("code",[e._v("message")]),e._v(" y "),a("code",[e._v("title")]),e._v(". Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto "),a("code",[e._v("Promise")]),e._v(" para su procesamiento posteriormente. Si no estas seguro si el navegador soporta "),a("code",[e._v("Promise")]),e._v(", deberias importar una libreria de terceros de polyfill o utilizar callbacks.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Confirm es utilizado para preguntar al usuario y recibir una confirmacion.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$confirm")]),e._v(" para abrir el componente confirm, y simula el sistema "),a("code",[e._v("confirm")]),e._v(". Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado "),a("code",[e._v("options")]),e._v(" que es literalmente un objeto. El atributo "),a("code",[e._v("type")]),e._v(" indica el tipo de mensaje, y su valor puede ser "),a("code",[e._v("success")]),e._v(", "),a("code",[e._v("error")]),e._v(", "),a("code",[e._v("info")]),e._v(" y "),a("code",[e._v("warning")]),e._v(". Se debe tener en cuenta que el segundo atributo "),a("code",[e._v("title")]),e._v(" debe ser de tipo "),a("code",[e._v("string")]),e._v(", y si es de tipo "),a("code",[e._v("object")]),e._v(", sera manejado como el atributo "),a("code",[e._v("options")]),e._v(". Aqui utilizamos "),a("code",[e._v("Promise")]),e._v(" para manejar posteriormente el proceso.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open2\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Prompt es utilizado cuando se requiere entrada de informacion del usuario.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al metodo "),a("code",[e._v("$prompt")]),e._v(" desplegamos el componente prompt, y simula el sistema "),a("code",[e._v("prompt")]),e._v(".Puedes utilizar el parametro "),a("code",[e._v("inputPattern")]),e._v(" para especificar tu propio patron RegExp. Utiliza el parametro "),a("code",[e._v("inputValidator")]),e._v(" para especificar el metodo de validacion, y debería regresar un valor de tipo "),a("code",[e._v("Boolean")]),e._v(" o "),a("code",[e._v("String")]),e._v(". Al regresar "),a("code",[e._v("false")]),e._v(" o "),a("code",[e._v("String")]),e._v(" significa que la validacion a fallado, y la cadena regresada se usara como "),a("code",[e._v("inputErrorMessage")]),e._v(". Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro "),a("code",[e._v("inputPlaceholder")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open3\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(({ value }) => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Puede ser personalizado para mostrar diversos contenidos.")]),a("demo-block",[a("div",[a("p",[e._v("Los tres metodos mencionados anteriormente son un rempaquetado del metodo "),a("code",[e._v("$msgbox")]),e._v(". En este ejemplo se realiza una llamada al metodo "),a("code",[e._v("$msgbox")]),e._v(" directamente utilizando el atributo "),a("code",[e._v("showCancelButton")]),e._v(", el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo "),a("code",[e._v("cancelButtonClass")]),e._v(" para agregar un estilo personalizado y el atributo "),a("code",[e._v("cancelButtonText")]),e._v(" para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo "),a("code",[e._v("beforeClose")]),e._v(". Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: "),a("code",[e._v("action")]),e._v(", "),a("code",[e._v("instance")]),e._v(" y "),a("code",[e._v("done")]),e._v(". Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando "),a("code",[e._v("loading")]),e._v(" para el boton de confirmacion; puede invocar el metodo "),a("code",[e._v("done")]),e._v(" para cerrar la instancia del componente MessageBox (si el metodo "),a("code",[e._v("done")]),e._v(" no es llamado dentro del atributo "),a("code",[e._v("beforeClose")]),e._v(", la instancia no podra cerrarse).")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open4\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" a true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open5\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open5() {\n this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),a("p",[e._v("En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, los parámetros de "),a("code",[e._v("Promise's reject callback")]),e._v(" y "),a("code",[e._v("callback")]),e._v(" son "),a("code",[e._v("cancel")]),e._v(" cuando el usuario cancela (haciendo clic en el botón de cancelación) y cierra (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si "),a("code",[e._v("distinguishCancelAndClose")]),e._v(" está ajustado a "),a("code",[e._v("true")]),e._v(", los parámetros de las dos operaciones anteriores son "),a("code",[e._v("cancel")]),e._v(" y "),a("code",[e._v("close")]),e._v(" respectivamente.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open6\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open6() {\n this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n distinguishCancelAndClose: true,\n confirmButtonText: 'Save',\n cancelButtonText: 'Discard Changes'\n })\n .then(() => {\n this.$message({\n type: 'info',\n message: 'Changes saved. Proceeding to a new route.'\n });\n })\n .catch(action => {\n this.$message({\n type: 'info',\n message: action === 'cancel'\n ? 'Changes discarded. Proceeding to a new route.'\n : 'Stay in the current route'\n })\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(11),a("p",[e._v("El contenido del componente MessageBox puede ser centrado.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("center")]),e._v(" a "),a("code",[e._v("true")]),e._v(" centrara el contenido")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open7\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open7() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Por diseño los message box nos proveen de simulaciones de sistemas como los componentes "),a("code",[e._v("alert")]),e._v(", "),a("code",[e._v("confirm")]),e._v(" y "),a("code",[e._v("prompt")]),e._v("，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido de MessageBox puede ser "),a("code",[e._v("VNode")]),e._v(", permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo "),a("code",[e._v("VNode")]),e._v(" con el viejo "),a("code",[e._v("VNode")]),e._v(", y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ("),a("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). En este caso, se puede añadir una clave única a "),a("code",[e._v("VNode")]),e._v(" cada vez que se abre MessageBox: "),a("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("ejemplo")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliza-cadenas-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliza cadenas HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" soporta cadenas HTML.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Aunque la propiedad "),a("code",[e._v("message")]),e._v(" soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegurece que el contendio de "),a("code",[e._v("message")]),e._v(" sea de confianza, y "),a("strong",[e._v("nunca")]),e._v(" asignar "),a("code",[e._v("message")]),e._v(" a contenido generado por el usuario.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguir entre cancelar y cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-globales"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos Globales")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: "),a("code",[e._v("$msgbox")]),e._v(", "),a("code",[e._v("$alert")]),e._v(", "),a("code",[e._v("$confirm")]),e._v(" y "),a("code",[e._v("$prompt")]),e._v(". Asi que en una instancia de Vue puedes llamar el metodo "),a("code",[e._v("MessageBox")]),e._v(" como lo que hicimos en esta pagina. Los parametros son:")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("$msgbox(options)")])]),a("li",[a("code",[e._v("$alert(message, title, options)")]),e._v(" or "),a("code",[e._v("$alert(message, options)")])]),a("li",[a("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),a("code",[e._v("$confirm(message, options)")])]),a("li",[a("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),a("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"importacion-local"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local","aria-hidden":"true"}},[this._v("¶")]),this._v(" Importación local")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si prefieres importar "),a("code",[e._v("MessageBox")]),e._v(" cuando lo necesites (on demand):")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Los metodos correspondientes: "),a("code",[e._v("MessageBox")]),e._v(", "),a("code",[e._v("MessageBox.alert")]),e._v(", "),a("code",[e._v("MessageBox.confirm")]),e._v(" y "),a("code",[e._v("MessageBox.prompt")]),e._v(". Los parametros son los mismos que los anteriores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Permitidos")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("message")]),a("td",[e._v("contenido del componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("dangerouslyUseHTMLString")]),a("td",[e._v("utilizado para que "),a("code",[e._v("message")]),e._v(" sea tratado como una cadena HTML")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de mensaje , utilizado para mostrar el icono")]),a("td",[e._v("string")]),a("td",[e._v("success / info / warning / error")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("iconClass")]),a("td",[e._v("clase personalizada para el icono, sobreescribe "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de la clase personzalida para el componente MessageBox")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("callback")]),a("td",[e._v("MessageBox callback al cerrar si no desea utilizar Promise")]),a("td",[e._v("function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e "),a("code",[e._v("instance")]),e._v(" es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("beforeClose")]),a("td",[e._v("callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre")]),a("td",[e._v("function(action, instance, done), donde "),a("code",[e._v("action")]),e._v(" pueden ser 'confirm', 'cancel' o 'close'; "),a("code",[e._v("instance")]),e._v(" es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; "),a("code",[e._v("done")]),e._v(" es para cerrar la instancia")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("distinguishCancelAndClose")]),a("td",[e._v("si se debe distinguir entre cancelar y cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lockScroll")]),a("td",[e._v("utilizado para bloquear el desplazamiento del contenido del MessageBox prompts")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showCancelButton")]),a("td",[e._v("utlizado para mostrar un boton cancelar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con confirm y prompt)")])]),a("tr",[a("td",[e._v("showConfirmButton")]),a("td",[e._v("utlizado para mostrar un boton confirmar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("cancelButtonText")]),a("td",[e._v("contenido de texto del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Cancel")])]),a("tr",[a("td",[e._v("confirmButtonText")]),a("td",[e._v("contenido de texto del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("OK")])]),a("tr",[a("td",[e._v("cancelButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton cancelar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirmButtonClass")]),a("td",[e._v("nombre de la clase personalizada del boton confirmar")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closeOnClickModal")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnPressEscape")]),a("td",[e._v("utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")])]),a("tr",[a("td",[e._v("closeOnHashChange")]),a("td",[e._v("utilizado para cerra el componente MessageBox cuando hash cambie")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("showInput")]),a("td",[e._v("utilizado para mostrar el componente input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false (true cuando es llamado con prompt)")])]),a("tr",[a("td",[e._v("inputPlaceholder")]),a("td",[e._v("placeholder para el componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputType")]),a("td",[e._v("tipo del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("inputValue")]),a("td",[e._v("valor inicial del componente input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputPattern")]),a("td",[e._v("regexp del componente input")]),a("td",[e._v("regexp")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputValidator")]),a("td",[e._v("funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inputErrorMessage")]),a("td",[e._v("mensaje de error cuando la validacion falla")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Illegal input")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("utilizado para alinear el contenido al centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("roundButton")]),a("td",[e._v("utilizado para redondear el boton")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="message-box.md";t.default=r.exports},346:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("El límite es 3, haz seleccionado "+e.length+" archivos esta vez, añade hasta "+(e.length+t.length))}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,a=e.size/1024/1024<2;return t||this.$message.error("La imagen debe estar en formato JPG!"),a||this.$message.error("La imagen excede los 2MB!"),t&&a}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?a("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),t._v(" "),a("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Clic para subir archivo")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),e._v(" "),a("div",{staticClass:"el-upload__text"},[e._v("Suelta tu archivo aquí o "),a("em",[e._v("haz clic para cargar")])]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])])],1)},staticRenderFns:[]}),"element-demo6":n({},{methods:{submitUpload:function(){this.$refs.upload.submit()}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("Selecciona un archivo")]),e._v(" "),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("Cargar al servidor")]),e._v(" "),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Solo archivos jpg/png con un tamaño menor de 500kb")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Carga archivos haciendo clic o arrastrándolos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Personalice el tipo y texto del botón utilizando la propiedad "),a("code",[e._v("slot")]),e._v(". Defina las propiedades "),a("code",[e._v("limit")]),e._v(" y "),a("code",[e._v("on-exceed")]),e._v(" para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n multiple\n :limit="3"\n :on-exceed="handleExceed"\n :file-list="fileList">\n <el-button size="small" type="primary">Clic para subir archivo</el-button>\n <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="avatar-uploader"\n action="https://jsonplaceholder.typicode.com/posts/"\n :show-file-list="false"\n :on-success="handleAvatarSuccess"\n :before-upload="beforeAvatarUpload">\n <img v-if="imageUrl" :src="imageUrl" class="avatar">\n <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n imageUrl: \'\'\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === \'image/jpeg\';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error(\'La imagen debe estar en formato JPG!\');\n }\n if (!isLt2M) {\n this.$message.error(\'La imagen excede los 2MB!\');\n }\n return isJPG && isLt2M;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n action="https://jsonplaceholder.typicode.com/posts/"\n list-type="picture-card"\n :on-preview="handlePictureCardPreview"\n :on-remove="handleRemove">\n <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n export default {\n data() {\n return {\n dialogImageUrl: \'\',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n :file-list="fileList"\n list-type="picture">\n <el-button size="small" type="primary">Clic para subir archivo</el-button>\n <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-change="handleChange"\n :file-list="fileList">\n <el-button size="small" type="primary">Clic para subir archivo</el-button>\n <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{\n name: \'food.jpeg\',\n url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n }, {\n name: \'food2.jpeg\',\n url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList = fileList.slice(-3);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n drag\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n :file-list="fileList"\n multiple>\n <i class="el-icon-upload"></i>\n <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n')])])])],2),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n ref="upload"\n action="https://jsonplaceholder.typicode.com/posts/"\n :auto-upload="false">\n <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>\n <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>\n <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carga-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga de archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clic-para-cargar-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clic para cargar archivos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargar avatar de usuario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(" para limitar el formato de archivo y su tamaño.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pared-de-fotografias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pared de fotografías")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice la propiedad "),a("code",[e._v("list-type")]),e._v(" para cambiar el estilo a un listado de archivos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lista de archivos con miniatura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"control-de-lista-de-archivos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Control de lista de archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el "),a("em",[e._v("hook")]),a("code",[e._v("on-change")]),e._v(" para controlar la funcionalidad de la lista de archivos subidos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrastrar para cargar archivo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-normal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga normal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("action")]),a("td",[e._v("obligatorio, URL de la petición")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("headers")]),a("td",[e._v("cabeceras de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("especifica si se permite subir múltiples archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("opciones adicionales de la petición")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre clave del archivo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("file")])]),a("tr",[a("td",[e._v("with-credentials")]),a("td",[e._v("especifica si enviará cookies")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-file-list")]),a("td",[e._v("especifica si se debe mostrar la lista de archivos cargados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("drag")]),a("td",[e._v("se especifica si se activará el modo arrastrar y soltar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("accept")]),a("td",[e._v("acepta "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("tipos de archivos")]),e._v(", puede no funcionar cuando "),a("code",[e._v("thumbnail-mode")]),e._v(" esta en "),a("code",[e._v("true")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-preview")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado al hacer clic en los archivos subidos")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos son eliminados")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-success")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando los archivos fueron cargados correctamente")]),a("td",[e._v("function(response, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-error")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando han ocurrido algunos errores")]),a("td",[e._v("function(err, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-progress")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando se produce algún progreso")]),a("td",[e._v("function(event, file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-change")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el archivo seleccionado se carga correctamente o falla")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-upload")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de que el archivo sea cargado. Si este devuelve "),a("code",[e._v("true")]),e._v(" o "),a("code",[e._v("Promise")]),e._v(" entonces será rechazado, la carga puede ser cancelada")]),a("td",[e._v("function(file)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-remove")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y que luego es rechazada, la eliminación será abortada.")]),a("td",[e._v("function(file, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("thumbnail-mode")]),a("td",[e._v("especifica si se mostrará la miniatura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("file-list")]),a("td",[e._v("archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[]")])]),a("tr",[a("td",[e._v("list-type")]),a("td",[e._v("tipo de lista de archivos")]),a("td",[e._v("string")]),a("td",[e._v("text/picture/picture-card")]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("auto-upload")]),a("td",[e._v("se especifica si se autocargan archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("http-request")]),a("td",[e._v("sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita la carga de archivos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("limit")]),a("td",[e._v("número máximo de cargas permitidas")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("on-exceed")]),a("td",[a("em",[e._v("hook")]),e._v(" lanzado cuando el límite ha sido excedido")]),a("td",[e._v("function(files, fileList)")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")])])]),a("tbody",[a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("contenido que desencadena el diálogo de archivo")])]),a("tr",[a("td",[e._v("tip")]),a("td",[e._v("contenido de los tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearFiles")]),a("td",[e._v("limpia la lista de archivos cargados (este método no esta soportado en el "),a("em",[e._v("hook")]),a("code",[e._v("before-upload")]),e._v(")")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("abort")]),a("td",[e._v("cancela la petición de carga")]),a("td",[e._v("（ file: fileList's item ）")])]),a("tr",[a("td",[e._v("submit")]),a("td",[e._v("La lista de archivos se sube manualmente")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="upload.md";t.default=r.exports},351:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),a("div",{staticClass:"line"}),e._v(" "),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[e._v("Default colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("h5",[e._v("Custom colors")]),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),e._v(" "),a("span",[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),a("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú que provee la navegación para tu sitio.")]),e._m(1),a("p",[e._v("Top bar NavMenu puede ser usado en distinto escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad "),a("code",[e._v("mode")]),e._v(" el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee "),a("code",[e._v("background-color")]),e._v(", "),a("code",[e._v("text-color")]),e._v(" y "),a("code",[e._v("active-text-color")]),e._v(" para customizar los colores.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n <el-submenu index="2-4">\n <template slot="title">item four</template>\n <el-menu-item index="2-4-1">item one</el-menu-item>\n <el-menu-item index="2-4-2">item two</el-menu-item>\n <el-menu-item index="2-4-3">item three</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="3" disabled>Info</el-menu-item>\n <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n :default-active="activeIndex2"\n class="el-menu-demo"\n mode="horizontal"\n @select="handleSelect"\n background-color="#545c64"\n text-color="#fff"\n active-text-color="#ffd04b">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n <el-submenu index="2-4">\n <template slot="title">item four</template>\n <el-menu-item index="2-4-1">item one</el-menu-item>\n <el-menu-item index="2-4-2">item two</el-menu-item>\n <el-menu-item index="2-4-3">item three</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="3" disabled>Info</el-menu-item>\n <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n export default {\n data() {\n return {\n activeIndex: \'1\',\n activeIndex2: \'1\'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("NavMenu vertical con sub-menús.")]),a("demo-block",[a("div",[a("p",[e._v("Puede utilizar el componente "),a("code",[e._v("el-menu-item-group")]),e._v(" para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad "),a("code",[e._v("title")]),e._v(" o la propiedad "),a("code",[e._v("slot")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n <el-col :span="12">\n <h5>Default colors</h5>\n <el-menu\n default-active="2"\n class="el-menu-vertical-demo"\n @open="handleOpen"\n @close="handleClose">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>Navigator One</span>\n </template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span>Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span>Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span>Navigator Four</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="12">\n <h5>Custom colors</h5>\n <el-menu\n default-active="2"\n class="el-menu-vertical-demo"\n @open="handleOpen"\n @close="handleClose"\n background-color="#545c64"\n text-color="#fff"\n active-text-color="#ffd04b">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>Navigator One</span>\n </template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span>Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span>Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span>Navigator Four</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n</el-row>\n\n<script>\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("NavMenu vertical puede ser colapsado.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n <el-radio-button :label="false">expand</el-radio-button>\n <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span slot="title">Navigator One</span>\n </template>\n <el-menu-item-group>\n <span slot="title">Group One</span>\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <span slot="title">item four</span>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span slot="title">Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span slot="title">Navigator Four</span>\n </el-menu-item>\n</el-menu>\n\n<style>\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("mode")]),a("td",[e._v("modo de presentación del menú")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical")])]),a("tr",[a("td",[e._v("collapse")]),a("td",[e._v("si el menú está colapsado (solo en modo vertical)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("background-color")]),a("td",[e._v("color de fondo del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de texto del menú (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#303133")])]),a("tr",[a("td",[e._v("active-text-color")]),a("td",[e._v("color de text del menu-item activo (formato hexadecimal)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("default-active")]),a("td",[e._v("índice del menu-item activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-openeds")]),a("td",[e._v("arreglo que contiene las llaves del sub-menus activo")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unique-opened")]),a("td",[e._v("si solo un submenu puede ser activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("menu-trigger")]),a("td",[e._v("como dispara eventos sub-menus, solo funciona cuando "),a("code",[e._v("mode")]),e._v(" es 'horizontal'")]),a("td",[e._v("string")]),a("td",[e._v("hover / click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("router")]),a("td",[e._v("si el modo "),a("code",[e._v("vue-router")]),e._v(" está activado. Si es verdader, índice será usado como 'path' para activar la ruta")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-transition")]),a("td",[e._v("si se debe permitir collapse transition")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Métodos de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("abre un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para abrir")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra un sub-menu específico")]),a("td",[e._v("index: índice del sub-menu para cerrar")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("callback ejecutado cuando el menú es activado")]),a("td",[e._v("index: índice del menú activado, indexPath: index path del menú activado")])]),a("tr",[a("td",[e._v("open")]),a("td",[e._v("callback ejecutado cuando sub-menu se expande")]),a("td",[e._v("index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("callback ejecutado cuando sub-menu colapsa")]),a("td",[e._v("index: índice del sub-menu colapsado, indexPath: index path del menú colapsado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("callback ejecutado cuando se hace click sobre menu-item")]),a("td",[e._v("el: instancia de menu-item")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-submenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos SubMenu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string/null")]),a("td",[e._v("—")]),a("td",[e._v("null")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de la clase del menu popup")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("tiempo de espera antes de mostrar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("tiempo de espera antes de ocultar un submenú")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")]),e._v(" el sub-menu")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("index")]),a("td",[e._v("identificador único")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("route")]),a("td",[e._v("Objeto Vue Router")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta "),a("code",[e._v("disabled")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-menu-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Menu-Group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="menu.md";t.default=r.exports},352:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading2:!0}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:e.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:e.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:e.openFullScreen}},[e._v("\n Como directiva\n ")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:e.openFullScreen2}},[e._v("\n Como servicio\n ")])]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se muestra la animación mientras se cargan los datos.")]),e._m(1),a("p",[e._v("Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.")]),a("demo-block",[a("div",[a("p",[e._v("Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada "),a("code",[e._v("v-loading")]),e._v(", solo necesitas enlazarlo a un valor "),a("code",[e._v("Boolean")]),e._v(". Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador "),a("code",[e._v("body")]),e._v(", la máscara se agrega al elemento body.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n v-loading="loading"\n :data="tableData"\n style="width: 100%">\n <el-table-column\n prop="date"\n label="Fecha"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre"\n width="180">\n </el-table-column>\n <el-table-column\n prop="address"\n label="Dirección">\n </el-table-column>\n </el-table>\n</template>\n\n<style>\n body {\n margin: 0;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n loading: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede personalizar el texto de carga, spinner de carga y color de fondo.")]),a("demo-block",[a("div",[a("p",[e._v("Agrege el atributo "),a("code",[e._v("element-loading-text")]),e._v(" al elemento en el que "),a("code",[e._v("v-loading")]),e._v(" está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, "),a("code",[e._v("element-loading-spinner")]),e._v(" y "),a("code",[e._v("element-loading-background")]),e._v(" son para personalizar el nombre de la clase del spinner y el color de fondo.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n v-loading="loading2"\n element-loading-text="Loading..."\n element-loading-spinner="el-icon-loading"\n element-loading-background="rgba(0, 0, 0, 0.8)"\n :data="tableData"\n style="width: 100%">\n <el-table-column\n prop="date"\n label="Fecha"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre"\n width="180">\n </el-table-column>\n <el-table-column\n prop="address"\n label="Dirección">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n loading2: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Muestra una animación de pantalla completa mientras se cargan los datos")]),a("demo-block",[a("div",[a("p",[e._v("Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador "),a("code",[e._v("fullscreen")]),e._v(", y este puede ser agregado al "),a("code",[e._v("body")]),e._v(". En este caso, si desea deshabilitar el desplazamiento en "),a("code",[e._v("body")]),e._v(", puede agregar otro modificador "),a("code",[e._v("lock")]),e._v(". Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button\n type="primary"\n @click="openFullScreen"\n v-loading.fullscreen.lock="fullscreenLoading">\n Como directiva\n </el-button>\n <el-button\n type="primary"\n @click="openFullScreen2">\n Como servicio\n </el-button>\n</template>\n\n<script>\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: \'Loading\',\n spinner: \'el-icon-loading\',\n background: \'rgba(0, 0, 0, 0.7)\'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Puede invocar el componente con un servicio. Importe el servicio:")]),e._m(5),a("p",[e._v("Invocar:")]),e._m(6),e._m(7),e._m(8),a("p",[e._v("Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cargando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando dentro de un contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cargando a pantalla completa")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"servicio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#servicio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Servicio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El parámetro "),a("code",[e._v("options")]),e._v(" es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. "),a("code",[e._v("LoadingService")]),e._v(" devuelve una instancia del componente, y puede cerrarlo invocando el método "),a("code",[e._v("close")]),e._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Llamar al método "),a("code",[e._v("close")]),e._v(" en cualquiera de estas puede cerrarlo.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si Element es importado completamente, un método global "),a("code",[e._v("$loading")]),e._v(" puede ser registrado a Vue.prototype. Puede invocarlo como esto: "),a("code",[e._v("this.$loading(options)")]),e._v(", y también devuelve una instancia del componente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("target")]),a("td",[e._v("el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a "),a("code",[e._v("document.querySelector")]),e._v(" para obtener el correspondiente nodo del DOM")]),a("td",[e._v("object/string")]),a("td",[e._v("—")]),a("td",[e._v("document.body")])]),a("tr",[a("td",[e._v("body")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("body")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("fullscreen")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("lock")]),a("td",[e._v("igual que el modificador "),a("code",[e._v("lock")]),e._v(" de "),a("code",[e._v("v-loading")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text")]),a("td",[e._v("texto de cargando que se muestra debajo del spinner")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("spinner")]),a("td",[e._v("nombre de clase del spinner personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("background")]),a("td",[e._v("color de fondo de la máscara")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("customClass")]),a("td",[e._v("nombre de clase personalizada para el componente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="loading.md";t.default=r.exports},355:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Tag One")]),e._v(" "),a("el-tag",{attrs:{type:"success"}},[e._v("Tag Two")]),e._v(" "),a("el-tag",{attrs:{type:"info"}},[e._v("Tag Three")]),e._v(" "),a("el-tag",{attrs:{type:"warning"}},[e._v("Tag Four")]),e._v(" "),a("el-tag",{attrs:{type:"danger"}},[e._v("Tag Five")])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",t._l(t.tags,function(e){return a("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[a._l(a.dynamicTags,function(t){return n("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){a.handleClose(t)}}},[a._v("\n "+a._s(t)+"\n")])}),a._v(" "),a.inputVisible?n("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:a.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!a._k(e.keyCode,"enter",13,e.key,"Enter")?a.handleInputConfirm(e):null}},model:{value:a.inputValue,callback:function(e){a.inputValue=e},expression:"inputValue"}}):n("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:a.showInput}},[a._v("+ New Tag")])],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tag",[e._v("Default")]),e._v(" "),a("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Se utiliza para marcar y seleccionar.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("type")]),e._v(" para definir el tipo de etiqueta. Además, el atributo "),a("code",[e._v("color")]),e._v(" se puede utilizar para establecer el color de fondo de la etiqueta.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag One</el-tag>\n<el-tag type="success">Tag Two</el-tag>\n<el-tag type="info">Tag Three</el-tag>\n<el-tag type="warning">Tag Four</el-tag>\n<el-tag type="danger">Tag Five</el-tag>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("el atributo "),a("code",[e._v("closable")]),e._v(" puede usarse para definir una etiqueta removible. Acepta un "),a("code",[e._v("Boolean")]),e._v(". De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo "),a("code",[e._v("disable-transitions")]),e._v(" , que acepta "),a("code",[e._v("Boolean")]),e._v(", como "),a("code",[e._v("true")]),e._v(". Se dispara el evento "),a("code",[e._v("close")]),e._v(" cuando la etiqueta es removida.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n v-for=\"tag in tags\"\n :key=\"tag.name\"\n closable\n :type=\"tag.type\">\n {{tag.name}}\n</el-tag>\n\n<script>\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n<\/script>\n")])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n :key="tag"\n v-for="tag in dynamicTags"\n closable\n :disable-transitions="false"\n @close="handleClose(tag)">\n {{tag}}\n</el-tag>\n<el-input\n class="input-new-tag"\n v-if="inputVisible"\n v-model="inputValue"\n ref="saveTagInput"\n size="mini"\n @keyup.enter.native="handleInputConfirm"\n @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n inputVisible: false,\n inputValue: \'\'\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = \'\';\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etiqueta-removible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Etiqueta removible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"editar-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Editar dinámicamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede utilizar el evento "),a("code",[e._v("close")]),e._v(" para añadir y eliminar etiquetas dinámicamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tema")]),a("td",[e._v("string")]),a("td",[e._v("success/info/warning/danger")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tag puede ser removido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disable-transitions")]),a("td",[e._v("si se deshabilitan las animaciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hit")]),a("td",[e._v("si el Tag tiene un borde resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo del Tag")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Tag")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("se disoara cuando el Tag es clic")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se disoara cuando el Tag es removido")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="tag.md";t.default=r.exports},358:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Rápido y facilmente crea un layout básico con 24 columnas.")]),e._m(1),a("p",[e._v("Crea un layout básico usando columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Con "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("col")]),e._v(", puede facilmente manipular el layout usando el atributo "),a("code",[e._v("span")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("El espaciado de columnas está soportado.")]),a("demo-block",[a("div",[a("p",[e._v("Row provee el atributo "),a("code",[e._v("gutter")]),e._v(" para especificar el espacio entre columnas y su valor por defecto es 0.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Crea un complejo layout híbrido combinando el básico de 1/24 columnas.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puedes especificar offsets para las columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puedes especificar el offset para una columna mediante el atributo "),a("code",[e._v("offset")]),e._v(" de Col.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Usa flex layout para un alineamiento flexible de columnas.")]),a("demo-block",[a("div",[a("p",[e._v("Puede habilitar flex layout asignando el atributo "),a("code",[e._v("type")]),e._v(" a 'flex', y definir el layout de elementos hijos asignando el atributo "),a("code",[e._v("justify")]),e._v(" con los valores start, center, end, space-between o space-around.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n</style>\n')])])])],2),e._m(7),a("p",[e._v("Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:")]),e._m(8),a("p",[e._v("Las clases son:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espaciado-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espaciado de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"layout-hibrido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout híbrido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"offset-de-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Offset de columnas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clases útiles para ocultar elementos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("code",[e._v("hidden-xs-only")]),e._v(" - oculto en viewports extra pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-only")]),e._v(" - oculto en viewports pequeños solamente")]),a("li",[a("code",[e._v("hidden-sm-and-down")]),e._v(" - oculto en viewports pequeños y menores")]),a("li",[a("code",[e._v("hidden-sm-and-up")]),e._v(" - oculto en viewports pequeños y superiores")]),a("li",[a("code",[e._v("hidden-md-only")]),e._v(" - oculto en viewports medios solamente")]),a("li",[a("code",[e._v("hidden-md-and-down")]),e._v(" - oculto en viewports medios y menores")]),a("li",[a("code",[e._v("hidden-md-and-up")]),e._v(" - oculto en viewports medios y mayores")]),a("li",[a("code",[e._v("hidden-lg-only")]),e._v(" - ocultos en viewports grandes solamente")]),a("li",[a("code",[e._v("hidden-lg-and-down")]),e._v(" - ocultos en viewports grandes y menores")]),a("li",[a("code",[e._v("hidden-lg-and-up")]),e._v(" - ocultos en viewports grandes y superiores")]),a("li",[a("code",[e._v("hidden-xl-only")]),e._v(" - oculto en viewports extra grandes solamente")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Row")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("gutter")]),a("td",[e._v("espaciado de la grilla")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("modo del layout , puedes usar flex, funciona en navegadores modernos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("justify")]),a("td",[e._v("alineación horizontal del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("start/end/center/space-around/space-between")]),a("td",[e._v("start")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación vertical del layout flex")]),a("td",[e._v("string")]),a("td",[e._v("top/middle/bottom")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-col"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos Col")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Valor por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("span")]),a("td",[e._v("número de columnas que abarca la cuadrícula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("24")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("especific espacio en el lado izquierdo de la grill")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("push")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la derecha")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("pull")]),a("td",[e._v("número de columnas que la grilla se mueve hacia la izquierda")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("xs")]),a("td",[a("code",[e._v("<768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sm")]),a("td",[a("code",[e._v("≥768px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("md")]),a("td",[a("code",[e._v("≥992px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("lg")]),a("td",[a("code",[e._v("≥1200px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("xl")]),a("td",[a("code",[e._v("≥1920px")]),e._v(" Columnas responsive u objeto con propiedades de la columna")]),a("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tag")]),a("td",[e._v("tag de elemento propio")]),a("td",[e._v("string")]),a("td",[e._v("*")]),a("td",[e._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";t.default=r.exports},364:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{tabPosition:"top"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),a("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),a("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n Route\n ")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(n,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var o=this.editableTabs,l=this.editableTabsValue;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue=l,this.editableTabs=o.filter(function(e){return e.name!==n})}}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-tabs",{attrs:{type:"card",editable:""},on:{edit:a.handleTabsEdit},model:{value:a.editableTabsValue,callback:function(e){a.editableTabsValue=e},expression:"editableTabsValue"}},a._l(a.editableTabs,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n "+a._s(e.content)+"\n ")])}),1)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{editableTabsValue2:"2",editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(n){var o=this.editableTabs2,l=this.editableTabsValue2;l===n&&o.forEach(function(e,t){if(e.name===n){var a=o[t+1]||o[t-1];a&&(l=a.name)}}),this.editableTabsValue2=l,this.editableTabs2=o.filter(function(e){return e.name!==n})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticStyle:{"margin-bottom":"20px"}},[n("el-button",{attrs:{size:"small"},on:{click:function(e){a.addTab(a.editableTabsValue2)}}},[a._v("\n add tab\n ")])],1),a._v(" "),n("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":a.removeTab},model:{value:a.editableTabsValue2,callback:function(e){a.editableTabsValue2=e},expression:"editableTabsValue2"}},a._l(a.editableTabs2,function(e,t){return n("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[a._v("\n "+a._s(e.content)+"\n ")])}),1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.")]),e._m(1),a("p",[e._v("Tabulación básica y concisa")]),a("demo-block",[a("div",[a("p",[e._v("Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),a("code",[e._v("value")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tabs v-model="activeName" @tab-click="handleClick">\n <el-tab-pane label="User" name="first">User</el-tab-pane>\n <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: \'first\'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Pestañas diseñadas como tarjetas.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para obtener una pestaña diseñada como tarjeta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tabs type="card" @tab-click="handleClick">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: \'first\'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Pestañas de tarjeta con bordes.")]),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("border-card")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Es posible escoger entre cuatro direcciones: "),a("code",[e._v('tabPosition="left|right|top|bottom"')])])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n <el-radio-button label="top">top</el-radio-button>\n <el-radio-button label="right">right</el-radio-button>\n <el-radio-button label="bottom">bottom</el-radio-button>\n <el-radio-button label="left">left</el-radio-button>\n </el-radio-group>\n\n <el-tabs :tab-position="tabPosition" style="height: 200px;">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n tabPosition: \'top\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> Route</span>\n Route\n </el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),a("p",[e._v("Solo las pestañas de tipo tarjeta soportan adición y cierre.")]),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n <el-tab-pane\n v-for=\"(item, index) in editableTabs\"\n :key=\"item.name\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n <el-button\n size=\"small\"\n @click=\"addTab(editableTabsValue2)\"\n >\n add tab\n </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue2\" type=\"card\" closable @tab-remove=\"removeTab\">\n <el-tab-pane\n v-for=\"(item, index) in editableTabs2\"\n :key=\"item.name\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabulación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-de-tarjeta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo de Tarjeta")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tarjeta-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tarjeta con Bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-tabulacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de tabulación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Es posible usar el atributo "),a("code",[e._v("tab-position")]),e._v(" para establecer la posición de la tabulación.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pestana-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pestaña Personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agregar y cerrar pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado, nombre de la pestaña seleccionada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("nombre de la primer pestaña")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de Pestaña")]),a("td",[e._v("string")]),a("td",[e._v("card/border-card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si la Pestaña es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("addable")]),a("td",[e._v("si la Pestaña es añadible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si la Pestaña es añadible y cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("tab-position")]),a("td",[e._v("posición de tabulación")]),a("td",[e._v("string")]),a("td",[e._v("top/right/bottom/left")]),a("td",[e._v("top")])]),a("tr",[a("td",[e._v("stretch")]),a("td",[e._v("si el ancho del tab se ajusta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("before-leave")]),a("td",[e._v("función "),a("code",[e._v("hook")]),e._v(" antes de cambiar de pestaña. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego se rechaza, se evitará el cambio.")]),a("td",[e._v("Function(activeName, oldActiveName)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-pestanas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Pestañas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("tab-click")]),a("td",[e._v("se lanza cuando se hace click a una pestaña")]),a("td",[e._v("pestaña clickeada")])]),a("tr",[a("td",[e._v("tab-remove")]),a("td",[e._v("se lanza cuando se hace click al botón tab-remove")]),a("td",[e._v("nombre de la pestaña removida")])]),a("tr",[a("td",[e._v("tab-add")]),a("td",[e._v("se lanza cuando se hace click al botón tab-add")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("edit")]),a("td",[e._v("se lanza cuando los botones de tab-add y/o tab-remove son clickeados")]),a("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributos-del-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributos-del-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributos del Tab-pane")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptados")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("título de la pestaña")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la Tabulación está deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1'")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si el Tab es cerrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si Tab es renderizado con "),a("code",[e._v("lazy-load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="tabs.md";t.default=r.exports},382:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{input:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{input1:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{input10:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input10,callback:function(e){t.input10=e},expression:"input10"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{input11:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input11,callback:function(e){t.input11=e},expression:"input11"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{input2:"",input21:"",input22:"",input23:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input21,callback:function(e){t.input21=e},expression:"input21"}})],1),t._v(" "),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input22,callback:function(e){t.input22=e},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),a("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input23,callback:function(e){t.input23=e},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{textarea:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{textarea2:"",textarea3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}}),t._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(e){t.textarea3=e},expression:"textarea3"}})],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{input3:"",input4:"",input5:"",select:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[a("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[a("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(e){t.input5=e},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),a("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{input6:"",input7:"",input8:"",input9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input6,callback:function(e){t.input6=e},expression:"input6"}}),t._v(" "),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input7,callback:function(e){t.input7=e},expression:"input7"}}),t._v(" "),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(e){t.input8=e},expression:"input8"}}),t._v(" "),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(e){t.input9=e},expression:"input9"}})],1)])},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{links:[],state3:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":a.querySearch,placeholder:"Please input"},on:{select:a.handleSelect},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.item;return[n("div",{staticClass:"value"},[a._v(a._s(t.value))]),a._v(" "),n("span",{staticClass:"link"},[a._v(a._s(t.link))])]}}]),model:{value:a.state3,callback:function(e){a.state3=e},expression:"state3"}},[n("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:a.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{links:[],state4:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var a=this.links,n=e?a.filter(this.createFilter(e)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(e){t.state4=e},expression:"state4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Ingresa datos usando el ratón o teclado.")]),e._m(1),e._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n data() {\n return {\n input: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Deshabilite el Input con el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n placeholder="Please input"\n v-model="input1"\n :disabled="true">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n input1: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Make the Input clearable with the "),a("code",[e._v("clearable")]),e._v(" attribute.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n placeholder="Please input"\n v-model="input10"\n clearable>\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n input10: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Make a toggleable password Input with the "),a("code",[e._v("show-password")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input11" show-password></el-input>\n\n<script>\n export default {\n data() {\n return {\n input11: \'\'\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Añada un icono para indicar el tipo de Input.")]),a("demo-block",[a("div",[a("p",[e._v("Para añadir iconos en el Input, puede utilizar los atributos "),a("code",[e._v("prefix-icon")]),e._v(" y "),a("code",[e._v("suffix-icon")]),e._v(" . Además, los slots con nombre "),a("code",[e._v("prefix")]),e._v(" y "),a("code",[e._v("suffix")]),e._v(" también funcionan.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n <span class="demo-input-label">Using attributes</span>\n <el-input\n placeholder="Pick a date"\n suffix-icon="el-icon-date"\n v-model="input2">\n </el-input>\n <el-input\n placeholder="Type something"\n prefix-icon="el-icon-search"\n v-model="input21">\n </el-input>\n</div>\n<div class="demo-input-suffix">\n <span class="demo-input-label">Using slots</span>\n <el-input\n placeholder="Pick a date"\n v-model="input22">\n <i slot="suffix" class="el-input__icon el-icon-date"></i>\n </el-input>\n <el-input\n placeholder="Type something"\n v-model="input23">\n <i slot="prefix" class="el-input__icon el-icon-search"></i>\n </el-input>\n</div>\n\n<style>\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n</style>\n\n<script>\nexport default {\n data() {\n return {\n input2: \'\',\n input21: \'\',\n input22: \'\',\n input23: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Controle la altura ajustando el prop "),a("code",[e._v("rows")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n type="textarea"\n :rows="2"\n placeholder="Please input"\n v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n textarea: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n type="textarea"\n autosize\n placeholder="Please input"\n v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n type="textarea"\n :autosize="{ minRows: 2, maxRows: 4}"\n placeholder="Please input"\n v-model="textarea3">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n textarea2: \'\',\n textarea3: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("Añade un elemento antes o después del input, generalmente una etiqueta o un botón.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el "),a("code",[e._v("slot")]),e._v(" para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-input placeholder="Please input" v-model="input3">\n <template slot="prepend">Http://</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input4">\n <template slot="append">.com</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input5" class="input-with-select">\n <el-select v-model="select" slot="prepend" placeholder="Select">\n <el-option label="Restaurant" value="1"></el-option>\n <el-option label="Order No." value="2"></el-option>\n <el-option label="Tel" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="el-icon-search"></el-button>\n </el-input>\n</div>\n\n<style>\n .el-select .el-input {\n width: 110px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n</style>\n<script>\nexport default {\n data() {\n return {\n input3: \'\',\n input4: \'\',\n input5: \'\',\n select: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("size")]),e._v(" para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: "),a("code",[e._v("large")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n <el-input\n placeholder="Please Input"\n v-model="input6">\n </el-input>\n <el-input\n size="medium"\n placeholder="Please Input"\n v-model="input7">\n </el-input>\n <el-input\n size="small"\n placeholder="Please Input"\n v-model="input8">\n </el-input>\n <el-input\n size="mini"\n placeholder="Please Input"\n v-model="input9">\n </el-input>\n</div>\n\n<script>\nexport default {\n data() {\n return {\n input6: \'\',\n input7: \'\',\n input8: \'\',\n input9: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(13),a("p",[e._v("Puede obtener algunas sugerencias basadas en la entrada actual.")]),a("demo-block",[a("div",[a("p",[e._v("El componente Autocomplete proporciona sugerencias de entrada. El atributo "),a("code",[e._v("fetch-suggestions")]),e._v(" es un método que devuelve la entrada sugerida. En este ejemplo, "),a("code",[e._v("querySearch(queryString, cb)")]),e._v(" devuelve las sugerencias al componente mediante "),a("code",[e._v("cb(data)")]),e._v(" cuando están listas.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n <el-col :span="12">\n <div class="sub-title">list suggestions when activated</div>\n <el-autocomplete\n class="inline-input"\n v-model="state1"\n :fetch-suggestions="querySearch"\n placeholder="Please Input"\n @select="handleSelect"\n ></el-autocomplete>\n </el-col>\n <el-col :span="12">\n <div class="sub-title">list suggestions on input</div>\n <el-autocomplete\n class="inline-input"\n v-model="state2"\n :fetch-suggestions="querySearch"\n placeholder="Please Input"\n :trigger-on-focus="false"\n @select="handleSelect"\n ></el-autocomplete>\n </el-col>\n</el-row>\n<script>\n export default {\n data() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n<\/script>\n')])])])],2),e._m(14),a("p",[e._v("Personalice cómo se muestran las sugerencias.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("scoped slot")]),e._v(" para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave "),a("code",[e._v("item")]),e._v(".")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n popper-class="my-autocomplete"\n v-model="state3"\n :fetch-suggestions="querySearch"\n placeholder="Please input"\n @select="handleSelect">\n <i\n class="el-icon-edit el-input__icon"\n slot="suffix"\n @click="handleIconClick">\n </i>\n <template slot-scope="{ item }">\n <div class="value">{{ item.value }}</div>\n <span class="link">{{ item.link }}</span>\n </template>\n</el-autocomplete>\n\n<style>\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Búsqueda de datos desde el servidor.")]),a("demo-block",[a("div"),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n v-model="state4"\n :fetch-suggestions="querySearchAsync"\n placeholder="Please input"\n @select="handleSelect"\n></el-autocomplete>\n<script>\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Input is a controlled component, it "),a("strong",[e._v("always shows Vue binding value")]),e._v(".")]),a("p",[e._v("Under normal circumstances, "),a("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),a("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),a("p",[e._v("Do not support "),a("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-con-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input con icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Redimensiona para introducir varias líneas de información de texto. Agrege el atributo "),a("code",[e._v('type="textarea"')]),e._v(" para cambiar el "),a("code",[e._v("input")]),e._v(" al tipo nativo "),a("code",[e._v("textarea")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea-tamano-automatico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea tamaño automatico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El ajuste del prop "),a("code",[e._v("autosize")]),e._v(" en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mezclando-elementos-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mezclando elementos con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocompletado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de input")]),a("td",[e._v("string")]),a("td",[e._v("text, textarea y otros "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types"}},[e._v("tipos de entrada nativos")])]),a("td",[e._v("text")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("maxlength")]),a("td",[e._v("igual que "),a("code",[e._v("maxlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("minlength")]),a("td",[e._v("igual que "),a("code",[e._v("minlength")]),e._v(" en el input nativo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder del Input")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether to show clear button")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-password")]),a("td",[e._v("whether to show toggleable password input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input, esto no funciona cuando "),a("code",[e._v("type")]),e._v(" no es textarea")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("clase del icono de prefijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("clase del icono de sufijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rows")]),a("td",[e._v("número de filas, sólo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'textarea'.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("autosize")]),a("td",[e._v("si textarea tiene una altura adaptativa, sólo funciona cuando el"),a("code",[e._v("type")]),e._v(" es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 }")]),a("td",[e._v("boolean / object")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("igual que "),a("code",[e._v("autocomplete")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED en el proximo cambio mayor de version")]),a("td",[e._v("string")]),a("td",[e._v("on/off")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("igual que "),a("code",[e._v("readonly")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("igual que "),a("code",[e._v("max")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("igual que "),a("code",[e._v("min")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("igual que "),a("code",[e._v("step")]),e._v(" en el input nativo")]),a("td",[e._v("—")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("resize")]),a("td",[e._v("control para el dimensionamiento")]),a("td",[e._v("string")]),a("td",[e._v("none, both, horizontal, vertical")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("igual que "),a("code",[e._v("autofocus")]),e._v(" en el input nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("form")]),a("td",[e._v("igual que "),a("code",[e._v("form")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[e._v("orden de tabulacion para el Input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando se pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando se obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("change")]),a("td",[e._v("se activa cuando cambia el valor de entrada")]),a("td",[e._v("(value: string | number)")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v('se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable".')]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("quita el foco del elemento")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el texto del input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("el placeholder del Autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Autocompete esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre del campo del objeto de sugerencia del input para la visualización")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("ubicación del menú emergente")]),a("td",[e._v("string")]),a("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),a("td",[e._v("bottom-start")])]),a("tr",[a("td",[e._v("fetch-suggestions")]),a("td",[e._v("un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar "),a("code",[e._v("callback(data:[])")]),e._v(" para devolverlas a Autocomplete")]),a("td",[e._v("Function(queryString, callback)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre personalizado de clase para el dropdown de autocomplete")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("trigger-on-focus")]),a("td",[e._v("si se deben mostrar sugerencias cuando el input obtiene el foco")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-when-unmatched")]),a("td",[e._v("si se emite un evento "),a("code",[e._v("select")]),e._v(" al pulsar enter cuando no hay coincidencia de Autocomplete")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("prefix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("suffix-icon")]),a("td",[e._v("suffix icon class")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-loading")]),a("td",[e._v("si se debe ocultar el icono de loading en la búsqueda remota")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-first-item")]),a("td",[e._v("si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido como prefijo del input")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("contenido como sufijo del input")])]),a("tr",[a("td",[e._v("prepend")]),a("td",[e._v("contenido antes del input")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("contenido a añadir después del input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para el input de sugerencias. El parametro del scope es { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando se hace click a una sugerencia")]),a("td",[e._v("sugerencia en la que se está haciendo click")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="input.md";t.default=r.exports},388:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{num1:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{num2:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{num3:5}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{num9:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num9,callback:function(e){t.num9=e},expression:"num9"}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{num4:1,num5:1,num6:1,num7:1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}}),t._v(" "),a("el-input-number",{attrs:{size:"medium"},model:{value:t.num5,callback:function(e){t.num5=e},expression:"num5"}}),t._v(" "),a("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(e){t.num6=e},expression:"num6"}}),t._v(" "),a("el-input-number",{attrs:{size:"mini"},model:{value:t.num7,callback:function(e){t.num7=e},expression:"num7"}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{num8:1}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num8,callback:function(e){t.num8=e},expression:"num8"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Input de valores numéricos con un rango personalizable.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Vincule una variable con "),a("code",[e._v("v-model")]),e._v(" en el elemento "),a("code",[e._v("<el-input-number>")]),e._v(" y estará listo.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" acepta un valor "),a("code",[e._v("boolean")]),e._v(", y si el valor es "),a("code",[e._v("true")]),e._v(", el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo "),a("code",[e._v("min")]),e._v(" para establecer el valor mínimo y un valor "),a("code",[e._v("max")]),e._v(" para establecer el valor máximo. Por defecto, el valor mínimo es "),a("code",[e._v("0")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Le permite definir el nivel de incremento de los saltos.")]),a("demo-block",[a("div",[a("p",[e._v("Añada el atributo "),a("code",[e._v("step")]),e._v(" para establecer el salto.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Add "),a("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num9: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num4"></el-input-number>\n <el-input-number size="medium" v-model="num5"></el-input-number>\n <el-input-number size="small" v-model="num6"></el-input-number>\n <el-input-number size="mini" v-model="num7"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("controls-position")]),e._v(" para decidir la posición de los botones de control.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The value of "),a("code",[e._v("precision")]),e._v(" must be a non negative integer and should not be less than the decimal places of "),a("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"posicion-de-los-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Posición de los controles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor vinculado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("el valor mínimo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("-Infinity")])])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("el valor maximo permitido")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[a("code",[e._v("Infinity")])])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("incremento (salto)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("precision")]),a("td",[e._v("precisión del valor del input")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del componente")]),a("td",[e._v("string")]),a("td",[e._v("large/small")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el componente esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("controls")]),a("td",[e._v("si se activan los botones de control")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("controls-position")]),a("td",[e._v("posición de los botones de control")]),a("td",[e._v("string")]),a("td",[e._v("right")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("lo mismo que "),a("code",[e._v("name")]),e._v(" en un input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("texto de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder in input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se produce cuando el valor cambia")]),a("td",[e._v("value after change")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se produce cuando el componente pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se produce cuando el componente obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el elemento actual")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("select")]),a("td",[e._v("selecciona el contenido del input")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="input-number.md";t.default=r.exports},391:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),t._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detalle")]),t._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,"max-height":"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Fecha",width:"150"}}),a._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),a._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}}),a._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),a.deleteRow(t.$index,a.tableData)}}},[a._v("\n Eliminar\n ")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de entrega"}},[a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{label:"Información de dirección"}},[a("el-table-column",{attrs:{prop:"state",label:"Estado",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ciudad",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",width:"300"}}),e._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Código postal",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),a("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Seleccionar segunda fila")]),t._v(" "),a("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo10":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Cambia el estado de selección de la segunda y tercera fila.")]),t._v(" "),a("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]}),"element-demo11":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]}),"element-demo12":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,a){return t[a.property]===e}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{on:{click:t.resetDateFilter}},[t._v("清除日期过滤器")]),t._v(" "),a("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Fecha",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),t._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección",formatter:t.formatter}}),t._v(" "),a("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo13":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData}},[n("el-table-column",{attrs:{label:"Fecha",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("i",{staticClass:"el-icon-time"}),a._v(" "),n("span",{staticStyle:{"margin-left":"10px"}},[a._v(a._s(e.row.date))])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:a._u([{key:"default",fn:function(e){return[n("el-popover",{attrs:{trigger:"hover",placement:"top"}},[n("p",[a._v("Name: "+a._s(e.row.name))]),a._v(" "),n("p",[a._v("Addr: "+a._s(e.row.address))]),a._v(" "),n("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[n("el-tag",{attrs:{size:"medium"}},[a._v(a._s(e.row.name))])],1)])]}}])}),a._v(" "),n("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:a._u([{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Editar")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Eliminar")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo14":n({},{data:function(){return{tableData:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData.filter(function(e){return!a.search||e.name.toLowerCase().includes(a.search.toLowerCase())})}},[n("el-table-column",{attrs:{label:"Date",prop:"date"}}),a._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}}),a._v(" "),n("el-table-column",{attrs:{align:"right"},scopedSlots:a._u([{key:"header",fn:function(e){return[n("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:a.search,callback:function(e){a.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[n("el-button",{attrs:{size:"mini"},on:{click:function(e){a.handleEdit(t.$index,t.row)}}},[a._v("Edit")]),a._v(" "),n("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){a.handleDelete(t.$index,t.row)}}},[a._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]}),"element-demo15":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[a("p",[t._v("Estado: "+t._s(e.row.state))]),t._v(" "),a("p",[t._v("Ciudad: "+t._s(e.row.city))]),t._v(" "),a("p",[t._v("Dirección: "+t._s(e.row.address))]),t._v(" "),a("p",[t._v("Código postal: "+t._s(e.row.zip))])]}}])}),t._v(" "),a("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),t._v(" "),a("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2)},staticRenderFns:[]}),"element-demo16":n({},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,a){a([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,border:"","row-key":"id"}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",sortable:"",width:"180"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load}},[a("el-table-column",{attrs:{prop:"date",label:"date",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo17":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,n=e.data,o=[];return t.forEach(function(t,e){if(0!==e){var a=n.map(function(e){return Number(e[t.property])});a.every(function(e){return isNaN(e)})?o[e]="N/A":o[e]="$ "+a.reduce(function(e,t){var a=Number(t);return isNaN(a)?e:e+t},0)}else o[e]="Costo total"}),o}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Costo 1 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Costo 2 ($)"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Costo 3 ($)"}})],1)]],2)},staticRenderFns:[]}),"element-demo18":n({},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,a=e.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Monto 3"}})],1),e._v(" "),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount1",label:"Monto 1"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount2",label:"Monto 2"}}),e._v(" "),a("el-table-column",{attrs:{prop:"amount3",label:"Monto 3"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo19":n({},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[a("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),a("el-table-column",{attrs:{prop:"date",label:"Fecha",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nombre",width:"180"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Dirección"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.")]),e._m(1),a("p",[e._v("La tabla básica es solo para mostrar datos.")]),a("demo-block",[a("div",[a("p",[e._v("Después de haber establecido el atributo "),a("code",[e._v("data")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" con un arreglo de objetos, puede usar la propiedad "),a("code",[e._v("prop")]),e._v(" (el correspondiente a la clave de un objeto dentro del arreglo "),a("code",[e._v("data")]),e._v(") en "),a("code",[e._v("el-table-column")]),e._v(" para insertar datos a las columnas de la tabla, y establecer el atributo "),a("code",[e._v("label")]),e._v(" para definir el nombre de la columna. También puede usar el atributo "),a("code",[e._v("width")]),e._v(" para establecer el ancho de las columnas.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v(" <template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n </template>\n\n <script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n <\/script>\n")])])])],2),e._m(2),a("p",[e._v("La tabla con franjas hace más fácil distinguir filas diferentes.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stripe")]),e._v(" también acepta un "),a("code",[e._v("Boolean")]),e._v(". Si se encuentra "),a("code",[e._v("true")]),e._v(", la tabla será con franjas.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n stripe\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo "),a("code",[e._v("border")]),e._v(" a "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n border\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v('Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.')]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("row-class-name")]),e._v(" en "),a("code",[e._v("el-table")]),e._v(" para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n :row-class-name=\"tableRowClassName\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n</template>\n\n<style>\n .el-table .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n</style>\n\n<script>\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", puede fijar la cabecera de la tabla sin agregar otro código.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n height=\"250\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("Cuando se tienen demasiadas columnas, puede fijar alguna de estas.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("fixed")]),e._v(" es utilizado en "),a("code",[e._v("el-table-column")]),e._v(", este acepta un "),a("code",[e._v("Boolean")]),e._v(". Si es "),a("code",[e._v("true")]),e._v(", la columna será fijada a la izquierda. También acepta dos tipos: "),a("code",[e._v("left")]),e._v(" y "),a("code",[e._v("right")]),e._v(", ambos indican donde debe ser fijada la columna.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Fecha\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"Estado\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"Ciudad\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Código postal\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n fixed=\"right\"\n label=\"Operaciones\"\n width=\"120\">\n <template slot-scope=\"scope\">\n <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detalle</el-button>\n <el-button type=\"text\" size=\"small\">Editar</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n handleClick() {\n console.log('click');\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.")]),a("demo-block",[a("div",[a("p",[e._v("Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n height=\"250\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Fecha\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"Estado\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"Ciudad\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Código postal\"\n width=\"120\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.")]),a("demo-block",[a("div",[a("p",[e._v("Al configurar el atributo "),a("code",[e._v("max-height")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(", tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n max-height=\"250\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Fecha\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"Estado\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"Ciudad\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Código postal\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n fixed=\"right\"\n label=\"Operaciones\"\n width=\"120\">\n <template slot-scope=\"scope\">\n <el-button\n @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n type=\"text\"\n size=\"small\">\n Eliminar\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesitas colocar "),a("code",[e._v("el-table-column")]),e._v(" dentro de un "),a("code",[e._v("el-table-column")]),e._v(", de esta forma lograrás agruparlas.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"150\">\n </el-table-column>\n <el-table-column label=\"Información de entrega\">\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"120\">\n </el-table-column>\n <el-table-column label=\"Información de dirección\">\n <el-table-column\n prop=\"state\"\n label=\"Estado\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"Ciudad\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Código postal\"\n width=\"120\">\n </el-table-column>\n </el-table-column>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(10),a("p",[e._v("La selección de una fila esta soportada.")]),a("demo-block",[a("div",[a("p",[e._v("La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo "),a("code",[e._v("highlight-current-row")]),e._v(". Un evento llamado "),a("code",[e._v("current-change")]),e._v(" será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: "),a("code",[e._v("currentRow")]),e._v(" y "),a("code",[e._v("oldCurrentRow")]),e._v(". Si necesita mostrar el índice de la fila, puede agregar un nuevo "),a("code",[e._v("el-table-column")]),e._v(" con el atributo "),a("code",[e._v("type")]),e._v(" asignado al "),a("code",[e._v("index")]),e._v(" y podrá ver el índice iniciando desde 1.")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n ref="singleTable"\n :data="tableData"\n highlight-current-row\n @current-change="handleCurrentChange"\n style="width: 100%">\n <el-table-column\n type="index"\n width="50">\n </el-table-column>\n <el-table-column\n property="date"\n label="Fecha"\n width="120">\n </el-table-column>\n <el-table-column\n property="name"\n label="Nombre"\n width="120">\n </el-table-column>\n <el-table-column\n property="address"\n label="Dirección">\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>\n <el-button @click="setCurrent()">Limpiar selección</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-03\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-04\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-01\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("También puede seleccionar múltiples filas.")]),a("demo-block",[a("div",[a("p",[e._v("Activar la selección múltiple es sencillo: Solo debe agregar a "),a("code",[e._v("el-table-column")]),e._v(" con su "),a("code",[e._v("type")]),e._v(" establecido en "),a("code",[e._v("selection")]),e._v(". Además de la selección múltiple, este ejemplo también utiliza "),a("code",[e._v("show-overflow-tooltip")]),e._v(": por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo "),a("code",[e._v("show-overflow-tooltip")]),e._v(", que acepta un valor "),a("code",[e._v("Boolean")]),e._v(". Cuando este está establecido en "),a("code",[e._v("true")]),e._v(", el contenido extra puede mostrar un "),a("em",[e._v("tooltip")]),e._v(" cuando se hace "),a("em",[e._v("hover")]),e._v(" sobre la celda.")])]),a("element-demo10",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n ref=\"multipleTable\"\n :data=\"tableData\"\n style=\"width: 100%\"\n @selection-change=\"handleSelectionChange\">\n <el-table-column\n type=\"selection\"\n width=\"55\">\n </el-table-column>\n <el-table-column\n label=\"Fecha\"\n width=\"120\">\n <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n </el-table-column>\n <el-table-column\n property=\"name\"\n label=\"Nombre\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n property=\"address\"\n label=\"Dirección\"\n show-overflow-tooltip>\n </el-table-column>\n </el-table>\n <div style=\"margin-top: 20px\">\n <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n <el-button @click=\"toggleSelection()\">Limpiar selección</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(12),a("p",[e._v("Ordena los datos para encontrar o comparar información rápidamente.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("sortable")]),e._v(" para ordenar los datos de una columna. Este acepta un "),a("code",[e._v("Boolean")]),e._v(" con un valor por defecto "),a("code",[e._v("false")]),e._v(". Establezca el atributo "),a("code",[e._v("default-sort")]),e._v(" para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice "),a("code",[e._v("sort-method")]),e._v(" o "),a("code",[e._v("sort-by")]),e._v(". Si lo que necesita es ordenar de forma remota desde backend, establezca "),a("code",[e._v("sortable")]),e._v(" a "),a("code",[e._v("custom")]),e._v(", y escuche el evento "),a("code",[e._v("sort-change")]),e._v(" de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado "),a("code",[e._v("formatter")]),e._v(" para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(". Puede disparar este de acuerdo a sus propias necesidades.")])]),a("element-demo11",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n :default-sort = \"{prop: 'date', order: 'descending'}\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n sortable\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n :formatter=\"formatter\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(13),a("p",[e._v("Filtra la tabla para encontrar la información que necesita.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("filters")]),e._v(" y "),a("code",[e._v("filter-method")]),e._v(" en "),a("code",[e._v("el-table-column")]),e._v(" haciendo esta columna filtrable. "),a("code",[e._v("filters")]),e._v(" es un arreglo, y "),a("code",[e._v("filter-method")]),e._v(" es una función que decide que filas se muestra. Esta tiene tres parámetros: "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("row")]),e._v(" y "),a("code",[e._v("column")]),e._v(".")])]),a("element-demo12",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n <el-table\n ref=\"filterTable\"\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n sortable\n width=\"180\"\n column-key=\"date\"\n :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n :filter-method=\"filterHandler\"\n >\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\"\n :formatter=\"formatter\">\n </el-table-column>\n <el-table-column\n prop=\"tag\"\n label=\"Etiqueta\"\n width=\"100\"\n :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n :filter-method=\"filterTag\"\n filter-placement=\"bottom-end\">\n <template slot-scope=\"scope\">\n <el-tag\n :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n disable-transitions>{{scope.row.tag}}</el-tag>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n resetDateFilter() {\n this.$refs.filterTable.clearFilter('date');\n },\n clearFilter() {\n this.$refs.filterTable.clearFilter();\n },\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n },\n filterHandler(value, row, column) {\n const property = column['property'];\n return row[property] === value;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(14),a("p",[e._v("Personalice la columna de la tabla para que pueda integrarse con otros componentes.")]),a("demo-block",[a("div",[a("p",[e._v("Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slots")]),e._v(".")])]),a("element-demo13",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData"\n style="width: 100%">\n <el-table-column\n label="Fecha"\n width="180">\n <template slot-scope="scope">\n <i class="el-icon-time"></i>\n <span style="margin-left: 10px">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column\n label="Nombre"\n width="180">\n <template slot-scope="scope">\n <el-popover trigger="hover" placement="top">\n <p>Name: {{ scope.row.name }}</p>\n <p>Addr: {{ scope.row.address }}</p>\n <div slot="reference" class="name-wrapper">\n <el-tag size="medium">{{ scope.row.name }}</el-tag>\n </div>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column\n label="Operaciones">\n <template slot-scope="scope">\n <el-button\n size="mini"\n @click="handleEdit(scope.$index, scope.row)">Editar</el-button>\n <el-button\n size="mini"\n type="danger"\n @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-03\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-04\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-01\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(15),a("p",[e._v("Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.")]),a("demo-block",[a("div",[a("p",[e._v("Puede personalizar el aspecto del encabezado con header "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),a("element-demo14",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n style="width: 100%">\n <el-table-column\n label="Date"\n prop="date">\n </el-table-column>\n <el-table-column\n label="Name"\n prop="name">\n </el-table-column>\n <el-table-column\n align="right">\n <template slot="header" slot-scope="scope">\n <el-input\n v-model="search"\n size="mini"\n placeholder="Type to search"/>\n </template>\n <template slot-scope="scope">\n <el-button\n size="mini"\n @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n <el-button\n size="mini"\n type="danger"\n @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\',\n }, {\n date: \'2016-05-04\',\n name: \'John\',\n address: \'No. 189, Grove St, Los Angeles\',\n }, {\n date: \'2016-05-01\',\n name: \'Morgan\',\n address: \'No. 189, Grove St, Los Angeles\',\n }, {\n date: \'2016-05-03\',\n name: \'Jessy\',\n address: \'No. 189, Grove St, Los Angeles\',\n }],\n search: \'\'\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n },\n }\n<\/script>\n')])])])],2),e._m(16),a("p",[e._v("Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.")]),a("demo-block",[a("div",[a("p",[e._v("Puede activar la fila expandible estableciendo la propiedad "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("expand")]),e._v(" y Scoped Slots. La plantilla para "),a("code",[e._v("el-table-column")]),e._v(" se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando "),a("code",[e._v("Scoped Slots")]),e._v(" en plantillas de columna personalizadas.")])]),a("element-demo15",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column type=\"expand\">\n <template slot-scope=\"props\">\n <p>Estado: {{ props.row.state }}</p>\n <p>Ciudad: {{ props.row.city }}</p>\n <p>Dirección: {{ props.row.address }}</p>\n <p>Código postal: {{ props.row.zip }}</p>\n </template>\n </el-table-column>\n <el-table-column\n label=\"Fecha\"\n prop=\"date\">\n </el-table-column>\n <el-table-column\n label=\"Nombre\"\n prop=\"name\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(17),a("demo-block",[a("div",[a("p",[e._v("You can display tree structure data。When using it, the prop "),a("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),a("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),a("code",[e._v("load")]),e._v(". Specify "),a("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children.")])]),a("element-demo16",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%;margin-bottom: 20px;\"\n border\n row-key=\"id\">\n <el-table-column\n prop=\"date\"\n label=\"日期\"\n sortable\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"name\"\n sortable\n width=\"180\">\n </el-table-column>\n </el-table>\n\n <el-table\n :data=\"tableData1\"\n style=\"width: 100%\"\n row-key=\"id\"\n border\n lazy\n :load=\"load\"\n >\n <el-table-column\n prop=\"date\"\n label=\"date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"name\"\n width=\"180\">\n </el-table-column>\n </el-table>\n</div>\n</template>\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu'\n }, {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu'\n }, {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n children: [{\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }, {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }]\n }, {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu'\n }],\n tableData1: [{\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu'\n }, {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu'\n }, {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n hasChildren: true\n }, {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu'\n }]\n }\n },\n methods: {\n load(tree, treeNode, resolve) {\n resolve([\n {\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }, {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }\n ])\n }\n },\n }\n<\/script>\n")])])])],2),e._m(18),a("p",[e._v("Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.")]),a("demo-block",[a("div",[a("p",[e._v("Puede agregar la fila de resumen configurando "),a("code",[e._v("show-summary")]),e._v(" a "),a("code",[e._v("true")]),e._v(". Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando "),a("code",[e._v("sum-text")]),e._v("), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método "),a("code",[e._v("summary-method")]),e._v(", que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.")])]),a("element-demo17",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData"\n border\n show-summary\n style="width: 100%">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre">\n </el-table-column>\n <el-table-column\n prop="amount1"\n sortable\n label="Monto 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n sortable\n label="Monto 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n sortable\n label="Monto 3">\n </el-table-column>\n </el-table>\n\n <el-table\n :data="tableData"\n border\n height="200"\n :summary-method="getSummaries"\n show-summary\n style="width: 100%; margin-top: 20px">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre">\n </el-table-column>\n <el-table-column\n prop="amount1"\n label="Costo 1 ($)">\n </el-table-column>\n <el-table-column\n prop="amount2"\n label="Costo 2 ($)">\n </el-table-column>\n <el-table-column\n prop="amount3"\n label="Costo 3 ($)">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: \'12987122\',\n name: \'Tom\',\n amount1: \'234\',\n amount2: \'3.2\',\n amount3: 10\n }, {\n id: \'12987123\',\n name: \'Tom\',\n amount1: \'165\',\n amount2: \'4.43\',\n amount3: 12\n }, {\n id: \'12987124\',\n name: \'Tom\',\n amount1: \'324\',\n amount2: \'1.9\',\n amount3: 9\n }, {\n id: \'12987125\',\n name: \'Tom\',\n amount1: \'621\',\n amount2: \'2.2\',\n amount3: 17\n }, {\n id: \'12987126\',\n name: \'Tom\',\n amount1: \'539\',\n amount2: \'4.1\',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = \'Costo total\';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = \'$ \' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = \'N/A\';\n }\n });\n\n return sums;\n }\n }\n };\n<\/script>\n')])])])],2),e._m(19),e._m(20),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("span-method")]),e._v(" para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual "),a("code",[e._v("row")]),e._v(", columna actual "),a("code",[e._v("column")]),e._v(", índice de fila actual "),a("code",[e._v("rowIndex")]),e._v(" y índice de columna actual "),a("code",[e._v("columnIndex")]),e._v(". El método debe devolver un arreglo de dos números, el primer número siendo "),a("code",[e._v("rowspan")]),e._v(" y el segundo "),a("code",[e._v("colspan")]),e._v(". También puede devolver un objeto con las propiedades "),a("code",[e._v("rowspan")]),e._v(" y "),a("code",[e._v("colspan")]),e._v(".")])]),a("element-demo18",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-table\n :data="tableData"\n :span-method="arraySpanMethod"\n border\n style="width: 100%">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre">\n </el-table-column>\n <el-table-column\n prop="amount1"\n sortable\n label="Monto 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n sortable\n label="Monto 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n sortable\n label="Monto 3">\n </el-table-column>\n </el-table>\n\n <el-table\n :data="tableData"\n :span-method="objectSpanMethod"\n border\n style="width: 100%; margin-top: 20px">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Nombre">\n </el-table-column>\n <el-table-column\n prop="amount1"\n label="Monto 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n label="Monto 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n label="Monto 3">\n </el-table-column>\n </el-table>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: \'12987122\',\n name: \'Tom\',\n amount1: \'234\',\n amount2: \'3.2\',\n amount3: 10\n }, {\n id: \'12987123\',\n name: \'Tom\',\n amount1: \'165\',\n amount2: \'4.43\',\n amount3: 12\n }, {\n id: \'12987124\',\n name: \'Tom\',\n amount1: \'324\',\n amount2: \'1.9\',\n amount3: 9\n }, {\n id: \'12987125\',\n name: \'Tom\',\n amount1: \'621\',\n amount2: \'2.2\',\n amount3: 17\n }, {\n id: \'12987126\',\n name: \'Tom\',\n amount1: \'539\',\n amount2: \'4.1\',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n<\/script>\n')])])])],2),e._m(21),e._m(22),a("demo-block",[a("div",[a("p",[e._v("Para personalizar el índice de la fila, utilice el atributo "),a("code",[e._v("index")]),e._v(" en "),a("code",[e._v("<el-table-column>")]),e._v(" con "),a("code",[e._v("type=index")]),e._v(". Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.")])]),a("element-demo19",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n type=\"index\"\n :index=\"indexMethod\">\n </el-table-column>\n <el-table-column\n prop=\"date\"\n label=\"Fecha\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Nombre\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Dirección\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }],\n }\n },\n methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n<\/script>\n")])])])],2),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33),e._m(34)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tablas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tablas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tablas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-franjas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con franjas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-estados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con estados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con cabecera fija")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas fijas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabla con columnas y cabecera fija.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando cabeceras de la tabla")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-unica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección única")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ordenamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ordenamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtros"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtros","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtros")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plantilla de columna personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table con cabecera personalizada")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-expandible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila expandible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fila-de-resumen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fila de resumen")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fusión de filas y columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Configurar "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")]),e._v(" le permite fusionar celdas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indice-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Índice personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede personalizar el índice de la fila con la propiedad "),a("code",[e._v("type=index")]),e._v(" de las columnas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos de la tabla")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("Altura de la tabla. Por defecto esta tiene un tamaño "),a("code",[e._v("auto")]),e._v(". Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos.")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max-height")]),a("td",[e._v("Altura máxima de la tabla. La altura de la tabla comienza desde "),a("code",[e._v("auto")]),e._v(" hasta que alcanza la altura máxima. El "),a("code",[e._v("max-height")]),e._v(" es medido en pixeles, lo mismo que "),a("code",[e._v("height")])]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("stripe")]),a("td",[e._v("especifica si la tabla será en franjas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si la tabla tiene bordes verticales")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de la tabla")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("especifica si el ancho de la columna se adapta automáticamente a su contenedor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-header")]),a("td",[e._v("especifica si la cabecera de la tabla es visible")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("highlight-current-row")]),a("td",[e._v("especifica si la fila actual es resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("current-row-key")]),a("td",[e._v("clave de la fila actual, un ajuste de propiedad única")]),a("td",[e._v("string,number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-style")]),a("td",[e._v("función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-class-name")]),a("td",[e._v("función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-row-style")]),a("td",[e._v("función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla")]),a("td",[e._v("Function({row, rowIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-class-name")]),a("td",[e._v("función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("header-cell-style")]),a("td",[e._v("función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla")]),a("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("row-key")]),a("td",[e._v("key of row data, used for optimizing rendering. Required if "),a("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),a("code",[e._v("user.info.id")]),e._v(", but "),a("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),a("code",[e._v("Function")]),e._v(" should be used.")]),a("td",[e._v("Function(row)/String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto mostrado cuando no existen datos. Puede personalizar esta área con "),a("code",[e._v('slot="empty"')])]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("No Data")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna "),a("code",[e._v('type="expand"')])]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-row-keys")]),a("td",[e._v("establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer "),a("code",[e._v("row-key")]),e._v(" antes de usar esta propiedad")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td")]),a("tr",[a("td",[e._v("default-sort")]),a("td",[e._v("establece la columna y orden por defecto. La propiedad "),a("code",[e._v("prop")]),e._v(" es utilizada para establecer la columna de ordenamiento por defecto, la propiedad "),a("code",[e._v("order")]),e._v(" es utilizada para definir el tipo de orden por defecto")]),a("td",[e._v("Object")]),a("td",[a("code",[e._v("order")]),e._v(": ascending, descending")]),a("td",[e._v("if "),a("code",[e._v("prop")]),e._v(" is set, and "),a("code",[e._v("order")]),e._v(" is not set, then "),a("code",[e._v("order")]),e._v(" is default to ascending")])]),a("tr",[a("td",[e._v("tooltip-effect")]),a("td",[e._v("propiedad "),a("code",[e._v("effect")]),e._v(" para efectos en tooltip")]),a("td",[e._v("String")]),a("td",[e._v("dark/light")]),a("td")]),a("tr",[a("td",[e._v("show-summary")]),a("td",[e._v("especifica si debe mostrar la fila de resumen")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sum-text")]),a("td",[e._v("texto a mostrar para la primer columna de la fila de resumen")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Sum")])]),a("tr",[a("td",[e._v("summary-method")]),a("td",[e._v("método personalizado para resumen")]),a("td",[e._v("Function({ columns, data })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("span-method")]),a("td",[e._v("método que devuelve "),a("em",[e._v("rowspan")]),e._v(" y "),a("em",[e._v("colspan")])]),a("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("select-on-indeterminate")]),a("td",[e._v("controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("horizontal indentation of tree data")]),a("td",[e._v("Number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("whether to lazy loading data")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("method for loading child row data, only works when "),a("code",[e._v("lazy")]),e._v(" is true")]),a("td",[e._v("Function({ row, treeNode, resolve })")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una fila")]),a("td",[e._v("selection, row")])]),a("tr",[a("td",[e._v("select-all")]),a("td",[e._v("se dispara cando el usuario hace clic al "),a("em",[e._v("checkbox")]),e._v(" (caja de selección) en una cabecera de la tabla")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("selection-change")]),a("td",[e._v("se dispara cuando selección cambia")]),a("td",[e._v("selection")])]),a("tr",[a("td",[e._v("cell-mouse-enter")]),a("td",[e._v("se dispara cuando se desplaza dentro de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-mouse-leave")]),a("td",[e._v("se dispara cuando se desplaza fuera de una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-click")]),a("td",[e._v("se dispara cuando se hace clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("cell-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una celda")]),a("td",[e._v("row, column, cell, event")])]),a("tr",[a("td",[e._v("row-click")]),a("td",[e._v("se dispara cuando se hace clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("row-dblclick")]),a("td",[e._v("se dispara cuando se hace doble clic en una fila")]),a("td",[e._v("row, column, event")])]),a("tr",[a("td",[e._v("header-click")]),a("td",[e._v("se dispara cuando se hace click en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("header-contextmenu")]),a("td",[e._v("se dispara cuando el usuario hace clic derecho en una cabecera de columna")]),a("td",[e._v("column, event")])]),a("tr",[a("td",[e._v("sort-change")]),a("td",[e._v("se dispara cuando el ordenamiento de la tabla cambia")]),a("td",[e._v("{ column, prop, order }")])]),a("tr",[a("td",[e._v("filter-change")]),a("td",[e._v("clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada")]),a("td",[e._v("filters")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("se dispara cuando la fila actual cambia")]),a("td",[e._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[e._v("header-dragend")]),a("td",[e._v("se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera.")]),a("td",[e._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[e._v("expand-change")]),a("td",[e._v("se dispara cuando el usuario expande o colapsa una fila")]),a("td",[e._v("row, expandedRows")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("clearSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, limpiar selección")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("toggleRowSelection")]),a("td",[e._v("utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada")]),a("td",[e._v("row, selected")])]),a("tr",[a("td",[e._v("toggleAllSelection")]),a("td",[e._v("usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("toggleRowExpansion")]),a("td",[e._v("utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada")]),a("td",[e._v("row, expanded")])]),a("tr",[a("td",[e._v("setCurrentRow")]),a("td",[e._v("utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección")]),a("td",[e._v("row")])]),a("tr",[a("td",[e._v("clearSort")]),a("td",[e._v("limpiar ordenamiento, restaurar datos a orden original")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearFilter")]),a("td",[e._v("Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.")]),a("td",[e._v("columnKey")])]),a("tr",[a("td",[e._v("doLayout")]),a("td",[e._v("refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort")]),a("td",[e._v("Ordenar tabla manualmente. La propiedad "),a("code",[e._v("prop")]),e._v(" se utiliza para establecer la columna de ordenación, la propiedad "),a("code",[e._v("order")]),e._v(" se utiliza para establecer el orden.")]),a("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("append")]),a("td",[e._v("El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar "),a("em",[e._v("scroll")]),e._v(" infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos para las columnas de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de la columna. Si se establece a "),a("code",[e._v("selection")]),e._v(", la columna puede mostrar un "),a("em",[e._v("checkbox")]),e._v(". Si se establece a "),a("code",[e._v("index")]),e._v(", la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a "),a("code",[e._v("expand")]),e._v(", la columna puede mostrar un ícono para expandir.")]),a("td",[e._v("string")]),a("td",[e._v("selection/index/expand")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("index")]),a("td",[e._v("personalice los índices para cada fila, funciona en columnas con "),a("code",[e._v("type=index")])]),a("td",[e._v("number, Function(index)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("column-key")]),a("td",[e._v("clave de la columna. Si necesita utilizar el evento "),a("code",[e._v("filter-change")]),e._v(", necesita el atributo para identificar cual columna está siendo filtrada")]),a("td",[e._v("string")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("prop")]),a("td",[e._v("nombre del campo. También puede usar su alias: "),a("code",[e._v("property")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("min-width")]),a("td",[e._v("ancho mínimo de la columna. Columnas con "),a("code",[e._v("width")]),e._v(" tienen un ancho fijo, mientras que las columnas con "),a("code",[e._v("min-width")]),e._v(" tienen un ancho que se distribuye en proporción.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("fixed")]),a("td",[e._v("especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es "),a("code",[e._v("true")])]),a("td",[e._v("string/boolean")]),a("td",[e._v("true/left/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-header")]),a("td",[e._v("Función de renderizado para la cabecera de la tabla de esta columna")]),a("td",[e._v("Function(h, { column, $index })")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sortable")]),a("td",[e._v("especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo "),a("code",[e._v("custom")]),e._v(" y escucha al evento de tabla "),a("code",[e._v("sort-change")])]),a("td",[e._v("boolean, string")]),a("td",[e._v("true, false, custom")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("sort-method")]),a("td",[e._v("método de ordenamiento, funciona cuando "),a("code",[e._v("sortable")]),e._v(" está en "),a("code",[e._v("true")]),e._v(". Debería devolver un número, al igual que Array.sort")]),a("td",[e._v("Function(a, b)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-by")]),a("td",[e._v("especifica por cual propiedad de va a ordenar, funciona cuando "),a("code",[e._v("sortable")]),e._v(" es "),a("code",[e._v("true")]),e._v(" y "),a("code",[e._v("sort-method")]),e._v(" es "),a("code",[e._v("undefined")]),e._v(". Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual")]),a("td",[e._v("Function(row, index)/String/Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sort-orders")]),a("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),a("code",[e._v("sortable")]),e._v(" is "),a("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),a("td",[e._v("array")]),a("td",[e._v("the elements in the array need to be one of the following: "),a("code",[e._v("ascending")]),e._v(", "),a("code",[e._v("descending")]),e._v(" and "),a("code",[e._v("null")]),e._v(" (restores to the original order)")]),a("td",[e._v("['ascending', 'descending', null]")])]),a("tr",[a("td",[e._v("resizable")]),a("td",[e._v("especifica si el ancho de la columna puede ser redimensionado, funciona cuando "),a("code",[e._v("border")]),e._v(" de "),a("code",[e._v("el-table")]),e._v(" está en "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("función que formatea el contenido de la celda")]),a("td",[e._v("Function(row, column, cellValue, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-overflow-tooltip")]),a("td",[e._v("especifica si el "),a("em",[e._v("tooltip")]),e._v(" debe ocultarse o mostrarse al hacer "),a("em",[e._v("hover")]),e._v(" en la celda")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("string")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")])]),a("tr",[a("td",[e._v("header-align")]),a("td",[e._v("alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior.")]),a("td",[e._v("String")]),a("td",[e._v("left/center/right")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("class-name")]),a("td",[e._v("nombre de clase de la celda en la columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-class-name")]),a("td",[e._v("nombre de clase de la etiqueta de esta columna")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("selectable")]),a("td",[e._v("función que determina si una cierta fila puede ser seleccionada, funciona cuando "),a("code",[e._v("type")]),e._v(" esta en "),a("code",[e._v("selection")])]),a("td",[e._v("Function(row, index)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-selection")]),a("td",[e._v("especifica si se reserva la selección después de actualizar los datos, funciona cuando "),a("code",[e._v("type")]),e._v(" está en "),a("code",[e._v("selection")]),e._v(". Note that "),a("code",[e._v("row-key")]),e._v(" is required for this to work")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filters")]),a("td",[e._v("un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, "),a("code",[e._v("text")]),e._v(" y "),a("code",[e._v("value")]),e._v(" son obligatorios")]),a("td",[e._v("Array[{ text, value }]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-placement")]),a("td",[e._v("colocación para el menu desplegable del filtro")]),a("td",[e._v("String")]),a("td",[e._v("same as Tooltip's "),a("code",[e._v("placement")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-multiple")]),a("td",[e._v("especifica si el filtrado de datos soporta múltiples opciones")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("método para filtrado de datos. Si "),a("code",[e._v("filter-multiple")]),e._v(" está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve "),a("code",[e._v("true")])]),a("td",[e._v("Function(value, row, column)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filtered-value")]),a("td",[e._v("el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con "),a("code",[e._v("render-header")])]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index }")])]),a("tr",[a("td",[e._v("header")]),a("td",[e._v("Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index }")])])])])}],!1,null,null,null);r.options.__file="table.md";t.default=r.exports},392:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:!0,value2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:!0,value4:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}}),t._v(" "),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value5:"100"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-tooltip",{attrs:{content:"Switch value: "+t.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value6:!0,value7:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-switch",{attrs:{disabled:""},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}}),t._v(" "),a("el-switch",{attrs:{disabled:""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Switch es utilizdo para realizar cambios entre dos estados opuestos.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Enlace "),a("code",[e._v("v-model")]),e._v(" a una variable de tipo "),a("code",[e._v("Boolean")]),e._v(". Los atributos "),a("code",[e._v("active-color")]),e._v(" y "),a("code",[e._v("inactive-color")]),e._v(" deciden el color de fondo en cada estado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n v-model="value2"\n active-color="#13ce66"\n inactive-color="#ff4949">\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede agregar los atributos "),a("code",[e._v("active-text")]),e._v(" y "),a("code",[e._v("inactive-text")]),e._v(" para mostrar los textos.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n v-model="value3"\n active-text="Pay by month"\n inactive-text="Pay by year">\n</el-switch>\n<el-switch\n style="display: block"\n v-model="value4"\n active-color="#13ce66"\n inactive-color="#ff4949"\n active-text="Pay by month"\n inactive-text="Pay by year">\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede establecer los atributos "),a("code",[e._v("active-value")]),e._v(" y "),a("code",[e._v("inactive-value")]),e._v(". Ambos reciben valores de tipo "),a("code",[e._v("Boolean")]),e._v(", "),a("code",[e._v("String")]),e._v(" o "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value5" placement="top">\n <el-switch\n v-model="value5"\n active-color="#13ce66"\n inactive-color="#ff4949"\n active-value="100"\n inactive-value="0">\n </el-switch>\n</el-tooltip>\n\n<script>\n export default {\n data() {\n return {\n value5: \'100\'\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("disabled")]),e._v(" desactiva el componente Switch.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n v-model="value6"\n disabled>\n</el-switch>\n<el-switch\n v-model="value7"\n disabled>\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),a("p",[e._v("después de cambiar")]),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-de-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto de descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipos de valores extendidos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Switch esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del componente Switch")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("40")])]),a("tr",[a("td",[e._v("active-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("on")]),e._v(", sobreescribe "),a("code",[e._v("active-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-icon-class")]),a("td",[e._v("nombre de la clase del icono mostrado en el estado "),a("code",[e._v("off")]),e._v(", sobreescribe "),a("code",[e._v("inactive-text")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inactive-text")]),a("td",[e._v("texto mostrado en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("active-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inactive-value")]),a("td",[e._v("cambia su valor cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("active-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("on")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])]),a("tr",[a("td",[e._v("inactive-color")]),a("td",[e._v("color de fondo cuando se encuentra en el estado "),a("code",[e._v("off")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C0CCDA")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("nombre de entrada del componente Switch")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("si se debe lanzar la validación de formulario")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametro")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco al componente Switch")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="switch.md";t.default=r.exports},397:function(e,t,a){"use strict";a.r(t);var n={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e})({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("i",{staticClass:"el-icon-edit"}),e._v(" "),a("i",{staticClass:"el-icon-share"}),e._v(" "),a("i",{staticClass:"el-icon-delete"}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")])],1)},staticRenderFns:[]})}},o=a(0),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("section",{staticClass:"content element-doc"},[t._m(0),a("p",[t._v("Element proporciona un conjunto de iconos propios.")]),t._m(1),t._m(2),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),a("ul",{staticClass:"icon-list"},t._l(["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"],function(e){return a("li",{key:e},[a("span",[a("i",{class:"el-icon-"+e}),a("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Simplemente asigna el nombre de la clase a "),a("code",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Iconos")])}],!1,null,null,null);l.options.__file="icon.md";t.default=l.exports},408:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),a("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),a("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),a("div",{staticStyle:{margin:"20px"}}),t._v(" "),a("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){var n=this;return{ruleForm2:{pass:"",checkPass:"",age:""},rules2:{pass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password")):(""!==n.ruleForm2.checkPass&&n.$refs.ruleForm2.validateField("checkPass"),a())},trigger:"blur"}],checkPass:[{validator:function(e,t,a){""===t?a(new Error("Please input the password again")):t!==n.ruleForm2.pass?a(new Error("Two inputs don't match!")):a()},trigger:"blur"}],age:[{validator:function(e,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm2,"status-icon":"",rules:t.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.pass,callback:function(e){t.$set(t.ruleForm2,"pass",e)},expression:"ruleForm2.pass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm2.checkPass,callback:function(e){t.$set(t.ruleForm2,"checkPass",e)},expression:"ruleForm2.checkPass"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:t.ruleForm2.age,callback:function(e){t.$set(t.ruleForm2,"age",t._n(e))},expression:"ruleForm2.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm2")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("ruleForm2")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:a.dynamicValidateForm,"label-width":"120px"}},[n("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[n("el-input",{model:{value:a.dynamicValidateForm.email,callback:function(e){a.$set(a.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),a._v(" "),a._l(a.dynamicValidateForm.domains,function(t,e){return n("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[n("el-input",{model:{value:t.value,callback:function(e){a.$set(t,"value",e)},expression:"domain.value"}}),n("el-button",{on:{click:function(e){e.preventDefault(),a.removeDomain(t)}}},[a._v("Delete")])],1)}),a._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){a.submitForm("dynamicValidateForm")}}},[a._v("Submit")]),a._v(" "),n("el-button",{on:{click:a.addDomain}},[a._v("New domain")]),a._v(" "),n("el-button",{on:{click:function(e){a.resetForm("dynamicValidateForm")}}},[a._v("Reset")])],1)],2)],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),a("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),a("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En cada componente "),a("code",[e._v("form")]),e._v(", necesita un campo "),a("code",[e._v("form-item")]),e._v(" para que sea el contenedor del item.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n <el-form-item label="Activity name">\n <el-input v-model="form.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="form.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery">\n <el-switch v-model="form.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="form.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="form.resource">\n <el-radio label="Sponsor"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input type="textarea" v-model="form.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n form: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n }\n }\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("p",[e._v("Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("inline")]),e._v(" como "),a("code",[e._v("true")]),e._v(" y el formulario sera inline.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item label="Approved by">\n <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="formInline.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Query</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n formInline: {\n user: \'\',\n region: \'\'\n }\n }\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("label-position")]),e._v(" decide cómo se alinean las etiquetas, puede estar "),a("code",[e._v("top")]),e._v(" o "),a("code",[e._v("left")]),e._v(". Cuando se establece en "),a("code",[e._v("top")]),e._v(", las etiquetas se colocarán en la parte superior del campo de formulario.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">Left</el-radio-button>\n <el-radio-button label="right">Right</el-radio-button>\n <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n <el-form-item label="Name">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n labelPosition: \'right\',\n formLabelAlign: {\n name: \'\',\n region: \'\',\n type: \'\'\n }\n };\n }\n }\n<\/script>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que añadir el atributo "),a("code",[e._v("rules")]),e._v(" en el componente "),a("code",[e._v("Form")]),e._v(", pasar las reglas de validación y establecer el atributo "),a("code",[e._v("prop")]),e._v(" para "),a("code",[e._v("Form-Item")]),e._v(" como una clave específica que necesita ser validada. Ver más información en "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Activity name" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone" prop="region">\n <el-select v-model="ruleForm.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery" prop="delivery">\n <el-switch v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="Sponsorship"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n ruleForm: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n },\n rules: {\n name: [\n { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n ],\n region: [\n { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n ],\n date1: [\n { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n ],\n date2: [\n { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n ],\n type: [\n { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n ],\n resource: [\n { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n ],\n desc: [\n { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(9),a("p",[e._v("Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.")]),a("demo-block",[a("div",[a("p",[e._v("Aquí utilizamos el "),a("code",[e._v("status-icon")]),e._v(" para reflejar el resultado de la validación como un icono.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Password" prop="pass">\n <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Confirm" prop="checkPass">\n <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Age" prop="age">\n <el-input v-model.number="ruleForm2.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error(\'Please input the age\'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error(\'Please input digits\'));\n } else {\n if (value < 18) {\n callback(new Error(\'Age must be greater than 18\'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === \'\') {\n callback(new Error(\'Please input the password\'));\n } else {\n if (this.ruleForm2.checkPass !== \'\') {\n this.$refs.ruleForm2.validateField(\'checkPass\');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === \'\') {\n callback(new Error(\'Please input the password again\'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error(\'Two inputs don\\\'t match!\'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: \'\',\n checkPass: \'\',\n age: \'\'\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: \'blur\' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: \'blur\' }\n ],\n age: [\n { validator: checkAge, trigger: \'blur\' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(10),e._m(11),a("demo-block",[a("div",[a("p",[e._v("Además de pasar todas las reglas de validación al mismo tiempo en el componente "),a("code",[e._v("form")]),e._v(", también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n <el-form-item\n prop="email"\n label="Email"\n :rules="[\n { required: true, message: \'Please input email address\', trigger: \'blur\' },\n { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n ]"\n >\n <el-input v-model="dynamicValidateForm.email"></el-input>\n </el-form-item>\n <el-form-item\n v-for="(domain, index) in dynamicValidateForm.domains"\n :label="\'Domain\' + index"\n :key="domain.key"\n :prop="\'domains.\' + index + \'.value\'"\n :rules="{\n required: true, message: \'domain can not be null\', trigger: \'blur\'\n }"\n >\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n <el-button @click="addDomain">New domain</el-button>\n <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n dynamicValidateForm: {\n domains: [{\n key: 1,\n value: \'\'\n }],\n email: \'\'\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1);\n }\n },\n addDomain() {\n this.dynamicValidateForm.domains.push({\n key: Date.now(),\n value: \'\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(12),a("demo-block",[a("div",[a("p",[e._v("La validacion numerica necesita un modificador "),a("code",[e._v(".number")]),e._v(" añadido en el enlace "),a("code",[e._v("v-model")]),e._v(" de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n <el-form-item\n label="age"\n prop="age"\n :rules="[\n { required: true, message: \'age is required\'},\n { type: \'number\', message: \'age must be a number\'}\n ]"\n >\n <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n numberValidateForm: {\n age: \'\'\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),a("demo-block",[a("div",[a("p",[e._v("Aún así, puede ajustar el "),a("code",[e._v("size")]),e._v(" de cada componente si no desea que herede su tamaño de From o FormItem.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n <el-form-item label="Activity name">\n <el-input v-model="sizeForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="sizeForm.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="sizeForm.type">\n <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="sizeForm.resource" size="medium">\n <el-radio border label="Sponsor"></el-radio>\n <el-radio border label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item size="large">\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n\n<script>\n export default {\n data() {\n return {\n sizeForm: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n }\n };\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n };\n<\/script>\n')])])])],2),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Form consiste en "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("radio")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("checkbox")]),e._v(", etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Incluye todo tipo de entradas, tales como "),a("code",[e._v("input")]),e._v(", "),a("code",[e._v("select")]),e._v(", "),a("code",[e._v("radio")]),e._v(" y "),a("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" reglamenta que")]),a("blockquote",[a("p",[a("i",[e._v("Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar "),a("b",[e._v("Enter")]),e._v(" en ese campo como una solicitud para enviar el formulario.")])])]),a("p",[e._v("Para prevenir este comportamiento, puede agregar "),a("code",[e._v("@submit.native.prevent")]),e._v(" on "),a("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulario-inline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulario inline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alineamiento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alineamiento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El componente "),a("code",[e._v("form")]),e._v(" le permite verificar sus datos, ayudándole a encontrar y corregir errores.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Reglas personalizadas de validación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("See more advanced usage of validation rules at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eliminar o agregar validaciones dinamicamente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validacion-numerica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validación numerica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Cuando un "),a("code",[e._v("el-form-item")]),e._v(" está anidado en otro "),a("code",[e._v("el-form-item")]),e._v(", su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese "),a("code",[e._v("el-form-item")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamano-del-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaño del control")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Todos los componentes de un formulario heredan su atributo "),a("code",[e._v("size")]),e._v(". De manera similar, FormItem también tiene un atributo "),a("code",[e._v("size")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("model")]),a("td",[e._v("Datos del componente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("Reglas de validación")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("inline")]),a("td",[e._v("Si el form es inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("label-position")]),a("td",[e._v("Posicion de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("left / right / top")]),a("td",[e._v("right")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-suffix")]),a("td",[e._v("sufijo de la etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-required-asterisk")]),a("td",[e._v("si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("si desea visualizar el mensaje de error inline con la posición del form item")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status-icon")]),a("td",[e._v("si desea visualizar un icono que indique el resultado de la validación")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("validate-on-rule-change")]),a("td",[e._v("si se dispara la validacion cuando el prop "),a("code",[e._v("rules")]),e._v(" cambia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("el tamaño de los componentes en este form")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se desactivan todos los componentes del formulario. Si esta en "),a("code",[e._v("true")]),e._v(" no puede ser cambiado por el prop "),a("code",[e._v("disabled")]),e._v(" individual de los componentes.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return")]),a("td",[e._v("Function(callback: Function(boolean, object))")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.")]),a("td",[e._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[e._v("resetFields")]),a("td",[e._v("restablece todos los campos y elimina el resultado de validación")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("validate")]),a("td",[e._v("se dispara después de validar un item del formulario")]),a("td",[e._v("la propiedad ("),a("code",[e._v("prop name")]),e._v(") nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("prop")]),a("td",[e._v("un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio.")]),a("td",[e._v("string")]),a("td",[e._v("Clave del modelo que se ha pasado a "),a("code",[e._v("form")])]),a("td")]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label-width")]),a("td",[e._v("ancho de la etiqueta, e.g. '50px'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("required")]),a("td",[e._v("si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("rules")]),a("td",[e._v("reglas de validacion del form")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-message")]),a("td",[e._v("si mostrar o no el mensaje de error")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("inline-message")]),a("td",[e._v("mensaje de validación estilo inline")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("Tamaño de los componentes en este form item")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido del Form Item")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("contenido de la etiqueta")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("error")]),a("td",[e._v("Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-metodo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Metodo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("resetField")]),a("td",[e._v("restablecer campo actual y eliminar resultado de validación")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearValidate")]),a("td",[e._v("elimina el estado de la validacion de un campo")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="form.md";t.default=r.exports},412:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{methods:{handleClick:function(){alert("button click")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n Dropdown List\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{on:{command:e.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n Default\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n Medium\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n Small\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n Mini\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("Action 1")]),e._v(" "),a("el-dropdown-item",[e._v("Action 2")]),e._v(" "),a("el-dropdown-item",[e._v("Action 3")]),e._v(" "),a("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Menú conmutable para visualizar listas de enlaces y acciones.")]),e._m(1),a("p",[e._v("Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n')])])])],2),e._m(2),a("p",[e._v("Utilizando un botón para activar la lista desplegable.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("split-button")]),e._v(" para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n <el-button type="primary">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n Dropdown List\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n<script>\n export default {\n methods: {\n handleClick() {\n alert(\'button click\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Haga clic en el elemento detonante o sobre él.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("trigger")]),e._v(". Por defecto, es "),a("code",[e._v("hover")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n <el-col :span="12">\n <span class="demonstration">hover to trigger</span>\n <el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n <el-col :span="12">\n <span class="demonstration">click to trigger</span>\n <el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n</el-row>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando "),a("code",[e._v("hide-on-click")]),e._v(" como false.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n')])])])],2),e._m(6),a("p",[e._v("Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.")]),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="a">Action 1</el-dropdown-item>\n <el-dropdown-item command="b">Action 2</el-dropdown-item>\n <el-dropdown-item command="c">Action 3</el-dropdown-item>\n <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n<script>\n export default {\n methods: {\n handleCommand(command) {\n this.$message(\'click on item \' + command);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(7),a("p",[e._v("Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("size")]),e._v(" para establecer tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n Default\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n Medium\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n Small\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n Mini\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"elemento-detonante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Elemento detonante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"como-detonar-el-evento"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cómo detonar el evento")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ocultamiento-del-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ocultamiento del menú")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use "),a("code",[e._v("hide-on-click")]),e._v(" para definir si el menú se cierra al hacer clic.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evento-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evento-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Evento command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón de menú, consulte Componente"),a("code",[e._v("Button")]),e._v(", sólo funciona cuando "),a("code",[e._v("split-button")]),e._v(" es true.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del menú, también funciona en "),a("code",[e._v("split-button")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("split-button")]),a("td",[e._v("si se visualiza un grupo de botones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("colocación del menú")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[e._v("bottom-end")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("cómo detonar")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("hide-on-click")]),a("td",[e._v("si se oculta el menú después de hacer clic en el elemento")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-timeout")]),a("td",[e._v("Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("250")])]),a("tr",[a("td",[e._v("hide-timeout")]),a("td",[e._v("Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara "),a("code",[e._v("hover")]),e._v(")")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("150")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),a("code",[e._v("<span>, <button> etc.")]),e._v(") or "),a("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),a("tr",[a("td",[e._v("dropdown")]),a("td",[e._v("content of the Dropdown Menu, usually a "),a("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("si "),a("code",[e._v("split-button")]),e._v(" es "),a("code",[e._v("true")]),e._v(", se activa al hacer clic en el botón izquierdo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("command")]),a("td",[e._v("activa cuando se hace clic en un elemento desplegable")]),a("td",[e._v("el comando enviado desde el elemento desplegable")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se activa cuando aparece/desaparece el desplegable")]),a("td",[e._v("true cuando aparece, y false de otro modo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("command")]),a("td",[e._v("un comando que se enviará al "),a("code",[e._v("command")]),e._v(" callback del Dropdown")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el elemento está desactivado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("divided")]),a("td",[e._v("si se visualiza un divisor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dropdown.md";t.default=r.exports},416:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),e._v(" "),a("el-step",{attrs:{title:"Step 2"}}),e._v(" "),a("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.")]),e._m(1),a("p",[e._v("Barra de pasos simple.")]),a("demo-block",[a("div",[a("p",[e._v("Defina el atributo "),a("code",[e._v("active")]),e._v(" con un valor de tipo "),a("code",[e._v("Number")]),e._v(", que indica el índice de pasos y comienza desde 0. Puede definir el atributo "),a("code",[e._v("space")]),e._v(" cuando es necesario fijar el ancho del paso que acepta el tipo "),a("code",[e._v("Boolean")]),e._v(". La unidad del atributo "),a("code",[e._v("space")]),e._v(" es px. Si no está configurado, es responsive. La configuración del atributo "),a("code",[e._v("finish-status")]),e._v(" puede cambiar el estado de los pasos completados.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Muestra el estado del step para cada paso.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice el atributo "),a("code",[e._v("title")]),e._v(" para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n <el-step title="Done"></el-step>\n <el-step title="Processing"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),a("p",[e._v("El título y la descripción pueden estar centrados.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),a("p",[e._v("Puede poner una descripción para cada paso.")]),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),a("p",[e._v("En la barra de pasos se pueden utilizar diversos iconos personalizados.")]),a("demo-block",[a("div",[a("p",[e._v("El icono se define mediante la propiedad "),a("code",[e._v("icon")]),e._v(". Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n <el-step title="Step 1" icon="el-icon-edit"></el-step>\n <el-step title="Step 2" icon="el-icon-upload"></el-step>\n <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),a("p",[e._v("Step bar vertical.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo tiene que fijar el atributo "),a("code",[e._v("direction")]),e._v(" a "),a("code",[e._v("vertical")]),e._v(" en el elemento "),a("code",[e._v("el-steps")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n <el-steps direction="vertical" :active="1">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n <el-step title="Step 1" icon="el-icon-edit"></el-step>\n <el-step title="Step 2" icon="el-icon-upload"></el-step>\n <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n <el-step title="Step 1" ></el-step>\n <el-step title="Step 2" ></el-step>\n <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-el-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con el status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Step bar simple, donde se ignorará "),a("code",[e._v("align-center")]),e._v(", "),a("code",[e._v("description")]),e._v(", "),a("code",[e._v("direction")]),e._v(" y "),a("code",[e._v("space")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("space")]),a("td",[e._v("el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.")]),a("td",[e._v("number / string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de visualización")]),a("td",[e._v("string")]),a("td",[e._v("vertical/horizontal")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("active")]),a("td",[e._v("actual paso de activación")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("process-status")]),a("td",[e._v("status del paso actual")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("process")])]),a("tr",[a("td",[e._v("finish-status")]),a("td",[e._v("status del paso final")]),a("td",[e._v("string")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("finish")])]),a("tr",[a("td",[e._v("align-center")]),a("td",[e._v("centrado de título y descripción")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("simple")]),a("td",[e._v("si aplicar un tema simple")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("descripción del paso")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icono del paso")]),a("td",[e._v("nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre")]),a("td",[e._v("string")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual. Se configurará automáticamente mediante Steps si no está configurado.")]),a("td",[e._v("wait / process / finish / error / success")]),a("td",[e._v("-")]),a("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("icon")]),a("td",[e._v("Icono personalizado")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Titulo del paso")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("Descripcion del paso")])])])])}],!1,null,null,null);r.options.__file="steps.md";t.default=r.exports},417:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[a("span",[t._v("This is a message")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[a("el-table",{attrs:{data:t.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[a("el-form",{attrs:{model:t.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),a("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{outerVisible:!1,innerVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{centerDialogVisible:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),a("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[a("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Informar a usuarios preservando el estado de la página actual.")]),e._m(1),a("p",[e._v("Dialog abre una caja de diálogo, y es bastante personalizable.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("visible")]),e._v(" con un booleano, y el Dialog se muestra cuando es "),a("code",[e._v("true")]),e._v(". El diálogo tiene dos partes: "),a("code",[e._v("body")]),e._v(" y "),a("code",[e._v("footer")]),e._v(", este último requiere un slot llamado "),a("code",[e._v("footer")]),e._v(". El atributo "),a("code",[e._v("title")]),e._v(" es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza "),a("code",[e._v("before-close")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n title="Tips"\n :visible.sync="dialogVisible"\n width="30%"\n :before-close="handleClose">\n <span>This is a message</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm(\'Are you sure to close this dialog?\')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("p",[e._v("El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\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-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="Promotion name" :label-width="formLabelWidth">\n <el-input v-model="form.name" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Zones" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="Please select a zone">\n <el-option label="Zone No.1" value="shanghai"></el-option>\n <el-option label="Zone No.2" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n gridData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-03\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n },\n formLabelWidth: \'120px\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Si un diálogo está anidado en otro diálogo, se requiere append-to-body.")]),a("demo-block",[a("div",[a("p",[e._v("Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca "),a("code",[e._v("append-to-body")]),e._v(" del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n \n <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n <el-dialog\n width="30%"\n title="Inner Dialog"\n :visible.sync="innerVisible"\n append-to-body>\n </el-dialog>\n <div slot="footer" class="dialog-footer">\n <el-button @click="outerVisible = false">Cancel</el-button>\n <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n </div>\n </el-dialog>\n</template>\n\n<script>\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("El contenido de Diálogo se puede centrar.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("center")]),e._v(" en "),a("code",[e._v("true")]),e._v(" para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. "),a("code",[e._v("center")]),e._v(" sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n title="Warning"\n :visible.sync="centerDialogVisible"\n width="30%"\n center>\n <span>It should be noted that the content will not be aligned in center by default</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="centerDialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",[e._v("before-close")]),e._v(" sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado "),a("code",[e._v("footer")]),e._v(", puede agregar lo que haría "),a("code",[e._v("before-close")]),e._v(" en el manejador de eventos de los botones.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialogo-anidado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diálogo anidado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),a("code",[e._v("ref")]),e._v(", do it in the "),a("code",[e._v("open")]),e._v(" event callback.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si la variable ligada a "),a("code",[e._v("visible")]),e._v(" se gestiona en el Vuex store, el "),a("code",[e._v(".sync")]),e._v(" no puede funcionar correctamente. En este caso, elimine el modificador "),a("code",[e._v(".sync")]),e._v(", escuche los eventos de "),a("code",[e._v("open")]),e._v(" y "),a("code",[e._v("close")]),e._v(" Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("visible")]),a("td",[e._v("visibilidad del Diálogo, apoya el modificador .sync")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("anchura de Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("50%")])]),a("tr",[a("td",[e._v("fullscreen")]),a("td",[e._v("si el diálogo ocupa pantalla completa")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("top")]),a("td",[e._v("valor de "),a("code",[e._v("margin-top")]),e._v(" del Diálogo CSS")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("15vh")])]),a("tr",[a("td",[e._v("modal")]),a("td",[e._v("si se muestra una máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("modal-append-to-body")]),a("td",[e._v("si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("append-to-body")]),a("td",[e._v("Si adjuntar el cuadro de diálogo al cuerpo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lock-scroll")]),a("td",[e._v("Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("custom-class")]),a("td",[e._v("nombres de clase personalizada para el Diálogo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-on-click-modal")]),a("td",[e._v("si el Diálogo puede ser cerrado haciendo clic en la máscara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("close-on-press-escape")]),a("td",[e._v("si el Diálogo puede ser cerrado presionando ESC")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("show-close")]),a("td",[e._v("si mostrar un botón de cerrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("before-close")]),a("td",[e._v("una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo")]),a("td",[e._v("función(done) "),a("code",[e._v("done")]),e._v("se usa para cerrar el diálog")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si alinear el encabezado y el pie de página en el centro")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcíon")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("contenido de Diálogo")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("contenido del título de Diálogo")])]),a("tr",[a("td",[e._v("footer")]),a("td",[e._v("contenido del pie de página de Diálogo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripcíon")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("open")]),a("td",[e._v("se activa cuando se abre el cuadro de Diálogo")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("opened")]),a("td",[e._v("se activa cuando la animacion de apertura del Dialog termina.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se dispara cuando el Diálogo se cierra")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closed")]),a("td",[e._v("se activa cuando finaliza la animación de cierre del Diálog")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="dialog.md";t.default=r.exports},423:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Seleccionar fecha y tiempo juntos en un picker.")]),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="datetime"\n placeholder="Select date and time">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker\n v-model="value2"\n type="datetime"\n placeholder="Select date and time"\n :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With default time</span>\n <el-date-picker\n v-model="value3"\n type="datetime"\n placeholder="Select date and time"\n default-time="12:00:00">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: \'Today\',\n onClick(picker) {\n picker.$emit(\'pick\', new Date());\n }\n }, {\n text: \'Yesterday\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit(\'pick\', date);\n }\n }, {\n text: \'A week ago\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', date);\n }\n }]\n },\n value1: \'\',\n value2: \'\',\n value3: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede seleccionar la fecha y el rango de tiempo ajustando "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("datetimerange")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value4"\n type="datetimerange"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker\n v-model="value5"\n type="datetimerange"\n :picker-options="pickerOptions2"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date"\n align="right">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: \'Last week\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last month\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 3 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value5: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("When picking date range on the date panel with type "),a("code",[e._v("datetimerange")]),e._v(", "),a("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),a("code",[e._v("default-time")]),e._v(" attribute. "),a("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Start date time 12:00:00</span>\n <el-date-picker\n v-model="value6"\n type="datetimerange"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n :default-time="[\'12:00:00\']">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n <el-date-picker\n v-model="value7"\n type="datetimerange"\n align="right"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n :default-time="[\'12:00:00\', \'08:00:00\']">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value6: \'\',\n value7: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre "),a("code",[e._v("pickerOptions")]),e._v(" y otros atributos, puede referirse a DatePicker y TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fecha-y-hora"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fecha y hora")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alcance de fecha y tiempo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("Si la entrada es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("Si mostrar el botón de "),a("code",[e._v("clear")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para el inicio de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para el fin de fecha en el modo Range")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("time-arrow-control")]),a("td",[e._v("si se puede modificar el "),a("code",[e._v("time")]),e._v(" utilizando botones con flechas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo del picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato de valor mostrado en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el Dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, Comprueba la tabla de mas abajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rango")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, fecha predeterminada del calendario")]),a("td",[e._v("Fecha")]),a("td",[e._v("cualquier cosa aceptada por "),a("code",[e._v("new Date()")]),e._v(" —")]),a("td")]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("el valor de tiempo por defecto después de elegir una fecha")]),a("td",[e._v("non-range: string / range: string[]")]),a("td",[e._v("non-range: Una cadena de texto como "),a("code",[e._v("12:00:00")]),e._v(", range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date")]),a("td",[e._v("cadena")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en la entrada nativa")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desconectar dos date-panels en range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])]),a("tr",[a("td",[e._v("validate-event")]),a("td",[e._v("whether to trigger form validation")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo")]),a("td",[e._v("objeto[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano")]),a("td",[e._v("función")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primera día de semana")]),a("td",[e._v("Número")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesos-directos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesos directos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("la funcion se dispara cuando se hace clic en el acceso directo, con el "),a("code",[e._v("vm")]),e._v(" como parámetro. Puede modificar el valor del picker emitiendo el evento"),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado del componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("foco en el input")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="datetime-picker.md";t.default=r.exports},431:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{pickerOptions1:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:"",value4:"",value5:"",value14:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),a("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value14,callback:function(e){t.value14=e},expression:"value14"}})],1)])])},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),e.$emit("pick",[a,t])}},{text:"Last month",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),e.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),e.$emit("pick",[a,t])}}]},value6:"",value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{pickerOptions3:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,a=new Date((new Date).getFullYear(),0);e.$emit("pick",[a,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,a=new Date;a.setMonth(a.getMonth()-6),e.$emit("pick",[a,t])}}]},value15:"",value16:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value15,callback:function(e){t.value15=e},expression:"value15"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),a("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions3},model:{value:t.value16,callback:function(e){t.value16=e},expression:"value16"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value8:"",value9:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{value10:"",value11:"",value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value10))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value11))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),a("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{value12:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("p",[t._v("Component value："+t._s(t.value12))]),t._v(" "),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value12,callback:function(e){t.value12=e},expression:"value12"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Utilice Date Picker para introducir la fecha.")]),e._m(1),a("p",[e._v('Date Picker básico por "día".')]),a("demo-block",[a("div",[a("p",[e._v("La medida está determinada por el atributo "),a("code",[e._v("type")]),e._v(" . Puede habilitar las opciones rápidas creando un objeto "),a("code",[e._v("picker-options")]),e._v(" con la propiedad "),a("code",[e._v("shortcuts")]),e._v(". La fecha desactivada se ajusta mediante "),a("code",[e._v("disabledDate")]),e._v(", que es una función.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="date"\n placeholder="Pick a day">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Picker with quick options</span>\n <el-date-picker\n v-model="value2"\n type="date"\n placeholder="Pick a day"\n :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions1: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\n shortcuts: [{\n text: \'Today\',\n onClick(picker) {\n picker.$emit(\'pick\', new Date());\n }\n }, {\n text: \'Yesterday\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit(\'pick\', date);\n }\n }, {\n text: \'A week ago\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', date);\n }\n }]\n },\n value1: \'\',\n value2: \'\',\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n <div class="block">\n <span class="demonstration">Week</span>\n <el-date-picker\n v-model="value3"\n type="week"\n format="Week WW"\n placeholder="Pick a week">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Month</span>\n <el-date-picker\n v-model="value4"\n type="month"\n placeholder="Pick a month">\n </el-date-picker>\n </div>\n</div>\n<div class="container">\n <div class="block">\n <span class="demonstration">Year</span>\n <el-date-picker\n v-model="value5"\n type="year"\n placeholder="Pick a year">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Dates</span>\n <el-date-picker\n type="dates"\n v-model="value14"\n placeholder="Pick one or more dates">\n </el-date-picker>\n </div>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value3: \'\',\n value4: \'\',\n value5: \'\',\n value14: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Se soporta la selección de un rango de fechas.")]),a("demo-block",[a("div",[a("p",[e._v("En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo "),a("code",[e._v("unlink-panels")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value6"\n type="daterange"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker\n v-model="value7"\n type="daterange"\n align="right"\n unlink-panels\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date"\n :picker-options="pickerOptions2">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: \'Last week\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last month\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 3 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value6: \'\',\n value7: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Picking a month range is supported.")]),a("demo-block",[a("div",[a("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),a("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value15"\n type="monthrange"\n range-separator="To"\n start-placeholder="Start month"\n end-placeholder="End month">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker\n v-model="value16"\n type="monthrange"\n align="right"\n unlink-panels\n range-separator="To"\n start-placeholder="Start month"\n end-placeholder="End month"\n :picker-options="pickerOptions3">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions3: {\n shortcuts: [{\n text: \'This month\',\n onClick(picker) {\n picker.$emit(\'pick\', [new Date(), new Date()]);\n }\n }, {\n text: \'This year\',\n onClick(picker) {\n const end = new Date();\n const start = new Date(new Date().getFullYear(), 0);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 6 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setMonth(start.getMonth() - 6);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value15: \'\',\n value16: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">date</span>\n <el-date-picker\n v-model="value8"\n type="date"\n placeholder="Pick a date"\n default-value="2010-10-01">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">daterange</span>\n <el-date-picker\n v-model="value9"\n type="daterange"\n align="right"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n default-value="2010-10-01">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value8: \'\',\n value9: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(8),e._m(9),a("p",[e._v("Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:")]),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Emits Date object</span>\n <div class="demonstration">Value: {{ value10 }}</div>\n <el-date-picker\n v-model="value10"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Use value-format</span>\n <div class="demonstration">Value: {{ value11 }}</div>\n <el-date-picker\n v-model="value11"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd"\n value-format="yyyy-MM-dd">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Timestamp</span>\n <div class="demonstration">Value：{{ value12 }}</div>\n <el-date-picker\n v-model="value12"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd"\n value-format="timestamp">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value10: \'\',\n value11: \'\',\n value12: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(12),a("p",[e._v("Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto, la hora de la fecha de inicio y final es "),a("code",[e._v("00:00:00")]),e._v(". Configurar "),a("code",[e._v("default-time")]),e._v(" puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato "),a("code",[e._v("12:00:00")]),e._v(". La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <p>Component value：{{ value12 }}</p>\n <el-date-picker\n v-model="value12"\n type="daterange"\n start-placeholder="Start date"\n end-placeholder="End date"\n :default-time="[\'00:00:00\', \'23:59:59\']">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value12: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ingresar-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ingresar Fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"otras-mediciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Otras mediciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rango-de-fechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rango de fechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor por defecto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar "),a("code",[e._v("default-value")]),e._v(" para fijar otra fecha. Su valor debe ser definido por "),a("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Si el tipo es "),a("code",[e._v("daterange")]),e._v(", "),a("code",[e._v("default-value")]),e._v(" establece el calendario del lado izquierdo.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formatos-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formatos de Date")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Utilice "),a("code",[e._v("format")]),e._v(" para controlar el formato del texto visualizado en el input. Utilice "),a("code",[e._v("value-format")]),e._v(" para controlar el formato del valor vinculado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Preste atención a la capitalización")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("formato")]),a("th",[e._v("significado")]),a("th",[e._v("nota")]),a("th",[e._v("ejemplo")])])]),a("tbody",[a("tr",[a("td",[a("code",[e._v("yyyy")])]),a("td",[e._v("año")]),a("td"),a("td",[e._v("2017")])]),a("tr",[a("td",[a("code",[e._v("M")])]),a("td",[e._v("mes")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("MM")])]),a("td",[e._v("mes")]),a("td"),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("W")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en picker's "),a("code",[e._v("format")]),e._v("; no acepta 0")]),a("td",[e._v("1")])]),a("tr",[a("td",[a("code",[e._v("WW")])]),a("td",[e._v("semana")]),a("td",[e._v("solamente para semanas en picker's "),a("code",[e._v("format")])]),a("td",[e._v("01")])]),a("tr",[a("td",[a("code",[e._v("d")])]),a("td",[e._v("dia")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("2")])]),a("tr",[a("td",[a("code",[e._v("dd")])]),a("td",[e._v("dia")]),a("td"),a("td",[e._v("02")])]),a("tr",[a("td",[a("code",[e._v("H")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("HH")])]),a("td",[e._v("hora")]),a("td",[e._v("24-hora reloj")]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("h")])]),a("td",[e._v("hora")]),a("td",[e._v("12-hora reloj; debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")]),e._v("; no acepta 0")]),a("td",[e._v("3")])]),a("tr",[a("td",[a("code",[e._v("hh")])]),a("td",[e._v("hour")]),a("td",[e._v("12-hora reloj; debe usarse con "),a("code",[e._v("A")]),e._v(" o "),a("code",[e._v("a")])]),a("td",[e._v("03")])]),a("tr",[a("td",[a("code",[e._v("m")])]),a("td",[e._v("minuto")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("4")])]),a("tr",[a("td",[a("code",[e._v("mm")])]),a("td",[e._v("minuto")]),a("td"),a("td",[e._v("04")])]),a("tr",[a("td",[a("code",[e._v("s")])]),a("td",[e._v("segundo")]),a("td",[e._v("no acepta 0")]),a("td",[e._v("5")])]),a("tr",[a("td",[a("code",[e._v("ss")])]),a("td",[e._v("segundo")]),a("td"),a("td",[e._v("05")])]),a("tr",[a("td",[a("code",[e._v("A")])]),a("td",[e._v("AM/PM")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", mayusculas")]),a("td",[e._v("AM")])]),a("tr",[a("td",[a("code",[e._v("a")])]),a("td",[e._v("am/pm")]),a("td",[e._v("solamente para "),a("code",[e._v("format")]),e._v(", minúsculas")]),a("td",[e._v("am")])]),a("tr",[a("td",[a("code",[e._v("timestamp")])]),a("td",[e._v("JS timestamp")]),a("td",[e._v("solamente para "),a("code",[e._v("value-format")]),e._v("; valor vinculado debe ser un "),a("code",[e._v("number")])]),a("td",[e._v("1483326245000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("readonly")]),a("td",[e._v("si DatePicker es solo de lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si DatePicker esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("editable")]),a("td",[e._v("si el input es editable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se muestra el boton de borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder cuando el modo NO es rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("start-placeholder")]),a("td",[e._v("placeholder para la fecha de inicio en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("end-placeholder")]),a("td",[e._v("placeholder para la fecha final en modo rango")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de picker")]),a("td",[e._v("string")]),a("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),a("td",[e._v("date")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("formato en que se muestra el valor en el input")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("yyyy-MM-dd")])]),a("tr",[a("td",[e._v("align")]),a("td",[e._v("alineación")]),a("td",[e._v("left/center/right")]),a("td",[e._v("left")]),a("td")]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el dropdown de DatePicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("picker-options")]),a("td",[e._v("opciones adicionales, chequee la tabla debajo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{}")])]),a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("separador de rangos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'-'")])]),a("tr",[a("td",[e._v("default-value")]),a("td",[e._v("opcional, valor por defecto para el calendario")]),a("td",[e._v("Date")]),a("td",[e._v("cualquiera aceptado por "),a("code",[e._v("new Date()")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("default-time")]),a("td",[e._v("opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango")]),a("td",[e._v("string[]")]),a("td",[e._v("Array de dos valores, cada uno es un string del estilo "),a("code",[e._v("12:00:00")]),e._v(". El primer elemento es para la fecha de inicio y el segundo es para la fecha final.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value-format")]),a("td",[e._v("opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.")]),a("td",[e._v("string")]),a("td",[e._v("ver "),a("a",{attrs:{href:"#/es/component/date-picker#date-formats"}},[e._v("date formats")])]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("igual que "),a("code",[e._v("name")]),e._v(" en el input nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("unlink-panels")]),a("td",[e._v("desvincular los dos paneles de fecha en el range-picker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("prefix-icon")]),a("td",[e._v("Clase personalizada para el icono prefijado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-date")])]),a("tr",[a("td",[e._v("clear-icon")]),a("td",[e._v("Clase personalizada para el icono "),a("code",[e._v("clear")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opciones-del-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opciones del Picker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("shortcuts")]),a("td",[e._v("{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente")]),a("td",[e._v("object[]")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabledDate")]),a("td",[e._v("una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primer dia de la semana")]),a("td",[e._v("Number")]),a("td",[e._v("1 to 7")]),a("td",[e._v("7")])]),a("tr",[a("td",[e._v("onPick")]),a("td",[e._v("una función que se dispara cuando se cambia la fecha seleccionada. Solamente para "),a("code",[e._v("daterange")]),e._v(" y "),a("code",[e._v("datetimerange")]),e._v(".")]),a("td",[e._v("Function({ maxDate, minDate })")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accesso-directo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accesso directo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("text")]),a("td",[e._v("título del acceso directo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("onClick")]),a("td",[e._v("una función se dispara al hacer clic en el acceso directo, con"),a("code",[e._v("vm")]),e._v("como parámetro. Puede modificar el valor del picker emitiendo el evento "),a("code",[e._v("pick")]),e._v(". Ejemplo: "),a("code",[e._v("vm.$emit('pick', new Date())")])]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el usuario confirma el valor")]),a("td",[e._v("valor enlazado al componente")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("instancia del componente")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("instancia del componente")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parameteros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("coloca el foco en el input")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("costume range separator content")])])])])}],!1,null,null,null);r.options.__file="date-picker.md";t.default=r.exports},434:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),a("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),a("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),a("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),a("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value6:0,value7:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),a("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}})],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value8:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}})],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value9:[4,8]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}})],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{value10:0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}})],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Desliza el slider dentro de un rango fijo.")]),e._m(1),a("p",[e._v("El valor actual se muestra cuando se inicia el arrastre del slider.")]),a("demo-block",[a("div",[a("p",[e._v("Personalice el valor inicial del slider configurando el valor vinculado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default value</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Customized initial value</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Hide Tooltip</span>\n <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Format Tooltip</span>\n <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Disabled</span>\n <el-slider v-model="value5" disabled></el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Las opciones pueden ser discretas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el tamaño del paso con el atributo "),a("code",[e._v("step")]),e._v(". Puede visualizar los puntos de ruptura configurando el atributo "),a("code",[e._v("show-stops")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Breakpoints not displayed</span>\n <el-slider\n v-model="value6"\n :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Breakpoints displayed</span>\n <el-slider\n v-model="value7"\n :step="10"\n show-stops>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Inserte el valor a traves de un input")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("show-input")]),e._v(" para que muestre un input a la derecha.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value8"\n show-input>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Se soporta la selección de un rango de valores.")]),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("range")]),e._v(" activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value9"\n range\n show-stops\n :max="10">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El ajuste del atributo "),a("code",[e._v("vertical")]),e._v(" a "),a("code",[e._v("true")]),e._v(" habilita el modo vertical. En el modo vertical, se requiere el atributo "),a("code",[e._v("height")]),e._v(" .")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value10"\n vertical\n height="200px">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valores-discretos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valores discretos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-con-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider con input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-de-rangos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccion de rangos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("valor minimo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("100")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Slider esta deshabitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("step")]),a("td",[e._v("tamaño del paso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("show-input")]),a("td",[e._v("Si se muestra el input, trabaja cuando"),a("code",[e._v("range")]),e._v("es false")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-input-controls")]),a("td",[e._v("si se muestran los botones de control cuando"),a("code",[e._v("show-input")]),e._v("es true")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("input-size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("large / medium / small / mini")]),a("td",[e._v("small")])]),a("tr",[a("td",[e._v("show-stops")]),a("td",[e._v("si se muestran los puntos de ruptura (breakpoints)")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-tooltip")]),a("td",[e._v("si se muestra el valor en un tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("format-tooltip")]),a("td",[e._v("formato para mostrar el valor del tooltip")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("range")]),a("td",[e._v("si se usaran un rango")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("vertical")]),a("td",[e._v("modo vertical")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("height")]),a("td",[e._v("alto del Slider, requerido en modo vertical")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta para screen reader")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir, en milisegundos, funciona cuando"),a("code",[e._v("show-input")]),e._v(" es true.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("tooltip-class")]),a("td",[e._v("nombre personalizado de clase para el tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón)")]),t("td",[this._v("valor despues del cambio")])])])])}],!1,null,null,null);r.options.__file="slider.md";t.default=r.exports},437:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value2:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options2,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value3:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value4:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value11,callback:function(e){t.value11=e},expression:"value11"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value6:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}},t._l(t.cities,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[a("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value7:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(e){t.value7=e},expression:"value7"}},t._l(t.options3,function(e){return a("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]}),"element-demo7":n({},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value8:""}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(e){t.value8=e},expression:"value8"}},t._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo8":n({},{data:function(){return{options4:[],value9:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options4=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options4=[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(e){t.value9=e},expression:"value9"}},t._l(t.options4,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]}),"element-demo9":n({},{data:function(){return{options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value10:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(e){t.value10=e},expression:"value10"}},t._l(t.options5,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.")]),e._m(1),a("demo-block",[a("div",[a("p",[a("code",[e._v("v-model")]),e._v(" es el valor de "),a("code",[e._v("el-option")]),e._v(" que está seleccionado actualmente.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Establezca el valor de "),a("code",[e._v("disabled")]),e._v(" en "),a("code",[e._v("el-option")]),e._v(" como "),a("code",[e._v("true")]),e._v(" para deshabilitar esta opción.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value2\" placeholder=\"Select\">\n <el-option\n v-for=\"item in options2\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n :disabled=\"item.disabled\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Desactivar todo el componente.")]),a("demo-block",[a("div",[a("p",[e._v("Configure "),a("code",[e._v("disabled")]),e._v(" de "),a("code",[e._v("el-select")]),e._v(" para deshabilitarla.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value3\" disabled placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede limpiar un Select con un icono.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca el atributo "),a("code",[e._v("clearable")]),e._v(" para "),a("code",[e._v("el-select")]),e._v(" y aparecerá un icono. Tenga en cuenta que la opción "),a("code",[e._v("clearable")]),e._v(" es sólo para una selección individual.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value4\" clearable placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Selección multiple utiliza tags para mostrar las opciones seleccionadas.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el atributo "),a("code",[e._v("multiple")]),e._v(" para "),a("code",[e._v("el-select")]),e._v(" para habilitar el modo múltiple. En este caso, el valor del "),a("code",[e._v("v-model")]),e._v(" será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo "),a("code",[e._v("collapse-tags")]),e._v(".")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-select v-model="value5" multiple placeholder="Select">\n <el-option\n v-for="item in options"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n\n <el-select\n v-model="value11"\n multiple\n collapse-tags\n style="margin-left: 20px;"\n placeholder="Select">\n <el-option\n v-for="item in options"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: \'Option1\',\n label: \'Option1\'\n }, {\n value: \'Option2\',\n label: \'Option2\'\n }, {\n value: \'Option3\',\n label: \'Option3\'\n }, {\n value: \'Option4\',\n label: \'Option4\'\n }, {\n value: \'Option5\',\n label: \'Option5\'\n }],\n value5: []\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede personalizar templates HTML para las opciones.")]),a("demo-block",[a("div",[a("p",[e._v("Inserte templates HTML personalizados en el slot de "),a("code",[e._v("el-option")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value6\" placeholder=\"Select\">\n <el-option\n v-for=\"item in cities\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n <span style=\"float: left\">{{ item.label }}</span>\n <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Mostrar opciones en grupos.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("el-option-group")]),e._v(" para agrupar las opciones, y su atributo "),a("code",[e._v("label")]),e._v(" representa el nombre del grupo.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value7\" placeholder=\"Select\">\n <el-option-group\n v-for=\"group in options3\"\n :key=\"group.label\"\n :label=\"group.label\">\n <el-option\n v-for=\"item in group.options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Puede filtrar opciones como lo desee.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-select")]),e._v(" permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo"),a("code",[e._v("label")]),e._v(" contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el "),a("code",[e._v("filter-method")]),e._v(". "),a("code",[e._v("filter-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value8\" filterable placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Introduzca palabras y datos para buscar desde el servidor.")]),a("demo-block",[a("div",[a("p",[e._v("Configure el valor de "),a("code",[e._v("filterable")]),e._v(" y "),a("code",[e._v("remote")]),e._v(" con "),a("code",[e._v("true")]),e._v(" para habilitar la búsqueda remota, y debería pasar el método "),a("code",[e._v("remote-method")]),e._v(". "),a("code",[e._v("remote-method")]),e._v(" es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si "),a("code",[e._v("el-option")]),e._v(" se presenta con la directiva "),a("code",[e._v("v-for")]),e._v(", debe agregar el atributo "),a("code",[e._v("key")]),e._v(" para "),a("code",[e._v("el-option")]),e._v(". Su valor tiene que ser unívoco, como el valor de "),a("code",[e._v("item.value")]),e._v(" en el ejemplo siguiente.")])]),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-select\n v-model="value9"\n multiple\n filterable\n remote\n reserve-keyword\n placeholder="Please enter a keyword"\n :remote-method="remoteMethod"\n :loading="loading">\n <el-option\n v-for="item in options4"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n<\/script>\n')])])])],2),e._m(10),a("p",[e._v("Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.")]),a("demo-block",[a("div",[a("p",[e._v("Al utilizar el atributo "),a("code",[e._v("allow-create")]),e._v(", los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que "),a("code",[e._v("allow-create")]),e._v(" funcione, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")])]),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select\n v-model=\"value10\"\n multiple\n filterable\n allow-create\n placeholder=\"Choose tags for your article\">\n <el-option\n v-for=\"item in options5\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-en-el-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled en el-select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-simple-limpiable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select simple limpiable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccion-multiple-basica"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selección múltiple básica")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizar-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizar template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"agrupando"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#agrupando","aria-hidden":"true"}},[this._v("¶")]),this._v(" Agrupando")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de opciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"busqueda-remota"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota","aria-hidden":"true"}},[this._v("¶")]),this._v(" Búsqueda remota")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"crear-nuevos-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Crear nuevos items")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),t("code",[this._v("value-key")]),this._v(" como el nombre único de la clave de identidad.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("boolean / string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("si multiple-select esta activo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Select esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("collapse-tags")]),a("td",[e._v("si se colapsan los tags a un texto cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value-key")]),a("td",[e._v("nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("value")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Input")]),a("td",[e._v("string")]),a("td",[e._v("large/small/mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("whether select can be cleared")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("multiple-limit")]),a("td",[e._v("maximo numero de opciones que el usuario puede seleccionar cuando "),a("code",[e._v("multiple")]),e._v(" es "),a("code",[e._v("true")]),e._v(". Sin límite cuando se fija a 0")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("el atributo "),a("code",[e._v("name")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autocomplete")]),a("td",[e._v("el atributo "),a("code",[e._v("autocomplete")]),e._v(" del input seleccionado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("auto-complete")]),a("td",[e._v("@DEPRECATED in next major version")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("off")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si Select es filtrable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-create")]),a("td",[e._v("si esta permitido crear nuevos items. Para usar esto, "),a("code",[e._v("filterable")]),e._v(" debe ser "),a("code",[e._v("true")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("metodo de filtrado personalizado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("remote")]),a("td",[e._v("si las opciones se traeran desde el servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("remote-method")]),a("td",[e._v("metodo de busqueda remota personalizada")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("si Select está cargando datos del servidor")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading-text")]),a("td",[e._v("texto mostrado durante la carga de datos del servidor, 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Loading")])]),a("tr",[a("td",[e._v("no-match-text")]),a("td",[e._v("texto mostrado cuando ningún dato coincide con la consulta de filtrado. 也可以使用"),a("code",[e._v('slot="empty"')]),e._v("设置")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No matching data")])]),a("tr",[a("td",[e._v("no-data-text")]),a("td",[e._v("texto mostrado cuando no hay opciones")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("No data")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el menú desplegable del Select")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("reserve-keyword")]),a("td",[e._v("cuando "),a("code",[e._v("multiple")]),e._v(" y "),a("code",[e._v("filter")]),e._v(" es "),a("code",[e._v("true")]),e._v(", si se debe reservar la palabra clave actual después de seleccionar una opción.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-first-option")]),a("td",[e._v("seleccione la primera opción de coincidencia en la tecla enter. Uso con "),a("code",[e._v("filterable")]),e._v(" o "),a("code",[e._v("remote")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-append-to-body")]),a("td",[e._v("si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este "),a("code",[e._v("prop")]),e._v(" en "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("automatic-dropdown")]),a("td",[e._v("para non-filterable Select, este "),a("code",[e._v("prop")]),e._v(" decide si el menú de opciones aparece cuando la entrada está enfocada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos Select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del select cambia")]),a("td",[e._v("valor actual del select")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])]),a("tr",[a("td",[e._v("remove-tag")]),a("td",[e._v("se dispara cuando un tag es removido en modo multiple")]),a("td",[e._v("el valor del tag removido")])]),a("tr",[a("td",[e._v("clear")]),a("td",[e._v("se dispara cuando el icono se clickea en un Select limpiable")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando el input pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando el input obtiene el foco")]),a("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Name")]),a("th",[e._v("Description")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("lista de los componentes Option")])]),a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("contenido prefix de un Select")])]),a("tr",[a("td",[e._v("empty")]),a("td",[e._v("无选项时的列表")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos del grupo de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("nombre del grupo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si se deshabilitan todas las opciones del grupo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-opciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor de option")]),a("td",[e._v("string/number/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("etiqueta de option, es igual a "),a("code",[e._v("value")]),e._v(" si se omite")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si option esta deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("focus")]),a("td",[e._v("Foco en el componente input")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("Quita el focus del componente y oculta el dropdown")]),a("td",[e._v("-")])])])])}],!1,null,null,null);r.options.__file="select.md";t.default=r.exports},443:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")])],1)],1),e._v(" "),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[e._v("Barra lateral")]),e._v(" "),a("el-container",[a("el-header",[e._v("Cabecera")]),e._v(" "),a("el-main",[e._v("Principal")]),e._v(" "),a("el-footer",[e._v("Pie de página")])],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[e._v("Option4")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),a("el-menu-item-group",[a("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),a("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[e._v("View")]),e._v(" "),a("el-dropdown-item",[e._v("Add")]),e._v(" "),a("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),a("span",[e._v("Tom")])],1),e._v(" "),a("el-main",[a("el-table",{attrs:{data:e.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Componentes contenedores para iniciar una estructura básica de un sitio:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n <el-header>Cabecera</el-header>\n <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n <el-header>Cabecera</el-header>\n <el-main>Principal</el-main>\n <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Barra lateral</el-aside>\n <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n <el-header>Cabecera</el-header>\n <el-container>\n <el-aside width="200px">Barra lateral</el-aside>\n <el-main>Principal</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-header>Cabecera</el-header>\n <el-container>\n <el-aside width="200px">Barra lateral</el-aside>\n <el-container>\n <el-main>Principal</el-main>\n <el-footer>Pie de página</el-footer>\n </el-container>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Barra lateral</el-aside>\n <el-container>\n <el-header>Cabecera</el-header>\n <el-main>Principal</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Barra lateral</el-aside>\n <el-container>\n <el-header>Cabecera</el-header>\n <el-main>Principal</el-main>\n <el-footer>Pie de página</el-footer>\n </el-container>\n</el-container>\n\n<style>\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n</style>\n')])])])],2),e._m(8),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n <el-menu :default-openeds="[\'1\', \'3\']">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="1-1">Option 1</el-menu-item>\n <el-menu-item index="1-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="1-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">Option4</template>\n <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="2">\n <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="2-1">Option 1</el-menu-item>\n <el-menu-item index="2-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="2-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="2-4">\n <template slot="title">Option 4</template>\n <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="3">\n <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="3-1">Option 1</el-menu-item>\n <el-menu-item index="3-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="3-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="3-4">\n <template slot="title">Option 4</template>\n <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n </el-menu>\n </el-aside>\n \n <el-container>\n <el-header style="text-align: right; font-size: 12px">\n <el-dropdown>\n <i class="el-icon-setting" style="margin-right: 15px"></i>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>View</el-dropdown-item>\n <el-dropdown-item>Add</el-dropdown-item>\n <el-dropdown-item>Delete</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n <span>Tom</span>\n </el-header>\n \n <el-main>\n <el-table :data="tableData">\n <el-table-column prop="date" label="Date" width="140">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n </el-main>\n </el-container>\n</el-container>\n\n<style>\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n</style>\n\n<script>\n export default {\n data() {\n const item = {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenedor")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": Contenedor. Cuando este elemento se anida con un "),t("code",[this._v("<el-header>")]),this._v(" o "),t("code",[this._v("<el-footer>")]),this._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Contenedor para cabeceras.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Contenedor para sección principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Contenedor para pie de página.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de "),t("code",[this._v("<el-container>")]),this._v(" tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disenos-comunes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Diseños comunes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ejemplo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ejemplo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-contenedor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección de diseño para elementos secundarios")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("vertical cuando el elemento está anidado con "),a("code",[e._v("el-header")]),e._v(", de lo contrario, horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-cabecera"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de cabecera")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura de la cabecera")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-barra-lateral"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de barra lateral")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho de la barra lateral")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de pie de página")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("altura del pie de página")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("60px")])])])])}],!1,null,null,null);r.options.__file="container.md";t.default=r.exports},446:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){var a,n;return{data2:(a=[],n=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){a.push({label:e,key:t,initial:n[t]})}),a),value2:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return this.$createElement,{data:function(e){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),value3:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,a){console.log(e,t,a)}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[[n("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[a._v("Customize data items using render-content")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":a.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},model:{value:a.value3,callback:function(e){a.value3=e},expression:"value3"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1),a._v(" "),n("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[a._v("Customize data items using scoped slot")]),a._v(" "),n("div",{staticStyle:{"text-align":"center"}},[n("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:a.data},on:{change:a.handleChange},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.option;return n("span",{},[a._v(a._s(t.key)+" - "+a._s(t.label))])}}]),model:{value:a.value4,callback:function(e){a.value4=e},expression:"value4"}},[n("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[a._v("Operation")]),a._v(" "),n("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[a._v("Operation")])],1)],1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{data3:function(e){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value5:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Los datos se pasan a Transfer a través del atributo "),a("code",[e._v("data")]),e._v(". Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: "),a("code",[e._v("key")]),e._v(" que será el identificador del item, "),a("code",[e._v("label")]),e._v(" que será el texto a mostrar, y "),a("code",[e._v("disabled")]),e._v(" que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a "),a("code",[e._v("v-model")]),e._v(", y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el "),a("code",[e._v("v-model")]),e._v(" con un array.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-transfer\n v-model="value1"\n :data="data">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Puede buscar y filtrar los items.")]),a("demo-block",[a("div",[a("p",[e._v("Ponga el atributo "),a("code",[e._v("filterable")]),e._v(" a true para permitir el filtrado.Por defecto si el "),a("code",[e._v("label")]),e._v(" del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo "),a("code",[e._v("filter-method")]),e._v(", que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-transfer\n filterable\n :filter-method=\"filterMethod\"\n filter-placeholder=\"State Abbreviations\"\n v-model=\"value2\"\n :data=\"data2\">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData2 = _ => {\n const data = [];\n const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.")]),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("titles")]),e._v(", "),a("code",[e._v("button-texts")]),e._v(", "),a("code",[e._v("render-content")]),e._v(" y "),a("code",[e._v("format")]),e._v(" respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: "),a("code",[e._v("left-footer")]),e._v(" y "),a("code",[e._v("right-footer")]),e._v(". Además, si quiere algunos items marcados inicialmente puede usar "),a("code",[e._v("left-default-checked")]),e._v(" y "),a("code",[e._v("right-default-checked")]),e._v(". Finalmente este ejemplo muestra el evento "),a("code",[e._v("change")]),e._v(". Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias son configuradas correctamente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n <div style="text-align: center">\n <el-transfer\n style="text-align: left; display: inline-block"\n v-model="value3"\n filterable\n :left-default-checked="[2, 3]"\n :right-default-checked="[1]"\n :render-content="renderFunc"\n :titles="[\'Source\', \'Target\']"\n :button-texts="[\'To left\', \'To right\']"\n :format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }"\n @change="handleChange"\n :data="data">\n <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n </el-transfer>\n </div>\n <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n <div style="text-align: center">\n <el-transfer\n style="text-align: left; display: inline-block"\n v-model="value4"\n filterable\n :left-default-checked="[2, 3]"\n :right-default-checked="[1]"\n :titles="[\'Source\', \'Target\']"\n :button-texts="[\'To left\', \'To right\']"\n :format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }"\n @change="handleChange"\n :data="data">\n <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n </el-transfer>\n </div>\n</template>\n\n<style>\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n</style>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n value4: [1],\n renderFunc(h, option) {\n return <span>{ option.key } - { option.label }</span>;\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo los elementos no tienen "),a("code",[e._v("key")]),e._v("y "),a("code",[e._v("label")]),e._v(", en vez de eso tienen "),a("code",[e._v("value")]),e._v(" y "),a("code",[e._v("desc")]),e._v(". Así que tiene que añadir alias para "),a("code",[e._v("key")]),e._v(" y "),a("code",[e._v("label")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-transfer\n v-model="value5"\n :props="{\n key: \'value\',\n label: \'desc\'\n }"\n :data="data3">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value5: []\n };\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-con-alias"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop con alias")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por defecto Transfer busca los atributos "),a("code",[e._v("key")]),e._v(", "),a("code",[e._v("label")]),e._v(", y "),a("code",[e._v("disabled")]),e._v(" en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo "),a("code",[e._v("props")]),e._v(" para añadir alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atriburo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("Origen de datos")]),a("td",[e._v("array[{ key, label, disabled }]")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("Si se puede filtrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("filter-placeholder")]),a("td",[e._v("Placeholder para el input del filtro")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Enter keyword")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("Método de filtrado")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("target-order")]),a("td",[e._v("estrategia de órdenes para elementos de la lista destino. Si está configurado en "),a("code",[e._v("original")]),e._v(", los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para "),a("code",[e._v("push")]),e._v(", los nuevos elementos añadidos se insertaran al final. Si se ajusta a "),a("code",[e._v("unshift")]),e._v(", los nuevos elementos añadidos se insertarán en la parte superior.")]),a("td",[e._v("string")]),a("td",[e._v("original / push / unshift")]),a("td",[e._v("original")])]),a("tr",[a("td",[e._v("titles")]),a("td",[e._v("Títulos de las listas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['List 1', 'List 2']")])]),a("tr",[a("td",[e._v("button-texts")]),a("td",[e._v("Texto de los botones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado")]),a("td",[e._v("function(h, option)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("Texto para el status en el header")]),a("td",[e._v("object{noChecked, hasChecked}")]),a("td",[e._v("—")]),a("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("prop alias para el origen de datos")]),a("td",[e._v("object{key, label, disabled}")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("left-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la izquierda")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])]),a("tr",[a("td",[e._v("right-default-checked")]),a("td",[e._v("Array de claves de los elementos marcados inicialmente en la lista de la derecha")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripcion")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("Contenido del footer de la lista de la izquierda")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("Contenido del footer de la lista de la derecha")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("borra la palabra clave del filtro de un determinado panel")]),t("td",[this._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se lanzá cuando los elementos cambian en la lista de la derecha")]),a("td",[e._v("array con las claves de los elementos de la lista de la derecha")])]),a("tr",[a("td",[e._v("left-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])]),a("tr",[a("td",[e._v("right-check-change")]),a("td",[e._v("se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha.")]),a("td",[e._v("array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado")])])])])}],!1,null,null,null);r.options.__file="transfer.md";t.default=r.exports},449:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(239),l={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},r={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},i={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(o.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(r).forEach(function(e){t[l[e]]?a[e]=t[l[e]]:a[e]=r[e]})}}}},s=a(0),d=Object(s.a)(i,function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("section",{staticClass:"content element-doc"},[a._m(0),n("p",[a._v("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),a._m(1),n("p",[a._v("El color principal de Element es el azul brillante y amigable.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:10,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.primary}},[a._v("\n Brand Color"),n("div",{staticClass:"value"},[a._v("#409EFF")]),n("div",{staticClass:"bg-color-sub",style:{background:a.tintColor(a.primary,.9)}},a._l(Array(8),function(e,t){return n("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:a.tintColor(a.primary,(t+1)/10)}})}),0)])])],1),a._m(2),n("p",[a._v("Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.success}},[a._v("Success"),n("div",{staticClass:"value"},[a._v("#67C23A")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.success,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.warning}},[a._v("Warning"),n("div",{staticClass:"value"},[a._v("#E6A23C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.warning,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.danger}},[a._v("Danger"),n("div",{staticClass:"value"},[a._v("#F56C6C")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.danger,(t+8)/10)}})}),0)])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box",style:{background:a.info}},[a._v("Info"),n("div",{staticClass:"value"},[a._v("#909399")]),n("div",{staticClass:"bg-color-sub"},a._l(Array(2),function(e,t){return n("div",{key:t,staticClass:"bg-success-sub-item",style:{background:a.tintColor(a.info,(t+8)/10)}})}),0)])])],1),a._m(3),n("p",[a._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.")]),n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPrimary}},[a._v("Texto primario"),n("div",{staticClass:"value"},[a._v(a._s(a.textPrimary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textRegular}},[a._v("\n Texto regular"),n("div",{staticClass:"value"},[a._v(a._s(a.textRegular))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textSecondary}},[a._v("Texto secundario"),n("div",{staticClass:"value"},[a._v(a._s(a.textSecondary))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.textPlaceholder}},[a._v("Texto de placeholder"),n("div",{staticClass:"value"},[a._v(a._s(a.textPlaceholder))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderBase}},[a._v("Borde base"),n("div",{staticClass:"value"},[a._v(a._s(a.borderBase))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLight}},[a._v("Borde ligero"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLight))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderLighter}},[a._v("Borde claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderLighter))])]),n("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:a.borderExtraLight}},[a._v("Borde extra claro"),n("div",{staticClass:"value"},[a._v(a._s(a.borderExtraLight))])])])]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"demo-color-box-group"},[n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.black}},[a._v("Basic Black"),n("div",{staticClass:"value"},[a._v(a._s(a.black))])]),n("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:a.white,color:"#303133",border:"1px solid #eee"}},[a._v("Basic White"),n("div",{staticClass:"value"},[a._v(a._s(a.white))])]),n("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[a._v("Transparent"),n("div",{staticClass:"value"},[a._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-principal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-principal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color principal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-secundario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color secundario")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"color-neutro"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color neutro")])}],!1,null,null,null);d.options.__file="color.md";t.default=d.exports},452:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{color1:"#409EFF",color2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("No especifica valor por defecto")]),t._v(" "),a("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{color3:"rgba(19, 206, 102, 0.8)"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(e){t.color3=e},expression:"color3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color5,callback:function(e){t.color5=e},expression:"color5"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{color4:"#409EFF"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-color-picker",{model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"medium"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"small"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}}),t._v(" "),a("el-color-picker",{attrs:{size:"mini"},model:{value:t.color4,callback:function(e){t.color4=e},expression:"color4"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("ColorPicker es un selector de color que soporta varios formatos de color.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("ColorPicker requiere una variable de tipo "),a("code",[e._v("string")]),e._v(" para ser enlazada a "),a("code",[e._v("v-model")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">Especifica valor por defecto</span>\n <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n <span class="demonstration">No especifica valor por defecto</span>\n <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n export default {\n data() {\n return {\n color1: \'#409EFF\',\n color2: null\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo "),a("code",[e._v("show-alpha")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color3\" show-alpha></el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("ColorPicker supports predefined color options")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n v-model=\"color5\"\n show-alpha\n :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color5: 'rgba(255, 69, 0, 0.68)',\n predefineColors: [\n '#ff4500',\n '#ff8c00',\n '#ffd700',\n '#90ee90',\n '#00ced1',\n '#1e90ff',\n '#c71585',\n 'rgba(255, 69, 0, 0.68)',\n 'rgb(255, 120, 0)',\n 'hsv(51, 100, 98)',\n 'hsva(120, 40, 94, 0.5)',\n 'hsl(181, 100%, 37%)',\n 'hsla(209, 100%, 56%, 0.73)',\n '#c7158577'\n ]\n }\n }\n };\n<\/script>\n")])])])],2),e._m(4),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color4"></el-color-picker>\n<el-color-picker v-model="color4" size="medium"></el-color-picker>\n<el-color-picker v-model="color4" size="small"></el-color-picker>\n<el-color-picker v-model="color4" size="mini"></el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color4: \'#409EFF\'\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si se deshabilita el ColorPicker")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("medium / small / mini")])]),a("tr",[a("td",[e._v("show-alpha")]),a("td",[e._v("especifica si se muestra el control deslizante para el valor alpha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("color-format")]),a("td",[e._v("formato de color del "),a("code",[e._v("v-model")])]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("hex (si show-alpha es false)/ rgb (si show-alpha es true)")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el dropdown del ColorPicker")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("predefine")]),a("td",[e._v("opciones de colores predefinidas")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor del input cambia")]),a("td",[e._v("valor del color")])]),a("tr",[a("td",[e._v("active-change")]),a("td",[e._v("se dispara cuando el actual color activo cambia")]),a("td",[e._v("valor del color activo")])])])])}],!1,null,null,null);r.options.__file="color-picker.md";t.default=r.exports},455:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{value1:null,value2:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),a("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{value3:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{value4:null}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{value5:3.7}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Usado para la calificación")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo "),a("code",[e._v("colors")]),e._v(" y sus dos umbrales pueden ser definidos con "),a("code",[e._v("low-treshold")]),e._v(" y "),a("code",[e._v("high-treshold")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">Default</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">Color for different levels</span>\n <el-rate\n v-model="value2"\n :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n </el-rate>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Usa texto para indicar la puntuación")]),a("demo-block",[a("div",[a("p",[e._v("Agregar el atributo "),a("code",[e._v("show-text")]),e._v(" para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando "),a("code",[e._v("texts")]),e._v(". "),a("code",[e._v("texts")]),e._v(" es un arreglo cuya longitud debe ser igual a la máxima puntuación "),a("code",[e._v("max")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n v-model=\"value3\"\n :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n show-text>\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Puede utilizar iconos para diferenciar cada componente.")]),a("demo-block",[a("div",[a("p",[e._v("Puede customizar iconos para tres niveles diferentes usando "),a("code",[e._v("icon-classes")]),e._v(". En este ejemplo también usamos "),a("code",[e._v("void-icon-class")]),e._v(" para asignar un icono si no está seleccionado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n v-model=\"value4\"\n :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"\n void-icon-class=\"icon-rate-face-off\"\n :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para hacer el componente de solo lectura. Agregar "),a("code",[e._v("show-score")]),e._v(" para mostrar la puntuación en el lado derecho. Además, puede usar el atributo "),a("code",[e._v("score-template")]),e._v(" para proveer una plantilla. Tiene que contener "),a("code",[e._v("{value}")]),e._v(", y "),a("code",[e._v("{value}")]),e._v(" será sustituido por la puntuación.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n v-model="value5"\n disabled\n show-score\n text-color="#ff9900"\n score-template="{value} points">\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calificacion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calificacion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calificación")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"solo-lectura"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura","aria-hidden":"true"}},[this._v("¶")]),this._v(" Solo lectura")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("puntuación máxima")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("5")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la calificación es de solo lectura")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-half")]),a("td",[e._v("si escoger media estrella está permitido")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("low-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("2")])]),a("tr",[a("td",[e._v("high-threshold")]),a("td",[e._v("valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("4")])]),a("tr",[a("td",[e._v("colors")]),a("td",[e._v("arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[e._v("void-color")]),a("td",[e._v("color para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#C6D1DE")])]),a("tr",[a("td",[e._v("disabled-void-color")]),a("td",[e._v("color para las iconos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#EFF2F7")])]),a("tr",[a("td",[e._v("icon-classes")]),a("td",[e._v("arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[e._v("void-icon-class")]),a("td",[e._v("nombre de clase para iconos no seleccionados")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-off")])]),a("tr",[a("td",[e._v("disabled-void-icon-class")]),a("td",[e._v("nombre de clase para elementos no seleccionados de solo lectura")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-star-on")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("muestra el texto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-score")]),a("td",[e._v("muestra puntuación actual. "),a("code",[e._v("show-score")]),e._v(" y "),a("code",[e._v("show-text")]),e._v(" no pueden ser verdaderos al mismo tiempo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color del texto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#1F2D3D")])]),a("tr",[a("td",[e._v("texts")]),a("td",[e._v("arreglo de textos")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[e._v("score-template")]),a("td",[e._v("plantilla de puntuación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando la puntuación es cambiada")]),t("td",[this._v("valor luego del cambio")])])])])}],!1,null,null,null);r.options.__file="rate.md";t.default=r.exports},458:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activeName:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),a("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),a("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),a("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),a("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),a("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[e._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),e._v(" "),a("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),a("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),a("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),a("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),a("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),a("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Use Collapse para almacenar contenidos.")]),e._m(1),a("p",[e._v("Puede expandir varios paneles")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n<script>\n export default {\n data() {\n return {\n activeNames: [\'1\']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("En modo acordeón sólo un panel puede ser expandido a la vez")]),a("demo-block",[a("div",[a("p",[e._v("Activa el modo acordeón usado el atributo "),a("code",[e._v("accordion")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n<script>\n export default {\n data() {\n return {\n activeName: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(3),e._m(4),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n <el-collapse-item name="1">\n <template slot="title">\n Consistency<i class="header-icon el-icon-information"></i>\n </template>\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titulo-personalizado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Título personalizado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Además de usar el atributo "),t("code",[this._v("title")]),this._v(", se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("panel activo")]),a("td",[e._v("string (modo acordeón) / array (No modo acordeón)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("especifica si activa el modo acordeón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se dispara cuando los paneles activos cambian")]),t("td",[this._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Collapse Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("identificador único del panel")]),a("td",[e._v("string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("título del panel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="collapse.md";t.default=r.exports},461:function(e,t,a){"use strict";a.r(t);var n,o,l,r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i={name:"component-doc",components:{"element-demo0":r({},{data:function(){return{checked:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo1":r({},{data:function(){return{checked1:!1,checked2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Opción")]),t._v(" "),a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Opción")])]],2)},staticRenderFns:[]}),"element-demo2":r({},{data:function(){return{checkList:["Seleccionado y deshabilitado","Opción A"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Opción A"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción B"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción C"}}),t._v(" "),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2)},staticRenderFns:[]}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Marcar todos")]),t._v(" "),a("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),a("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo4":(o=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkedCities1:["Shanghai","Beijing"],cities:o}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(e){t.checkedCities1=e},expression:"checkedCities1"}},t._l(t.cities,function(e){return a("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]})),"element-demo5":(n=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:n}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return a("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]})),"element-demo6":r({},{data:function(){return{checked3:!0,checked4:!1,checked5:!1,checked6:!0,checkboxGroup5:[],checkboxGroup6:[]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:t.checked5,callback:function(e){t.checked5=e},expression:"checked5"}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:t.checked6,callback:function(e){t.checked6=e},expression:"checked6"}})],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup5,callback:function(e){t.checkboxGroup5=e},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup6,callback:function(e){t.checkboxGroup6=e},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),t._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2)},staticRenderFns:[]})}},s=a(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Un grupo de opciones para manejar múltiples elecciones.")]),e._m(1),a("p",[e._v("Checkbox puede ser usado para alternar entre dos estados.")]),a("demo-block",[a("div",[a("p",[e._v("Define "),a("code",[e._v("v-model")]),e._v("(enlaza la variable) en "),a("code",[e._v("el-checkbox")]),e._v(". El valor por defecto es un "),a("code",[e._v("Boolean")]),e._v(" para un "),a("code",[e._v("checkbox")]),e._v(", y se convierte en "),a("code",[e._v("true")]),e._v(" cuando este es seleccionado. El contenido dentro del tag "),a("code",[e._v("el-checkbox")]),e._v(" se convierte en la descripción al costado del botón del checkbox.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n \x3c!-- `checked` debe ser true o false --\x3e\n <el-checkbox v-model="checked">Opción</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Estado deshabilitado para el checkbox.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>\n <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.")]),a("demo-block",[a("div",[a("p",[e._v("El elemento "),a("code",[e._v("checkbox-group")]),e._v(" puede manejar multiples checkboxes en un grupo usando "),a("code",[e._v("v-model")]),e._v(" el cuál está enlazado a un "),a("code",[e._v("Array")]),e._v(". Dentro del elemento "),a("code",[e._v("el-checkbox")]),e._v(", "),a("code",[e._v("label")]),e._v(" es el valor del checkbox. Si en ese tag no hay contenido anidado, "),a("code",[e._v("label")]),e._v(" va a ser mostrado como la descripción al lado del botón del checkbox. "),a("code",[e._v("label")]),e._v(" también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox-group v-model="checkList">\n <el-checkbox label="Opción A"></el-checkbox>\n <el-checkbox label="Opción B"></el-checkbox>\n <el-checkbox label="Opción C"></el-checkbox>\n <el-checkbox label="disabled" disabled></el-checkbox>\n <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checkList: [\'Seleccionado y deshabilitado\',\'Opción A\']\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n<script>\n const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: [\'Shanghai\', \'Beijing\'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div"),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-checkbox-group \n v-model=\"checkedCities1\"\n :min=\"1\"\n :max=\"2\">\n <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n<script>\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Checkbox con estilo tipo Botón.")]),a("demo-block",[a("div",[a("p",[e._v("Sólo debe cambiar el elemento "),a("code",[e._v("el-checkbox")]),e._v(" por el elemento "),a("code",[e._v("el-checkbox-button")]),e._v(". También proveemos el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-checkbox-group v-model="checkboxGroup1">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup2" size="medium">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup3" size="small">\n <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n</template>\n<script>\n const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n export default {\n data () {\n return {\n checkboxGroup1: [\'Shanghai\'],\n checkboxGroup2: [\'Shanghai\'],\n checkboxGroup3: [\'Shanghai\'],\n checkboxGroup4: [\'Shanghai\'],\n cities: cityOptions\n };\n }\n }\n<\/script>\n')])])])],2),e._m(9),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde a los Checkboxes.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>\n <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>\n <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup5" size="small">\n <el-checkbox label="Opción1" border></el-checkbox>\n <el-checkbox label="Opción2" border disabled></el-checkbox>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>\n <el-checkbox label="Opción1" border></el-checkbox>\n <el-checkbox label="Opción2" border></el-checkbox>\n </el-checkbox-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estado-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estado Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-checkboxes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de Checkboxes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("La propiedad "),t("code",[this._v("indeterminate")]),this._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Las propiedades "),t("code",[this._v("min")]),this._v(" y "),t("code",[this._v("max")]),this._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-tipo-boton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo tipo Botón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del Checkbox si es usado dentro de un tag "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del Checkbox si está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del Checkbox si no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el Checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("especifica si agrega un borde alrededor del Checkbox")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del Checkbox, sólo funciona si "),a("code",[e._v("border")]),e._v(" es true")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("especifica si el Checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indeterminate")]),a("td",[e._v("similar a "),a("code",[e._v("indeterminate")]),e._v(" en el checkbox nativo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por Defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los checkboxes de tipo botón o los checkboxes con border")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si los checkboxes anidados están deshabilitados")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("min")]),a("td",[e._v("cantidad mínima de checkboxes que deben ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("cantidad máxima de checkboxes que pueden ser marcados")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de fuente cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color de border y de fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Checkbox-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre de Evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("se ejecuta cuando el valor enlazado cambia")]),t("td",[this._v("el valor actualizado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Checkbox-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("valor del checkbox cuando es usado dentro de un "),a("code",[e._v("checkbox-group")])]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("true-label")]),a("td",[e._v("valor del checkbox si este está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("false-label")]),a("td",[e._v("valor del checkbox si este no está marcado")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica si el checkbox está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo 'name' del checbox nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("checked")]),a("td",[e._v("si el checkbox está marcado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);d.options.__file="checkbox.md";t.default=d.exports},464:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[e._v("top-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[e._v("top")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[e._v("top-end")])],1)],1),e._v(" "),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[e._v("left-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[e._v("left")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[e._v("left-end")])],1)],1),e._v(" "),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[e._v("right-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[e._v("right")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[e._v("right-end")])],1)],1),e._v(" "),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[e._v("bottom-start")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[e._v("bottom")])],1),e._v(" "),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("multiple lines"),t("br"),this._v("second line")]),this._v(" "),t("el-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{disabled:!1}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar aviso de información con el hover del mouse.")]),e._m(1),a("p",[e._v("Tooltip tiene 9 colocaciones.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("content")]),e._v(" para establecer el contenido que se mostrará al hacer hover. El atributo "),a("code",[e._v("placement")]),e._v(" determina la posición del tooltip. Su valor es "),a("code",[e._v("[orientation]-[alignment]")]),e._v(" con cuatro orientaciones "),a("code",[e._v("top")]),e._v(", "),a("code",[e._v("left")]),e._v(", "),a("code",[e._v("right")]),e._v(", "),a("code",[e._v("bottom")]),e._v(" y tres alineaciones "),a("code",[e._v("start")]),e._v(", "),a("code",[e._v("end")]),e._v(", "),a("code",[e._v("null")]),e._v(", la alineación default es null. Tome "),a("code",[e._v('placement="left-end"')]),e._v(" como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n <div class="top">\n <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n <el-button>top-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n <el-button>top</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n <el-button>top-end</el-button>\n </el-tooltip>\n </div>\n <div class="left">\n <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n <el-button>left-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n <el-button>left</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n <el-button>left-end</el-button>\n </el-tooltip>\n </div>\n\n <div class="right">\n <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n <el-button>right-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n <el-button>right</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n <el-button>right-end</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n <el-button>bottom-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n <el-button>bottom</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n <el-button>bottom-end</el-button>\n </el-tooltip>\n </div>\n</div>\n\n<style>\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n</style>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Establecer "),a("code",[e._v("effect")]),e._v(" para modificar el tema, el valor por defecto es "),a("code",[e._v("dark")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),a("p",[e._v("Despliegue múltiples líneas de texto y establezca su formato.")]),a("demo-block",[a("div",[a("p",[e._v("Sobre-escribiba el atributo "),a("code",[e._v("content")]),e._v(" del "),a("code",[e._v("el-tooltip")]),e._v(" añadiendo un slot llamado "),a("code",[e._v("content")]),e._v(".")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n <div slot="content">multiple lines<br/>second line</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),a("p",[e._v("Adicional a los usos básicos, existen algunos atributos que permiten la personalización:")]),e._m(6),e._m(7),e._m(8),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n </el-tooltip>\n</template>\n\n<script>\n export default {\n data() {\n return {\n disabled: false\n };\n }\n };\n<\/script>\n\n<style>\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tema"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tema","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tema")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip tiene dos temas: "),t("code",[this._v("dark")]),this._v(" and "),t("code",[this._v("light")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mas-contenido"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido","aria-hidden":"true"}},[this._v("¶")]),this._v(" Más Contenido")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-avanzado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Avanzado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("transition")]),this._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),t("code",[this._v("el-fade-in-linear")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("el atributo "),t("code",[this._v("disabled")]),this._v(" permite deshabilitar "),t("code",[this._v("tooltip")]),this._v(". Solo es necesario definirlo como "),t("code",[this._v("true")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("De hecho, Tooltip es una extension basada en "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", es posible utilizar cualquier atributo permitido en Vue-popper.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El componente "),a("code",[e._v("router-link")]),e._v(" no es soportado por Tooltip, favor de usar "),a("code",[e._v("vm.$router.push")]),e._v(".")]),a("p",[e._v("Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(".\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("effect")]),a("td",[e._v("tema del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("dark/light")]),a("td",[e._v("dark")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido a mostrar, puede ser sobre-escrito por "),a("code",[e._v("slot#content")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("posición del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("visibilidad del Tooltip")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("saber si el Tooltip se encuentra deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("offset del Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("transition")]),a("td",[e._v("nombre de animación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("el-fade-in-linear")])]),a("tr",[a("td",[e._v("visible-arrow")]),a("td",[e._v("si una flecha es mostrada. Para mayor información, revisar la página de "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("popper-options")]),a("td",[e._v("parámetros de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[e._v("Object")]),a("td",[e._v("referirse a la documentación de "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),a("td",[a("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[e._v("open-delay")]),a("td",[e._v("retraso de la apariencia, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("manual")]),a("td",[e._v("si el Tooltipo será controlado de forma manual. "),a("code",[e._v("mouseenter")]),e._v(" y "),a("code",[e._v("mouseleave")]),e._v(" no tendrán efecto si fue establecido como "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizada para el popper del Tooltip")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("enterable")]),a("td",[e._v("si el mouse puede entrar al Tooltip")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("hide-after")]),a("td",[e._v("tiempo a esperar en milisegundos para esconder el Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])}],!1,null,null,null);r.options.__file="tooltip.md";t.default=r.exports},465:function(e,t,a){"use strict";a.r(t);var n,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l={name:"component-doc",components:{"element-demo0":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo1":o({},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,a){console.log(e,t,a)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var a,n=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(a="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=a?[{name:"zone"+n.count++},{name:"zone"+n.count++}]:[],t(e)},500))}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo2":o({},{data:function(){return{props1:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode1:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props1,load:this.loadNode1,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]}),"element-demo3":o({},{data:function(){return{data3:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data3,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]}),"element-demo4":o({},{data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]}),"element-demo5":o({},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{ref:"tree",attrs:{data:e.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),a("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),a("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),a("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),a("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]}),"element-demo6":(n=1e3,o({},{data:function(){var e=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return{data4:JSON.parse(JSON.stringify(e)),data5:JSON.parse(JSON.stringify(e))}},methods:{append:function(e){var t={id:n++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var a=e.parent,n=a.data.children||a.data,o=n.findIndex(function(e){return e.id===t.id});n.splice(o,1)},renderContent:function(e,t){var a=this,n=t.node,o=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[n.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(o)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(n,o)}}},["Delete"])])])}}},{render:function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",[o("div",{staticClass:"custom-tree-container"},[o("div",{staticClass:"block"},[o("p",[n._v("Using render-content")]),n._v(" "),o("el-tree",{attrs:{data:n.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":n.renderContent}})],1),n._v(" "),o("div",{staticClass:"block"},[o("p",[n._v("Using scoped slot")]),n._v(" "),o("el-tree",{attrs:{data:n.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.node,a=e.data;return o("span",{staticClass:"custom-tree-node"},[o("span",[n._v(n._s(t.label))]),n._v(" "),o("span",[o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.append(a)}}},[n._v("\n Append\n ")]),n._v(" "),o("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return n.remove(t,a)}}},[n._v("\n Delete\n ")])],1)])}}])})],1)])])},staticRenderFns:[]})),"element-demo7":o({},{watch:{filterText:function(e){this.$refs.tree2.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data2:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]}),"element-demo8":o({},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]}),"element-demo9":o({},{data:function(){return{data6:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,a){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,a){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,a){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,a,n){console.log("tree drag end: ",t&&t.label,a)},handleDrop:function(e,t,a,n){console.log("tree drop: ",t.label,a)},allowDrop:function(e,t,a){return"Level two 3-1"!==t.data.label||"inner"!==a},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]})}},r=a(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra un conjunto de datos jerárquicos.")]),e._m(1),a("p",[e._v("Estructura básica de árbol.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(2),a("p",[e._v("Usado para la selección de nodos.")]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :props=\"props\"\n :load=\"loadNode\"\n lazy\n show-checkbox\n @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :props=\"props1\"\n :load=\"loadNode1\"\n lazy\n show-checkbox>\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("El checkbox de un nodo se puede poner como desactivado.")]),a("demo-block",[a("div",[a("p",[e._v("En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data3\"\n :props=\"defaultProps\"\n show-checkbox\n @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Los nodos pueden estar desplegados o seleccionados por defecto.")]),a("demo-block",[a("div",[a("p",[e._v("Utilice "),a("code",[e._v("default-expanded-keys")]),e._v(" y "),a("code",[e._v("default-checked-keys")]),e._v(" para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan "),a("code",[e._v("node-key")]),e._v(". Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data2\"\n show-checkbox\n node-key=\"id\"\n :default-expanded-keys=\"[2, 3]\"\n :default-checked-keys=\"[5]\"\n :props=\"defaultProps\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo "),a("code",[e._v("node-key")]),e._v(" es necesario.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data2\"\n show-checkbox\n default-expand-all\n node-key=\"id\"\n ref=\"tree\"\n highlight-current\n :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n <el-button @click=\"getCheckedNodes\">get by node</el-button>\n <el-button @click=\"getCheckedKeys\">get by key</el-button>\n <el-button @click=\"setCheckedNodes\">set by node</el-button>\n <el-button @click=\"setCheckedKeys\">set by key</el-button>\n <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.")]),a("demo-block",[a("div",[a("p",[e._v("Hay dos maneras de personalizar la plantilla para los nodos de árbol: "),a("code",[e._v("render-content")]),e._v(" y scoped slot. Utilice "),a("code",[e._v("render-content")]),e._v(" para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los "),a("code",[e._v("nodos")]),e._v(" y "),a("code",[e._v("datos")]),e._v(" en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real "),a("code",[e._v("render-content")]),e._v(" funcionará si las dependencias relevantes están configuradas correctamente.")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n <div class="block">\n <p>Using render-content</p>\n <el-tree\n :data="data4"\n show-checkbox\n node-key="id"\n default-expand-all\n :expand-on-click-node="false"\n :render-content="renderContent">\n </el-tree>\n </div>\n <div class="block">\n <p>Using scoped slot</p>\n <el-tree\n :data="data5"\n show-checkbox\n node-key="id"\n default-expand-all\n :expand-on-click-node="false">\n <span class="custom-tree-node" slot-scope="{ node, data }">\n <span>{{ node.label }}</span>\n <span>\n <el-button\n type="text"\n size="mini"\n @click="() => append(data)">\n Append\n </el-button>\n <el-button\n type="text"\n size="mini"\n @click="() => remove(node, data)">\n Delete\n </el-button>\n </span>\n </span>\n </el-tree>\n </div>\n</div>\n\n<script>\n let id = 1000;\n\n export default {\n data() {\n const data = [{\n id: 1,\n label: \'Level one 1\',\n children: [{\n id: 4,\n label: \'Level two 1-1\',\n children: [{\n id: 9,\n label: \'Level three 1-1-1\'\n }, {\n id: 10,\n label: \'Level three 1-1-2\'\n }]\n }]\n }, {\n id: 2,\n label: \'Level one 2\',\n children: [{\n id: 5,\n label: \'Level two 2-1\'\n }, {\n id: 6,\n label: \'Level two 2-2\'\n }]\n }, {\n id: 3,\n label: \'Level one 3\',\n children: [{\n id: 7,\n label: \'Level two 3-1\'\n }, {\n id: 8,\n label: \'Level two 3-2\'\n }]\n }];\n return {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n const newChild = { id: id++, label: \'testtest\', children: [] };\n if (!data.children) {\n this.$set(data, \'children\', []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n const parent = node.parent;\n const children = parent.data.children || parent.data;\n const index = children.findIndex(d => d.id === data.id);\n children.splice(index, 1);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n <span class="custom-tree-node">\n <span>{node.label}</span>\n <span>\n <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n </span>\n </span>);\n }\n }\n };\n<\/script>\n\n<style>\n .custom-tree-node {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n }\n</style>\n')])])])],2),e._m(8),a("p",[e._v("Los nodos del árbol se pueden filtrar.")]),a("demo-block",[a("div",[a("p",[e._v("Invoque el método "),a("code",[e._v("filter")]),e._v(" de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario "),a("code",[e._v("filter-node-method")]),e._v(", y su valor el método de filtrado.")])]),a("element-demo7",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n placeholder=\"Filter keyword\"\n v-model=\"filterText\">\n</el-input>\n\n<el-tree\n class=\"filter-tree\"\n :data=\"data2\"\n :props=\"defaultProps\"\n default-expand-all\n :filter-node-method=\"filterNode\"\n ref=\"tree2\">\n</el-tree>\n\n<script>\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("Solo puede ser expandido un nodo del mismo nivel a la vez.")]),a("demo-block",[a("div"),a("element-demo8",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n :props=\"defaultProps\"\n accordion\n @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(10),e._m(11),a("demo-block",[a("div"),a("element-demo9",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data6\"\n node-key=\"id\"\n default-expand-all\n @node-drag-start=\"handleDragStart\"\n @node-drag-enter=\"handleDragEnter\"\n @node-drag-leave=\"handleDragLeave\"\n @node-drag-over=\"handleDragOver\"\n @node-drag-end=\"handleDragEnd\"\n @node-drop=\"handleDrop\"\n draggable\n :allow-drop=\"allowDrop\"\n :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data6: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleDragStart(node, ev) {\n console.log('drag start', node);\n },\n handleDragEnter(draggingNode, dropNode, ev) {\n console.log('tree drag enter: ', dropNode.label);\n },\n handleDragLeave(draggingNode, dropNode, ev) {\n console.log('tree drag leave: ', dropNode.label);\n },\n handleDragOver(draggingNode, dropNode, ev) {\n console.log('tree drag over: ', dropNode.label);\n },\n handleDragEnd(draggingNode, dropNode, dropType, ev) {\n console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n },\n handleDrop(draggingNode, dropNode, dropType, ev) {\n console.log('tree drop: ', dropNode.label, dropType);\n },\n allowDrop(draggingNode, dropNode, type) {\n if (dropNode.data.label === 'Level two 3-1') {\n return type !== 'inner';\n } else {\n return true;\n }\n },\n allowDrag(draggingNode) {\n return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n }\n }\n };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nodos hoja en modo perezoso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivados"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox desactivados")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Desplegado o seleccionado por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"seleccionando-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Seleccionando nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenido personalizado en los nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrado-de-nodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrado de nodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"acordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#acordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Acordeón")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),t("code",[this._v("draggable")]),this._v(" .")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("data")]),a("td",[e._v("Datos del árbol")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("empty-text")]),a("td",[e._v("Texto a mostrar cuando data es void")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("node-key")]),a("td",[e._v("Identificador único en todo el árbol para los nodos")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("Opciones de configuración")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-after-expand")]),a("td",[e._v("si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("Método para cargar los datos de subárboles")]),a("td",[e._v("function(node, resolve)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("render-content")]),a("td",[e._v("Función de renderizado para los nodos")]),a("td",[e._v("Function(h, { node, data, store }")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("highlight-current")]),a("td",[e._v("Si el nodo actual está resaltado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-expand-all")]),a("td",[e._v("Expandir todos los nodos por defecto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-on-click-node")]),a("td",[e._v("Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("check-on-click-node")]),a("td",[e._v("si marcar o desmarcar el nodo al hacer clic en el. Si es "),a("code",[e._v("false")]),e._v(", el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("auto-expand-parent")]),a("td",[e._v("Expandir un nodo padre si el hijo está seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("default-expanded-keys")]),a("td",[e._v("Array de claves de los nodos expandidos inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-checkbox")]),a("td",[e._v("Si un nodo es seleccionable")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("check-strictly")]),a("td",[e._v("El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando "),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("default-checked-keys")]),a("td",[e._v("Array con claves de los nodos seleccionados inicialmente")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("current-node-key")]),a("td",[e._v("key of initially selected node")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-node-method")]),a("td",[e._v("Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve "),a("code",[e._v("false")]),e._v(" el nodo se oculta")]),a("td",[e._v("Function(value, data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("accordion")]),a("td",[e._v("Si solo un nodo de cada nivel puede expandirse a la vez")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("indent")]),a("td",[e._v("Indentación horizontal de los nodos en niveles adyacentes, en pixeles")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("16")])]),a("tr",[a("td",[e._v("icon-class")]),a("td",[e._v("Icono del nodo del árbol de cliente")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si se trata de un nodo de hoja lazy load, utilizado con el atributo "),a("code",[e._v("load")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("draggable")]),a("td",[e._v("si se habilita la función de drag and drop en los nodos")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("allow-drag")]),a("td",[e._v("esta función se ejecutará antes de arrastrar un nodo. si devuelve "),a("code",[e._v("false")]),e._v(", el nodo no puede ser arrastrado.")]),a("td",[e._v("Function(nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("allow-drop")]),a("td",[e._v("esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. "),a("code",[e._v("type")]),e._v(" tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)")]),a("td",[e._v("Function(Nodoquesearrastra, Nododestino, type)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("Especifica que clave del objecto nodo se utilizará como label")]),a("td",[e._v("string, function(data, node)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("Especifica que objeto del nodo se utiliza como subárbol")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("isLeaf")]),a("td",[e._v("Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado")]),a("td",[e._v("boolean, function(datos, nodo)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Métodos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" tiene los siguientes métodos, que devuelven el array de nodos seleccionados.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Método")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("filter")]),a("td",[e._v("Filtra los nodos del árbol, los nodos filtrados estarán ocultos")]),a("td",[e._v("Acepta un parámetro que será usado como primer parámetro para filter-node-method")])]),a("tr",[a("td",[e._v("updateKeyChildren")]),a("td",[e._v("Asocia un nuevo dato al nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato")])]),a("tr",[a("td",[e._v("getCheckedNodes")]),a("td",[e._v("si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve el array de nodos actualmente seleccionada.")]),a("td",[e._v("(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", el valor de retorno contiene nodos halfchecked.")])]),a("tr",[a("td",[e._v("setCheckedNodes")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo funciona cuando "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("Un array de nodos a seleccionar")])]),a("tr",[a("td",[e._v("getCheckedKeys")]),a("td",[e._v("Si los nodos pueden ser seleccionados ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve un array con las claves de los nodos seleccionados")]),a("td",[e._v("(leafOnly) Acepta un booleano que por defecto es "),a("code",[e._v("false")]),e._v(".")])]),a("tr",[a("td",[e._v("setCheckedKeys")]),a("td",[e._v("Establece algunos nodos como seleccionados, solo si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es "),a("code",[e._v("false")]),e._v(". Si el parámetro es "),a("code",[e._v("true")]),e._v(", solo devuelve los nodos seleccionados")])]),a("tr",[a("td",[e._v("setChecked")]),a("td",[e._v("Establece si un nodo está seleccionado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" esta asignado")]),a("td",[e._v("(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad")])]),a("tr",[a("td",[e._v("getHalfCheckedNodes")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de nodos actualmente seleccionada.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getHalfCheckedKeys")]),a("td",[e._v("Si el nodo puede ser seleccionado ("),a("code",[e._v("show-checkbox")]),e._v(" es "),a("code",[e._v("true")]),e._v("), devuelve la mitad del array de claves del nodo actualmente seleccionado.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("getCurrentKey")]),a("td",[e._v("devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("getCurrentNode")]),a("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("setCurrentKey")]),a("td",[e._v("establece el nodo resaltado por la clave, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(key) la clave del nodo a ser resaltado. If "),a("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),a("tr",[a("td",[e._v("setCurrentNode")]),a("td",[e._v("establece el nodo resaltado, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(node) nodo a ser resaltado")])]),a("tr",[a("td",[e._v("getNode")]),a("td",[e._v("devuelve el nodo por el dato o la clave")]),a("td",[e._v("(data) los datos o clave del nodo")])]),a("tr",[a("td",[e._v("remove")]),a("td",[e._v("elimina un nodo, solo funciona si "),a("code",[e._v("node-key")]),e._v(" está asignado")]),a("td",[e._v("(data) los datos del nodo o nodo a borrar")])]),a("tr",[a("td",[e._v("append")]),a("td",[e._v("añadir un nodo hijo a un nodo determinado del árbol")]),a("td",[e._v("(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo")])]),a("tr",[a("td",[e._v("insertBefore")]),a("td",[e._v("insertar un nodo antes de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])]),a("tr",[a("td",[e._v("insertAfter")]),a("td",[e._v("insertar un nodo después de un nodo dado en el árbol")]),a("td",[e._v("(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre del evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("node-click")]),a("td",[e._v("se lanza cuando un nodo es pinchado")]),a("td",[e._v("tres parámetros: el objeto del nodo seleccionado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-contextmenu")]),a("td",[e._v("se lanza cuando en un nodo se hace click con el boton derecho")]),a("td",[e._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad "),a("code",[e._v("node")]),e._v(" del TreeNode, el TreeNode en si mismo")])]),a("tr",[a("td",[e._v("check-change")]),a("td",[e._v("se lanza cuando el estado de selección del nodo cambia")]),a("td",[e._v("tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados")])]),a("tr",[a("td",[e._v("check")]),a("td",[e._v("se activa al hacer clic en la casilla de selección de un nodo")]),a("td",[e._v("dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),a("tr",[a("td",[e._v("current-change")]),a("td",[e._v("cambia cuando el nodo actual cambia")]),a("td",[e._v("dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad "),a("code",[e._v("node")]),e._v(" del TreeNode")])]),a("tr",[a("td",[e._v("node-expand")]),a("td",[e._v("se lanza cuando el nodo actual se abre")]),a("td",[e._v("tres parámetros: el objeto del nodo abierto, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-collapse")]),a("td",[e._v("se lanza cuando el nodo actual se cierra")]),a("td",[e._v("tres parámetros: el objeto del nodo cerrado, propiedad "),a("code",[e._v("node")]),e._v(" de TreeNode y el TreeNode en si")])]),a("tr",[a("td",[e._v("node-drag-start")]),a("td",[e._v("se activa cuando se inicia el arrastre")]),a("td",[e._v("dos parametros: el objeto del nodo que se arrastrara, evento.")])]),a("tr",[a("td",[e._v("node-drag-enter")]),a("td",[e._v("se desencadena cuando el nodo de arrastre entra en otro nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.")])]),a("tr",[a("td",[e._v("node-drag-leave")]),a("td",[e._v("se desencadena cuando el nodo de arrastre sale de un nodo")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.")])]),a("tr",[a("td",[e._v("node-drag-over")]),a("td",[e._v("se activa cuando se arrastra sobre un nodo (como el evento mouseover)")]),a("td",[e._v("tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.")])]),a("tr",[a("td",[e._v("node-drag-end")]),a("td",[e._v("se activa cuando se termina de arrastrar")]),a("td",[e._v("cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser "),a("code",[e._v("undefined")]),e._v(" ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])]),a("tr",[a("td",[e._v("node-drop")]),a("td",[e._v("después de soltar el nodo de arrastre")]),a("td",[e._v("cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null);i.options.__file="tree.md";t.default=i.exports},468:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions:[],selectedOptions2:[]}},methods:{handleChange:function(e){console.log(e)}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),a("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(e){t.selectedOptions=e},expression:"selectedOptions"}})],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),a("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(e){t.selectedOptions2=e},expression:"selectedOptions2"}})],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{optionsWithDisabled:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.optionsWithDisabled}})],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],selectedOptions3:["component","data","tag"]}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(e){t.selectedOptions3=e},expression:"selectedOptions3"}})],1)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"change-on-select":""}})],1)},staticRenderFns:[]}),"element-demo5":n({},{data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"}}},methods:{handleItemChange:function(t){var a=this;console.log("active item:",t),setTimeout(function(e){-1<t.indexOf("California")&&!a.options2[0].cities.length?a.options2[0].cities=[{label:"Los Angeles"}]:-1<t.indexOf("Florida")&&!a.options2[1].cities.length&&(a.options2[1].cities=[{label:"Orlando"}])},300)}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options2,props:this.props},on:{"active-item-change":this.handleItemChange}})],1)},staticRenderFns:[]}),"element-demo6":n({},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Only options of the last level can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Options of all levels can be selected")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:this.options,filterable:"","change-on-select":""}})],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.")]),e._m(1),a("p",[e._v("Existen dos maneras de expandir los elementos hijo de la opción.")]),a("demo-block",[a("div",[a("p",[e._v("Al asignar al atributo "),a("code",[e._v("options")]),e._v(" un array de opciones, se genera un Cascader. El atributo "),a("code",[e._v("expand-trigger")]),e._v(" define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento "),a("code",[e._v("change")]),e._v(" , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Child options expand when clicked (default)</span>\n <el-cascader\n :options=\"options\"\n v-model=\"selectedOptions\"\n @change=\"handleChange\">\n </el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Child options expand when hovered</span>\n <el-cascader\n expand-trigger=\"hover\"\n :options=\"options\"\n v-model=\"selectedOptions2\"\n @change=\"handleChange\">\n </el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el primer elemento del array "),a("code",[e._v("options")]),e._v(" tiene un campo "),a("code",[e._v("disabled: true")]),e._v(" , por lo que está desactivado. Por defecto, Cascader verifica el campo "),a("code",[e._v("disabled")]),e._v(" en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo "),a("code",[e._v("props")]),e._v(" (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de "),a("code",[e._v("value")]),e._v(", "),a("code",[e._v("label")]),e._v(" y "),a("code",[e._v("children")]),e._v(" también se pueden personalizar de la misma manera.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(4),a("p",[e._v("Puede mostrar sólo el último nivel en lugar de todos los niveles.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("show-all-levels")]),e._v(" define si se visualizan todos los niveles. Si es "),a("code",[e._v("false")]),e._v(", sólo se muestra el último nivel.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n :options=\"options\"\n :show-all-levels=\"false\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El valor por defecto se puede definir con un array.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n :options=\"options\"\n v-model=\"selectedOptions3\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n<\/script>\n")])])])],2),e._m(6),a("p",[e._v("También se pueden seleccionar las opciones del elemento padre.")]),a("demo-block",[a("div",[a("p",[e._v("Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar "),a("code",[e._v("change-on-select")]),e._v(" a "),a("code",[e._v("true")]),e._v(", también se pueden seleccionar opciones en los niveles superiores.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n :options=\"options\"\n change-on-select\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(7),a("p",[e._v("Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.")]),a("demo-block",[a("div",[a("p",[e._v("En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento "),a("code",[e._v("active-item-change")]),e._v(", puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los"),a("code",[e._v("props")]),e._v(".")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader\n :options=\"options2\"\n @active-item-change=\"handleItemChange\"\n :props=\"props\"\n></el-cascader>\n\n<script>\n export default {\n data() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(8),a("p",[e._v("Buscar y seleccionar opciones con una palabra clave.")]),a("demo-block",[a("div",[a("p",[e._v("Añadir "),a("code",[e._v("filterable")]),e._v(" a "),a("code",[e._v("el-cascader")]),e._v(" permite filtrar")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Only options of the last level can be selected</span>\n <el-cascader\n placeholder=\"Try searching: Guide\"\n :options=\"options\"\n filterable\n ></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Options of all levels can be selected</span>\n <el-cascader\n placeholder=\"Try searching: Guide\"\n :options=\"options\"\n filterable\n change-on-select\n ></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"opcion-disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opcion Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para desactivar una opción configure un campo "),t("code",[this._v("disabled")]),this._v(" en el objeto de opción.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mostrar-solo-el-ultimo-nivel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-solo-el-ultimo-nivel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mostrar sólo el último nivel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-valor-por-defecto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-valor-por-defecto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con valor por defecto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"change-on-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carga-dinamica-de-elementos-hijos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica-de-elementos-hijos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carga dinamica de elementos hijos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Opciones")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor seleccionado")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones")]),a("td",[e._v("array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("props")]),a("td",[e._v("opciones de configuracion, mire la tabla siguiente")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase para el Cascader's dropdown")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("input placeholder")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Select")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si Cascader esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("clearable")]),a("td",[e._v("si se puede borrar el valor seleccionado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("expand-trigger")]),a("td",[e._v("evento del elemento actual para expandirse.")]),a("td",[e._v("string")]),a("td",[e._v("click / hover")]),a("td",[e._v("click")])]),a("tr",[a("td",[e._v("show-all-levels")]),a("td",[e._v("si mostrar todos los niveles del valor seleccionado en la entrada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si se pueden buscar las opciones")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retardo al escribir la palabra clave del filtro, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("change-on-select")]),a("td",[e._v("si se permite seleccionar una opción de cualquier nivel")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del input")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("before-filter")]),a("td",[e._v("funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("code",[e._v("Promise")]),e._v(" y luego es rechazada, el filtrado será abortado.")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como etiqueta")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como valor")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("especifica qué clave del elemento de la opción se utiliza como hijo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especifica qué clave del elemento de la opción indica si está deshabilitada")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("active-item-change")]),a("td",[e._v("se dispara cuando la opcion activa del parent cambia, sólo funciona cuando "),a("code",[e._v("change-on-select")]),e._v(" es "),a("code",[e._v("false")]),e._v(".")]),a("td",[e._v("array de opciones activas")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se dispara cuando Cascader pierde el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se dispara cuando Cascader obtiene el foco")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se dispara cuando el menu desplegable aparece o desaparece")]),a("td",[e._v("true cuando aparece, y false en otro caso")])])])])}],!1,null,null,null);r.options.__file="cascader.md";t.default=r.exports},470:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var a=t.target,n={},o=document;n.left=(o.body.scrollWidth-e)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},o=(n(294),n(0)),l=Object(o.a)(a,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("h2",[t._v("Navegación")]),t._m(0),t._m(1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación lateral")]),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:9}},[a("p",[t._v("Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:15}},[a("img",{attrs:{src:n(233),alt:"Categorías de Nivel 1"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 1")]),a("p",[t._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),a("img",{attrs:{src:n(234),alt:"Categorías de Nivel 2"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 2")]),a("p",[t._v("La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.")]),a("img",{attrs:{src:n(235),alt:"Categorías de Nivel 3"},on:{click:function(e){t.enlarge(846,e)}}}),a("h5",[t._v("Categorías de Nivel 3")]),a("p",[t._v("Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.")])])],1)],1),a("div",{staticClass:"block"},[a("h3",[t._v("Navegación superior")]),a("el-row",[a("el-col",{attrs:{span:10}},[a("p",[t._v("Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.")])]),a("el-col",{staticClass:"nav-demos",attrs:{span:14}},[a("img",{attrs:{src:n(236),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),a("p",[t._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),a("transition",{attrs:{name:"fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),a("transition",{attrs:{name:"zoom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[a("div",{staticClass:"imgWrap",style:t.imgStyle},[a("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Elige la navegación correcta")]),t("p",[this._v("Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.")])])}],!1,null,"493a1d38",null);l.options.__file="nav.vue";t.default=l.exports},471:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de interfaz de usuario para la web")]),t("p",[this._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:n(222),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:n(223),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:n(224),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:n(225),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:n(226),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:n(227),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:n(228),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:n(229),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:n(230),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:n(231),alt:""}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:n(155),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],o=n(232),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new o.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},r=(n(293),n(0)),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),e._m(1),a("div",{staticClass:"sponsors"},[a("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[a("img",{attrs:{width:"35px",src:n(154),alt:"tipe.io"}}),e._m(2)]),e._m(3)]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(219),alt:""}}),a("h3",[e._v("Guía")]),a("p",[e._v("Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[e._v("Ver detalle\n ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(220),alt:""}}),a("h3",[e._v("Componentes")]),a("p",[e._v("Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[e._v("Ver detalle\n ")])],1)]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(221),alt:""}}),a("h3",[e._v("Recursos")]),a("p",[e._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),a("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[e._v("Ver detalle\n ")])],1)])])])])},a,!1,null,"c10f82f2",null);i.options.__file="index.vue";t.default=i.exports},473:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},o=(a(292),a(0)),l=Object(o.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},476:function(e,t,a){"use strict";a.r(t);var n=a(27),o=a(73),l=a(33),r=a.n(l),i={data:function(){return{lang:this.$route.meta.lang,navsData:o,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null,isThemeConfigVisible:!1}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),a=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=a+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var a=document.querySelector(e[0]);if(!a)return;setTimeout(function(e){t.componentScrollBox.scrollTop=a.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showBackToTop=e>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||n.a.$emit("fadeNav"),this.scrollTop=e}},created:function(){var t=this;n.a.$on("navFade",function(e){t.navFaded=e}),n.a.$on("user-theme-config-visible",function(e){t.isThemeConfigVisible=e})},mounted:function(){window.userThemeConfigVisible&&(this.isThemeConfigVisible=window.userThemeConfigVisible),this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,a){var n=this;a(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,n.renderAnchorHref()):n.goAnchor()},100)}},s=(a(290),a(0)),d=Object(s.a)(i,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component",class:{"theme-config":t.isThemeConfigVisible}},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),a("div",{staticClass:"page-component__content",class:{"theme-config":t.isThemeConfigVisible}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1},click:t.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)])},[],!1,null,null,null);d.options.__file="component.vue";t.default=d.exports},486:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),a("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1),t._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return a("el-carousel-item",{key:e},[a("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Presenta una serie de imágenes o textos en un espacio limitado")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-carousel")]),e._v(" con "),a("code",[e._v("el-carousel-item")]),e._v(", para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta "),a("code",[e._v("el-carousel-item")]),e._v(" . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije "),a("code",[e._v("trigger")]),e._v(" para "),a("code",[e._v("click")]),e._v(", si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Switch when indicator is hovered (default)</span>\n <el-carousel height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n <div class="block">\n <span class="demonstration">Switch when indicator is clicked</span>\n <el-carousel trigger="click" height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Los indicadores de paginacion pueden mostrarse fuera del carrusel")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("indicator-position")]),e._v(" determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de "),a("code",[e._v("indicator-position")]),e._v(" a "),a("code",[e._v("outside")]),e._v(" los mueve hacia fuera; en cambio "),a("code",[e._v("indicator-position")]),e._v(" a "),a("code",[e._v("none")]),e._v(" los oculta.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel indicator-position="outside">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Puede definir cuando se visualizan las flechas")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("arrow")]),e._v(" determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste "),a("code",[e._v("arrow")]),e._v(" a "),a("code",[e._v("always")]),e._v(" o "),a("code",[e._v("never")]),e._v(" para mostrar u ocultar las flechas permanentemente.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel :interval="5000" arrow="always">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Ajuste "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("card")]),e._v(" para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel :interval="4000" type="card" height="200px">\n <el-carousel-item v-for="item in 6" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicadores"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicadores","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicadores")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"flechas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#flechas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flechas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"modo-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modo-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Modo Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),t("code",[this._v("card")]),this._v(" para carrusel.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripcion")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("height")]),a("td",[e._v("Alto del carrusel")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("initial-index")]),a("td",[e._v("Indice del slider inicial activo (empieza desde 0)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("trigger")]),a("td",[e._v("Evento que muestra los indicadores")]),a("td",[e._v("string")]),a("td",[e._v("hover/click")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("autoplay")]),a("td",[e._v("Si se enlazan automáticamente las diapositivas")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("interval")]),a("td",[e._v("Intervalo del auto loop, en milisegundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3000")])]),a("tr",[a("td",[e._v("indicator-position")]),a("td",[e._v("Posición del indicador de paginación")]),a("td",[e._v("string")]),a("td",[e._v("outside/none")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("arrow")]),a("td",[e._v("Cuando se muestran las flechas")]),a("td",[e._v("string")]),a("td",[e._v("always/hover/never")]),a("td",[e._v("hover")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("Tipo de carrusel")]),a("td",[e._v("string")]),a("td",[e._v("card")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("loop")]),a("td",[e._v("Si se muestra cíclicamente")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parametros")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se dispara cuando el slider activo cambia")]),t("td",[this._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"metodos-de-carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Metodos de Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Metodos")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parametros")])])]),a("tbody",[a("tr",[a("td",[e._v("setActiveItem")]),a("td",[e._v("Cambio manual de slider")]),a("td",[e._v("indice del slider al que se va a cambiar, empezando por 0; o el "),a("code",[e._v("name")]),e._v(" del "),a("code",[e._v("el-carousel-item")]),e._v(" correspondiente")])]),a("tr",[a("td",[e._v("prev")]),a("td",[e._v("Cambia al slider anterior")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("next")]),a("td",[e._v("Cambia al slider siguiente")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-carousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Carousel-Item")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("name")]),a("td",[e._v("Nombre del item que puede ser usado en "),a("code",[e._v("setActiveItem")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("Texto que se mostrara en el indicador de paginacion correspondiente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="carousel.md";t.default=r.exports},492:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",[t._v("Card name")]),t._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n "+t._s("List item "+e)+"\n ")])})],2)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-card",{staticClass:"box-card"},t._l(4,function(e){return a("div",{key:e,staticClass:"text item"},[t._v("\n "+t._s("List item "+e)+"\n ")])}),0)],1)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{currentDate:new Date}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("el-row",a._l(2,function(e,t){return n("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[n("el-card",{attrs:{"body-style":{padding:"0px"}}},[n("img",{staticClass:"image",attrs:{src:"../../examples/assets/images/hamburger.png"}}),a._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[a._v("Yummy hamburger")]),a._v(" "),n("div",{staticClass:"bottom clearfix"},[n("time",{staticClass:"time"},[a._v(a._s(a.currentDate))]),a._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[a._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n Always\n ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n Hover\n ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n Never\n ")])],1)],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n <div slot="header" class="clearfix">\n <span>Card name</span>\n <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n </div>\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n<style>\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n</style>\n')])])])],2),e._m(4),a("p",[e._v("La parte de la cabecera puede omitirse.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n<style>\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n</style>\n')])])])],2),e._m(5),a("p",[e._v("Muestre un contenido más rico añadiendo algunas configuraciones.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("body-style")]),e._v(" define el estilo CSS del "),a("code",[e._v("body")]),e._v(" personalizado. Este ejemplo también utiliza "),a("code",[e._v("el-col")]),e._v(" para el layout.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="../../examples/assets/images/hamburger.png" class="image">\n <div style="padding: 14px;">\n <span>Yummy hamburger</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">Operating</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n<style>\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n</style>\n\n<script>\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n<\/script>\n')])])])],2),e._m(6),a("p",[e._v("Puede definir cuándo mostrar las sombras.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo de sombra determina cuándo se muestran las sombras. Puede ser "),a("code",[e._v("always")]),e._v(", "),a("code",[e._v("hover")]),e._v(" o "),a("code",[e._v("never")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n <el-col :span="8">\n <el-card shadow="always">\n Always\n </el-card>\n </el-col>\n <el-col :span="8">\n <el-card shadow="hover">\n Hover\n </el-card>\n </el-col>\n <el-col :span="8">\n <el-card shadow="never">\n Never\n </el-card>\n </el-col>\n</el-row>\n')])])])],2),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Muestra información dentro de un contenedor "),t("code",[this._v("card")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso Basico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Card")]),this._v(" incluye titulo, contenido y operaciones.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-imagenes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con imágenes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("header")]),a("td",[e._v("Titulo del card. También acepta DOM pasado por "),a("code",[e._v("slot#header")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("body-style")]),a("td",[e._v("Estilo CSS del cuerpo")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("{ padding: '20px' }")])]),a("tr",[a("td",[e._v("shadow")]),a("td",[e._v("cuando mostrar la sombra del Card")]),a("td",[e._v("string")]),a("td",[e._v("always / hover / never")]),a("td",[e._v("always")])])])])}],!1,null,null,null);r.options.__file="card.md";t.default=r.exports},495:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),a("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),a("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]}),"element-demo6":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",[a("el-button",[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),a("el-row",[a("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),a("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),a("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),a("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Botones comúnmente usados.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("type")]),e._v(", "),a("code",[e._v("plain")]),e._v(","),a("code",[e._v("round")]),e._v(" y "),a("code",[e._v("circle")]),e._v(" para definir estilos a los botones.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button>Default</el-button>\n <el-button type="primary">Primary</el-button>\n <el-button type="success">Success</el-button>\n <el-button type="info">Info</el-button>\n <el-button type="warning">Warning</el-button>\n <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button plain>Plain</el-button>\n <el-button type="primary" plain>Primary</el-button>\n <el-button type="success" plain>Success</el-button>\n <el-button type="info" plain>Info</el-button>\n <el-button type="warning" plain>Warning</el-button>\n <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button round>Round</el-button>\n <el-button type="primary" round>Primary</el-button>\n <el-button type="success" round>Success</el-button>\n <el-button type="info" round>Info</el-button>\n <el-button type="warning" round>Warning</el-button>\n <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button icon="el-icon-search" circle></el-button>\n <el-button type="primary" icon="el-icon-edit" circle></el-button>\n <el-button type="success" icon="el-icon-check" circle></el-button>\n <el-button type="info" icon="el-icon-message" circle></el-button>\n <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("disabled")]),e._v(" para determinar si un botón esta deshabilitado. Acepta un valor "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button disabled>Default</el-button>\n <el-button type="primary" disabled>Primary</el-button>\n <el-button type="success" disabled>Success</el-button>\n <el-button type="info" disabled>Info</el-button>\n <el-button type="warning" disabled>Warning</el-button>\n <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button plain disabled>Plain</el-button>\n <el-button type="primary" plain disabled>Primary</el-button>\n <el-button type="success" plain disabled>Success</el-button>\n <el-button type="info" plain disabled>Info</el-button>\n <el-button type="warning" plain disabled>Warning</el-button>\n <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),a("p",[e._v("Botones sin borde ni fondo.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),a("p",[e._v("Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("icon")]),e._v(" para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag "),a("code",[e._v("<i>")]),e._v(". También se pueden usar iconos custom.")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),a("p",[e._v("Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.")]),a("demo-block",[a("div",[a("p",[e._v("Use el tag "),a("code",[e._v("<el-button-group>")]),e._v(" para agrupar sus botones.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="el-icon-edit"></el-button>\n <el-button type="primary" icon="el-icon-share"></el-button>\n <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),a("p",[e._v("Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.")]),a("demo-block",[a("div",[a("p",[e._v("Ajuste el atributo "),a("code",[e._v("loading")]),e._v(" a "),a("code",[e._v("true")]),e._v(" para mostrar el estado de descarga.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),a("p",[e._v("Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("size")]),e._v(" para setear tamaños adicionales con "),a("code",[e._v("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" or "),a("code",[e._v("mini")]),e._v(".")])]),a("element-demo6",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button>Default</el-button>\n <el-button size="medium">Medium</el-button>\n <el-button size="small">Small</el-button>\n <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n <el-button round>Default</el-button>\n <el-button size="medium" round>Medium</el-button>\n <el-button size="small" round>Small</el-button>\n <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" determina su un botón esta deshabilitado.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-texto"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de texto")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-icono"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón icono")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-botones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de botones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boton-de-descarga"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga","aria-hidden":"true"}},[this._v("¶")]),this._v(" Botón de descarga")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tamanos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tamanos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tamaños")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del botón")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info / text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("plain")]),a("td",[e._v("determinar si es o no un botón plano")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("round")]),a("td",[e._v("determinar si es o no un botón redondo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("circle")]),a("td",[e._v("determina si es un boton circular")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("determinar si es o no un botón de descarga")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("deshabilitar el botón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("autofocus")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("autofocus")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("native-type")]),a("td",[e._v("misma funcionalidad que la nativa "),a("code",[e._v("type")])]),a("td",[e._v("string")]),a("td",[e._v("button / submit / reset")]),a("td",[e._v("button")])])])])}],!1,null,null,null);r.options.__file="button.md";t.default=r.exports},498:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{radio:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{radio1:"selected and disabled"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{radio2:3}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-radio-group",{model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),a("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{data:function(){return{radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio-group",{model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio5,callback:function(e){t.radio5=e},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio6,callback:function(e){t.radio6=e},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]}),"element-demo4":n({},{data:function(){return{radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio7,callback:function(e){t.radio7=e},expression:"radio7"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio8,callback:function(e){t.radio8=e},expression:"radio8"}},[t._v("Option B")])],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:t.radio9,callback:function(e){t.radio9=e},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio10,callback:function(e){t.radio10=e},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),a("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Selección única entre múltiples opciones.")]),e._m(1),a("p",[e._v("El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.")]),a("demo-block",[a("div",[a("p",[e._v("Crear un elemento Radio es fácil, solo necesita enlazar("),a("code",[e._v("bind")]),e._v(") una variable a la directiva "),a("code",[e._v("v-model")]),e._v(" del Radio. Va a ser igual al valor "),a("code",[e._v("label")]),e._v(" del Radio seleccionado. El tipo de dato de "),a("code",[e._v("label")]),e._v(" es "),a("code",[e._v("String")]),e._v(", "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio v-model="radio" label="1">Option A</el-radio>\n <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Solo necesita agregar el atributo "),a("code",[e._v("disabled")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>\n <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio1: \'selected and disabled\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Recomendado para seleccionar opciones que se excluyen mutuamente.")]),a("demo-block",[a("div",[a("p",[e._v("Combine "),a("code",[e._v("el-radio-group")]),e._v(" con "),a("code",[e._v("el-radio")]),e._v(" para mostrar un grupo de Radios. Enlace la variable con "),a("code",[e._v("v-model")]),e._v(" del elemento "),a("code",[e._v("el-radio-group")]),e._v(" y asigne el valor del "),a("code",[e._v("label")]),e._v(" en "),a("code",[e._v("el-radio")]),e._v(". Se provee el evento "),a("code",[e._v("change")]),e._v(" con el valor actual como parámetro.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio2">\n <el-radio :label="3">Option A</el-radio>\n <el-radio :label="6">Option B</el-radio>\n <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),a("p",[e._v("Radio con estilo de botón.")]),a("demo-block",[a("div",[a("p",[e._v("Solo necesita cambiar el elemento "),a("code",[e._v("el-radio")]),e._v(" a "),a("code",[e._v("el-radio-button")]),e._v(". Se provee el atributo "),a("code",[e._v("size")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-radio-group v-model="radio3">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio4" size="medium">\n <el-radio-button label="New York" ></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio5" size="small">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington" disabled ></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio6" disabled size="mini">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio3: \'New York\',\n radio4: \'New York\',\n radio5: \'New York\',\n radio6: \'New York\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("border")]),e._v(" agrega un borde al elemento Radio.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-radio v-model="radio7" label="1" border>Option A</el-radio>\n <el-radio v-model="radio7" label="2" border>Option B</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>\n <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio9" size="small">\n <el-radio label="1" border>Option A</el-radio>\n <el-radio label="2" border disabled>Option B</el-radio>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio10" size="mini" disabled>\n <el-radio label="1" border>Option A</el-radio>\n <el-radio label="2" border>Option B</el-radio>\n </el-radio-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio7: \'1\',\n radio8: \'1\',\n radio9: \'1\',\n radio10: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"deshabilitado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Deshabilitado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("El atributo "),t("code",[this._v("disabled")]),this._v(" es utilizado para deshabilitar un Radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grupo-de-elementos-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grupo de elementos Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"estilo-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Estilo Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-bordes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con bordes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("border")]),a("td",[e._v("agregar borde alrededor del elemento Radio")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño del elemento Radio, solo funciona si "),a("code",[e._v("border")]),e._v(" es verdadero")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("label")]),a("td",[e._v("el valor del Radio")]),a("td",[e._v("string / number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el Radio está deshabilitado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("name")]),a("td",[e._v("atributo nativo 'name'")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores Aceptado")]),a("th",[e._v("Valores por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value / v-model")]),a("td",[e._v("valor enlazado")]),a("td",[e._v("string / number / boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("tamaño de los "),a("code",[e._v("radio buttons")]),e._v(" o "),a("code",[e._v("bordered radios")])]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si la anidación de radios está desahabilitada")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("color de las letras cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#ffffff")])]),a("tr",[a("td",[e._v("fill")]),a("td",[e._v("color del borde y fondo cuando el botón está activo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos de Radio-group")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Nombre de evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("se dispara cuando el valor cambia")]),a("td",[e._v("el valor del "),a("code",[e._v("label")]),e._v(" del Radio seleccionado")])])])])}],!1,null,null,null);r.options.__file="radio.md";t.default=r.exports},499:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{show:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{show2:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]}),"element-demo2":n({},{data:function(){return{show3:!0}}},{render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[[a("div",[a("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),a("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Tenemos dos efectos de fading: "),a("code",[e._v("el-fade-in-linear")]),e._v(" y "),a("code",[e._v("el-fade-in")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show = !show">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-fade-in-linear">\n <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n </transition>\n <transition name="el-fade-in">\n <div v-show="show" class="transition-box">.el-fade-in</div>\n </transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("También tenemos zoom: "),a("code",[e._v("el-zoom-in-center")]),e._v(", "),a("code",[e._v("el-zoom-in-top")]),e._v(" y "),a("code",[e._v("el-zoom-in-bottom")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show2 = !show2">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-zoom-in-center">\n <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n </transition>\n\n <transition name="el-zoom-in-top">\n <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n </transition>\n\n <transition name="el-zoom-in-bottom">\n <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n </transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show2: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show3 = !show3">Click Me</el-button>\n\n <div style="margin-top: 20px; height: 200px;">\n <el-collapse-transition>\n <div v-show="show3">\n <div class="transition-box">el-collapse-transition</div>\n <div class="transition-box">el-collapse-transition</div>\n </div>\n </el-collapse-transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show3: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transiciones-incorporadas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transiciones incorporadas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentación")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"colapsado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colapsado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Colapsado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para efectos de colapsado usar el componente "),t("code",[this._v("el-collapse-transition")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);r.options.__file="transition.md";t.default=r.exports},501:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("En "),a("code",[e._v("el-breadcrumb")]),e._v(", cada "),a("code",[e._v("el-breadcrumb-item")]),e._v(" es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo "),a("code",[e._v("String")]),e._v(" llamado "),a("code",[e._v("separator")]),e._v(", el mismo determina el caracter separador. El valor por defecto es '/'.")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Setee "),a("code",[e._v("separator-class")]),e._v(" para que utilice "),a("code",[e._v("iconfont")]),e._v(" como separador，el mismo va a cubrir "),a("code",[e._v("separator")])])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icono-separador"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icono separador")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("separator")]),a("td",[e._v("caracter separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("/")])]),a("tr",[a("td",[e._v("separator-class")]),a("td",[e._v("nombre de la clase del icono separador")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("to")]),a("td",[e._v("ruta del link, lo mismo que "),a("code",[e._v("to")]),e._v(" de "),a("code",[e._v("vue-router")])]),a("td",[e._v("string/object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("replace")]),a("td",[e._v("si "),a("code",[e._v("true")]),e._v(", la navegación no dejara una entrada en la historia")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";t.default=r.exports},502:function(e,t,a){"use strict";a.r(t);var n=a(27),o={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},l={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},r={created:function(){n.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var a=this;Object.keys(o).forEach(function(e){t[e]?a[o[e]]=t[e]:a[o[e]]=l[o[e]]})}}}},i=a(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),a("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),a("p",[e._v("There are few radius styles to choose.")]),a("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("No Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 0px")]),a("div",{staticClass:"radius"})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Small Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Large Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),a("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"title"},[e._v("Round Radius")]),a("div",{staticClass:"value"},[e._v("border-radius: 30px")]),a("div",{staticClass:"radius radius-30"})])],1),e._m(4),a("p",[e._v("There are few shaodw styles to choose.")]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shaodw box-shadow: "+e._s(e.boxShadowBase))]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("Name")]),t("td",{staticClass:"text"},[this._v("Thickness")]),t("td",{staticClass:"line"},[this._v("Demo")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Solid")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("Dashed")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);s.options.__file="border.md";t.default=s.exports},503:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{data:function(){return{reverse:!0,activities:[{content:"Success",timestamp:"2018-04-11"},{content:"Approved",timestamp:"2018-04-13"},{content:"Event start",timestamp:"2018-04-15"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("div",{staticClass:"radio"},[a._v("\n Order: \n "),n("el-radio-group",{model:{value:a.reverse,callback:function(e){a.reverse=e},expression:"reverse"}},[n("el-radio",{attrs:{label:!0}},[a._v("descending")]),a._v(" "),n("el-radio",{attrs:{label:!1}},[a._v("ascending")])],1)],1),a._v(" "),n("el-timeline",{attrs:{reverse:a.reverse}},a._l(a.activities,function(e,t){return n("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[a._v("\n "+a._s(e.content)+"\n ")])}),1)],1)])},staticRenderFns:[]}),"element-demo1":n({},{data:function(){return{activities2:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}},{render:function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",a._l(a.activities2,function(e,t){return n("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[a._v("\n "+a._s(e.content)+"\n ")])}),1)],1)])},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",[a("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),a("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[a("el-card",[a("h4",[e._v("Update Github template")]),e._v(" "),a("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Visually display timeline.")]),e._m(1),a("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),a("demo-block",[a("div"),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <div class="radio">\n Order: \n <el-radio-group v-model="reverse">\n <el-radio :label="true">descending</el-radio>\n <el-radio :label="false">ascending</el-radio>\n </el-radio-group>\n </div>\n\n <el-timeline :reverse="reverse">\n <el-timeline-item\n v-for="(activity, index) in activities"\n :key="index"\n :timestamp="activity.timestamp">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n reverse: true,\n activities: [{\n content: \'Success\',\n timestamp: \'2018-04-11\'\n }, {\n content: \'Approved\',\n timestamp: \'2018-04-13\'\n }, {\n content: \'Event start\',\n timestamp: \'2018-04-15\'\n }]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("Size, color, and icons can be customized in node.")]),a("demo-block",[a("div"),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <el-timeline>\n <el-timeline-item\n v-for=\"(activity, index) in activities2\"\n :key=\"index\"\n :icon=\"activity.icon\"\n :type=\"activity.type\"\n :color=\"activity.color\"\n :size=\"activity.size\"\n :timestamp=\"activity.timestamp\">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n activities2: [{\n content: 'Custom icon',\n timestamp: '2018-04-12 20:46',\n size: 'large',\n type: 'primary',\n icon: 'el-icon-more'\n }, {\n content: 'Custom color',\n timestamp: '2018-04-03 20:46',\n color: '#0bbd87'\n }, {\n content: 'Custom size',\n timestamp: '2018-04-03 20:46',\n size: 'large'\n }, {\n content: 'Default node',\n timestamp: '2018-04-03 20:46'\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(3),a("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),a("demo-block",[a("div"),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <el-timeline>\n <el-timeline-item timestamp="2018/4/12" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/12 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/3" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/3 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/2" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/2 20:46</p>\n </el-card>\n </el-timeline-item>\n </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("reverse")]),a("td",[e._v("whether the node is ascending or descending, default is ascending")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Attribute")]),a("th",[e._v("Description")]),a("th",[e._v("Type")]),a("th",[e._v("Accepted Values")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("timestamp")]),a("td",[e._v("timestamp content")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("hide-timestamp")]),a("td",[e._v("whether to show timestamp")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")]),a("td",[e._v("position of timestamp")]),a("td",[e._v("string")]),a("td",[e._v("top / bottom")]),a("td",[e._v("bottom")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("node type")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("background color of node")]),a("td",[e._v("string")]),a("td",[e._v("hsl / hsv / hex / rgb")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("node size")]),a("td",[e._v("string")]),a("td",[e._v("normal / large")]),a("td",[e._v("normal")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icon class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for timeline item")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("Custom defined node")])])])])}],!1,null,null,null);r.options.__file="timeline.md";t.default=r.exports},504:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[e._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),a("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[this._v("comments")])],1),this._v(" "),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[this._v("replies")])],1)],1)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Marcas en forma de número o estado para botones e iconos.")]),e._m(1),a("p",[e._v("Muestra la cantidad de mensajes nuevos.")]),a("demo-block",[a("div",[a("p",[e._v("La cantidad está definida por "),a("code",[e._v("value")]),e._v(" que acepta "),a("code",[e._v("Number")]),e._v(" o "),a("code",[e._v("String")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n comments\n <el-badge class="mark" :value="12" />\n </el-dropdown-item>\n <el-dropdown-item class="clearfix">\n replies\n <el-badge class="mark" :value="3" />\n </el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),a("p",[e._v("Se puede personalizar el valor máximo.")]),a("demo-block",[a("div",[a("p",[e._v("El valor máximo se define como "),a("code",[e._v("max")]),e._v(" el cual es un "),a("code",[e._v("Number")]),e._v(". Nota: solo funciona si "),a("code",[e._v("value")]),e._v(" es también un "),a("code",[e._v("Number")]),e._v(".")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar texto en vez de números.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("String")]),e._v(", puede mostrar texto personalizado.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),a("p",[e._v("Puede utilizar un punto rojo para marcar contenido que debe ser notado.")]),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("is-dot")]),e._v(". Es un "),a("code",[e._v("Boolean")]),e._v(".")])]),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valor-maximo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valor máximo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizaciones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalizaciones")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pequeno-punto-rojo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pequeño punto rojo")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("value")]),a("td",[e._v("valor a mostrar")]),a("td",[e._v("string, number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("max")]),a("td",[e._v("valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si "),a("code",[e._v("value")]),e._v(" es un "),a("code",[e._v("Number")])]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("is-dot")]),a("td",[e._v("si se debe mostrar un pequeño punto")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("hidden")]),a("td",[e._v("hidden badge")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de botón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("—")])])])])}],!1,null,null,null);r.options.__file="badge.md";t.default=r.exports},505:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info"}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]}),"element-demo1":n({},{methods:{hello:function(){alert("Hello World!")}}},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),this._v(" "),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),this._v(" "),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo3":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]}),"element-demo4":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]}),"element-demo5":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),this._v(" "),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Mostrar mensajes de alertas importantes.")]),e._m(1),a("p",[e._v("Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.")]),a("demo-block",[a("div",[a("p",[e._v("Alert provee 4 tipos de temas definidos por "),a("code",[e._v("type")]),e._v(", el valor por defecto es "),a("code",[e._v("info")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success">\n </el-alert>\n <el-alert\n title="info alert"\n type="info">\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning">\n </el-alert>\n <el-alert\n title="error alert"\n type="error">\n </el-alert>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Personalizar el botón de cerrar como texto u otros símbolos.")]),a("demo-block",[a("div",[a("p",[e._v("Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo "),a("code",[e._v("closable")]),e._v(" define si el componente puede cerrarse o no. Acepta un "),a("code",[e._v("boolean")]),e._v(", que por defecto es "),a("code",[e._v("true")]),e._v(". También puede configurar el atributo "),a("code",[e._v("close-text")]),e._v(" para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo "),a("code",[e._v("close-text")]),e._v(" debe ser un string. El evento "),a("code",[e._v("close")]),e._v(" se dispara cuando el componente se cierra.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="unclosable alert"\n type="success"\n :closable="false">\n </el-alert>\n <el-alert\n title="customized close-text"\n type="info"\n close-text="Gotcha">\n </el-alert>\n <el-alert\n title="alert with callback"\n type="warning"\n @close="hello">\n </el-alert>\n</template>\n\n<script>\n export default {\n methods: {\n hello() {\n alert(\'Hello World!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Mostrar un icono mejora la legibilidad.")]),a("demo-block",[a("div",[a("p",[e._v("Setear el atributo "),a("code",[e._v("show-icon")]),e._v(" muestra un icono que corresponde al tipo de Alert que se está mostrando.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("div"),a("element-demo3",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n center\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(6),a("p",[e._v("Descripción incluye un mensaje con información más detallada.")]),a("demo-block",[a("div",[a("p",[e._v("Además del atributo requerido "),a("code",[e._v("title")]),e._v(", se puede agregar el atributo "),a("code",[e._v("description")]),e._v(" para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.")])]),a("element-demo4",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="with description"\n type="success"\n description="This is a description.">\n </el-alert>\n</template>\n')])])])],2),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Finalmente este es un ejemplo utilizando icono y descripción.")])]),a("element-demo5",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n description="more text description"\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"uso-basico"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico","aria-hidden":"true"}},[this._v("¶")]),this._v(" Uso básico")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalización del botón de cerrar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usar-iconos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usar iconos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texto-centrado"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texto centrado")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Para centrar el texto utilice el atributo "),t("code",[this._v("center")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"con-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Con descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilizando icono y descripción")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptados")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("título")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de componente")]),a("td",[e._v("string")]),a("td",[e._v("success/warning/info/error")]),a("td",[e._v("info")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("texto descriptivo. También puede ser pasado con el slot por defecto")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closable")]),a("td",[e._v("si se puede cerrar o no")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("center")]),a("td",[e._v("si el texto debe estar centrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("close-text")]),a("td",[e._v("texto de cerrado personalizado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("show-icon")]),a("td",[e._v("si un icono del tipo de alerta se debe mostrar")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("El contenido del título de alerta.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"eventos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#eventos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Eventos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nombre del evento")]),t("th",[this._v("Descripción")]),t("th",[this._v("Parámetros")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Se dispara cuando la alerta se cierra")]),t("td",[this._v("—")])])])])}],!1,null,null,null);r.options.__file="alert.md";t.default=r.exports},509:function(e,t,a){"use strict";a.r(t);var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o={name:"component-doc",components:{"element-demo0":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:0}}),this._v(" "),t("el-progress",{attrs:{percentage:70}}),this._v(" "),t("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo1":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:80,color:"rgba(142, 113, 199, 0.7)"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1)},staticRenderFns:[]}),"element-demo2":n({},{},{render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:80,color:"#8e71c7"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[this._v("Done")])],1)},staticRenderFns:[]})}},l=a(0),r=Object(l.a)(o,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Usa el atributo "),a("code",[e._v("percentage")]),e._v(" para asignar el porcentage. Este es "),a("strong",[e._v("requerido")]),e._v(" y tiene que ser un valor entre "),a("code",[e._v("0-100")]),e._v(".")])]),a("element-demo0",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="80" color="#8e71c7"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(2),a("p",[e._v("En este caso el porcentage no toma espacio adicional.")]),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("stroke-width")]),e._v(" decide el ancho de la barra de progreso, y usa el atributo "),a("code",[e._v("text-inside")]),e._v(" para poner la descripción dentro de la misma.")])]),a("element-demo1",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Puede asignar el atributo "),a("code",[e._v("type")]),e._v(" como "),a("code",[e._v("circle")]),e._v(" para usar la barra circular de progreso, y usar el atributo "),a("code",[e._v("width")]),e._v(" para cambiar el tamaño del círculo.")])]),a("element-demo2",{attrs:{slot:"source"},slot:"source"}),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n<el-progress type="circle" :percentage="100" status="text">Done</el-progress>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progreso"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progreso","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progreso")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-externo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-externo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage externo)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-lineal-porcentage-interno"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal-porcentage-interno","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso lineal (porcentage interno)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barra-de-progreso-circular"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barra de progreso circular")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"atributos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#atributos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Atributos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Atributo")]),a("th",[e._v("Descripción")]),a("th",[e._v("Tipo")]),a("th",[e._v("Valores aceptado")]),a("th",[e._v("Por defecto")])])]),a("tbody",[a("tr",[a("td",[e._v("percentage")]),a("td",[e._v("porcentaje, requerido")]),a("td",[e._v("number")]),a("td",[e._v("0-100")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("type")]),a("td",[e._v("tipo de barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("line/circle")]),a("td",[e._v("line")])]),a("tr",[a("td",[e._v("stroke-width")]),a("td",[e._v("ancho de la barra de progreso")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("6")])]),a("tr",[a("td",[e._v("text-inside")]),a("td",[e._v("mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando "),a("code",[e._v("type")]),e._v(" es 'line'")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("status")]),a("td",[e._v("estado actual de la barra de progreso")]),a("td",[e._v("string")]),a("td",[e._v("success/exception/text")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo de la barra de progreso. Sobreescribe la propiedad "),a("code",[e._v("status")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("width")]),a("td",[e._v("ancho del canvas que contiene la barra de progreso circula")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("126")])]),a("tr",[a("td",[e._v("show-text")]),a("td",[e._v("mostrar porcentaje")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])}],!1,null,null,null);r.options.__file="progress.md";t.default=r.exports},510:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tipografia"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tipografia","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tipografía")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fuente"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fuente","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fuente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:n(240),alt:""}}),t("img",{attrs:{src:n(241),alt:""}}),t("img",{attrs:{src:n(242),alt:""}}),t("img",{attrs:{src:n(243),alt:""}}),t("img",{attrs:{src:n(244),alt:""}}),t("img",{attrs:{src:n(245),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convencion-de-fuentes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convención de fuentes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("img",{staticClass:"lineH-left",attrs:{src:n(246)}}),a("ul",{staticClass:"lineH-right"},[a("li",[e._v("line-height:1 "),a("span",[e._v("No line height")])]),a("li",[e._v("line-height:1.3 "),a("span",[e._v("Compact")])]),a("li",[e._v("line-height:1.5 "),a("span",[e._v("Regular")])]),a("li",[e._v("line-height:1.7 "),a("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],o=n(27),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],r={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},i={created:function(){o.a.$on("user-theme-config-update",this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(a){function e(e,t){return a.apply(this,arguments)}return e.toString=function(){return a.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(a){var n=this;l.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");a[e]?n[t]=a[e]:n[t]=r[t]})}}}},s=n(0),d=Object(s.a)(i,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[e._m(0),a("p",[e._v("Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.")]),e._m(1),e._m(2),e._m(3),a("table",{staticClass:"demo-typo-size"},[a("tbody",[e._m(4),a("tr",{style:{fontSize:e.font_size_extra_small}},[a("td",[e._v("Supplementary text")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_small}},[a("td",[e._v("Body (small)")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_base}},[a("td",[e._v("Body")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_medium}},[a("td",[e._v("Small Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_large}},[a("td",[e._v("Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),a("td",[e._v("Build with Element")])]),a("tr",{style:{fontSize:e.font_size_extra_large}},[a("td",[e._v("Main Title")]),a("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),a("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},a,!1,null,null,null);d.options.__file="typography.md";t.default=d.exports},511:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"inicio-rapido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicio-rapido","aria-hidden":"true"}},[e._v("¶")]),e._v(" Inicio rápido")]),a("p",[e._v("Esta sección te guía en el proceso de usar Element con webpack en un proyecto.")]),a("h3",{attrs:{id:"use-vue-cli-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),a("p",[e._v("We provide an "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),a("h3",{attrs:{id:"usa-la-plantilla-de-kit-de-inicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usa-la-plantilla-de-kit-de-inicio","aria-hidden":"true"}},[e._v("¶")]),e._v(" Usa la plantilla de Kit de inicio")]),a("p",[e._v("Proveemos una plantilla general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(". Para los usuarios de Laravel, también tenemos "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". Puedes descargarlas y agregarlas directamente también.")]),a("p",[e._v("Si prefiere no utilizarlas, lee las siguientes secciones de este documento.")]),a("h3",{attrs:{id:"importando-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando Element")]),a("p",[e._v("Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.")]),a("h4",{attrs:{id:"importando-todo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importando-todo","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importando todo")]),a("p",[e._v("In main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n")])]),a("p",[e._v("El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.")]),a("h4",{attrs:{id:"en-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#en-demanda","aria-hidden":"true"}},[e._v("¶")]),e._v(" En demanda")]),a("p",[e._v("Con la ayuda de "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.")]),a("p",[e._v("Primero, instale babel-plugin-component:")]),a("pre",[a("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),a("p",[e._v("Luego edite .babelrc:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n "presets": [["es2015", { "modules": false }]],\n "plugins": [\n [\n "component",\n {\n "libraryName": "element-ui",\n "styleLibraryName": "theme-chalk"\n }\n ]\n ]\n}\n')])]),a("p",[e._v("Luego, si necesita Button y Select, edite main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n")])]),a("p",[e._v("Ejemplo completo (Referencia completa de componentes "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxButton,\n CheckboxGroup,\n Switch,\n Select,\n Option,\n OptionGroup,\n Button,\n ButtonGroup,\n Table,\n TableColumn,\n DatePicker,\n TimeSelect,\n TimePicker,\n Popover,\n Tooltip,\n Breadcrumb,\n BreadcrumbItem,\n Form,\n FormItem,\n Tabs,\n TabPane,\n Tag,\n Tree,\n Alert,\n Slider,\n Icon,\n Row,\n Col,\n Upload,\n Progress,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Transfer,\n Container,\n Header,\n Aside,\n Main,\n Footer,\n Loading,\n MessageBox,\n Message,\n Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),a("h3",{attrs:{id:"configuracion-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuracion-global","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuración global")]),a("p",[e._v("Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: "),a("code",[e._v("size")]),e._v(", "),a("code",[e._v("zIndex")]),e._v(". "),a("code",[e._v("size")]),e._v(" define el tamaño por defecto de todos los componentes. The property "),a("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),a("p",[e._v("Importando Element completamente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),a("p",[e._v("Importando Element parcialmente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),a("p",[e._v("Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo "),a("code",[e._v("size")]),e._v(" será "),a("code",[e._v("small")]),e._v(". The initial z-index of modal boxes is 3000.")]),a("h3",{attrs:{id:"empiece-ya"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya","aria-hidden":"true"}},[e._v("¶")]),e._v(" Empiece ya!")]),a("p",[e._v("Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.")]),a("h3",{attrs:{id:"use-nuxt-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),a("p",[e._v("También podemos comenzar un proyecto usando "),a("a",{attrs:{href:"nuxtjs.org"}},[e._v("Nuxt.js")]),e._v(":")]),a("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[a("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);o.options.__file="quickstart.md";t.default=o.exports},515:function(e,t,n){"use strict";n.r(t);n(291);var a=n(0),o=Object(a.a)({},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",[e._v("Disciplinas de diseño")]),a("el-row",{staticClass:"cards",attrs:{gutter:14}},[a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(215),alt:"Consistency"}}),a("h4",[e._v("Consistencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(216),alt:"Feedback"}}),a("h4",[e._v("Comentarios")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(217),alt:"Efficiency"}}),a("h4",[e._v("Eficiencia")]),a("span")])]),a("el-col",{attrs:{xs:12,sm:6}},[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(218),alt:"Controllability"}}),a("h4",[e._v("Control")]),a("span")])])],1),a("h3",[e._v("Consistencia")]),e._m(0),a("h3",[e._v("Comentarios")]),e._m(1),a("h3",[e._v("Eficiencia")]),e._m(2),a("h3",[e._v("Control")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistente con la vida real: ")]),this._v("en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.")]),t("li",[t("strong",[this._v("Consistente dentro de la interfaz: ")]),this._v("todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Comentarios sobre la operación: ")]),this._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),t("li",[t("strong",[this._v("Comentarios visuales: ")]),this._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifica el proceso: ")]),this._v("Mantiene el proceso operativo simple e intuitivo.")]),t("li",[t("strong",[this._v("Bien definido y claro: ")]),this._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),t("li",[t("strong",[this._v("Fácil de identificar: ")]),this._v("La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Toma de decisiones: ")]),this._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),t("li",[t("strong",[this._v("Consecuencias controladas: ")]),this._v("Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.")])])}],!1,null,"2a761e6e",null);o.options.__file="design.vue";t.default=o.exports},516:function(e,t,n){"use strict";n.r(t);var a=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[e._v("Recursos")]),a("p",[e._v("Se están desarrollando más recursos")]),a("div",{staticClass:"cards"},[a("ul",{staticClass:"container"},[a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(237),alt:""}}),a("h3",[e._v("Componetes de Axure")]),a("p",[e._v("Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Descarga")])])]),a("li",[a("div",{staticClass:"card"},[a("img",{attrs:{src:n(238),alt:""}}),a("h3",[e._v("Plantilla de Sketch")]),a("p",[e._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),a("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Descarga")])])])])])])}],o=(n(295),n(0)),l=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},a,!1,null,"f43a8e5a",null);l.options.__file="resource.vue";t.default=l.exports},519:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),e._v(" Tema personalizado")]),a("p",[e._v("Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.")]),a("h3",{attrs:{id:"cambiando-el-color-del-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cambiando-el-color-del-tema","aria-hidden":"true"}},[e._v("¶")]),e._v(" Cambiando el color del tema")]),a("p",[e._v("Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el "),a("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("sitio de visualización de temas")]),e._v(". Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.")]),a("p",[e._v("Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).")]),a("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto","aria-hidden":"true"}},[e._v("¶")]),e._v(" Actualizando variables SCSS en tu proyecto")]),a("p",[a("code",[e._v("theme-chalk")]),e._v(" esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, "),a("code",[e._v("element-variables.scss")]),e._v(":")]),a("pre",[a("code",{staticClass:"language-html"},[e._v("/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[e._v("Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:")]),a("pre",[a("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[e._v("Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.")])]),a("h3",{attrs:{id:"cli-para-generar-temas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cli-para-generar-temas","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI para generar temas")]),a("p",[e._v("Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:")]),a("h4",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Instalación")])]),a("p",[e._v("Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),a("p",[e._v("Ahora, instale el tema "),a("code",[e._v("chalk")]),e._v(" desde npm o Github.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{attrs:{id:"inicializar-archivo-de-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inicializar-archivo-de-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Inicializar archivo de variables")])]),a("p",[e._v("Después de haber instalado correctamente los paquetes, el comando "),a("code",[e._v("et")]),e._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilize "),a("code",[e._v("node_modules/.bin/et")]),e._v(" en su lugar). Ejecute "),a("code",[e._v("-i")]),e._v(" para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama "),a("code",[e._v("element-variables.scss")]),e._v(". También puede especificar un directorio distinto.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[e._v("En el archivo "),a("code",[e._v("element-variables.scss")]),e._v(" podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:")]),a("pre",[a("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),a("h4",{attrs:{id:"modificando-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modificando-variables","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Modificando variables")])]),a("p",[e._v("Solo debe modificar el archivo "),a("code",[e._v("element-variables.scss")]),e._v(", por ejemplo, para cambiar el color del tema a rojo:")]),a("pre",[a("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),a("h4",{attrs:{id:"construyendo-el-tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#construyendo-el-tema","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Construyendo el tema")])]),a("p",[e._v("Después de haber modificado el archivo de variables, utilizaremos el comando "),a("code",[e._v("et")]),e._v(" para construir nuestro tema. Puedes activar el modo "),a("code",[e._v("watch")]),e._v(" agregando el parámetro "),a("code",[e._v("-w")]),e._v(". Y, si desea personalizar el nombre del archivo, debes agregar el parámetro "),a("code",[e._v("-c")]),e._v(" seguido del nombre.")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h4",{attrs:{id:"importar-un-tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema personalizado")])]),a("p",[e._v("Por defecto, el archivo de tema construido es colocado dentro de "),a("code",[e._v("./theme")]),e._v(". Puede especificar un directorio distinto utilizando el parámetro "),a("code",[e._v("-o")]),e._v(". Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),a("h4",{attrs:{id:"importar-un-tema-de-componente-bajo-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-de-componente-bajo-demanda","aria-hidden":"true"}},[e._v("¶")]),a("strong",[e._v("Importar un tema de componente bajo demanda")])]),a("p",[e._v("Si esta utilizando "),a("code",[e._v("babel-plugin-component")]),e._v(" para importar bajo demanda, solo debe modificar el archivo "),a("code",[e._v(".babelrc")]),e._v(" y especificar en la propiedad "),a("code",[e._v("styleLibraryName")]),e._v(" la ruta en donde se encuentra localizado su tema personalizado relativo a "),a("code",[e._v(".babelrc")]),e._v(". "),a("strong",[e._v("Nota")]),e._v(" el carácter "),a("code",[e._v("~")]),e._v(" es obligatorio:")]),a("pre",[a("code",{staticClass:"language-json"},[e._v('{\n "plugins": [\n [\n "component",\n {\n "libraryName": "element-ui",\n "styleLibraryName": "~theme"\n }\n ]\n ]\n}\n')])]),a("p",[e._v("Si no esta familiarizado con "),a("code",[e._v("babel-plugin-component")]),e._v(", por favor diríjase a la documentación sobre "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Como Iniciar")]),e._v(". Para más detalles, consulte el "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("repositorio del proyecto")]),e._v(" de "),a("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);o.options.__file="custom-theme.md";t.default=o.exports},529:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"internacionalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internacionalizacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internacionalización")]),a("p",[e._v("El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[e._v("O si está importando Element a petición:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[e._v("El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con "),a("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" proporcionado por el webpack puede reemplazar la localización predeterminada:")]),a("p",[e._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("{\n plugins: [\n new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n ]\n}\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-5-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@5.x")])]),a("p",[e._v("Element es compatible con "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", lo que facilita aún más la conmutación multilingüe.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),a("h2",{attrs:{id:"compatible-con-otros-plugins-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-otros-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con otros plugins i18n")]),a("p",[e._v("Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n i18n: function (path, options) {\n // ...\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-con-vue-i18n-6-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-con-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("vue-i18n@6.x")])]),a("p",[e._v("Necesita manejarlo manualmente para ser compatible con "),a("code",[e._v("6.x")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n en: {\n message: 'hello',\n ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n },\n zh: {\n message: '你好',\n ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n locale: 'en', // set locale\n messages, // set locale messages\n})\n\nVue.use(Element, {\n i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),a("h2",{attrs:{id:"personalizacion-de-i18n-en-componentes-bajo-peticion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-de-i18n-en-componentes-bajo-peticion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Personalización de i18n en componentes bajo petición")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n en: {\n message: 'hello',\n ...enLocale\n },\n zh: {\n message: '你好',\n ...zhLocale\n }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n locale: 'en', // set locale\n messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"importar-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importar via CDN")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),a("p",[e._v("Compatible con "),a("code",[e._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n Vue.locale(\'en\', ELEMENT.lang.en)\n Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),a("p",[e._v("Actualmente Element está disponible en los siguientes idiomas:")]),a("ul",{staticClass:"language-list"},[a("li",[e._v("Simplified Chinese (zh-CN)")]),a("li",[e._v("English (en)")]),a("li",[e._v("German (de)")]),a("li",[e._v("Portuguese (pt)")]),a("li",[e._v("Spanish (es)")]),a("li",[e._v("Danish (da)")]),a("li",[e._v("French (fr)")]),a("li",[e._v("Norwegian (nb-NO)")]),a("li",[e._v("Traditional Chinese (zh-TW)")]),a("li",[e._v("Italian (it)")]),a("li",[e._v("Korean (ko)")]),a("li",[e._v("Japanese (ja)")]),a("li",[e._v("Dutch (nl)")]),a("li",[e._v("Vietnamese (vi)")]),a("li",[e._v("Russian (ru-RU)")]),a("li",[e._v("Turkish (tr-TR)")]),a("li",[e._v("Brazilian Portuguese (pt-br)")]),a("li",[e._v("Farsi (fa)")]),a("li",[e._v("Thai (th)")]),a("li",[e._v("Indonesian (id)")]),a("li",[e._v("Bulgarian (bg)")]),a("li",[e._v("Polish (pl)")]),a("li",[e._v("Finnish (fi)")]),a("li",[e._v("Swedish (sv-SE)")]),a("li",[e._v("Greek (el)")]),a("li",[e._v("Slovak (sk)")]),a("li",[e._v("Catalunya (ca)")]),a("li",[e._v("Czech (cs-CZ)")]),a("li",[e._v("Ukrainian (ua)")]),a("li",[e._v("Turkmen (tk)")]),a("li",[e._v("Tamil (ta)")]),a("li",[e._v("Latvian (lv)")]),a("li",[e._v("Afrikaans (af-ZA)")]),a("li",[e._v("Estonian (ee)")]),a("li",[e._v("Slovenian (sl)")]),a("li",[e._v("Arabic (ar)")]),a("li",[e._v("Hebrew (he)")]),a("li",[e._v("Lithuanian (lt)")]),a("li",[e._v("Mongolian (mn)")]),a("li",[e._v("Kazakh (kz)")]),a("li",[e._v("Hungarian (hu)")]),a("li",[e._v("Romanian (ro)")]),a("li",[e._v("Kurdish (ku)")]),a("li",[e._v("Uighur (ug-CN)")]),a("li",[e._v("Khmer (km)")]),a("li",[e._v("Serbian (sr)")]),a("li",[e._v("Vasco (eu)")]),a("li",[e._v("Kirguizstán (kg)")]),a("li",[e._v("Armenio (hy)")]),a("li",[e._v("Croatian (hr)")])]),a("p",[e._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("aqui")]),e._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null);o.options.__file="i18n.md";t.default=o.exports},530:function(e,t,a){"use strict";a.r(t);var n=a(0),o=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"},[a("h2",{attrs:{id:"instalacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#instalacion","aria-hidden":"true"}},[e._v("¶")]),e._v(" Instalación")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),a("p",[e._v("Instalar mediante npm es la forma recomendada ya que se integra facilmente con "),a("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),a("p",[e._v("Obtenga la última versión desde "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , e importe el JavaScript y los archivos CSS en su página.")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),a("p",[e._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a "),a("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" para más información.")]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),a("p",[e._v("Si esta usando un CDN, una página con Hello-World es fácil con Element. "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),a("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n See the Pen "),a("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n ("),a("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),a("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),a("p",[e._v("Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: "),a("a",{attrs:{href:"/#/es/component/quickstart"}},[e._v("Quick Start")])])])}],!1,null,null,null);o.options.__file="installation.md";t.default=o.exports}}]);
Reference in New Issue View Git Blame Copy Permalink