https://chengchuu.github.io/mazey-element-ui/es.84d3c9e.js

1(self.webpackChunkmazey_element_ui=self.webpackChunkmazey_element_ui||[]).push([[763],{70772(e,t,a){const n={"./es/alert.md":88371,"./es/avatar.md":32873,"./es/backtop.md":206,"./es/badge.md":95964,"./es/border.md":3041,"./es/breadcrumb.md":51391,"./es/button.md":51229,"./es/calendar.md":57045,"./es/card.md":8706,"./es/carousel.md":12094,"./es/cascader.md":23480,"./es/checkbox.md":27898,"./es/collapse.md":99449,"./es/color-picker.md":58410,"./es/color.md":51311,"./es/container.md":49456,"./es/custom-theme.md":79353,"./es/date-picker.md":89428,"./es/datetime-picker.md":12763,"./es/descriptions.md":89926,"./es/dialog.md":30990,"./es/divider.md":44481,"./es/drawer.md":60496,"./es/dropdown.md":40947,"./es/empty.md":57373,"./es/form.md":68751,"./es/i18n.md":34511,"./es/icon.md":27694,"./es/image.md":90376,"./es/infiniteScroll.md":75745,"./es/input-number.md":68058,"./es/input.md":83502,"./es/installation.md":35913,"./es/layout.md":64415,"./es/link.md":56927,"./es/loading.md":76926,"./es/menu.md":69745,"./es/message-box.md":59461,"./es/message.md":6939,"./es/notification.md":9425,"./es/page-header.md":32821,"./es/pagination.md":37277,"./es/popconfirm.md":1054,"./es/popover.md":58016,"./es/progress.md":80187,"./es/quickstart.md":40397,"./es/radio.md":41810,"./es/rate.md":25434,"./es/result.md":62870,"./es/select.md":46665,"./es/skeleton.md":5788,"./es/slider.md":82425,"./es/statistic.md":59846,"./es/steps.md":4050,"./es/switch.md":31438,"./es/table.md":75090,"./es/tabs.md":33662,"./es/tag.md":5308,"./es/time-picker.md":13697,"./es/timeline.md":55575,"./es/tooltip.md":14961,"./es/transfer.md":90815,"./es/transition.md":87748,"./es/tree.md":40529,"./es/typography.md":93236,"./es/upload.md":3908};function l(e){const t=o(e);return a(t)}function o(e){if(!a.o(n,e)){const t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return n[e]}l.keys=function(){return Object.keys(n)},l.resolve=o,e.exports=l,l.id=70772},1765(e,t,a){const n={"./component.vue":53543,"./design.vue":78994,"./guide.vue":42104,"./index.vue":78522,"./nav.vue":72372,"./resource.vue":44970};function l(e){const t=o(e);return a(t)}function o(e){if(!a.o(n,e)){const t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return n[e]}l.keys=function(){return Object.keys(n)},l.resolve=o,e.exports=l,l.id=1765},88371(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-alert",{attrs:{title:"success alert",type:"success"}}),e._v(" "),a("el-alert",{attrs:{title:"info alert",type:"info"}}),e._v(" "),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),e._v(" "),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-alert",{attrs:{title:"success alert",type:"success",effect:"dark"}}),e._v(" "),a("el-alert",{attrs:{title:"info alert",type:"info",effect:"dark"}}),e._v(" "),a("el-alert",{attrs:{title:"warning alert",type:"warning",effect:"dark"}}),e._v(" "),a("el-alert",{attrs:{title:"error alert",type:"error",effect:"dark"}})]],2)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),e._v(" "),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),e._v(" "),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:e.hello}})]],2)},staticRenderFns:[]},{methods:{hello:function(){alert("Hello World!")}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo5":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-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),e._v(" "),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]},{})}},o=(0,a(14486).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("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("c

1ode",[e._v("info")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo0")],1),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),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Use "),a("code",[e._v("effect")]),e._v(" para cambiar el tema, por defecto es "),a("code",[e._v("light")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),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    effect="dark">\n  </el-alert>\n  <el-alert\n    title="info alert"\n    type="info"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="warning alert"\n    type="warning"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="error alert"\n    type="error"\n    effect="dark">\n  </el-alert>\n</template>\n')])])])],2),e._m(4),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("template",{slot:"source"},[a("element-demo2")],1),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(5),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("template",{slot:"source"},[a("element-demo3")],1),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(6),e._m(7),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),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(8),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("c

1ode",[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("template",{slot:"source"},[a("element-demo5")],1),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(9),a("demo-block",[a("div",[a("p",[e._v("Finalmente este es un ejemplo utilizando icono y descripción.")])]),a("template",{slot:"source"},[a("element-demo6")],1),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(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert"}},[e._v("¶")]),e._v(" Alert")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme"}},[e._v("¶")]),e._v(" Theme")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Alert provee dos diferentes temas  "),a("code",[e._v("light")]),e._v(" y "),a("code",[e._v("dark")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizacion-del-boton-de-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion-del-boton-de-cerrar"}},[e._v("¶")]),e._v(" Personalización del botón de cerrar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"usar-iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usar-iconos"}},[e._v("¶")]),e._v(" Usar iconos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"texto-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado"}},[e._v("¶")]),e._v(" Texto centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Para centrar el texto utilice el atributo "),a("code",[e._v("center")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"con-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-descripcion"}},[e._v("¶")]),e._v(" Con descripción")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"utilizando-icono-y-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utilizando-icono-y-descripcion"}},[e._v("¶")]),e._v(" Utilizando icono y descripción")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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")])]),a("tr",[a("td",[e._v("effect")]),a("td",[e._v("selecciona tema")]),a("td",[e._v("string")]),a("td",[e._v("light/dark")]),a("td",[e._v("light")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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("descripción")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("El contenido del título de alerta.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("close")]),a("td",[e._v("Se dispara cuando la alerta se cierra")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},32873(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",{staticClass:"demo-avatar demo-basic"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[e._v("circle")]),e._v(" "),a("div",{staticClass:"demo-basic--circle"},[a("div",{staticClass:"block"},[a("el-avatar",{attrs:{size:50,src:e.circleUrl}})],1),e._v(" "),e._l(e.sizeList,function(t){return a("div",{key:t,staticClass:"block"},[a("el-avatar",{attrs:{size:t,src:e.circleUrl}})],1)})],2)]),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[e._v("square")]),e._v(" "),a("div",{staticClass:"demo-basic--circle"},[a("div",{staticClass:"block"},[a("el-avatar",{attrs:{shape:"square",size:50,src:e.squareUrl}})],1),e._v(" "),e._l(e.sizeList,function(t){return a("div",{key:t,staticClass:"block"},[a("el-avatar",{attrs:{shape:"square",size:t,src:e.squareUrl}})],1)})],2)])],1)]],2)},staticRenderFns:[]},{data:function(){return{circleUrl:a(75123),squareUrl:a(75123),sizeList:["large","medium","small"]}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticClass:"demo-type"},[n("div",[n("el-avatar",{attrs:{icon:"el-icon-user-solid"}})],1),e._v(" "),n("div",[n("el-avatar",{attrs:{src:a(75123)}})],1),e._v(" "),n("div",[n("el-avatar",[e._v(" user ")])],1)])]],2)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"demo-type"},[a("el-avatar",{attrs:{size:60,src:"/mazey-element-ui/missing-avatar.png"},on:{error:e.errorHandler}},[a("img",{attrs:{src:"~examples/assets/images/element-demo.jpeg"}})])],1)]],2)},staticRenderFns:[]},{methods:{errorHandler:function(){return!0}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"demo-fit"},e._l(e.fits,function(t){return a("div",{key:t,staticClass:"block"},[a("span",{staticClass:"title"},[e._v(e._s(t))]),e._v(" "),a("el-avatar",{attrs:{shape:"square",size:100,fit:t,src:e.url}})],1)}),0)]],2)},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:a(75123)}}})}},o=(0,a(14486).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("Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.")]),e._m(1),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-row class="demo-avatar demo-basic">\n    <el-col :span="12">\n      <div class="sub-title">circle</div>\n      <div class="demo-basic--circle">\n        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>\n        <div class="block" v-for="size in sizeList" :key="size">\n          <el-avatar :size="size" :src="circleUrl"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span="12">\n      <div class="sub-title">square</div>\n      <div class="demo-basic--circle">\n        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>\n        <div class="block" v-for="size in sizeList" :key="size">\n          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>\n        </div>\n      </div>\n    </el-col> \n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: require("examples/assets/images/element-demo.jpeg"),\n        squareUrl: require("examples/assets/images/element-demo.jpeg"),\n        sizeList: ["large", "medium", "small"]\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(3),a("p",[e._v("Soporta imágenes, iconos o caracteres.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-type">\n    <div>\n      <el-avatar icon="el-icon-user-solid"></el-avatar>\n    </div>\n    <div>\n      <el-avatar :src="require(\'examples/assets/images/element-demo.jpeg\')"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n')])])])],2),e._m(4),a("p",[e._v("Fallback cuando se produce un error de carga de imagen")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-type">\n    <el-avatar :size="60" src="/mazey-element-ui/missing-avatar.png" @error="errorHandler">\n      <img src="~examples/assets/images/element-demo.jpeg"/>\n      </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(5),e._m(6),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-fit">\n    <div class="block" v-for="fit in fits" :key="fit">

1\n        <span class="title">{{ fit }}</span>\n        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n        url: require(\'examples/assets/images/element-demo.jpeg\')\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),a("p",[e._v("| Nombre | Descripción |\n| default  | personalice el contenido del avatar |")])],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"avatar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#avatar"}},[e._v("¶")]),e._v(" Avatar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basico"}},[e._v("¶")]),e._v(" Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use los props "),a("code",[e._v("shape")]),e._v(" y "),a("code",[e._v("size")]),e._v(" para establecer la forma y el tamaño del avatar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tipos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos"}},[e._v("¶")]),e._v(" Tipos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fallback-cuando-se-produce-un-error-de-carga-de-imagen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallback-cuando-se-produce-un-error-de-carga-de-imagen"}},[e._v("¶")]),e._v(" Fallback cuando se produce un error de carga de imagen")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"como-encaja-la-imagen-en-su-contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#como-encaja-la-imagen-en-su-contenedor"}},[e._v("¶")]),e._v(" Cómo encaja la imagen en su contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("icon")]),a("td",[e._v("establece el tipo de representación a Icono, más información en  Componente Icon")]),a("td",[e._v("string")]),a("td"),a("td")]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("Establece el tamaño del avatar")]),a("td",[e._v("number/string")]),a("td",[e._v("number / large / medium / small")]),a("td",[e._v("large")])]),a("tr",[a("td",[e._v("shape")]),a("td",[e._v("establece la forma del avatar")]),a("td",[e._v("string")]),a("td",[e._v("circle / square")]),a("td",[e._v("circle")])]),a("tr",[a("td",[e._v("src")]),a("td",[e._v("la dirección de la imagen para un avatar de imagen")]),a("td",[e._v("string")]),a("td"),a("td")]),a("tr",[a("td",[e._v("srcSet")]),a("td",[e._v("Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice.")]),a("td",[e._v("string")]),a("td"),a("td")]),a("tr",[a("td",[e._v("alt")]),a("td",[e._v("Este atributo define una descripción de texto alternativo de la imagen")]),a("td",[e._v("string")]),a("td"),a("td")]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("establece cómo encaja la imagen en su contenedor para un avatar de imagen")]),a("td",[e._v("string")]),a("td",[e._v("fill / contain / cover / none / scale-down")]),a("td",[e._v("cover")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("error")]),a("td",[e._v("cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado")]),a("td",[e._v("(e: Event)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._v(" Slot")])}],!1,null,null,null).exports},206(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[e._v("\n  Scroll down to see the bottom-right button.\n  "),a("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap"}})]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[e._v("\n  Scroll down to see the bottom-right button.\n  "),a("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",bottom:100}},[a("div",{staticStyle:{"{\n        height":"100%",width:"100%","background-color":"#f2f5f6","box-shadow":"0 0 6px rgba(0,0,0, .12)","text-align":"center","line-height":"40px",color:"#1989fa"}},[e._v("\n      UP\n    ")])])]],2)},staticRenderFns:[]},{})}},o=(0,a(14486).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("Un botón para volver a la parte superior")]),e._m(1),a("p",[e._v("Desplácese hacia abajo para ver el botón en el lado inferior derecho.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Área de visualización de 40px * 40px.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">\n    <div\n      style="{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"backtop"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#backtop"}},[e._v("¶")]),e._v(" Backtop")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion"}},[e._v("¶")]),e._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("target")]),a("td",[e._v("el objetivo para activar el scroll")]),a("td",[e._v("string")]),a("td"),a("td")]),a("tr",[a("td",[e._v("visibility-height")]),a("td",[e._v("el botón no se mostrará hasta que la altura de desplazamiento alcance este valor")]),a("td",[e._v("number")]),a("td"),a("td",[e._v("200")])]),a("tr",[a("td",[e._v("right")]),a("td",[e._v("separación desde la derecha")]),a("td",[e._v("number")]),a("td"),a("td",[e._v("40")])]),a("tr",[a("td",[e._v("bottom")]),a("td",[e._v("separación desde abajo")]),a("td",[e._v("number")]),a("td"),a("td",[e._v("40")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("click")]),a("td",[e._v("se activa al hacer clic")]

1),a("td",[e._v("click event")])])])])}],!1,null,null,null).exports},95964(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[e._v("query")]),e._v(" "),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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("c

1ode",[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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge"}},[e._v("¶")]),e._v(" Badge")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"valor-maximo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valor-maximo"}},[e._v("¶")]),e._v(" Valor máximo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones"}},[e._v("¶")]),e._v(" Personalizaciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"pequeno-punto-rojo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pequeno-punto-rojo"}},[e._v("¶")]),e._v(" Pequeño punto rojo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("oculta el 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

1ón")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},3041(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>i});var n=a(18264),l=a(37937),o={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={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"};const s={created:function(){n.A.$on(l.a,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(e){var t=this;Object.keys(o).forEach(function(a){e[a]?t[o[a]]=e[a]:t[o[a]]=r[o[a]]})}}}},i=(0,a(14486).A)(s,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("Estandarizamos los bordes que se pueden utilizar en botones, tarjetas, pop-ups y otros componentes.")]),e._m(1),a("p",[e._v("Hay pocos estilos de borde para elegir.")]),e._m(2),e._m(3),a("p",[e._v("Hay pocos estilos de radio para elegir.")]),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("Hay pocos estilos de sombra para elegir.")]),a("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),a("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shadow 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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border"}},[e._v("¶")]),e._v(" Border")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"border-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-2"}},[e._v("¶")]),e._v(" Border")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",{staticClass:"demo-border"},[a("tbody",[a("tr",[a("td",{staticClass:"text"},[e._v("Name")]),a("td",{staticClass:"text"},[e._v("Thickness")]),a("td",{staticClass:"line"},[e._v("Demo")])]),a("tr",[a("td",{staticClass:"text"},[e._v("Solid")]),a("td",{staticClass:"text"},[e._v("1px")]),a("td",{staticClass:"line"},[a("div")])]),a("tr",[a("td",{staticClass:"text"},[e._v("Dashed")]),a("td",{staticClass:"text"},[e._v("2px")]),a("td",{staticClass:"line"},[a("div",{staticClass:"dashed"})])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"radius"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radius"}},[e._v("¶")]),e._v(" Radius")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shadow"}},[e._v("¶")]),e._v(" Shadow")])}],!1,null,null,null).exports},51391(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("homepage")]),e._v(" "),a("el-breadcrumb-item",[a("a",{attrs:{href:"/"}},[e._v("promotion management")])]),e._v(" "),a("el-breadcrumb-item",[e._v("promotion list")]),e._v(" "),a("el-breadcrumb-item",[e._v("promotion detail")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("homepage")]),e._v(" "),a("el-breadcrumb-item",[e._v("promotion management")]),e._v(" "),a("el-breadcrumb-item",[e._v("promotion list")]),e._v(" "),a("el-breadcrumb-item",[e._v("promotion detail")])],1)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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 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("c

1ode",[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 carácter separador. El valor por defecto es '/'.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb"}},[e._v("¶")]),e._v(" Breadcrumb")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"icono-separador"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icono-separador"}},[e._v("¶")]),e._v(" Icono separador")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"breadcrumb-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-atributos"}},[e._v("¶")]),e._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("carácter 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-atributos"}},[e._v("¶")]),e._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).exports},51229(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",cir

1cle:""}}),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,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"text"}},[e._v("Text Button")]),e._v(" "),a("el-button",{attrs:{type:"text",disabled:""}},[e._v("Text Button")])],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Search")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[e._v("Previous Page")]),e._v(" "),a("el-button",{attrs:{type:"primary"}},[e._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),e._v(" "),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"primary",loading:!0}},[e._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:[]},{})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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>

1Success</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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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 personalizados.")])]),a("template",{slot:"source"},[a("element-demo3")],1),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("template",{slot:"source"},[a("element-demo4")],1),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("c

1ode",[e._v("loading")]),e._v(" a "),a("code",[e._v("true")]),e._v(" para mostrar el estado de descarga.")])]),a("template",{slot:"source"},[a("element-demo5")],1),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(" o "),a("code",[e._v("mini")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo6")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button"}},[e._v("¶")]),e._v(" Button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"boton-deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-deshabilitado"}},[e._v("¶")]),e._v(" Botón deshabilitado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" determina su un botón esta deshabilitado.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"boton-de-texto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-texto"}},[e._v("¶")]),e._v(" Botón de texto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"boton-icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-icono"}},[e._v("¶")]),e._v(" Botón icono")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"grupo-de-botones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-botones"}},[e._v("¶")]),e._v(" Grupo de botones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"boton-de-descarga"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-de-descarga"}},[e._v("¶")]),e._v(" Botón de descarga")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos"}},[e._v("¶")]),e._v(" Tamaños")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 botón 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("c

1ode",[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).exports},57045(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-calendar",{model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:new Date}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-calendar",{scopedSlots:e._u([{key:"dateCell",fn:function(t){t.date;var n=t.data;return[a("p",{class:n.isSelected?"is-selected":""},[e._v("\n      "+e._s(n.day.split("-").slice(1).join("-"))+" "+e._s(n.isSelected?"✔️":"")+"\n    ")])]}}])})],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-calendar",{attrs:{range:["2019-03-04","2019-03-24"]}})],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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 fechas.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.")])]),a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-calendar v-model="value">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Personalice lo que se muestra en la celda del calendario configurando el "),a("code",[e._v("scoped-slot")]),e._v(" llamada "),a("c

1ode",[e._v("dateCell")]),e._v(". En la ranura de alcance se puede obtener la fecha (la fecha de la celda actual), los datos (incluyendo el tipo, isSelected, el atributo day). Para obtener más información, consulte la documentación de la API a continuación.")])]),a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar>\n  \x3c!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax--\x3e\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n")])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Defina el atributo "),a("code",[e._v("range")]),e._v(" para especificar el rango de visualización del calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.")])]),a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n")])])])],2),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"calendar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#calendar"}},[e._v("¶")]),e._v(" Calendar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basico"}},[e._v("¶")]),e._v(" Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado"}},[e._v("¶")]),e._v(" Contenido personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rango"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango"}},[e._v("¶")]),e._v(" Rango")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 vinculante")]),a("td",[e._v("Date/string/number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("range")]),a("td",[e._v("rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time debe ser el primer dia de la semana, end time debe ser el ultimo día de la semana, el time entre las fechas no puede exceder dos meses")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("first-day-of-week")]),a("td",[e._v("primer día de la semana")]),a("td",[e._v("Number")]),a("td",[e._v("1 to 7")]),a("td",[e._v("1")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"datecell-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datecell-scoped-slot"}},[e._v("¶")]),e._v(" dateCell 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("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("date")]),a("td",[e._v("fecha que la celda representa")]),a("td",[e._v("Date")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("data")]),a("td",[e._v("{ type, isSelected, day}. "),a("code",[e._v("type")]),e._v(" indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; "),a("code",[e._v("isSelected")]),e._v(" indica si la fecha está seleccionad

1a; "),a("code",[e._v("day")]),e._v(" es la fecha formateada en el formato yyyy-MM-dd")]),a("td",[e._v("Object")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},8706(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-card",{staticClass:"box-card"},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",[e._v("Card name")]),e._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[e._v("Operation button")])],1),e._v(" "),e._l(4,function(t){return a("div",{key:t,staticClass:"text item"},[e._v("\n    "+e._s("List item "+t)+"\n  ")])})],2)],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-card",{staticClass:"box-card"},e._l(4,function(t){return a("div",{key:t,staticClass:"text item"},[e._v("\n    "+e._s("List item "+t)+"\n  ")])}),0)],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",e._l(2,function(t,n){return a("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"~examples/assets/images/hamburger.png"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[e._v("Yummy hamburger")]),e._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[e._v(e._s(e.currentDate))]),e._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[e._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]},{data:function(){return{currentDate:new Date}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("el-card",{attrs:{shadow:"always"}},[e._v("\n      Always\n    ")])],1),e._v(" "),a("el-col",{attrs:{span:8}},[a("el-card",{attrs:{shadow:"hover"}},[e._v("\n      Hover\n    ")])],1),e._v(" "),a("el-col",{attrs:{span:8}},[a("el-card",{attrs:{shadow:"never"}},[e._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).A)(l,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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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("c

1ode",[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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card"}},[e._v("¶")]),e._v(" Card")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Muestra información dentro de un contenedor "),a("code",[e._v("card")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Card")]),e._v(" incluye titulo, contenido y operaciones.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"card-simple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-simple"}},[e._v("¶")]),e._v(" Card simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"con-imagenes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-imagenes"}},[e._v("¶")]),e._v(" Con imágenes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shadow"}},[e._v("¶")]),e._v(" Shadow")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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).exports},12094(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Switch when indicator is hovered (default)")]),e._v(" "),a("el-carousel",{attrs:{height:"150px"}},e._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",{staticClass:"small"},[e._v(e._s(t))])])}),1)],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Switch when indicator is clicked")]),e._v(" "),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},e._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",{staticClass:"small"},[e._v(e._s(t))])])}),1)],1)]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-carousel",{attrs:{"indicator-position":"outside"}},e._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},e._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},e._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",{staticClass:"medium"},[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-carousel",{attrs:{height:"200px",direction:"vertical",autoplay:!1}},e._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",{staticClass:"medium"},[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{})}},o=(0,a(14486).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("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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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 class="small">{{ 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 class="small">{{ 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 paginación 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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>

1\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3 class="medium">{{ 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),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel height="200px" direction="vertical" :autoplay="false">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3 class="medium">{{ 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(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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel"}},[e._v("¶")]),e._v(" Carousel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"indicadores"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicadores"}},[e._v("¶")]),e._v(" Indicadores")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"flechas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flechas"}},[e._v("¶")]),e._v(" Flechas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"modo-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modo-card"}},[e._v("¶")]),e._v(" Modo Card")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo "),a("code",[e._v("card")]),e._v(" para carrusel.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Por defecto, "),a("code",[e._v("direction")]),e._v(" es "),a("code",[e._v("horizontal")]),e._v(". El carousel puede ser mostrado de forma vertical cambiando "),a("code",[e._v("direction")]),e._v(" a "),a("code",[e._v("vertical")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel"}},[e._v("¶")]),e._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("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("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 mili segundos")]),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")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("dirección en la que se muestra el contenido")]),a("td",[e._v("string")]),a("td",[e._v("horizontal/vertical")]),a("td",[e._v("horizontal")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-carousel"}},[e._v("¶")]),e._v(" Eventos 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("Nombre 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 slider activo cambia")]),a("td",[e._v("Indice del nuevo slider activo, indice del anterior slider activo.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-de-carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-carousel"}},[e._v("¶")]),e._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("Parámetros")])])]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-carousel-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-carousel-item"}},[e._v("¶")]),e._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 ítem que puede ser usado en "),a("c

1ode",[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 paginación correspondiente")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},23480(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}var l;a.r(t),a.d(t,{default:()=>r});const 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("Child options expand when clicked (default)")]),e._v(" "),a("el-cascader",{attrs:{options:e.options},on:{change:e.handleChange},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Child options expand when hovered")]),e._v(" "),a("el-cascader",{attrs:{options:e.options,props:{expandTrigger:"hover"}},on:{change:e.handleChange},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)])},staticRenderFns:[]},{data:function(){return{value:[],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"}

1]},{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"}]}]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader",{attrs:{options:e.options}})],1)},staticRenderFns:[]},{data:function(){return{options:[{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"}

1]},{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"}]}]}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader",{attrs:{options:e.options,clearable:""}})],1)},staticRenderFns:[]},{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"}

1]},{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"}]}]}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader",{attrs:{options:e.options,"show-all-levels":!1}})],1)},staticRenderFns:[]},{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"}

1]},{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"}]}]}}}),"element-demo4":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("Display all tags (default)")]),e._v(" "),a("el-cascader",{attrs:{options:e.options,props:e.props,clearable:""}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Collapse tags")]),e._v(" "),a("el-cascader",{attrs:{options:e.options,props:e.props,"collapse-tags":"",clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{props:{multiple:!0},options:[{value:1,label:"Asia",children:[{value:2,label:"China",children:[{value:3,label:"Beijing"},{value:4,label:"Shanghai"},{value:5,label:"Hangzhou"}]},{value:6,label:"Japan",children:[{value:7,label:"Tokyo"},{value:8,label:"Osaka"},{value:9,label:"Kyoto"}]},{value:10,label:"Korea",children:[{value:11,label:"Seoul"},{value:12,label:"Busan"},{value:13,label:"Taegu"}]}]},{value:14,label:"Europe",children:[{value:15,label:"France",children:[{value:16,label:"Paris"},{value:17,label:"Marseille"},{value:18,label:"Lyon"}]},{value:19,label:"UK",children:[{value:20,label:"London"},{value:21,label:"Birmingham"},{value:22,label:"Manchester"}]}]},{value:23,label:"North America",children:[{value:24,label:"US",children:[{value:25,label:"New York"},{value:26,label:"Los Angeles"},{value:27,label:"Washington"}]},{value:28,label:"Canada",children:[{value:29,label:"Toronto"},{value:30,label:"Montreal"},{value:31,label:"Ottawa"}]}]}]}}}),"element-demo5":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("Select any level of options (Single selection)")]),e._v(" "),a("el-cascader",{attrs:{options:e.options,props:{checkStrictly:!0},clearable:""}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Select any level of options (Multiple selection)")]),e._v(" "),a("el-cascader",{attrs:{options:e.options,props:{multiple:!0,checkStrictly:!0},clearable:""}})],1)])},staticRenderFns:[]},{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"}

1]},{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"}]}]}}}),"element-demo6":(l=0,n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader",{attrs:{props:e.props}})],1)},staticRenderFns:[]},{data:function(){return{props:{lazy:!0,lazyLoad:function(e,t){var a=e.level;setTimeout(function(){var e=Array.from({length:a+1}).map(function(e){return{value:++l,label:"Option - "+l,leaf:a>=2}});t(e)},1e3)}}}}})),"element-demo7":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("Filterable (Single selection)")]),e._v(" "),a("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:e.options,filterable:""}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Filterable (Multiple selection)")]),e._v(" "),a("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:e.options,props:{multiple:!0},filterable:""}})],1)])},staticRenderFns:[]},{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"}

1]},{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"}]}]}}}),"element-demo8":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader",{attrs:{options:e.options},scopedSlots:e._u([{key:"default",fn:function(t){var n=t.node,l=t.data;return[a("span",[e._v(e._s(l.label))]),e._v(" "),n.isLeaf?e._e():a("span",[e._v(" ("+e._s(l.children.length)+") ")])]}}])})],1)},staticRenderFns:[]},{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"}

1]},{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"}]}]}}}),"element-demo9":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-cascader-panel",{attrs:{options:e.options}})],1)},staticRenderFns:[]},{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"}

1]},{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"}]}]}}})}},r=(0,a(14486).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, se puede utilizar Cascader para verlas y seleccionarlas.")]),e._m(1),a("p",[e._v("Hay dos maneras de ampliar los elementos de opción hijos.")]),a("demo-block",[a("div",[a("p",[e._v("Asignar el atributo "),a("code",[e._v("options")]),e._v(" a un array de opciones genera un Cascader. El atributo "),a("code",[e._v("props.expandTrigger")]),e._v(" define cómo se expanden las opciones hijo.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\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        }

1, {\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    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 ítem en el array "),a("code",[e._v("options")]),e._v(" tiene un campo "),a("code",[e._v("disabled: true")]),e._v(", por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo "),a("code",[e._v("disabled")]),e._v(" en cada objeto de las opciones; 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.disabled")]),e._v(" (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo "),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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\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        }

1, {\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),e._m(5),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" clearable></el-cascader>\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',\

1n              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        }

1, {\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(6),a("p",[e._v("La entrada 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 muestran todos los niveles. Si es "),a("code",[e._v("false")]),e._v(", sólo se muestra el último nivel.")])]),a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" :show-all-levels=\"false\"></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        }

1, {\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),e._m(8),a("demo-block",[a("div",[a("p",[e._v("Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer "),a("code",[e._v("collapse-tags = true")]),e._v(" para plegar las etiquetas seleccionadas.")])]),a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Display all tags (default)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Collapse tags</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: 'Asia',\n          children: [{\n            value: 2,\n            label: 'China',\n            children: [\n              { value: 3, label: 'Beijing' },\n              { value: 4, label: 'Shanghai' },\n              { value: 5, label: 'Hangzhou' }\n            ]\n          }, {\n            value: 6,\n            label: 'Japan',\n            children: [\n              { value: 7, label: 'Tokyo' },\n              { value: 8, label: 'Osaka' },\n              { value: 9, label: 'Kyoto' }\n            ]\n          }, {\n            value: 10,\n            label: 'Korea',\n            children: [\n              { value: 11, label: 'Seoul' },\n              { value: 12, label: 'Busan' },\n              { value: 13, label: 'Taegu' }\n            ]\n          }]\n        }, {\n          value: 14,\n          label: 'Europe',\n          children: [{\n            value: 15,\n            label: 'France',\n            children: [\n              { value: 16, label: 'Paris' },\n              { value: 17, label: 'Marseille' },\n              { value: 18, label: 'Lyon' }\n            ]\n          }, {\n            value: 19,\n            label: 'UK',\n            children: [\n              { value: 20, label: 'London' },\n              { value: 21, label: 'Birmingham' },\n              { value: 22, label: 'Manchester' }\n            ]\n          }]\n        }, {\n          value: 23,\n          label: 'North America',\n          children: [{\n            value: 24,\n            label: 'US',\n            children: [\n              { value: 25, label: 'New York' },\n              { value: 26, label: 'Los Angeles' },\n              { value: 27, label: 'Washington' }\n            ]\n          }, {\n            value: 28,\n            label: 'Canada',\n            children: [\n              { value: 29, label: 'Toronto' },\n              { value: 30, label: 'Montreal' },\n              { value: 31, label: 'Ottawa' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),a("p",[e._v("En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("props.checkStrictly = true")]),e._v(" para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.")])]),a("template",{slot:"source"},[a("element-demo5")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Single selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Multiple selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>

1\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        }

1, {\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(10),a("p",[e._v("Carga dinámica de sus nodos hijos cuando se selecciona un nodo.")]),a("demo-block",[a("div",[a("p",[e._v("Establezca "),a("code",[e._v("lazy = true")]),e._v(" para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante "),a("code",[e._v("lazyload")]),e._v(". Hay dos parámetros de "),a("code",[e._v("lazyload")]),e._v(", el primer parámetro "),a("code",[e._v("node")]),e._v(" es el nodo en el que se hace clic actualmente, y el "),a("code",[e._v("resolve")]),e._v(" es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo "),a("code",[e._v("leaf")]),e._v(" (puede ser modificado por "),a("code",[e._v("props.leaf")]),e._v(") para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.")])]),a("template",{slot:"source"},[a("element-demo6")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-cascader :props="props"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `Option - ${id}`,\n                  leaf: level >= 2\n                }));\n              // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),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("filtrable")]),e._v(" a "),a("code",[e._v("el-cascader")]),e._v(" permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con "),a("code",[e._v("show-all-levels")]),e._v(") incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el "),a("code",[e._v("filter-method")]),e._v(" que acepta una función, el primer parámetro es "),a("code",[e._v("nodo")]),e._v(", el segundo es "),a("code",[e._v("keyword")]),e._v(", y necesitas devolver un valor booleano que indique si da en el blanco.")])]),a("template",{slot:"source"},[a("element-demo7")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Single selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Multiple selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></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        }

1, {\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(12),a("p",[e._v("Puede personalizar el contenido del nodo de cascada.")]),a("demo-block",[a("div",[a("p",[e._v("Puede personalizar el contenido del nodo del cascader mediante "),a("code",[e._v("scoped slot")]),e._v(". Tendrá acceso a "),a("code",[e._v("node")]),e._v(" y "),a("code",[e._v("data")]),e._v(" en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.")])]),a("template",{slot:"source"},[a("element-demo8")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\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        }

1, {\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(13),e._m(14),a("demo-block",[a("div",[a("p",[e._v("Al igual que "),a("code",[e._v("el-cascader")]),e._v(", puede establecer opciones alternativas mediante "),a("code",[e._v("options")]),e._v(", y habilitar otras características mediante "),a("code",[e._v("props")]),e._v(", consulte el formulario de la API a continuación para obtener más detalles.")])]),a("template",{slot:"source"},[a("element-demo9")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader-panel :options=\"options\"></el-cascader-panel>\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        }

1, {\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(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),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader"}},[e._v("¶")]),e._v(" Cascader")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opcion-disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opcion-disabled"}},[e._v("¶")]),e._v(" Opción Disabled")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Deshabilite una opción estableciendo el campo  "),a("code",[e._v("disabled")]),e._v(" en las opciones del objeto.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"limpiable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#limpiable"}},[e._v("¶")]),e._v(" Limpiable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Establezca el atributo "),a("code",[e._v("clearable")]),e._v(" para "),a("code",[e._v("el-cascader")]),e._v(" y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"visualizar-solo-el-ultimo-nivel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#visualizar-solo-el-ultimo-nivel"}},[e._v("¶")]),e._v(" Visualizar sólo el último nivel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccion-multiple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple"}},[e._v("¶")]),e._v(" Selección múltiple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Establezca "),a("code",[e._v("props.multiple = true")]),e._v(" para usar la selección múltiple.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccione-cualquier-nivel-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccione-cualquier-nivel-de-opciones"}},[e._v("¶")]),e._v(" Seleccione cualquier nivel de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"carga-dinamica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-dinamica"}},[e._v("¶")]),e._v(" Carga dinámica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"filtrable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrable"}},[e._v("¶")]),e._v(" Filtrable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-de-opciones-personalizadas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-de-opciones-personalizadas"}},[e._v("¶")]),e._v(" Contenido de opciones personalizadas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"panel-cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#panel-cascader"}},[e._v("¶")]),e._v(" Panel cascader")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("CascaderPanel")]),e._v(" es el componente central de "),a("code",[e._v("Cascader")]),e._v(" que tiene varias características como selección única, selección múltiple, carga dinámica, etc.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cascader"}},[e._v("¶")]),e._v(" Atributos de Cascader")])},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 ligado")]),a("td",[e._v("-")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones，las claves "),a("c

1ode",[e._v("value")]),e._v(" y "),a("code",[e._v("label")]),e._v(" pueden ser personalizadas por "),a("code",[e._v("Props")]),e._v(".")]),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 configuración, consulte la siguiente tabla.")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),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 del input")]),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 deshabilitada")]),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 el valor seleccionado puede ser borrado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("show-all-levels")]),a("td",[e._v("si muestra todos los niveles del valor seleccionado en el input")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("collapse-tags")]),a("td",[e._v("si se colapsan los tags en la selección múltiple")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("separator")]),a("td",[e._v("separador de las etiquetas de las opciones")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("' / '")])]),a("tr",[a("td",[e._v("filterable")]),a("td",[e._v("si las opciones pueden ser usadas para la búsqueda")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("filter-method")]),a("td",[e._v("lógica de búsqueda personalizable. El primer parámetro es "),a("code",[e._v("node")]),e._v(", el segundo es "),a("code",[e._v("keyword")]),e._v(", y es necesario devolver un valor boolean que indique si se ha tenido éxito.")]),a("td",[e._v("function(node, keyword)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("debounce")]),a("td",[e._v("retraso en mili segundos para el tipeo de los datos de filtro")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("300")])]),a("tr",[a("td",[e._v("before-filter")]),a("td",[e._v("hook 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("c

1ode",[e._v("Promise")]),e._v(" y luego se rechaza, se abortará el filtrado.")]),a("td",[e._v("function(value)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("popper-class")]),a("td",[e._v("nombre de clase personalizado para el menú desplegable de Cascader")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-cascader"}},[e._v("¶")]),e._v(" Eventos de Cascader")])},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 desencadena cuando cambia el valor ligado.")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("expand-change")]),a("td",[e._v("se desencadena cuando las opciones expandidas cambian")]),a("td",[e._v("un array de los nodos padres del nodo en expansión")])]),a("tr",[a("td",[e._v("blur")]),a("td",[e._v("se desencadena cuando Cascader se desenfoca")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("focus")]),a("td",[e._v("se activa cuando Cascader se enfoca")]),a("td",[e._v("(event: Event)")])]),a("tr",[a("td",[e._v("visible-change")]),a("td",[e._v("se activa cuando aparece/desaparece el menú desplegable")]),a("td",[e._v("verdadero cuando aparece, y falso de otra manera")])]),a("tr",[a("td",[e._v("remove-tag")]),a("td",[e._v("se activa cuando se quita la etiqueta en modo de selección múltiple")]),a("td",[e._v("el valor de la etiqueta que se quita")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cascader-metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader-metodos"}},[e._v("¶")]),e._v(" Cascader 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("getCheckedNodes")]),a("td",[e._v("Obtiene el array de los nodos seleccionados actualmente")]),a("td",[e._v("(leafOnly) Si solo devuelve los nodos chequeados, por defecto es "),a("code",[e._v("false")])])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots-de-cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-cascader"}},[e._v("¶")]),e._v(" Slots de Cascader")])},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("el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente.")])]),a("tr",[a("td",[e._v("empty")]),a("td",[e._v("cuando no hay opciones coincidentes.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-del-cascaderpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-cascaderpanel"}},[e._v("¶")]),e._v(" Atributos del CascaderPanel")])},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 ligado")]),a("td",[e._v("-")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("options")]),a("td",[e._v("datos de las opciones，las claves "),a("code",[e._v("value")]),e._v(" y "),a("code",[e._v("label")]),e._v(" pueden ser personalizadas por "),a("code",[e._v("Props")]),e._v(".")]),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 configuración, consulte la siguiente tabla.")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-cascaderpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-cascaderpanel"}},[e._v("¶")]),e._v(" Eventos de CascaderPanel")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("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 desencadena cuando cambia el valor ligado.")]),a("td",[e._v("valor")])]),a("tr",[a("td",[e._v("expand-ch

1ange")]),a("td",[e._v("se desencadena cuando las opciones expandidas cambian")]),a("td",[e._v("un array de los nodos padres del nodo en expansión")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cascaderpanel-metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-metodos"}},[e._v("¶")]),e._v(" CascaderPanel 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("getCheckedNodes")]),a("td",[e._v("Obtiene el array de los nodos seleccionados actualmente")]),a("td",[e._v("(leafOnly) Si solo devuelve los nodos chequeados, por defecto es "),a("code",[e._v("false")])])]),a("tr",[a("td",[e._v("clearCheckedNodes")]),a("td",[e._v("Limpia de nodos chequeados")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots-de-cascaderpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-cascaderpanel"}},[e._v("¶")]),e._v(" Slots de CascaderPanel")])},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("el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[e._v("¶")]),e._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("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("expandTrigger")]),a("td",[e._v("modo de disparo de las opciones de ampliación")]),a("td",[e._v("string")]),a("td",[e._v("click / hover")]),a("td",[e._v("'click'")])]),a("tr",[a("td",[e._v("multiple")]),a("td",[e._v("si la selección múltiple esta activada")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("checkStrictly")]),a("td",[e._v("si el estado verificado de un nodo no afecta a sus nodos padre e hijo")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("emitPath")]),a("td",[e._v("cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo.")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("lazy")]),a("td",[e._v("si se deben cargar dinámicamente nodos hijo, usarlo con el atributo "),a("code",[e._v("lazyload")]),e._v(".")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("lazyLoad")]),a("td",[e._v("para cargar datos de nodos hijo, sólo funciona cuando "),a("c

1ode",[e._v("lazy")]),e._v(" es verdadero")]),a("td",[e._v("function(node, resolve)")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("especificar qué clave de objeto de nodo se utiliza como valor del nodo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'value'")])]),a("tr",[a("td",[e._v("label")]),a("td",[e._v("especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'label'")])]),a("tr",[a("td",[e._v("children")]),a("td",[e._v("especificar qué clave de objeto de nodo se utiliza como hijo del nodo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'children'")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("especificar qué clave de objeto de nodo se utiliza como nodo desactivado")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'disabled'")])]),a("tr",[a("td",[e._v("leaf")]),a("td",[e._v("especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'leaf'")])])])])}],!1,null,null,null).exports},27898(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}var l;a.r(t),a.d(t,{default:()=>r});const 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-checkbox",{model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("Opción")])]],2)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-checkbox",{attrs:{disabled:""},model:{value:e.checked1,callback:function(t){e.checked1=t},expression:"checked1"}},[e._v("Opción")]),e._v(" "),a("el-checkbox",{attrs:{disabled:""},model:{value:e.checked2,callback:function(t){e.checked2=t},expression:"checked2"}},[e._v("Opción")])]],2)},staticRenderFns:[]},{data:function(){return{checked1:!1,checked2:!0}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-checkbox-group",{model:{value:e.checkList,callback:function(t){e.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Opción A"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción B"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción C"}}),e._v(" "),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),e._v(" "),a("el-checkbox",{attrs:{label:"Seleccionado y deshabilitado",disabled:""}})],1)]],2)},staticRenderFns:[]},{data:function(){return{checkList:["Seleccionado y deshabilitado","Opción A"]}}}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleCheckAllChange},model:{value:e.checkAll,callback:function(t){e.checkAll=t},expression:"checkAll"}},[e._v("Marcar todos")]),e._v(" "),a("div",{staticStyle:{margin:"15px 0"}}),e._v(" "),a("el-checkbox-group",{on:{change:e.handleCheckedCitiesChange},model:{value:e.checkedCities,callback:function(t){e.checkedCities=t},expression:"checkedCities"}},e._l(e.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)]],2)},staticRenderFns:[]},{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=t>0&&t<this.cities.length}}})),"element-demo4":function(){var e=["Shanghai","Beijing","Guangzhou","Shenzhen"];return n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:e.checkedCities,callback:function(t){e.checkedCities=t},expression:"checkedCities"}},e._l(e.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkedCities:["Shanghai","Beijing"],cities:e}}})}(),"element-demo5":function(){var e=["Shanghai","Beijing","Guangzhou","Shenzhen"];return n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-checkbox-group",{model:{value:e.checkboxGroup1,callback:function(t){e.checkboxGroup1=t},expression:"checkboxGroup1"}},e._l(e.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:e.checkboxGroup2,callback:function(t){e.checkboxGroup2=t},expression:"checkboxGroup2"}},e._l(e.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:e.checkboxGroup3,callback:function(t){e.checkboxGroup3=t},expression:"checkboxGroup3"}},e._l(e.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Beijing"===t}},[e._v(e._s(t))])}),1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:e.checkboxGroup4,callback:function(t){e.checkboxGroup4=t},expression:"checkboxGroup4"}},e._l(e.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:e}}})}(),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-checkbox",{attrs:{label:"Opción1",border:""},model:{value:e.checked1,callback:function(t){e.checked1=t},expression:"checked1"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""},model:{value:e.checked2,callback:function(t){e.checked2=t},expression:"checked2"}})],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Opción1",border:"",size:"medium"},model:{value:e.checked3,callback:function(t){e.checked3=t},expression:"checked3"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",size:"medium"},model:{value:e.checked4,callback:function(t){e.checked4=t},expression:"checked4"}})],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:e.checkboxGroup1,callback:function(t){e.checkboxGroup1=t},expression:"checkboxGroup1"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:"",disabled:""}})],1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:e.checkboxGroup2,callback:function(t){e.checkboxGroup2=t},expression:"checkboxGroup2"}},[a("el-checkbox",{attrs:{label:"Opción1",border:""}}),e._v(" "),a("el-checkbox",{attrs:{label:"Opción2",border:""}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checked1:!0,checked2:!1,checked3:!1,checked4:!0,checkboxGroup1:[],checkboxGroup2:[]}}})}},r=(0,a(14486).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 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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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 múltiples 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 múltiples 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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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("template",{slot:"source"},[a("element-demo4")],1),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=\"checkedCities\"\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'];

1\n  export default {\n    data() {\n      return {\n        checkedCities: ['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("template",{slot:"source"},[a("element-demo5")],1),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("template",{slot:"source"},[a("element-demo6")],1),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="checked1" label="Opción1" border></el-checkbox>\n    <el-checkbox v-model="checked2" label="Opción2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked3" label="Opción1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked4" label="Opción2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup1" 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="checkboxGroup2" 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        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox"}},[e._v("¶")]),e._v(" Checkbox")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"estado-deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estado-deshabilitado"}},[e._v("¶")]),e._v(" Estado Deshabilitado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"grupo-de-checkboxes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-checkboxes"}},[e._v("¶")]),e._v(" Grupo de Checkboxes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"indeterminado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminado"}},[e._v("¶")]),e._v(" Indeterminado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("p",[e._v("La propiedad "),a("code",[e._v("indeterminate")]),e._v(" puede ser usada para generar el efecto de marcar todos (check all).")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cantidad-minima-maxima-de-elementos-seleccionados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cantidad-minima-maxima-de-elementos-seleccionados"}},[e._v("¶")]),e._v(" Cantidad Mínima / Máxima de elementos seleccionados")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Las propiedades "),a("code",[e._v("min")]),e._v(" y "),a("code",[e._v("max")]),e._v(" pueden limitar la cantidad de elementos seleccionados.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"estilo-tipo-boton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-tipo-boton"}},[e._v("¶")]),e._v(" Estilo tipo Botón")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes"}},[e._v("¶")]),e._v(" Con bordes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox"}},[e._v("¶")]),e._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 "),a("code",[e._v("name")]),e._v(" 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox"}},[e._v("¶")]),e._v(" Eventos 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("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 ejecuta cuando el valor enlazado cambia")]),a("td",[e._v("el valor actualizado")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-group"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-checkbox-group"}},[e._v("¶")]),e._v(" Eventos 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("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 ejecuta cuando el valor enlazado cambia")]),a("td",[e._v("el valor actualizado")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-checkbox-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-checkbox-button"}}

1,[e._v("¶")]),e._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).exports},99449(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-collapse",{on:{change:e.handleChange},model:{value:e.activeNames,callback:function(t){e.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[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.")])]),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:[]},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-collapse",{attrs:{accordion:""},model:{value:e.activeName,callback:function(t){e.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[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.")])]),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"}}

1,[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:[]},{data:function(){return{activeName:"1"}}}),"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:[]},{})}},o=(0,a(14486).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("Use Collapse para almacenar contenidos.")]),e._m(1),a("p",[e._v("Puede expandir varios paneles")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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,t=e.$createElement,a=e._self._c||t;

1return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse"}},[e._v("¶")]),e._v(" Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"acordeon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#acordeon"}},[e._v("¶")]),e._v(" Acordeón")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"titulo-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#titulo-personalizado"}},[e._v("¶")]),e._v(" Título personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Además de usar el atributo "),a("code",[e._v("title")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-collapse"}},[e._v("¶")]),e._v(" Eventos 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("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 los paneles activos cambian")]),a("td",[e._v("(activeNames: array (No modo acordeón) / string (modo acordeón))")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-collapse-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-collapse-item"}},[e._v("¶")]),e._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("—")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("deshabilita el collapse ítem")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},58410(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Especifica valor por defecto")]),e._v(" "),a("el-color-picker",{model:{value:e.color1,callback:function(t){e.color1=t},expression:"color1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("No especifica valor por defecto")]),e._v(" "),a("el-color-picker",{model:{value:e.color2,callback:function(t){e.color2=t},expression:"color2"}})],1)])},staticRenderFns:[]},{data:function(){return{color1:"#409EFF",color2:null}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:e.color,callback:function(t){e.color=t},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"rgba(19, 206, 102, 0.8)"}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-color-picker",{attrs:{"show-alpha":"",predefine:e.predefineColors},model:{value:e.color,callback:function(t){e.color=t},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"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"]}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-color-picker",{model:{value:e.color,callback:function(t){e.color=t},expression:"color"}}),e._v(" "),a("el-color-picker",{attrs:{size:"medium"},model:{value:e.color,callback:function(t){e.color=t},expression:"color"}}),e._v(" "),a("el-color-picker",{attrs:{size:"small"},model:{value:e.color,callback:function(t){e.color=t},expression:"color"}}),e._v(" "),a("el-color-picker",{attrs:{size:"mini"},model:{value:e.color,callback:function(t){e.color=t},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"#409EFF"}}})}},o=(0,a(14486).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("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("c

1ode",[e._v("string")]),e._v(" para ser enlazada a "),a("code",[e._v("v-model")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo0")],1),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 agregue el atributo "),a("code",[e._v("show-alpha")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '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 soporta opciones de color predefinidas")])]),a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color"></el-color-picker>\n<el-color-picker v-model="color" size="medium"></el-color-picker>\n<el-color-picker v-model="color" size="small"></el-color-picker>\n<el-color-picker v-model="color" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: \'#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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker"}},[e._v("¶")]),e._v(" ColorPicker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha"}},[e._v("¶")]),e._v(" Alpha")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"colores-predefinidos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colores-predefinidos"}},[e._v("¶")]),e._v(" Colores predefinidos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes"}},[e._v("¶")]),e._v(" Sizes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 

1(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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 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).exports},51311(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>c});var n=a(18264),l=a(60405),o=a(37937),r={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"},s={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"};const i={created:function(){n.A.$on(o.a,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return(0,l.v)(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(e){var t=this;Object.keys(s).forEach(function(a){e[r[a]]?t[a]=e[r[a]]:t[a]=s[a]})}}}},d=i,c=(0,a(14486).A)(d,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("Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.")]),e._m(1),a("p",[e._v("El color principal de Element es el azul brillante y amigable.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:e.primary}},[e._v("\n      Brand Color"),a("div",{staticClass:"value"},[e._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:e.tintColor(e.primary,.9)}},e._l(Array(8),function(t,n){return a("div",{key:n,staticClass:"bg-blue-sub-item",style:{background:e.tintColor(e.primary,(n+1)/10)}})}),0)])])],1),e._m(2),a("p",[e._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).")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:e.success}},[e._v("Success"),a("div",{staticClass:"value"},[e._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},e._l(Array(2),function(t,n){return a("div",{key:n,staticClass:"bg-success-sub-item",style:{background:e.tintColor(e.success,(n+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:e.warning}},[e._v("Warning"),a("div",{staticClass:"value"},[e._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},e._l(Array(2),function(t,n){return a("div",{key:n,staticClass:"bg-success-sub-item",style:{background:e.tintColor(e.warning,(n+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:e.danger}},[e._v("Danger"),a("div",{staticClass:"value"},[e._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},e._l(Array(2),function(t,n){return a("div",{key:n,staticClass:"bg-success-sub-item",style:{background:e.tintColor(e.danger,(n+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:e.info}},[e._v("Info"),a("div",{staticClass:"value"},[e._v("#909399")]),a("div",{staticClass:"bg-color-sub"},e._l(Array(2),function(t,n){return a("div",{key:n,staticClass:"bg-success-sub-item",style:{background:e.tintColor(e.info,(n+8)/10)}})}

1),0)])])],1),e._m(3),a("p",[e._v("Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.textPrimary}},[e._v("Texto primario"),a("div",{staticClass:"value"},[e._v(e._s(e.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.textRegular}},[e._v("\n      Texto regular"),a("div",{staticClass:"value"},[e._v(e._s(e.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.textSecondary}},[e._v("Texto secundario"),a("div",{staticClass:"value"},[e._v(e._s(e.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.textPlaceholder}},[e._v("Texto de placeholder"),a("div",{staticClass:"value"},[e._v(e._s(e.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:e.borderBase}},[e._v("Borde base"),a("div",{staticClass:"value"},[e._v(e._s(e.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:e.borderLight}},[e._v("Borde ligero"),a("div",{staticClass:"value"},[e._v(e._s(e.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:e.borderLighter}},[e._v("Borde claro"),a("div",{staticClass:"value"},[e._v(e._s(e.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:e.borderExtraLight}},[e._v("Borde extra claro"),a("div",{staticClass:"value"},[e._v(e._s(e.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.black}},[e._v("Basic Black"),a("div",{staticClass:"value"},[e._v(e._s(e.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:e.white,color:"#303133",border:"1px solid #eee"}},[e._v("Basic White"),a("div",{staticClass:"value"},[e._v(e._s(e.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[e._v("Transparent"),a("div",{staticClass:"value"},[e._v("Transparent")])])])])],1)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[e._v("¶")]),e._v(" Color")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"color-principal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-principal"}},[e._v("¶")]),e._v(" Color principal")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"color-secundario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-secundario"}},[e._v("¶")]),e._v(" Color secundario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"color-neutro"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-neutro"}},[e._v("¶")]),e._v(" Color neutro")])}],!1,null,null,null).exports},49456(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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({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"}}

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:[]},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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>

1\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenedor"}},[e._v("¶")]),e._v(" Contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("<el-container>")]),e._v(": Contenedor. Cuando este elemento se anida con un "),a("code",[e._v("<el-header>")]),e._v(" o "),a("code",[e._v("<el-footer>")]),e._v(", todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("<el-header>")]),e._v(": Contenedor para cabeceras.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("<el-aside>")]),e._v(": Contenedor para secciones laterales (generalmente, una barra lateral).")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("<el-main>")]),e._v(": Contenedor para sección principal.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("<el-footer>")]),e._v(": Contenedor para pie de página.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Estos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de "),a("code",[e._v("<el-container>")]),e._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 "),a("code",[e._v("<el-container>")]),e._v(".")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disenos-comunes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disenos-comunes"}},[e._v("¶")]),e._v(" Diseños comunes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"ejemplo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ejemplo"}},[e._v("¶")]),e._v(" Ejemplo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-contenedor"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-cabecera"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-cabecera"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-barra-lateral"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-barra-lateral"}},[e._v("¶")]),e._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("anch

1o de la barra lateral")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("300px")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-pie-de-pagina"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pie-de-pagina"}},[e._v("¶")]),e._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).exports},79353(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({},function(){var e=this;e.$createElement;return e._self._c,e._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"}},[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 4 maneras de modificar los estilos.")]),a("h3",{attrs:{id:"actualizando-variables-scss-en-tu-proyecto-actualizando-variables-scss-en-tu-proyecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actualizando-variables-scss-en-tu-proyecto-actualizando-variables-scss-en-tu-proyecto"}},[e._v("¶")]),e._v(" Actualizando variables SCSS en tu proyecto### 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: '~mazey-element-ui/lib/theme-chalk/fonts';\n\n@import \"~mazey-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 'mazey-element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[e._v("Nota es necesario sobrescribir 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"}},[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"}},[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"}},[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("c

1ode",[e._v("et")]),e._v(" estará disponible en su CLI (si instalo el paquete de manera local, utilice "),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"}},[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"}},[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("c

1ode",[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. 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(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"uso-de-los-temas-personalizados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-de-los-temas-personalizados"}},[e._v("¶")]),e._v(" Uso de los temas personalizados")]),a("h4",{attrs:{id:"importar-un-tema-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-un-tema-personalizado"}},[e._v("¶")]),a("strong",[e._v("Importar un tema personalizado")])]),a("p",[e._v("Importar su propio tema es igual que importar el tema por defecto, solo que esta vez se deben importar los archivos construidos con la herramienta CLI:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'mazey-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"}},[e._v("¶")]),a("strong",[e._v("Importar un tema de componente bajo demanda")])]),a("p",[e._v("Si esta utilizando "),a("c

1ode",[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": "mazey-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).exports},89428(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Default")]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Picker with quick options")]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":e.pickerOptions},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{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:""}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Week")]),e._v(" "),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Month")]),e._v(" "),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]),e._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Year")]),e._v(" "),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Dates")]),e._v(" "),a("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:e.value4,callback:function(t){e.value4=t},expression:"value4"}})],1)]),e._v(" "),a("div",{staticClass:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("months")]),e._v(" "),a("el-date-picker",{attrs:{type:"months",placeholder:"Pick one or more months"},model:{value:e.value5,callback:function(t){e.value5=t},expression:"value5"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("years")]),e._v(" "),a("el-date-picker",{attrs:{type:"years",placeholder:"Pick one or more years"},model:{value:e.value6,callback:function(t){e.value6=t},expression:"value6"}})],1)])])},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:"",value4:"",value5:"",value6:""}}}),"element-demo2":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("Default")]),e._v(" "),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("With quick options")]),e._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":e.pickerOptions},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{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])}}]},value1:"",value2:""}}}),"element-demo3":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("Default")]),e._v(" "),a("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("With quick options")]),e._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":e.pickerOptions},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{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])}}]},value1:"",value2:""}}}),"element-demo4":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("date")]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("daterange")]),e._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:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}}),"element-demo5":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("Emits Date object")]),e._v(" "),a("div",{staticClass:"demonstration"},[e._v("Value: "+e._s(e.value1))]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Use value-format")]),e._v(" "),a("div",{staticClass:"demonstration"},[e._v("Value: "+e._s(e.value2))]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Timestamp")]),e._v(" "),a("div",{staticClass:"demonstration"},[e._v("Value："+e._s(e.value3))]),e._v(" "),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:""}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"block"},[a("p",[e._v("Component value："+e._s(e.value))]),e._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:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:""}}})}},o=(0,a(14486).A)(l,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("section",{staticClass:"content element-doc"}

1,[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("template",{slot:"source"},[a("element-demo0")],1),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="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\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("Puede elegir la semana, el mes, el año o varias fechas ampliando el componente estándar del selector de fechas.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),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="value1"\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="value2"\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="value3"\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="value4"\n      placeholder="Pick one or more dates">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">months</span>\n    <el-date-picker\n      type="months"\n      v-model="value5"\n      placeholder="Pick one or more months">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">years</span>\n    <el-date-picker\n      type="years"\n      v-model="value6"\n      placeholder="Pick one or more years">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\',\n        value3: \'\',\n        value4: \'\',\n        value5: \'\',\n        value6: \'\'\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 dere

1cho 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("template",{slot:"source"},[a("element-demo2")],1),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="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="value2"\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="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\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        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("p",[e._v("Se admite la selección de un intervalo de un mes.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando se encuentra en el modo de rango, los paneles izquierdo y derecho están enlazados de forma predeterminada. Si desea que los dos paneles cambien de año en curso de forma independiente, puede utilizar el atributo unlink-panels.")])]),a("template",{slot:"source"},[a("element-demo3")],1),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="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="value2"\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="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\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        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),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="value1"\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="value2"\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>

1\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\'\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("template",{slot:"source"},[a("element-demo5")],1),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: {{ value1 }}</div>\n    <el-date-picker\n      v-model="value1"\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: {{ value2 }}</div>\n    <el-date-picker\n      v-model="value2"\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：{{ value3 }}</div>\n    <el-date-picker\n      v-model="value3"\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        value1: \'\',\n        value2: \'\',\n        value3: \'\'\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("template",{slot:"source"},[a("element-demo6")],1),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：{{ value }}</p>\n    <el-date-picker\n      v-model="value"\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        value: \'\'\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker"}},[e._v("¶")]),e._v(" DatePicker")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"ingresar-fecha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ingresar-fecha"}},[e._v("¶")]),e._v(" Ingresar Fecha")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"otras-mediciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#otras-mediciones"}},[e._v("¶")]),e._v(" Otras mediciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rango-de-fechas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-fechas"}},[e._v("¶")]),e._v(" Rango de fechas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rango-de-mes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-mes"}},[e._v("¶")]),e._v(" Rango de mes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"valor-por-defecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valor-por-defecto"}},[e._v("¶")]),e._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;

1return 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"formatos-de-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatos-de-date"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._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("día")]),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("día")]),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("hora")]),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(", mayúsculas")]),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")])]),a("tr",[a("td",[a("code",[e._v("[MM]")])]),a("td",[e._v("No hay caracteres de escape")]),a("td",[e._v("Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]).")]),a("td",[e._v("MM")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hora-por-defecto-para-comienzo-y-fin-de-fecha"}},[e._v("¶")]),e._v(" Hora por defecto para comienzo y fin de fecha")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 botón 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/months/years/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 selección de fechas cuando se usa el modo rango")]),a("td",[e._v("string[]")]),a("td",[e._v("Array de dos valores, c

1ada 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")])]),a("tr",[a("td",[e._v("append-to-body")]),a("td",[e._v("Si adjuntar el cuadro de DatePicker al cuerpo")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones-del-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-del-picker"}},[e._v("¶")]),e._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("cellClassName")]),a("td",[e._v("establecer nombre de clase personalizado")]),a("td",[e._v("Function(Date)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("firstDayOfWeek")]),a("td",[e._v("primer día 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"accesso-directo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accesso-directo"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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("coloca el foco en el input")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[e._v("¶")]),e._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("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("range-separator")]),a("td",[e._v("Separador de los rangos personalizado")])])])])}],!1,null,null,null).exports},12763(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Default")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("With shortcuts")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":e.pickerOptions},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("With default time")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{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:""}}}),"element-demo1":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("Default")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("With shortcuts")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":e.pickerOptions,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{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])}}]},value1:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value2:""}}}),"element-demo2":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("Start date time 12:00:00")]),e._v(" "),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Start date time 12:00:00, end date time 08:00:00")]),e._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:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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="pickerOptions">\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>

1\n  export default {\n    data() {\n      return {\n        pickerOptions: {\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("template",{slot:"source"},[a("element-demo1")],1),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="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="value2"\n      type="datetimerange"\n      :picker-options="pickerOptions"\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        pickerOptions: {\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        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Cuando se selecciona el rango de fechas en el panel con el tipo datetimerange, 00:00:00:00 se usará como el valor de tiempo predeterminado para la fecha de inicio y fin. Podemos controlarlo con el atributo default-time. default-time acepta una matriz de hasta dos cadenas. La primera posición controla el valor de tiempo de la fecha de inicio y la segunda el valor de tiempo de la fecha de fin.")])]),a("template",{slot:"source"},[a("element-demo2")],1),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="value1"\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="value2"\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>

1\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\'\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fecha-y-hora"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fecha-y-hora"}},[e._v("¶")]),e._v(" Fecha y hora")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"alcance-de-fecha-y-tiempo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alcance-de-fecha-y-tiempo"}},[e._v("¶")]),e._v(" Alcance de fecha y tiempo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"valor-de-la-hora-por-defecto-para-la-fecha-de-inicio-y-la-fecha-final"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valor-de-la-hora-por-defecto-para-la-fecha-de-inicio-y-la-fecha-final"}},[e._v("¶")]),e._v(" Valor de la hora por defecto para la fecha de inicio y la fecha final")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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, fe

1cha 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("si se debe disparar la validación")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options"}},[e._v("¶")]),e._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("cellClassName")]),a("td",[e._v("establecer nombre de clase personalizado")]),a("td",[e._v("Function(Date)")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"accesos-directos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accesos-directos"}},[e._v("¶")]),e._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 función 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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).exports},89926(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-descriptions",{attrs:{title:"User Info"}},[a("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Place"}},[e._v("Suzhou")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Remarks"}},[a("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-radio-group",{model:{value:e.size,callback:function(t){e.size=t},expression:"size"}},[a("el-radio",{attrs:{label:""}}

1,[e._v("Default")]),e._v(" "),a("el-radio",{attrs:{label:"medium"}},[e._v("Medium")]),e._v(" "),a("el-radio",{attrs:{label:"small"}},[e._v("Small")]),e._v(" "),a("el-radio",{attrs:{label:"mini"}},[e._v("Mini")])],1),e._v(" "),a("el-descriptions",{staticClass:"margin-top",attrs:{title:"With border",column:3,size:e.size,border:""}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"small"}},[e._v("Operation")])],1),e._v(" "),a("el-descriptions-item",[a("template",{slot:"label"},[a("i",{staticClass:"el-icon-user"}),e._v("\n        Username\n      ")]),e._v("\n      kooriookami\n    ")],2),e._v(" "),a("el-descriptions-item",[a("template",{slot:"label"},[a("i",{staticClass:"el-icon-mobile-phone"}),e._v("\n        Telephone\n      ")]),e._v("\n      18100000000\n    ")],2),e._v(" "),a("el-descriptions-item",[a("template",{slot:"label"},[a("i",{staticClass:"el-icon-location-outline"}),e._v("\n        Place\n      ")]),e._v("\n      Suzhou\n    ")],2),e._v(" "),a("el-descriptions-item",[a("template",{slot:"label"},[a("i",{staticClass:"el-icon-tickets"}),e._v("\n        Remarks\n      ")]),e._v(" "),a("el-tag",{attrs:{size:"small"}},[e._v("School")])],2),e._v(" "),a("el-descriptions-item",[a("template",{slot:"label"},[a("i",{staticClass:"el-icon-office-building"}),e._v("\n        Address\n      ")]),e._v("\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    ")],2)],2),e._v(" "),a("el-descriptions",{staticClass:"margin-top",attrs:{title:"Without border",column:3,size:e.size}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"small"}},[e._v("Operation")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Place"}},[e._v("Suzhou")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Remarks"}},[a("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],2)]],2)},staticRenderFns:[]},{data:function(){return{size:""}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-descriptions",{attrs:{title:"Vertical list with border",direction:"vertical",column:4,border:""}},[a("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Place",span:2}},[e._v("Suzhou")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Remarks"}},[a("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1),e._v(" "),a("el-descriptions",{staticClass:"margin-top",attrs:{title:"Vertical list without border",column:4,direction:"vertical"}},[a("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Place",span:2}},[e._v("Suzhou")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Remarks"}},[a("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-descriptions",{attrs:{title:"Customized style list",column:3,border:""}},[a("el-descriptions-item",{attrs:{label:"Username","label-class-name":"my-label","content-class-name":"my-content"}},[e._v("kooriookami")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Place"}},[e._v("Suzhou")]),e._v(" "),a("el-descriptions-item",{attrs:{label:"Remarks"}},[a("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),a("el-descriptions-item",{attrs:{label:"Address","content-style":{"text-align":"right"}}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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("Display multiple fields in list form.")]),e._m(1),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="User Info">\n    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n    <el-descriptions-item label="Remarks">\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n')])])])],2),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="size">\n    <el-radio label="">Default</el-radio>\n    <el-radio label="medium">Medium</el-radio>\n    <el-radio label="small">Small</el-radio>\n    <el-radio label="mini">Mini</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>\n    <template slot="extra">\n      <el-button type="primary" size="small">Operation</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-user"></i>\n        Username\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-mobile-phone"></i>\n        Telephone\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-location-outline"></i>\n        Place\n      </template>\n      Suzhou\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-tickets"></i>\n        Remarks\n      </template>\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-office-building"></i>\n        Address\n      </template>\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">\n    <template slot="extra">\n      <el-button type="primary" size="small">Operation</el-button>\n    </template>\n    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n    <el-descriptions-item label="Remarks">\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: \'\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>\n  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">\n  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n')])])])],2),e._m(4),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="Customized style list" :column="3" border>\n  <el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address" :content-style="{\'text-align\': \'right\'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\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)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"descriptions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptions"}},[e._v("¶")]),e._v(" Descriptions")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[e._v("¶")]),e._v(" Basic usage")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes"}},[e._v("¶")]),e._v(" Sizes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"vertical-list"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-list"}},[e._v("¶")]),e._v(" Vertical List")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"customized-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-style"}},[e._v("¶")]),e._v(" Customized Style")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"descriptions-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-attributes"}},[e._v("¶")]),e._v(" Descriptions 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("border")]),a("td",[e._v("with or without border")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("column")]),a("td",[e._v("numbers of "),a("code",[e._v("Descriptions Item")]),e._v(" in one line")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("3")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("direction of list")]),a("td",[e._v("string")]),a("td",[e._v("vertical / horizontal")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("size")]),a("td",[e._v("size of list")]),a("td",[e._v("string")]),a("td",[e._v("medium / small / mini")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("title text, display on the top left")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("extra")]),a("td",[e._v("extra text, display on the top right")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("colon")]),a("td",[e._v("change default props colon value of Descriptions Item")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("labelClassName")]),a("td",[e._v("custom label class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("contentClassName")]),a("td",[e._v("custom content class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("labelStyle")]),a("td",[e._v("custom label style")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("contentStyle")]),a("td",[e._v("custom content style")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"descriptions-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-slots"}},[e._v("¶")]),e._v(" Descriptions 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("title")]),a("td",[e._v("custom title, display on the top left")])]),a("tr",[a("td",[e._v("extra")]),a("td",[e._v("custom extra area, display on the top right")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"descriptions-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-attributes"}},[e._v("¶")]),e._v(" Descriptions 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("label")]),a("td",[e._v("label text")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("span")]),a("td",[e._v("colspan of column")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("labelClassName")]),a("td",[e._v("custom label class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("contentClassName")]),a("td",[e._v("custom content class name")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("labelStyle")]),a("td",[e._v("custom label style")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("contentStyle")]),a("td",[e._v("custom content style")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"descriptions-item-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-slots"}},[e._v("¶")]),e._v(" Descriptions Item 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("label")]),a("td",[e._v("custom label")])])])])}],!1,null,null,null).exports},30990(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;ret

1urn a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(t){e.dialogVisible=!0}}},[e._v("click to open the Dialog")]),e._v(" "),a("el-dialog",{attrs:{title:"Tips",visible:e.dialogVisible,width:"30%","before-close":e.handleClose},on:{"update:visible":function(t){e.dialogVisible=t}}},[a("span",[e._v("This is a message")]),e._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){e.dialogVisible=!1}}},[e._v("Cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.dialogVisible=!1}}},[e._v("Confirm")])],1)])],1)},staticRenderFns:[]},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(e){this.$confirm("Are you sure to close this dialog?").then(function(t){e()}).catch(function(e){})}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(t){e.dialogTableVisible=!0}}},[e._v("open a Table nested Dialog")]),e._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:e.dialogTableVisible},on:{"update:visible":function(t){e.dialogTableVisible=t}}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),e._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),e._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(t){e.dialogFormVisible=!0}}},[e._v("open a Form nested Dialog")]),e._v(" "),a("el-dialog",{attrs:{title:"Shipping address",visible:e.dialogFormVisible},on:{"update:visible":function(t){e.dialogFormVisible=t}}},[a("el-form",{attrs:{model:e.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":e.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"}

1,model:{value:e.form.name,callback:function(t){e.$set(e.form,"name",t)},expression:"form.name"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Zones","label-width":e.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:e.form.region,callback:function(t){e.$set(e.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),e._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){e.dialogFormVisible=!1}}},[e._v("Cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.dialogFormVisible=!1}}},[e._v("Confirm")])],1)],1)],1)},staticRenderFns:[]},{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"}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:function(t){e.outerVisible=!0}}},[e._v("open the outer Dialog")]),e._v(" "),a("el-dialog",{attrs:{title:"Outer Dialog",visible:e.outerVisible},on:{"update:visible":function(t){e.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:e.innerVisible,"append-to-body":""},on:{"update:visible":function(t){e.innerVisible=t}}}),e._v(" "),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){e.outerVisible=!1}}},[e._v("Cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.innerVisible=!0}}},[e._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{outerVisible:!1,innerVisible:!1}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(t){e.centerDialogVisible=!0}}},[e._v("Click to open the Dialog")]),e._v(" "),a("el-dialog",{attrs:{title:"Warning",visible:e.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){e.centerDialogVisible=t}}},[a("span",[e._v("It should be noted that the content will not be aligned in center by default")]),e._v(" "),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){e.centerDialogVisible=!1}}},[e._v("Cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.centerDialogVisible=!1}}},[e._v("Confirm")])],1)])],1)},staticRenderFns:[]},{data:function(){return{centerDialogVisible:!1}}})}},o=(0,a(14486).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("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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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("c

1ode",[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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog"}},[e._v("¶")]),e._v(" Dialog")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizaciones"}},[e._v("¶")]),e._v(" Personalizaciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"dialogo-anidado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialogo-anidado"}},[e._v("¶")]),e._v(" Diálogo anidado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado"}},[e._v("¶")]),e._v(" Contenido centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido de Dialog se renderiza en modo lazy, lo que significa que la ranura por defecto no se renderiza en el DOM hasta que se abre por primera vez. Por lo tanto, si necesita realizar una manipulación DOM o acceder a un componente mediante ref, hágalo en el callback del evento "),a("code",[e._v("open")]),e._v(".")])])},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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributo"}},[e._v("¶")]),e._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("c

1ode",[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")])]),a("tr",[a("td",[e._v("destroy-on-close")]),a("td",[e._v("Destruir elementos en Dialog cuando se cierra")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[e._v("¶")]),e._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("Descripción")])])]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("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 animación 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).exports},44481(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",[a("span",[e._v("I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.")]),e._v(" "),a("el-divider"),e._v(" "),a("span",[e._v("There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("span",[e._v("What you are you do not see, what you see is your shadow. ")]),e._v(" "),a("el-divider",{attrs:{"content-position":"left"}},[e._v("Rabindranath Tagore")]),e._v(" "),a("span",[e._v("I cannot choose the best. The best chooses me.")]),e._v(" "),a("el-divider",[a("i",{staticClass:"el-icon-star-on"})]),e._v(" "),a("span",[e._v("My wishes are fools, they shout across thy song, my Master. Let me but listen.")]),e._v(" "),a("el-divider",{attrs:{"content-position":"right"}},[e._v("Rabindranath Tagore")])],1)]],2)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("span",[e._v("Rain")]),e._v(" "),a("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),a("span",[e._v("Home")]),e._v(" "),a("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),a("span",[e._v("Grass")])],1)]],2)},staticRenderFns:[]},{})}},o=(0,a(14486).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("La línea divisoria que separa el contenido.")]),e._m(1),a("p",[e._v("Divide el texto de los diferentes párrafos.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <div>\n    <span>

1I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>\n    <el-divider></el-divider>\n    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>\n  </div>\n</template>\n")])])])],2),e._m(2),a("p",[e._v("Puede personalizar el contenido en la línea divisoria.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <span>What you are you do not see, what you see is your shadow. </span>\n    <el-divider content-position="left">Rabindranath Tagore</el-divider>\n    <span>I cannot choose the best. The best chooses me.</span>\n    <el-divider><i class="el-icon-star-on"></i></el-divider>\n    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>\n    <el-divider content-position="right">Rabindranath Tagore</el-divider>\n  </div>\n</template>\n')])])])],2),e._m(3),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <span>Rain</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>Home</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>Grass</span>\n  </div>\n</template>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"divider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#divider"}},[e._v("¶")]),e._v(" Divider")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado"}},[e._v("¶")]),e._v(" Contenido personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"division-vertical"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#division-vertical"}},[e._v("¶")]),e._v(" División vertical")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"divider-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#divider-atributos"}},[e._v("¶")]),e._v(" Divider 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("direction")]),a("td",[e._v("indica la dirección del separador")]),a("td",[e._v("string")]),a("td",[e._v("horizontal / vertical")]),a("td",[e._v("horizontal")])]),a("tr",[a("td",[e._v("content-position")]),a("td",[e._v("personaliza el contenido en la línea divisoria")]),a("td",[e._v("String")]),a("td",[e._v("left / right / center")]),a("td",[e._v("center")])])])])}],!1,null,null,null).exports},60496(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-radio-group",{model:{value:e.direction,callback:function(t){e.direction=t},expression:"direction"}},[a("el-radio",{attrs:{label:"ltr"}},[e._v("left to right")]),e._v(" "),a("el-radio",{attrs:{label:"rtl"}},[e._v("right to left")]),e._v(" "),a("el-radio",{attrs:{label:"ttb"}},[e._v("top to bottom")]),e._v(" "),a("el-radio",{attrs:{label:"btt"}},[e._v("bottom to top")])],1),e._v(" "),a("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(t){e.drawer=!0}}},[e._v("\n  open\n")]),e._v(" "),a("el-drawer",{attrs:{title:"I am the title",visible:e.drawer,direction:e.direction,"before-close":e.handleClose},on:{"update:visible":function(t){e.drawer=t}}},[a("span",[e._v("Hi, there!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,direction:"rtl"}},methods:{handleClose:function(e){this.$confirm("Are you sure you want to close this?").then(function(t){e()}).catch(function(e){})}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(t){e.drawer=!0}}},[e._v("\n  open\n")]),e._v(" "),a("el-drawer",{attrs:{title:"I am the title",visible:e.drawer,"with-header":!1},on:{"update:visible":function(t){e.drawer=t}}},[a("span",[e._v("Hi there!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{attrs:{type:"text"},on:{click:function(t){e.table=!0}}},[e._v("Open Drawer with nested table")]),e._v(" "),a("el-button",{attrs:{type:"text"},on:{click:function(t){e.dialog=!0}}},[e._v("Open Drawer with nested form")]),e._v(" "),a("el-drawer",{attrs:{title:"I have a nested table inside!",visible:e.table,direction:"rtl",size:"50%"},on:{"update:visible":function(t){e.table=t}}},[a("el-table",{attrs:{data:e.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),e._v(" "),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}

1),e._v(" "),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),e._v(" "),a("el-drawer",{ref:"drawer",attrs:{title:"I have a nested form inside!","before-close":e.handleClose,visible:e.dialog,direction:"ltr","custom-class":"demo-drawer"},on:{"update:visible":function(t){e.dialog=t}}},[a("div",{staticClass:"demo-drawer__content"},[a("el-form",{attrs:{model:e.form}},[a("el-form-item",{attrs:{label:"Name","label-width":e.formLabelWidth}},[a("el-input",{attrs:{autocomplete:"off"},model:{value:e.form.name,callback:function(t){e.$set(e.form,"name",t)},expression:"form.name"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Area","label-width":e.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select activity area"},model:{value:e.form.region,callback:function(t){e.$set(e.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Area1",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Area2",value:"beijing"}})],1)],1)],1),e._v(" "),a("div",{staticClass:"demo-drawer__footer"},[a("el-button",{on:{click:e.cancelForm}},[e._v("Cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary",loading:e.loading},on:{click:function(t){e.$refs.drawer.closeDrawer()}}},[e._v(e._s(e.loading?"Submitting ...":"Submit"))])],1)],1)])],1)},staticRenderFns:[]},{data:function(){return{table:!1,dialog:!1,loading:!1,gridData:[{date:"2016-05-02",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-04",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-01",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-03",name:"Peter Parker",address:"Queens, New York City"}],form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px",timer:null}},methods:{handleClose:function(e){var t=this;this.loading||this.$confirm("Do you want to submit?").then(function(a){t.loading=!0,t.timer=setTimeout(function(){e(),setTimeout(function(){t.loading=!1},400)},2e3)}).catch(function(e){})},cancelForm:function(){this.loading=!1,this.dialog=!1,clearTimeout(this.timer)}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(t){e.drawer=!0}}},[e._v("\n  open\n")]),e._v(" "),a("el-drawer",{attrs:{title:"I'm outer Drawer",visible:e.drawer,size:"50%"},on:{"update:visible":function(t){e.drawer=t}}},[a("div",[a("el-button",{on:{click:function(t){e.innerDrawer=!0}}},[e._v("Click me!")]),e._v(" "),a("el-drawer",{attrs:{title:"I'm inner Drawer","append-to-body":!0,"before-close":e.handleClose,visible:e.innerDrawer},on:{"update:visible":function(t){e.innerDrawer=t}}},[a("p",[e._v("_(:зゝ∠)_")])])],1)])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,innerDrawer:!1}},methods:{handleClose:function(e){this.$confirm("You still have unsaved data, proceed?").then(function(t){e()}).catch(function(e){})}}})}},o=(0,a(14486).A)(l,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("p",[e._v("Llamada de un drawer temporal, desde varias direcciones")]),a("demo-block",[a("div",[a("p",[e._v("Debe establecer "),a("code",[e._v("visible")]),e._v(" para "),a("code",[e._v("Drawer")]),e._v(" como lo hace "),a("code",[e._v("Dialog")]),e._v(" para controlar la visibilidad. "),a("code",[e._v("visible")]),e._v(" es del tipo "),a("code",[e._v("boolean")]),e._v(". "),a("code",[e._v("Drawer")]),e._v(" tiene partes: "),a("code",[e._v("title")]),e._v(" & "),a("code",[e._v("body")]),e._v(", el "),a("code",[e._v("title")]),e._v(" es un slot con nombre, también puede establecer el título a través de un atributo llamado "),a("c

1ode",[e._v("title")]),e._v(", por defecto a una cadena vacía, la parte "),a("code",[e._v("body")]),e._v(" es el área principal de "),a("code",[e._v("Drawer")]),e._v(", que contiene contenido definido por el usuario. Al abrir, "),a("code",[e._v("Drawer")]),e._v(" se expande desde la "),a("strong",[e._v("esquina derecha a la izquierda")]),e._v(" cuyo tamaño es "),a("strong",[e._v("30%")]),e._v(" de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos "),a("code",[e._v("direction")]),e._v(" y "),a("code",[e._v("size")]),e._v(". Este caso de demostración también muestra cómo utilizar la API "),a("code",[e._v("before-close")]),e._v(", consulte la sección Atributos para obtener más detalles.")])]),a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="direction">\n  <el-radio label="ltr">left to right</el-radio>\n  <el-radio label="rtl">right to left</el-radio>\n  <el-radio label="ttb">top to bottom</el-radio>\n  <el-radio label="btt">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I am the title"\n  :visible.sync="drawer"\n  :direction="direction"\n  :before-close="handleClose">\n  <span>Hi, there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: \'rtl\',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure you want to close this?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Si no necesitas el titulo lo puedes eliminar del drawer.")]),a("demo-block",[a("div",[a("p",[e._v("Asigne "),a("strong",[e._v("false")]),e._v(" al atributo "),a("code",[e._v("withHeader")]),e._v(", se puede eliminar el atributo title del drawer, de esa manera el drawer tendrá mas espacio para el contenido. Por razones de accesibilidad se recomienda asignar siempre un contenido valido al atributo "),a("code",[e._v("title")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I am the title"\n  :visible.sync="drawer"\n  :with-header="false">\n  <span>Hi there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>\n<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>\n<el-drawer\n  title="I have a nested table inside!"\n  :visible.sync="table"\n  direction="rtl"\n  size="50%">\n   <el-table :data="gridData">\n      <el-table-column property="date" label="Date" width="150"></el-table-column>\n      <el-table-column property="name" label="Name" width="200"></el-table-column>\n      <el-table-column property="address" label="Address"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title="I have a nested form inside!"\n  :before-close="handleClose"\n  :visible.sync="dialog"\n  direction="ltr"\n  custom-class="demo-drawer"\n  ref="drawer"\n  >\n  <div class="demo-drawer__content">\n    <el-form :model="form">\n      <el-form-item label="Name" :label-width="formLabelWidth">\n        <el-input v-model="form.name" autocomplete="off"></el-input>\n      </el-form-item>\n      <el-form-item label="Area" :label-width="formLabelWidth">\n        <el-select v-model="form.region" placeholder="Please select activity area">\n          <el-option label="Area1" value="shanghai"></el-option>\n          <el-option label="Area2" value="beijing"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class="demo-drawer__footer">\n      <el-button @click="cancelForm">Cancel</el-button>\n      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? \'Submitting ...\' : \'Submit\' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>

1\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: \'2016-05-02\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-04\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-01\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-03\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }],\n      form: {\n        name: \'\',\n        region: \'\',\n        date1: \'\',\n        date2: \'\',\n        delivery: false,\n        type: [],\n        resource: \'\',\n        desc: \'\'\n      },\n      formLabelWidth: \'80px\',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm(\'Do you want to submit?\')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // animation takes time\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(6),e._m(7),a("demo-block",[a("div",[a("p",[e._v("Si necesita varios drawer en diferentes capas, debe establecer el atributo "),a("code",[e._v("append-to-body")]),e._v(" en "),a("strong",[e._v("true")])])]),a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I\'m outer Drawer"\n  :visible.sync="drawer"\n  size="50%">\n  <div>\n   <el-button @click="innerDrawer = true">Click me!</el-button>\n   <el-drawer\n     title="I\'m inner Drawer"\n     :append-to-body="true"\n     :before-close="handleClose"\n     :visible.sync="innerDrawer">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'You still have unsaved data, proceed?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n\n')])])])],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)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"drawer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drawer"}},[e._v("¶")]),e._v(" Drawer")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("A veces, "),a("code",[e._v("Dialog")]),e._v(" no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como "),a("code",[e._v("terminos & condiciones")]),e._v(", "),a("code",[e._v("Drawer")]),e._v(" tiene una API casi idéntica a "),a("code",[e._v("Dialog")]),e._v(", pero introduce una experiencia de usuario diferente.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"sin-titulo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sin-titulo"}},[e._v("¶")]),e._v(" Sin titulo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizar-el-contenido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-el-contenido"}},[e._v("¶")]),e._v(" Personalizar el contenido")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Al igual que "),a("code",[e._v("Dialog")]),e._v(", "),a("code",[e._v("Drawer")]),e._v(" puede hacer muchas interacciones diversas.")

1])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"drawer-anidados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drawer-anidados"}},[e._v("¶")]),e._v(" Drawer anidados")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("También puede tener varias capas de "),a("code",[e._v("Drawer")]),e._v(" al igual que con "),a("code",[e._v("Dialog")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de "),a("code",[e._v("ref' o después de que se emita el evento")]),e._v("open'.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v('El Drawer proporciona una API llamada "destroyOnClose", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida "mounted" sea llamado cada vez que se abra el Cajón.')])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si la variable "),a("code",[e._v("visible")]),e._v(" se gestiona en el almacén de Vuex, 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 "),a("code",[e._v("open")]),e._v(" y "),a("code",[e._v("close")]),e._v(" de Drawer, y envíe mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-drawer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-drawer"}},[e._v("¶")]),e._v(" Atributos de Drawer")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Parámetros")]),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("append-to-body")]),a("td",[e._v("Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a "),a("strong",[e._v("true")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("before-close")]),a("td",[e._v("Si está configurado, el procedimiento de cierre se detendrá.")]),a("td",[e._v("function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre.")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-on-press-escape")]),a("td",[e._v("Indica si el Drawer puede cerrarse pulsando ESC")]),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("Nombre extra de clase para  Drawer")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("destroy-on-close")]),a("td",[e._v("Indica si los children deben ser destruidos después de cerrar el Drawer.")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("modal")]),a("td",[e._v("Mostrará una capa de sombra")]),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("Indica si se debe insertar una capa de sombreado en el elemento DocumentBody")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("direction")]),a("td",[e._v("Dirección de apertura del Drawer")]),a("td",[e._v("Direction")]),a("td",[e._v("rtl / ltr / ttb / btt")]),a("td",[e._v("rtl")])]),a("tr",[a("td",[e._v("show-close")]),a("td",[e._v("Se mostrará el botón de cerrar en la parte superior derecha del Drawer")]),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 Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo "),a("c

1ode",[e._v("number")]),e._v(", describe el tamaño por unidad de píxeles; cuando el tamaño es tipo "),a("code",[e._v("string")]),e._v(", se debe usar con notación "),a("code",[e._v("x%")]),e._v(", de lo contrario se interpretará como unidad de píxeles.")]),a("td",[e._v("number / string")]),a("td",[e._v("-")]),a("td",[e._v("'30%'")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot.")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("visible")]),a("td",[e._v("Si se muestra el Drawer, también soporta la notación "),a("code",[e._v(".sync")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("wrapperClosable")]),a("td",[e._v("Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado.")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("withHeader")]),a("td",[e._v("Indica si la sección header existirá, por defecto es true, cuando es false no tienen efecto, ambos, "),a("code",[e._v("title attribute")]),e._v(" y "),a("code",[e._v("title slot")])]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"drawer-slot-s"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drawer-slot-s"}},[e._v("¶")]),e._v(" Drawer Slot's")])},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("El contenido del Drawer")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("El titulo de la sección del Drawer")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-drawer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-drawer"}},[e._v("¶")]),e._v(" Métodos Drawer")])},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("closeDrawer")]),a("td",[e._v("Para cerrar el Drawer, este método llamará "),a("code",[e._v("before-close")]),e._v(".")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-drawer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-drawer"}},[e._v("¶")]),e._v(" Eventos Drawer")])},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("open")]),a("td",[e._v("Se activa antes de que comience la animación de apertura del Drawer.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("opened")]),a("td",[e._v("Se activa cuando finaliza la animación de apertura del Drawer.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("Se activa antes de que comience la animación de cierre del Drawer.")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("closed")]),a("td",[e._v("Se activa después de que finaliza la animación de cierre del Drawer.")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},40947(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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({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:[]},{methods:{handleClick:function(){alert("button click")}}}),"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"}},[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"}},[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({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:[]},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}}),"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:[]},{})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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")]

1),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 detonación. 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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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">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">

1\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">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("c

1ode",[e._v("hide-on-click")]),e._v(" como false.")])]),a("template",{slot:"source"},[a("element-demo3")],1),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("template",{slot:"source"},[a("element-demo4")],1),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("template",{slot:"source"},[a("element-demo5")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown"}},[e._v("¶")]),e._v(" Dropdown")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"elemento-detonante"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#elemento-detonante"}},[e._v("¶")]),e._v(" Elemento detonante")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("h3",{attrs:{id:"como-detonar-el-evento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#como-detonar-el-evento"}},[e._v("¶")]),e._v(" Cómo detonar el evento")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"ocultamiento-del-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ocultamiento-del-menu"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"evento-command"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#evento-command"}},[e._v("¶")]),e._v(" Evento command")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos"}},[e._v("¶")]),e._v(" Tamaños")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"dropdown-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-atributos"}},[e._v("¶")]),e._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("c

1ode",[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")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" de Dropdown")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("disabled")]),a("td",[e._v("si el desplegable está desactivado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"dropdown-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots"}},[e._v("¶")]),e._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("contenido del Dropdown. Aviso: Debe ser un elemento html dom válido (ej. "),a("code",[e._v("<span>, <button>")]),e._v(" etc.) o "),a("code",[e._v("el-component")]),e._v(", para adjuntar el listener trigger")])]),a("tr",[a("td",[e._v("dropdown")]),a("td",[e._v("contenido del menu Dropdown, normalmente es un elemento "),a("code",[e._v("<el-dropdown-menu>")])])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"dropdown-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-eventos"}},[e._v("¶")]),e._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("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("click")]),a("td",[e._v("si "),a("code",[e._v("split-button")]

1),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-atributos"}},[e._v("¶")]),e._v(" Dropdown Menú Ítem 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).exports},57373(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{description:"descrição"}})],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{image:a(90089)}})],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{"image-size":200}})],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-empty",[a("el-button",{attrs:{type:"primary"}},[e._v("Button")])],1)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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("Placeholder hints for empty states.")]),e._m(1),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty description="descrição"></el-empty>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-empty :image=\"require('examples/assets/images/hamburger.png')\"></el-empty>\n")])])])],2),e._m(4),e._m(5),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty :image-size="200"></el-empty>\n')])])])],2),e._m(6),a("p",[e._v("Use the default slot to insert content at the bottom.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty>\n  <el-button type="primary">Button</el-button>\n</el-empty>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"empty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empty"}},[e._v("¶")]),e._v(" Empty")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[e._v("¶")]),e._v(" Basic usage")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"custom-image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-image"}},[e._v("¶")]),e._v(" Custom image")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use "),a("code",[e._v("image")]),e._v(" prop to set image URL.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"image-size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#image-size"}},[e._v("¶")]),e._v(" Image size")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use "),a("code",[e._v("image-size")]),e._v(" prop to control image size.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"bottom-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bottom-content"}},[e._v("¶")]),e._v(" Bottom content")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"empty-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empty-attributes"}},[e._v("¶")]),e._v(" Empty 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("Acceptable Value")]),a("th",[e._v("Default Value")])])]),a("tbody",[a("tr",[a("td",[e._v("image")]),a("td",[e._v("image URL")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("image-size")]),a("td",[e._v("image size (width)")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("description")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"empty-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empty-slots"}},[e._v("¶")]),e._v(" Empty 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("default")]),a("td",[e._v("Custom bottom content")])]),a("tr",[a("td",[e._v("image")]),a("td",[e._v("Custom image")])]),a("tr",[a("td",[e._v("description")]),a("td",[e._v("Custom description")])])])])}],!1,null,null,null).exports},68751(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-form",{ref:"form",attrs:{model:e.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:e.form.name,callback:function(t){e.$set(e.form,"

1name",t)},expression:"form.name"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:e.form.region,callback:function(t){e.$set(e.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),e._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:e.form.date1,callback:function(t){e.$set(e.form,"date1",t)},expression:"form.date1"}})],1),e._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:e.form.date2,callback:function(t){e.$set(e.form,"date2",t)},expression:"form.date2"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{model:{value:e.form.delivery,callback:function(t){e.$set(e.form,"delivery",t)},expression:"form.delivery"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:e.form.type,callback:function(t){e.$set(e.form,"type",t)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:e.form.resource,callback:function(t){e.$set(e.form,"resource",t)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),e._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:e.form.desc,callback:function(t){e.$set(e.form,"desc",t)},expression:"form.desc"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("Create")]),e._v(" "),a("el-button",[e._v("Cancel")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:e.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:e.formInline.user,callback:function(t){e.$set(e.formInline,"user",t)},expression:"formInline.user"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:e.formInline.region,callback:function(t){e.$set(e.formInline,"region",t)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("Query")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-radio-group",{attrs:{size:"small"},model:{value:e.labelPosition,callback:function(t){e.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[e._v("Left")]),e._v(" "),a("el-radio-button",{attrs:{label:"right"}},[e._v("Right")]),e._v(" "),a("el-radio-button",{attrs:{label:"top"}},[e._v("Top")])],1),e._v(" "),a("div",{staticStyle:{margin:"20px"}}),e._v(" "),a("el-form",{attrs:{"label-position":e.labelPosition,"label-width":"100px",model:e.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:e.formLabelAlign.name,callback:function(t){e.$set(e.formLabelAlign,"name",t)},expression:"formLabelAlign.name"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:e.formLabelAlign.region,callback:function(t){e.$set(e.formLabelAlign,"region",t)},expression:"formLabelAlign.region"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:e.formLabelAlign.type,callback:function(t){e.$set(e.formLabelAlign,"type",t)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:e.ruleForm,rules:e.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:e.ruleForm.name,callback:function(t){e.$set(e.ruleForm,"name",t)},expression:"ruleForm.name"}}

1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:e.ruleForm.region,callback:function(t){e.$set(e.ruleForm,"region",t)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),e._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:e.ruleForm.date1,callback:function(t){e.$set(e.ruleForm,"date1",t)},expression:"ruleForm.date1"}})],1)],1),e._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._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:e.ruleForm.date2,callback:function(t){e.$set(e.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{model:{value:e.ruleForm.delivery,callback:function(t){e.$set(e.ruleForm,"delivery",t)},expression:"ruleForm.delivery"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:e.ruleForm.type,callback:function(t){e.$set(e.ruleForm,"type",t)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),e._v(" "),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:e.ruleForm.resource,callback:function(t){e.$set(e.ruleForm,"resource",t)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),e._v(" "),a("el-radio",{attrs:{label:"Venue"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:e.ruleForm.desc,callback:function(t){e.$set(e.ruleForm,"desc",t)},expression:"ruleForm.desc"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("ruleForm")}}},[e._v("Create")]),e._v(" "),a("el-button",{on:{click:function(t){e.resetForm("ruleForm")}}},[e._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{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()}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:e.ruleForm,"status-icon":"",rules:e.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:e.ruleForm.pass,callback:function(t){e.$set(e.ruleForm,"pass",t)},expression:"ruleForm.pass"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:e.ruleForm.checkPass,callback:function(t){e.$set(e.ruleForm,"checkPass",t)},expression:"ruleForm.checkPass"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:e.ruleForm.age,callback:function(t){e.$set(e.ruleForm,"age",e._n(t))},expression:"ruleForm.age"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("ruleForm")}}},[e._v("Submit")]),e._v(" "),a("el-button",{on:{click:function(t){e.resetForm("ruleForm")}}},[e._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{data:function(){var e=this;return{ruleForm:{pass:"",checkPass:"",age:""},rules:{pass:[{validator:function(t,a,n){""===a?n(new Error("Please input the password")):(""!==e.ruleForm.checkPass&&e.$refs.ruleForm.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(t,a,n){""===a?n(new Error("Please input the password again")):a!==e.ruleForm.pass?n(new Error("Two input

1s don't match!")):n()},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()}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:e.dynamicValidateForm,"label-width":"120px"}},[a("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"]}]}},[a("el-input",{model:{value:e.dynamicValidateForm.email,callback:function(t){e.$set(e.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),e._v(" "),e._l(e.dynamicValidateForm.domains,function(t,n){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+n,prop:"domains."+n+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(a){e.$set(t,"value",a)},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),e.removeDomain(t)}}},[e._v("Delete")])],1)}),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("dynamicValidateForm")}}},[e._v("Submit")]),e._v(" "),a("el-button",{on:{click:e.addDomain}},[e._v("New domain")]),e._v(" "),a("el-button",{on:{click:function(t){e.resetForm("dynamicValidateForm")}}},[e._v("Reset")])],1)],2)],1)},staticRenderFns:[]},{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:""})}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:e.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:{autocomplete:"off"},model:{value:e.numberValidateForm.age,callback:function(t){e.$set(e.numberValidateForm,"age",e._n(t))},expression:"numberValidateForm.age"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("numberValidateForm")}}},[e._v("Submit")]),e._v(" "),a("el-button",{on:{click:function(t){e.resetForm("numberValidateForm")}}},[e._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{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()}}}),"element-demo7":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"form",attrs:{model:e.sizeForm,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:e.sizeForm.name,callback:function(t){e.$set(e.sizeForm,"name",t)},expression:"sizeForm.name"}})],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:e.sizeForm.region,callback:function(t){e.$set(e.sizeForm,"region",t)},expression:"sizeForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),e._v(" "),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity time"}}

1,[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:e.sizeForm.date1,callback:function(t){e.$set(e.sizeForm,"date1",t)},expression:"sizeForm.date1"}})],1),e._v(" "),a("el-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:e.sizeForm.date2,callback:function(t){e.$set(e.sizeForm,"date2",t)},expression:"sizeForm.date2"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:e.sizeForm.type,callback:function(t){e.$set(e.sizeForm,"type",t)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),e._v(" "),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:e.sizeForm.resource,callback:function(t){e.$set(e.sizeForm,"resource",t)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),e._v(" "),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),e._v(" "),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("Create")]),e._v(" "),a("el-button",[e._v("Cancel")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}})}},o=(0,a(14486).A)(l,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 ítem.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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

1!\');\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("template",{slot:"source"},[a("element-demo1")],1),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

1!\');\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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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>

1\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("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Password" prop="pass">\n    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Confirm" prop="checkPass">\n    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="Age" prop="age">\n    <el-input v-model.number="ruleForm.age"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Submit</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      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.ruleForm.checkPass !== \'\') {\n            this.$refs.ruleForm.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.ruleForm.pass) {\n          callback(new Error(\'Two input

1s don\\\'t match!\'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: \'\',\n          checkPass: \'\',\n          age: \'\'\n        },\n        rules: {\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("template",{slot:"source"},[a("element-demo5")],1),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 validación numérica 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("template",{slot:"source"},[a("element-demo6")],1),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 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>

1\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("template",{slot:"source"},[a("element-demo7")],1),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

1!\');\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-basico"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"formulario-inline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formulario-inline"}},[e._v("¶")]),e._v(" Formulario inline")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"alineamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alineamiento"}},[e._v("¶")]),e._v(" Alineamiento")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"validacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validacion"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"reglas-personalizadas-de-validacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reglas-personalizadas-de-validacion"}},[e._v("¶")]),e._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("Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eliminar-o-agregar-validaciones-dinamicamente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eliminar-o-agregar-validaciones-dinamicamente"}},[e._v("¶")]),e._v(" Eliminar o agregar validaciones dinámicamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"validacion-numerica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validacion-numerica"}},[e._v("¶")]),e._v(" Validación numérica")])},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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamano-del-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano-del-control"}},[e._v("¶")]),e._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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-atributos"}},[e._v("¶")]),e._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("Posición 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('anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor '),a("code",[e._v("auto")]),e._v(" está soportado.")]),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 validación cuando el prop "),a("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-metodos"}},[e._v("¶")]),e._v(" Form 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("validate")]),a("td",[e._v("el método para validar todo el formulario. Recibe una llamada como parámetro. 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("validateField")]),a("td",[e._v("validar uno o varios elementos de formulario")]),a("td",[e._v("Function(props: string | array, 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("—")])]),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(props: string | array)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-form"}},[e._v("¶")]),e._v(" Eventos Form")])},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("validate")]),a("td",[e._v("se dispara después de validar un ítem del formulario")]),a("td",[e._v("la propiedad ("),a("code",[e._v("prop name")]),e._v(") nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-atributos"}},[e._v("¶")]),e._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 "),a("c

1ode",[e._v("validate")]),e._v(" y "),a("code",[e._v("resetFields")]),e._v(", 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, Ejemplo: '50px'. El valor "),a("code",[e._v("auto")]),e._v(" esta soportado")]),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 validación 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-item-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot"}},[e._v("¶")]),e._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 validación. El parámetro del scope es { error }")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"form-item-metodo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-metodo"}},[e._v("¶")]),e._v(" Form-Item Método")])},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("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 validación de un campo")]),a("td",[e._v("-")])])])])}],!1,null,null,null).exports},34511(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({},function(){var e=this;e.$createElement;return e._self._c,e._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"}},[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 'mazey-element-ui'\nimport locale from 'mazey-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 'mazey-element-ui'\nimport lang from 'mazey-element-ui/lib/locale/lang/en'\nimport locale from 'mazey-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("c

1ode",[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/, 'mazey-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"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("[email protected]")])]),a("p",[e._v("Element es compatible con "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("[email protected]")]),e._v(", lo que facilita aún más la conmutación multilenguaje.")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'mazey-element-ui'\nimport enLocale from 'mazey-element-ui/lib/locale/lang/en'\nimport zhLocale from 'mazey-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"}},[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 'mazey-element-ui'\nimport enLocale from 'mazey-element-ui/lib/locale/lang/en'\nimport zhLocale from 'mazey-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"}},[e._v("¶")]),e._v(" Compatible con "),a("code",[e._v("[email protected]")])]),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 'mazey-element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'mazey-element-ui/lib/locale/lang/en'\nimport zhLocale from 'mazey-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"}},[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 'mazey-element-ui/lib/locale/lang/en'\nimport zhLocale from 'mazey-element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'mazey-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"}},[e._v("¶")]),e._v(" Importar via CDN")]),a("pre",[a("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue@2"><\/script>\n<script src="//unpkg.com/mazey-element-ui"><\/script>\n<script src="//unpkg.com/mazey-element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>

1\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@2"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/mazey-element-ui"><\/script>\n<script src="//unpkg.com/mazey-element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/mazey-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("li",[e._v("Esperanto (eo)")])]),a("p",[e._v("Si su idioma de destino no está incluido, puede contribuir: simplemente añada  "),a("a",{attrs:{href:"https://github.com/chengchuu/mazey-element-ui/tree/main/src/locale/lang"}},[e._v("aqui")]),e._v(" otra configuración de idioma y cree un pull request.")])])}],!1,null,null,null).exports},27694(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({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=(0,a(14486).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("Element proporciona un conjunto de iconos propios.")]),e._m(1),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._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),e._m(3),a("ul",{staticClass:"icon-list"},e._l(e.$icon,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),a("span",{staticClass:"icon-name"},[e._v(e._s("el-icon-"+t))])])])}),0)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon"}},[e._v("¶")]),e._v(" Icon")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._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("c

1ode",[e._v("el-icon-iconName")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#iconos"}},[e._v("¶")]),e._v(" Iconos")])}],!1,null,null,null).exports},90376(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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:"demo-image"},e._l(e.fits,function(t){return a("div",{key:t,staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v(e._s(t))]),e._v(" "),a("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:e.url,fit:t}})],1)}),0)])},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:a(75123)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-image__placeholder"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Default")]),e._v(" "),a("el-image",{attrs:{src:e.src}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Custom")]),e._v(" "),a("el-image",{attrs:{src:e.src}},[a("div",{staticClass:"image-slot",attrs:{slot:"placeholder"},slot:"placeholder"},[e._v("\n        Loading"),a("span",{staticClass:"dot"},[e._v("...")])])])],1)])])},staticRenderFns:[]},{data:function(){return{src:a(75123)}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-image__error"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Default")]),e._v(" "),a("el-image")],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Custom")]),e._v(" "),a("el-image",[a("div",{staticClass:"image-slot",attrs:{slot:"error"},slot:"error"},[a("i",{staticClass:"el-icon-picture-outline"}

1)])])],1)])])},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-image__lazy"},e._l(e.urls,function(e){return a("el-image",{key:e,attrs:{src:e,lazy:""}})}),1)])},staticRenderFns:[]},{data:function(){return{urls:[a(75123),a(75123),a(75123),a(75123),a(75123),a(75123),a(75123)]}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-image__preview"},[a("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:e.url,"preview-src-list":e.srcList}})],1)])},staticRenderFns:[]},{data:function(){return{url:a(75123),srcList:[a(75123),a(75123)]}}})}},o=(0,a(14486).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("Además de las características nativas de img, soporte de carga perezosa, marcador de posición personalizado y fallo de carga, etc.")]),e._m(1),a("demo-block",[a("div",[a("p",[e._v("Indica cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor por ajuste, igual que el ajuste de objeto nativo. "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v("。")])]),a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image">\n  <div class="block" v-for="fit in fits" :key="fit">\n    <span class="demonstration">{{ fit }}</span>\n    <el-image\n      style="width: 100px; height: 100px"\n      :src="url"\n      :fit="fit"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n        url: require(\'examples/assets/images/element-demo.jpeg\')\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),a("demo-block",[a("div",[a("p",[e._v("Personalice el placeholder del contenido mientras la imagen aun no ha sido cargada vía "),a("code",[e._v("slot = placeholder")])])]),a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__placeholder">\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-image :src="src"></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">Custom</span>\n    <el-image :src="src">\n      <div slot="placeholder" class="image-slot">\n        Loading<span class="dot">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: require(\'examples/assets/images/element-demo.jpeg\')\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Personalice el contenido cuando ocurra algún error al cargar la imagen vía "),a("code",[e._v("slot = error")])])]),a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__error">\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-image></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">Custom</span>\n    <el-image>\n      <div slot="error" class="image-slot">\n        <i class="el-icon-picture-outline"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Use lazy load vía "),a("code",[e._v("lazy = true")]),e._v(". La imagen se cargará hasta que se desplace a la vista cuando esté configurada. Puede indicar el contenedor de scroll que añade el oyente de scroll vía "),a("code",[e._v("scroll-container")]),e._v(". Si no está definido, será el contenedor padre más cercano cuya propiedad overflow es auto o scroll.")])]),a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>

1\n  export default {\n    data() {\n      return {\n        urls: [\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg'),\n          require('examples/assets/images/element-demo.jpeg')\n        ]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("permitir una vista previa grande de la imagen configurando la prop "),a("code",[e._v("previewSrcList")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__preview">\n  <el-image \n    style="width: 100px; height: 100px"\n    :src="url" \n    :preview-src-list="srcList">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: require(\'examples/assets/images/element-demo.jpeg\'),\n        srcList: [\n          require(\'examples/assets/images/element-demo.jpeg\'),\n          require(\'examples/assets/images/element-demo.jpeg\')\n        ]\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#image"}},[e._v("¶")]),e._v(" Image")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"placeholder"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#placeholder"}},[e._v("¶")]),e._v(" Placeholder")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fallo-de-carga"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallo-de-carga"}},[e._v("¶")]),e._v(" Fallo de carga")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"lazy-load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lazy-load"}},[e._v("¶")]),e._v(" Lazy Load")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"vista-previa-de-la-imagen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vista-previa-de-la-imagen"}},[e._v("¶")]),e._v(" Vista previa de la imagen")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("src")]),a("td",[e._v("origen de la imagen, igual que en nativo")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("fit")]),a("td",[e._v("Indica como la imagen debe adaptarse al contenedor, lo mismo que "),a("a",{attrs:{href:"https://developer.mozilla.org/es/docs/Web/CSS/object-fit"}},[e._v("object-fit")])]),a("td",[e._v("string")]),a("td",[e._v("fill / contain / cover / none / scale-down")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("alt")]),a("td",[e._v("alt nativo")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("referrer-policy")]),a("td",[e._v("referrerPolicy nativo")]),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 usara lazy load")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("scroll-container")]),a("td",[e._v("El contenedor para añadir el scroll listener cuando se utiliza lazy load")]),a("td",[e._v("string / HTMLElement")]),a("td",[e._v("—")]),a("td",[e._v("El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll")])]),a("tr",[a("td",[e._v("preview-src-list")]),a("td",[e._v("permitir una vista previa grande de la imagen")]),a("td",[e._v("Array")]),a("td",[e._v("—")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("z-index")]),a("td",[e._v("establecer el z-index de la vista previa de la imagen")]),a("td",[e._v("Number")]),a("td",[e._v("—")]),a("td",[e._v("2000")])]),a("tr",[a("td",[e._v("initial-index")]),a("td",[e._v("set image preview array index")]

1),a("td",[e._v("Number")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("load")]),a("td",[e._v("Igual que el load nativo")]),a("td",[e._v("(e: Event)")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("Igual que el error nativo")]),a("td",[e._v("(e: Error)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[e._v("¶")]),e._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 del slot")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("placeholder")]),a("td",[e._v("Se activa cuando la imagen se carga")])]),a("tr",[a("td",[e._v("error")]),a("td",[e._v("Se activa cuando la carga de la imagen falla")])])])])}],!1,null,null,null).exports},75745(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:e.load,expression:"load"}],staticClass:"infinite-list",staticStyle:{overflow:"auto"}},e._l(e.count,function(t){return a("li",{staticClass:"infinite-list-item"},[e._v(e._s(t))])}),0)]],2)},staticRenderFns:[]},{data:function(){return{count:0}},methods:{load:function(){this.count+=2}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"infinite-list-wrapper",staticStyle:{overflow:"auto"}},[a("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:e.load,expression:"load"}],staticClass:"list",attrs:{"infinite-scroll-disabled":"disabled"}},e._l(e.count,function(t){return a("li",{staticClass:"list-item"},[e._v(e._s(t))])}

1),0),e._v(" "),e.loading?a("p",[e._v("Loading...")]):e._e(),e._v(" "),e.noMore?a("p",[e._v("No more")]):e._e()])]],2)},staticRenderFns:[]},{data:function(){return{count:10,loading:!1}},computed:{noMore:function(){return this.count>=20},disabled:function(){return this.loading||this.noMore}},methods:{load:function(){var e=this;this.loading=!0,setTimeout(function(){e.count+=2,e.loading=!1},2e3)}}})}},o=(0,a(14486).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("Cargar más datos mientras se llega al final de la página")]),e._m(1),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">\n    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="infinite-list-wrapper" style="overflow:auto">\n    <ul\n      class="list"\n      v-infinite-scroll="load"\n      infinite-scroll-disabled="disabled">\n      <li v-for="i in count" class="list-item">{{ i }}</li>\n    </ul>\n    <p v-if="loading">Loading...</p>\n    <p v-if="noMore">No more</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"infinitescroll"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#infinitescroll"}},[e._v("¶")]),e._v(" InfiniteScroll")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Añada "),a("code",[e._v("v-infinite-scroll")]),e._v(" a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"deshabilite-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#deshabilite-loading"}},[e._v("¶")]),e._v(" Deshabilite Loading")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("infinite-scroll-disabled")]),a("td",[e._v("si esta disabled")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("infinite-scroll-delay")]),a("td",[e._v("retraso en mili segundos")]),a("td",[e._v("number")]),a("td",[e._v("-")]),a("td",[e._v("200")])]),a("tr",[a("td",[e._v("infinite-scroll-distance")]),a("td",[e._v("distancia de activación (px)")]),a("td",[e._v("number")]),a("td",[e._v("-")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("infinite-scroll-immediate")]),a("td",[e._v("Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial.")]),a("td",[e._v("boolean")]),a("td",[e._v("-")]),a("td",[e._v("true")])])])])}],!1,null,null,null).exports},68058(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-input-number",{attrs:{min:1,max:10},on:{change:e.handleChange},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-input-number",{attrs:{disabled:!0},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-input-number",{attrs:{step:2},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:5}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-input-number",{attrs:{step:2,"step-strictly":""},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:2}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("div",[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-input-number",{model:{value:e.num1,callback:function(t){e.num1=t},expression:"num1"}}),e._v(" "),a("el-input-number",{attrs:{size:"medium"},model:{value:e.num2,callback:function(t){e.num2=t},expression:"num2"}}),e._v(" "),a("el-input-number",{attrs:{size:"small"},model:{value:e.num3,callback:function(t){e.num3=t},expression:"num3"}}),e._v(" "),a("el-input-number",{attrs:{size:"mini"},model:{value:e.num4,callback:function(t){e.num4=t},expression:"num4"}})]],2)},staticRenderFns:[]},{data:function(){return{num1:1,num2:1,num3:1,num4:1}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:e.handleChange},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 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("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("step-strictly")]),e._v(" acepta "),a("code",[e._v("boolean")]),e._v(". Si este atributo es "),a("code",[e._v("true")]),e._v(", el valor de entrada sólo puede ser múltiplo de step.")])]),a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>\n</template>\n<script>

1\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("El atributo "),a("code",[e._v("precision")]),e._v(" aplica presición al valor del value.")])]),a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),a("demo-block",[a("template",{slot:"source"},[a("element-demo5")],1),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"></el-input-number>\n    <el-input-number size="medium" v-model="num2"></el-input-number>\n    <el-input-number size="small" v-model="num3"></el-input-number>\n    <el-input-number size="mini" v-model="num4"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),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("template",{slot:"source"},[a("element-demo6")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\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)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber"}},[e._v("¶")]),e._v(" InputNumber")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled"}},[e._v("¶")]),e._v(" Disabled")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps"}},[e._v("¶")]),e._v(" Steps")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-estrictamente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-estrictamente"}},[e._v("¶")]),e._v(" Step estrictamente")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"precision"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#precision"}},[e._v("¶")]),e._v(" Precisión")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("El valor de "),a("code",[e._v("precision")]),e._v(" debe ser un numero entero positivo que no debe ser inferior a los decimales del "),a("code",[e._v("step")]),e._v(".")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamano"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"posicion-de-los-controles"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-los-controles"}},[e._v("¶")]),e._v(" Posición de los controles")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 máximo 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("step-strictly")]),a("td",[e._v("si el valor del input puede ser solo un múltiplo de step")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),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")

1]),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 en el input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("currentValue, oldValue")])]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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).exports},83502(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-input",{attrs:{placeholder:"Please input"},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[e._v("Using attributes")]),e._v(" "),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:e.input1,callback:function(t){e.input1=t},expression:"input1"}}),e._v(" "),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:e.input2,callback:function(t){e.input2=t},expression:"input2"}})],1),e._v(" "),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[e._v("Using slots")]),e._v(" "),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:e.input3,callback:function(t){e.input3=t},expression:"input3"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),e._v(" "),a("el-input",{attrs:{placeholder:"Type something"},model:{value:e.input4,callback:function(t){e.input4=t},expression:"input4"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:e.textarea,callback:function(t){e.textarea=t},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{textarea:""}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:e.textarea1,callback:function(t){e.textarea1=t},expression:"textarea1"}}),e._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),e._v(" "),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:e.textarea2,callback:function(t){e.textarea2=t},expression:"textarea2"}})],1)},staticRenderFns:[]},{data:function(){return{textarea1:"",textarea2:""}}}),"element-demo7":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:e.input1,callback:function(t){e.input1=t},expression:"input1"}},[a("template",{slot:"prepend"},[e._v("Http://")])],2)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:e.input2,callback:function(t){e.input2=t},expression:"input2"}},[a("template",{slot:"append"},[e._v(".com")])],2)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:e.input3,callback:function(t){e.input3=t},expression:"input3"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:e.select,callback:function(t){e.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),e._v(" "),a("el-option",{attrs:{label:"Order No.",value:"2"}}),e._v(" "),a("el-option",{attrs:{label:"Tel",value:"3"}}

1)],1),e._v(" "),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",select:""}}}),"element-demo8":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:e.input1,callback:function(t){e.input1=t},expression:"input1"}}),e._v(" "),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:e.input2,callback:function(t){e.input2=t},expression:"input2"}}),e._v(" "),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:e.input3,callback:function(t){e.input3=t},expression:"input3"}}),e._v(" "),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:e.input4,callback:function(t){e.input4=t},expression:"input4"}})],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo9":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[e._v("list suggestions when activated")]),e._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":e.querySearch,placeholder:"Please Input"},on:{select:e.handleSelect},model:{value:e.state1,callback:function(t){e.state1=t},expression:"state1"}})],1),e._v(" "),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[e._v("list suggestions on input")]),e._v(" "),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":e.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:e.handleSelect},model:{value:e.state2,callback:function(t){e.state2=t},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]},{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(e){return function(t){return 0===t.value.toLowerCase().indexOf(e.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()}}),"element-demo10":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":e.querySearch,placeholder:"Please input"},on:{select:e.handleSelect},scopedSlots:e._u([{key:"default",fn:function(t){var n=t.item;return[a("div",{staticClass:"value"},[e._v(e._s(n.value))]),e._v(" "),a("span",{staticClass:"link"},[e._v(e._s(n.link))])]}}]),model:{value:e.state,callback:function(t){e.state=t},expression:"state"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:e.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]},{data:function(){return{links:[],state:""}},methods:{querySearch:function(e,t){var a=this.links;t(e?a.filter(this.createFilter(e)):a)},createFilter:function(e){return function(t){return 0===t.value.toLowerCase().indexOf(e.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()}}),"element-demo11":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-autocomplete",{attrs:{"fetch-suggestions":e.querySearchAsync,placeholder:"Please input"},on:{select:e.handleSelect},model:{value:e.state,callback:function(t){e.state=t},expression:"state"}})],1)},staticRenderFns:[]},{data:function(){return{links:[],state:"",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(e){return function(t){return 0===t.value.toLowerCase().indexOf(e.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo12":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{type:"text",placeholder:"Please input",maxlength:"10","show-word-limit":""},model:{value:e.text,callback:function(t){e.text=t},expression:"text"}}),e._v(" "),a("div",{staticStyle:{margin:"20px 0"}}),e._v(" "),a("el-input",{attrs:{type:"textarea",placeholder:"Please input",maxlength:"30","show-word-limit":""},model:{value:e.textarea,callback:function(t){e.textarea=t},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",textarea:""}}})}},o=(0,a(14486).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("Ingresa datos usando el ratón o teclado.")]),e._m(1),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("template",{slot:"source"},[a("element-demo1")],1),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="input"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),a("demo-block",[a("div",[a("p",[e._v("Marque que el input puede ser limpiable con el atributo "),a("code",[e._v("clearable")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo2")],1),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="input"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Haga un input de contraseña conmutable con el atributo "),a("code",[e._v("show-password")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo3")],1),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="input" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: \'\'\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("template",{slot:"source"},[a("element-demo4")],1),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="input1">\n  </el-input>\n  <el-input\n    placeholder="Type something"\n    prefix-icon="el-icon-search"\n    v-model="input2">\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="input3">\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="input4">\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      input1: \'\',\n      input2: \'\',\n      input3: \'\',\n      input4: \'\'\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("c

1ode",[e._v("rows")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo5")],1),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("template",{slot:"source"},[a("element-demo6")],1),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="textarea1">\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="textarea2">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: \'\',\n      textarea2: \'\'\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("template",{slot:"source"},[a("element-demo7")],1),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="input1">\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="input2">\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="input3" 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      input1: \'\',\n      input2: \'\',\n      input3: \'\',\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("medium")]),e._v(", "),a("code",[e._v("small")]),e._v(" y "),a("code",[e._v("mini")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo8")],1),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="input1">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Please Input"\n    v-model="input2">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Please Input"\n    v-model="input3">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Please Input"\n    v-model="input4">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\',\n      input2: \'\',\n      input3: \'\',\n      input4: \'\'\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("template",{slot:"source"},[a("element-demo9")],1),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      :tr

1igger-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("template",{slot:"source"},[a("element-demo10")],1),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="state"\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        state: \'\'\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("template",{slot:"source"},[a("element-demo11")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Please input"\n  @select="handleSelect"\n></el-autocomplete>\n<script>

1\n  export default {\n    data() {\n      return {\n        links: [],\n        state: \'\',\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),a("demo-block",[a("div",[a("p",[a("code",[e._v("maxlength")]),e._v(" y "),a("code",[e._v("minlength")]),e._v(" son atributos de la entrada nativa, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro "),a("code",[e._v("maxlength")]),e._v(" para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer "),a("code",[e._v("show-word-limit")]),e._v(" a "),a("code",[e._v("true")]),e._v(" al mismo tiempo.")])]),a("template",{slot:"source"},[a("element-demo12")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="text"\n  placeholder="Please input"\n  v-model="text"\n  maxlength="10"\n  show-word-limit\n>\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  placeholder="Please input"\n  v-model="textarea"\n  maxlength="30"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: \'\',\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),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),e._m(34)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[e._v("¶")]),e._v(" Input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Input es un componente controlado, "),a("strong",[e._v("siempre muestra el valor de enlace Vue")]),e._v(".")]),a("p",[e._v('Bajo circunstancias normales, el evento "input" debe ser manejado. Su handler debe actualizar el valor de enlace del componente (o usar '),a("code",[e._v("v-model")]),e._v("). De lo contrario, el valor del cuadro de entrada no cambiará.")]),a("p",[e._v("No admite modificadores "),a("code",[e._v("v-model")]),e._v(".")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled"}},[e._v("¶")]),e._v(" Disabled")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"limpiable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#limpiable"}},[e._v("¶")]),e._v(" Limpiable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"password-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#password-box"}},[e._v("¶")]),e._v(" Password box")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"input-con-icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-con-icono"}},[e._v("¶")]),e._v(" Input con icono")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea"}},[e._v("¶")]),e._v(" Textarea")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Re dimensiona para introducir varias líneas de información de texto. Agregue el atributo "),a("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"textarea-tamano-automatico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea-tamano-automatico"}},[e._v("¶")]),e._v(" Textarea tamaño automático")])},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 auto dimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"mezclando-elementos-con-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mezclando-elementos-con-input"}},[e._v("¶")]),e._v(" Mezclando elementos con input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamano"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamano"}},[e._v("¶")]),e._v(" Tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocompletado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocompletado"}},[e._v("¶")]),e._v(" Autocompletado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"template-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#template-personalizado"}},[e._v("¶")]),e._v(" Template personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"busqueda-remota"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota"}},[e._v("¶")]),e._v(" Búsqueda remota")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"limitar-el-tamano"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#limitar-el-tamano"}},[e._v("¶")]),e._v(" Limitar el tamaño")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"input-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-atributos"}},[e._v("¶")]),e._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("show-word-limit")]),a("td",[e._v("Si se muestra el contador de palabras, solamente funciona con los tipos "),a("code",[e._v("text")]),e._v(" o "),a("code",[e._v("textarea")])]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),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("si debe mostrar el botón de limpieza")]),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("si debe mostrar la posibilidad de conmutación de 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("c

1ode",[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 "),a("code",[e._v("textarea")]),e._v(".")]),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 "),a("code",[e._v("textarea")]),e._v(". 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 próximo cambio mayor de versión")]),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 tabulación para el Input")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"input-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-slots"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"input-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-eventos"}},[e._v("¶")]),e._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("Parámetros")])])]),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 solo cuando el cuadro de entrada pierde el foco o el usuario presiona Enter")]),a("td",[e._v("(value: string | number)")])]),a("tr",[a("td",[e._v("input")]),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 "),a("c

1ode",[e._v("clearable")]),e._v(".")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"input-metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-metodos"}},[e._v("¶")]),e._v(" Input 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("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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocomplete-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-atributos"}},[e._v("¶")]),e._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")

1]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocomplete-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocomplete-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot"}},[e._v("¶")]),e._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("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem }")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocomplete-eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-eventos"}},[e._v("¶")]),e._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("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("select")]),a("td",[e._v("se dispara cuando se hace clic a una sugerencia")]),a("td",[e._v("sugerencia en la que se está haciendo clic")])]),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)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"autocomplete-metodo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-metodo"}},[e._v("¶")]),e._v(" Autocomplete Método")])},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("coloca el foco en el elemento")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},35913(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({},function(){var e=this;e.$createElement;return e._self._c,e._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"}},[e._v("¶")]),e._v(" Instalación")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm"}},[e._v("¶")]),e._v(" npm")]),a("p",[e._v("Instalar mediante npm es la forma recomendada ya que se integra fácilmente con "),a("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),a("pre",[a("code",{staticClass:"language-shell"},[e._v("npm install mazey-element-ui\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn"}},[e._v("¶")]),e._v(" CDN")]),a("p",[e._v("Obtenga la última versión desde "),a("a",{attrs:{href:"https://unpkg.com/mazey-element-ui/"}},[e._v("unpkg.com/mazey-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/mazey-element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/mazey-element-ui/lib/index.js"><\/script>\n')])]),a("p",[e._v("##Tip\nRecomendamos a nuestros usuarios congelar la versión de Element 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"}},[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/bofeng/pen/poaEmJY"}},[e._v("Online Demo")])]),a("p",[e._v("Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: "),a("a",{attrs:{href:"/#/es/component/quickstart"}},[e._v("Quick Start")])])])}],!1,null,null,null).exports},64415(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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:[]},{})}},o=(0,a(14486).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("Rápido y fácilmente 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("c

1ode",[e._v("row")]),e._v(" y "),a("code",[e._v("col")]),e._v(", puede fácilmente manipular el layout usando el atributo "),a("code",[e._v("span")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("c

1ode",[e._v("offset")]),e._v(" de Col.")])]),a("template",{slot:"source"},[a("element-demo3")],1),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("template",{slot:"source"},[a("element-demo4")],1),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("template",{slot:"source"},[a("element-demo5")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[e._v("¶")]),e._v(" Layout")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"layout-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-basico"}},[e._v("¶")]),e._v(" Layout básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"espaciado-de-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#espaciado-de-columnas"}},[e._v("¶")]),e._v(" Espaciado de columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"layout-hibrido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-hibrido"}},[e._v("¶")]),e._v(" Layout híbrido")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"offset-de-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#offset-de-columnas"}},[e._v("¶")]),e._v(" Offset de columnas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"alineacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alineacion"}},[e._v("¶")]),e._v(" Alineación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout"}},[e._v("¶")]),e._v(" Responsive Layout")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"clases-utiles-para-ocultar-elementos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clases-utiles-para-ocultar-elementos"}},[e._v("¶")]),e._v(" Clases útiles para ocultar elementos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-js"},[e._v("import 'mazey-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-

1only")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-row"}},[e._v("¶")]),e._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("—")])]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-col"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-col"}},[e._v("¶")]),e._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("especifica el espacio en el lado izquierdo del 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).exports},56927(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",[a("el-link",{attrs:{href:"https://chengchuu.github.io/mazey-element-ui/",target:"_blank"}},[e._v("default")]),e._v(" "),a("el-link",{attrs:{type:"primary"}},[e._v("primary")]),e._v(" "),a("el-link",{attrs:{type:"success"}},[e._v("success")]),e._v(" "),a("el-link",{attrs:{type:"warning"}},[e._v("warning")]),e._v(" "),a("el-link",{attrs:{type:"danger"}},[e._v("danger")]),e._v(" "),a("el-link",{attrs:{type:"info"}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",[a("el-link",{attrs:{disabled:""}},[e._v("default")]),e._v(" "),a("el-link",{attrs:{type:"primary",disabled:""}},[e._v("primary")]),e._v(" "),a("el-link",{attrs:{type:"success",disabled:""}},[e._v("success")]),e._v(" "),a("el-link",{attrs:{type:"warning",disabled:""}},[e._v("warning")]),e._v(" "),a("el-link",{attrs:{type:"danger",disabled:""}},[e._v("danger")]),e._v(" "),a("el-link",{attrs:{type:"info",disabled:""}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",[a("el-link",{attrs:{underline:!1}},[e._v("Without Underline")]),e._v(" "),a("el-link",[e._v("With Underline")])],1)])},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",[a("el-link",{attrs:{icon:"el-icon-edit"}},[e._v("Edit")]),e._v(" "),a("el-link",[e._v("Check"),a("i",{staticClass:"el-icon-view el-icon--right"})])],1)])},staticRenderFns:[]},{})}},o=(0,a(14486).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("Texto con hipervínculo")]),e._m(1),a("p",[e._v("Texto con hipervínculo básico")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link href="https://chengchuu.github.io/mazey-element-ui/" target="_blank">default</el-link>\n  <el-link type="primary">primary</el-link>\n  <el-link type="success">success</el-link>\n  <el-link type="warning">warning</el-link>\n  <el-link type="danger">danger</el-link>\n  <el-link type="info">info</el-link>\n</div>\n')])])])],2),e._m(2),a("p",[e._v("Deshabilita el hipervínculo")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link disabled>default</el-link>\n  <el-link type="primary" disabled>primary</el-link>\n  <el-link type="success" disabled>success</el-link>\n  <el-link type="warning" disabled>warning</el-link>\n  <el-link type="danger" disabled>danger</el-link>\n  <el-link type="info" disabled>info</el-link>\n</div>\n')])])])],2),e._m(3),a("p",[e._v("Subrayado del hipervínculo")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link :underline="false">Without Underline</el-link>\n  <el-link>With Underline</el-link>\n</div>\n')])])])],2),e._m(4),a("p",[e._v("Hipervínculo con icono")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link icon="el-icon-edit">Edit</el-link>\n  <el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>\n</div>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"link"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#link"}},[e._v("¶")]),e._v(" Link")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basico"}},[e._v("¶")]),e._v(" Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"deshabilitar"}}

1,[a("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitar"}},[e._v("¶")]),e._v(" Deshabilitar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"subrayado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#subrayado"}},[e._v("¶")]),e._v(" Subrayado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icono"}},[e._v("¶")]),e._v(" Icono")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("type")]),a("td",[e._v("tipo")]),a("td",[e._v("string")]),a("td",[e._v("primary / success / warning / danger / info")]),a("td",[e._v("default")])]),a("tr",[a("td",[e._v("underline")]),a("td",[e._v("si el hipervínculo estará subrayado")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true")])]),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("href")]),a("td",[e._v("lo mismo que el valor nativo del hipervínculo "),a("code",[e._v("href")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("nombre de clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])}],!1,null,null,null).exports},76926(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>s});const l={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-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:[]},{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}}}),"element-demo1":n({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:{"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:[]},{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}}}),"element-demo2":(o={data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen1: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)}}},n({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.openFullScreen1}},[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:[]},o))}};var o;const r=l,s=(0,a(14486).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("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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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("Agregue 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("template",{slot:"source"},[a("element-demo1")],1),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    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        loading: 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("template",{slot:"source"},[a("element-demo2")],1),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="openFullScreen1"\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>

1\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"cargando"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando"}},[e._v("¶")]),e._v(" Cargando")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cargando-dentro-de-un-contenedor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando-dentro-de-un-contenedor"}},[e._v("¶")]),e._v(" Cargando dentro de un contenedor")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion"}},[e._v("¶")]),e._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cargando-a-pantalla-completa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargando-a-pantalla-completa"}},[e._v("¶")]),e._v(" Cargando a pantalla completa")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"servicio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#servicio"}},[e._v("¶")]),e._v(" Servicio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import { Loading } from 'mazey-element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._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("c

1ode",[e._v("close")]),e._v(":")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._v("let loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones"}},[e._v("¶")]),e._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("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).exports},69745(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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:[]},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}}),"element-demo1":n({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:[]},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:e.isCollapse,callback:function(t){e.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[e._v("expand")]),e._v(" "),a("el-radio-button",{attrs:{label:!0}},[e._v("collapse")])],1),e._v(" "),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:e.isCollapse},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",{attrs:{slot:"title"},slot:"title"},[e._v("Navigator One")])]),e._v(" "),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[e._v("Group One")]),e._v(" "),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 two")])],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("span",{attrs:{slot:"title"},slot:"title"},[e._v("item four")]),e._v(" "),a("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],1)],2),e._v(" "),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),e._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[e._v("Navigator Two")])]),e._v(" "),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),e._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[e._v("Navigator Three")])]),e._v(" "),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),e._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[e._v("Navigator Four")])])],1)],1)},staticRenderFns:[]},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}})}},o=(0,a(14486).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("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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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>

1\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("template",{slot:"source"},[a("element-demo2")],1),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>

1\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu"}},[e._v("¶")]),e._v(" NavMenu")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar"}},[e._v("¶")]),e._v(" Top bar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar"}},[e._v("¶")]),e._v(" Side bar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse"}},[e._v("¶")]),e._v(" Collapse")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu"}},[e._v("¶")]),e._v(" Atributos Menú")])},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 del texto 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("c

1ode",[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 verdadero, el í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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-menu"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-menu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-menu-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-menu-item"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-submenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-submenu"}},[e._v("¶")]),e._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 menú 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-menu-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-item"}},[e._v("¶")]),e._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")]

1),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-menu-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-menu-group"}},[e._v("¶")]),e._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).exports},59461(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open the Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){e.$message({type:"info",message:"action: "+t})}})}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open the Message Box")])]],2)},staticRenderFns:[]},{methods:{open: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"})})}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=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(t){var a=t.value;e.$message({type:"success",message:"Your email is:"+a})}).catch(function(){e.$message({type:"info",message:"Input canceled"})})}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this,t=this.$createElement;this.$msgbox({title:"Message",message:t("p",null,[t("span",null,"Message can be "),t("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(t){e.$message({type:"info",message:"action: "+t})})}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){e.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(t){e.$message({type:"info",message:"cancel"===t?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{type:"text"},on:{click:e.open}},[e._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open: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"})})}}})}},o=(0,a(14486).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("Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, 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 m

1étodo "),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 clic fuera de la caja. En este ejemplo, dos parámetros 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(", deberías importar una librería de terceros de polyfill o utilizar callbacks.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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 confirmación.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al método "),a("c

1ode",[e._v("$confirm")]),e._v(" para abrir el componente confirm, y simula el sistema "),a("code",[e._v("confirm")]),e._v(". También 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(". Aquí utilizamos "),a("code",[e._v("Promise")]),e._v(" para manejar posteriormente el proceso.")])]),a("template",{slot:"source"},[a("element-demo1")],1),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.$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 información del usuario.")]),a("demo-block",[a("div",[a("p",[e._v("Llamando al método "),a("c

1ode",[e._v("$prompt")]),e._v(" desplegamos el componente prompt, y simula el sistema "),a("code",[e._v("prompt")]),e._v(".Puedes utilizar el parámetro "),a("code",[e._v("inputPattern")]),e._v(" para especificar tu propio patrón RegExp. Utiliza el parámetro "),a("code",[e._v("inputValidator")]),e._v(" para especificar el método de validación, 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 validación a fallado, y la cadena regresada se usara como "),a("code",[e._v("inputErrorMessage")]),e._v(". Ademas, puedes personalizar el atributo placeholder del input box con el parámetro "),a("code",[e._v("inputPlaceholder")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo2")],1),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 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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 métodos mencionados anteriormente son un rempaquetado del método "),a("c

1ode",[e._v("$msgbox")]),e._v(". En este ejemplo se realiza una llamada al método "),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 botón cancelar es mostrado en pantalla. Además 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 botón (el botón de confirmación también cuenta con estos campos, y podrá encontrar una lista completa de estos atributos al final de esta documentación). Este ejemplo también utiliza el atributo "),a("code",[e._v("beforeClose")]),e._v(". Es un método que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecución detendrá el cierre de la instancia. Tiene tres parámetros: "),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("c

1ode",[e._v("loading")]),e._v(" para el botón de confirmación; puede invocar el método "),a("code",[e._v("done")]),e._v(" para cerrar la instancia del componente MessageBox  (si el método "),a("code",[e._v("done")]),e._v(" no es llamado dentro del atributo "),a("code",[e._v("beforeClose")]),e._v(", la instancia no podrá cerrarse).")])]),a("template",{slot:"source"},[a("element-demo3")],1),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 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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("template",{slot:"source"},[a("element-demo4")],1),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 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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("template",{slot:"source"},[a("element-demo5")],1),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 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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("c

1ode",[e._v("true")]),e._v(" centrara el contenido")])]),a("template",{slot:"source"},[a("element-demo6")],1),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 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox"}},[e._v("¶")]),e._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 utilice el componente Dialog.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert"}},[e._v("¶")]),e._v(" Alert")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm"}},[e._v("¶")]),e._v(" Confirm")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt"}},[e._v("¶")]),e._v(" Prompt")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"utiliza-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html"}},[e._v("¶")]),e._v(" Utiliza cadenas HTML")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("message")]),e._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 dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}}

1,[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegúrese que el contenido 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"distinguir-entre-cancelar-y-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#distinguir-entre-cancelar-y-cerrar"}},[e._v("¶")]),e._v(" Distinguir entre cancelar y cerrar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-centrado"}},[e._v("¶")]),e._v(" Contenido centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-globales"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales"}},[e._v("¶")]),e._v(" Métodos 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 métodos 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(". Así que en una instancia de Vue puedes llamar el método "),a("c

1ode",[e._v("MessageBox")]),e._v(" como lo que hicimos en esta pagina. Los parámetros 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"importacion-local"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import { MessageBox } from 'mazey-element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Los métodos 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 parámetros son los mismos que los anteriores.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones"}},[e._v("¶")]),e._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, sobrescribe "),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 personalizada 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("utilizado para mostrar un botón 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("utilizado para mostrar un botón 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 botón 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 botón 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 botón 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 botón 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 componente MessageBox pueda ser cerrado al dar clic en la mascara")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("true (false cuando es llamado con alert)")]

1)]),a("tr",[a("td",[e._v("closeOnPressEscape")]),a("td",[e._v("utilizado para que que el componente MessageBox 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("función de validación 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 validación 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 botón")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])}],!1,null,null,null).exports},6939(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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:[]},{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")])})}}}),"element-demo1":n({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.open1}},[e._v("message")]),e._v(" "),a("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1: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.")}}}),"element-demo2":n({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.open1}},[e._v("message")]),e._v(" "),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.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message({showClose:!0,message:"This is a message."})},open2:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}}),"element-demo3":n({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.openCenter}},[e._v("Centered text")])]],2)},staticRenderFns:[]},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}}),"element-demo4":n({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.openHTML}},[e._v("Use HTML String")])]],2)},staticRenderFns:[]},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}})}},o=(0,a(14486).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("Utilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.")]),e._m(1),a("p",[e._v("Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.")]),a("demo-block",[a("div",[a("p",[e._v("La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método "),a("c

1ode",[e._v("$message")]),e._v(" para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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 retroalimentación de Success, Warning, Message y Error activities.")]),a("demo-block",[a("div",[a("p",[e._v("Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. 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(". También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como "),a("code",[e._v("open4")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),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="open1">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\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 botón 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 atributo "),a("code",[e._v("duration")]),e._v(" que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a "),a("code",[e._v("0")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open1">message</el-button>\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="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: \'This is a message.\'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: \'Congrats, this is a success message.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: \'Warning, this is a warning message.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\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("template",{slot:"source"},[a("element-demo3")],1),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("c

1ode",[e._v("dangerouslyUseHTMLString")]),e._v(" en true y "),a("code",[e._v("message")]),e._v(" sera tratado como una cadena HTML.")])]),a("template",{slot:"source"},[a("element-demo4")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message"}},[e._v("¶")]),e._v(" Message")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tipos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos"}},[e._v("¶")]),e._v(" Tipos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable"}},[e._v("¶")]),e._v(" Closable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"texto-centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#texto-centrado"}},[e._v("¶")]),e._v(" Texto centrado")])},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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"utiliza-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#utiliza-cadenas-html"}},[e._v("¶")]),e._v(" Utiliza cadenas HTML")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("message")]),e._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 dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}}

1,[e._v("XSS attacks")]),e._v(". Entonces cuando "),a("code",[e._v("dangerouslyUseHTMLString")]),e._v(" esta activada, asegúrese que el contenido 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-globales"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-globales"}},[e._v("¶")]),e._v(" Métodos 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"importacion-local"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importacion-local"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import { Message } from 'mazey-element-ui';\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("En este caso debería llamar al método "),a("c

1ode",[e._v("Message(options)")]),e._v(". También se han registrado métodos para los diferentes tipos, e.g. "),a("code",[e._v("Message.success(options)")]),e._v(". Puede llamar al método "),a("code",[e._v("Message.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones"}},[e._v("¶")]),e._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("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, sobrescribe "),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 duración,en mili segundos. si se establece en 0, este no se apagara automáticamente")]),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 botón 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("función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro")]),a("td",[e._v("function")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("offset")]),a("td",[e._v("La distancia desde la parte superior del  viewport")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("20")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._v(" Métodos")])},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 método "),a("c

1ode",[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("Método")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("close")]),a("td",[e._v("cierra el componente Message")])])])])}],!1,null,null,null).exports},9425(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-button",{attrs:{plain:""},on:{click:e.open1}},[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:[]},{methods:{open1: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})}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n    Success\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Warning\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Info\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open2:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open3:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open4:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n    Top Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),a("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open2:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open3:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open4:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}}),"element-demo3":n({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    Notification with offset\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}}),"element-demo4":n({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    Use HTML String\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}}),"element-demo5":n({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    Hide close button\n    ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}})}},o=(0,a(14486).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 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

1é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 mili segundos.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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=\"open1\">\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      open1() {\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("open3")]),e._v(" y "),a("code",[e._v("open4")]),e._v(" sin pasar un campo "),a("code",[e._v("type")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),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=\"open1\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open4() {\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("template",{slot:"source"},[a("element-demo2")],1),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=\"open1\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\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("c

1ode",[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("template",{slot:"source"},[a("element-demo3")],1),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    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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("template",{slot:"source"},[a("element-demo4")],1),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    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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("template",{slot:"source"},[a("element-demo5")],1),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    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification"}},[e._v("¶")]),e._v(" Notification")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tipos-de-notificaciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-notificaciones"}},[e._v("¶")]),e._v(" Tipos de notificaciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"posicion-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-personalizada"}},[e._v("¶")]),e._v(" Posición personalizada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"desplazamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#desplazamiento"}},[e._v("¶")]),e._v(" Desplazamiento")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"usando-cadenas-html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usando-cadenas-html"}},[e._v("¶")]),e._v(" Usando cadenas HTML")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("message")]),e._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"}}

1,[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"ocultar-boton-de-cerrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ocultar-boton-de-cerrar"}},[e._v("¶")]),e._v(" Ocultar boton de cerrar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodo-global"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodo-global"}},[e._v("¶")]),e._v(" Método 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"importar-localmente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importar-localmente"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import { Notification } from 'mazey-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 método "),a("c

1ode",[e._v("Notification.closeAll()")]),e._v(" para cerrar manualmente todas las instancias.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones"}},[e._v("¶")]),e._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 notificación")]),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 notificación")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("duration")]),a("td",[e._v("duración antes de cerrar. Si no se quiere que se cierre automáticamente 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("posición 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 botón 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("función 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("función que se ejecuta cuando se hace clic 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._v(" Métodos")])},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 notificación 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("Método")]),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).exports},32821(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-page-header",{attrs:{content:"detail"},on:{back:e.goBack}})],1)},staticRenderFns:[]},{methods:{goBack:function(){console.log("go back")}}})}},o=(0,a(14486).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("Si la ruta de la página es simple, se recomienda utilizar  PageHeader en lugar de Breadcrumb.")]),e._m(1),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-page-header @back="goBack" content="detail">\n</el-page-header>\n\n<script>

1\n  export default {\n    methods: {\n      goBack() {\n        console.log(\'go back\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"pageheader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pageheader"}},[e._v("¶")]),e._v(" PageHeader")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basico"}},[e._v("¶")]),e._v(" Básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("title")]),a("td",[e._v("titulo principal")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("Back")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("back")]),a("td",[e._v("se activa cuando se hace clic en el lado derecho")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[e._v("¶")]),e._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 del slot")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("title")]),a("td",[e._v("titulo")])]),a("tr",[a("td",[e._v("content")]),a("td",[e._v("contenido")])])])])}],!1,null,null,null).exports},37277(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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({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("Total item count")]),e._v(" "),a("el-pagination",{attrs:{"current-page":e.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(t){e.currentPage1=t}}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Change page size")]),e._v(" "),a("el-pagination",{attrs:{"current-page":e.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(t){e.currentPage2=t}}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"}

1,[e._v("Jump to")]),e._v(" "),a("el-pagination",{attrs:{"current-page":e.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(t){e.currentPage3=t}}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("All combined")]),e._v(" "),a("el-pagination",{attrs:{"current-page":e.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(t){e.currentPage4=t}}})],1)]],2)},staticRenderFns:[]},{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}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",[a("el-switch",{model:{value:e.value,callback:function(t){e.value=t},expression:"value"}}),e._v(" "),a("el-pagination",{attrs:{"hide-on-single-page":e.value,total:5,layout:"prev, pager, next"}})],1)])},staticRenderFns:[]},{data:function(){return{value:!1}}})}},o=(0,a(14486).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("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("c

1ode",[e._v("->")]),e._v("(todo elemento situado luego de este símbolo será movido a la derecha).")])]),a("template",{slot:"source"},[a("element-demo0")],1),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("De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo "),a("code",[e._v("pager-count")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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 módulos 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("template",{slot:"source"},[a("element-demo3")],1),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    }

1,\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),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-switch v-model="value">\n </el-switch>\n <el-pagination\n  :hide-on-single-page="value"\n  :total="5"\n  layout="prev, pager, next">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\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)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"paginacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#paginacion"}},[e._v("¶")]),e._v(" Paginación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"numeros-de-paginas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#numeros-de-paginas"}},[e._v("¶")]),e._v(" Números de paginas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"paginacion-pequena"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#paginacion-pequena"}},[e._v("¶")]),e._v(" Paginación pequeña")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"mas-elementos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-elementos"}},[e._v("¶")]),e._v(" Más elementos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"oculte-la-paginacion-cuando-el-resultado-es-solo-una-pagina-simple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#oculte-la-paginacion-cuando-el-resultado-es-solo-una-pagina-simple"}},[e._v("¶")]),e._v(" Oculte la paginación cuando el resultado es solo una pagina simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Cuando sólo hay una página, oculte la paginación configurando el atributo "),a("code",[e._v("hide-on-single-page")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("c

1ode",[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")])]),a("tr",[a("td",[e._v("hide-on-single-page")]),a("td",[e._v("si ocultar cuando sólo hay una página")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("c

1ode",[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 botón "),a("code",[e._v("prev")]),e._v(" recibe el clic 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 botón "),a("code",[e._v("next")]),e._v(" recibe el clic y la pagina actual cambia")]),a("td",[e._v("la nueva pagina actual")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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).exports},1054(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-popconfirm",{attrs:{title:"Are you sure to delete this?"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Delete")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-popconfirm",{attrs:{"confirm-button-text":"OK","cancel-button-text":"No, Thanks",icon:"el-icon-info","icon-color":"red",title:"Are you sure to delete this?"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Delete")])],1)]],2)},staticRenderFns:[]},{})}},o=(0,a(14486).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("Un dialogo de confirmación simple asociado al evento click de un elemento.")]),e._m(1),a("p",[e._v("Popconfirm es parecido a Popover. Para algunos atributos duplicados, por favor consulte la documentación de Popover.")]),a("demo-block",[a("div",[a("p",[e._v("Solo el atributo  "),a("code",[e._v("title")]),e._v("  esta disponible en Popconfirm, "),a("code",[e._v("content")]),e._v(" sera ignorado.")])]),a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n<el-popconfirm\n  title="Are you sure to delete this?"\n>\n  <el-button slot="reference">Delete</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(2),a("p",[e._v("Se puede personalizar Popconfirm así:")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n<el-popconfirm\n  confirm-button-text=\'OK\'\n  cancel-button-text=\'No, Thanks\'\n  icon="el-icon-info"\n  icon-color="red"\n  title="Are you sure to delete this?"\n>\n  <el-button slot="reference">Delete</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"popconfirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popconfirm"}},[e._v("¶")]),e._v(" Popconfirm")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizacion"}},[e._v("¶")]),e._v(" Personalización")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("Titulo")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirm-button-text")]),a("td",[e._v("Texto del botón de confirmación")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cancel-button-text")]),a("td",[e._v("Texto del botón de cancelación")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("confirm-button-type")]),a("td",[e._v("Tipo del botón de confirmación")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Primary")])]),a("tr",[a("td",[e._v("cancel-button-type")]),a("td",[e._v("Tipo del botón de cancelación")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("Text")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("Icono")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("el-icon-question")])]),a("tr",[a("td",[e._v("icon-color")]),a("td",[e._v("Color icono")]),a("td",[e._v("String")]),a("td",[e._v("—")]),a("td",[e._v("#f90")])]),a("tr",[a("td",[e._v("hide-icon")]),a("td",[e._v("¿Es un icono oculto?")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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("reference")]),a("td",[e._v("Elemento HTML que activa el Popconfirm")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 Evento")]),a("th",[e._v("Descripción")]),a("th",[e._v("Parámetros")])])]),a("tbody",[a("tr",[a("td",[e._v("confirm")]),a("td",[e._v("Se activa cuando se pulsa el botón de confirmación")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("cancel")]),a("td",[e._v("Se activa cuando se pulsa el botón de cancelación")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},58016(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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"},[e._v("Hover to activate")])],1),e._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"},[e._v("Click to activate")])],1),e._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"}}),e._v(" "),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[e._v("Focus to activate")]),e._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:e.visible,callback:function(t){e.visible=t},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(t){e.visible=!e.visible}},slot:"reference"},[e._v("Manual to activate")])],1)]],2)},staticRenderFns:[]},{data:function(){return{visible:!1}}}),"element-demo1":n({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:[]},{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"}]}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-popover",{attrs:{placement:"top",width:"160"},model:{value:e.visible,callback:function(t){e.visible=t},expression:"visible"}},[a("p",[e._v("Are you sure to delete this?")]),e._v(" "),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){e.visible=!1}}},[e._v("cancel")]),e._v(" "),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){e.visible=!1}}},[e._v("confirm")])],1),e._v(" "),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Delete")])],1)],1)},staticRenderFns:[]},{data:function(){return{visible:!1}}})}},o=(0,a(14486).A)(l,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("c

1ode",[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(". En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el "),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(", o usando la directiva "),a("code",[e._v("v-popover")]),e._v(" y poniendo  el "),a("code",[e._v("ref")]),e._v(" de Popover.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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="visible">\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="visible = false">cancel</el-button>\n    <el-button type="primary" size="mini" @click="visible = 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        visible: 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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover"}},[e._v("¶")]),e._v(" Popover")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"informacion-anidada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#informacion-anidada"}},[e._v("¶")]),e._v(" Información anidada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"operacion-anidada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#operacion-anidada"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("animación de transición del popover")]),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/docs/v2/"}},[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/docs/v2/"}},[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("c

1ode",[e._v("trigger")]),e._v(" es hover, en mili segundos")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close-delay")]),a("td",[e._v("Retraso antes de desaparecer cuando el "),a("code",[e._v("trigger")]),e._v(" es hover, en mili segundos.")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("200")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" de Popover")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 transición 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 transición de salida termina")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},80187(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-progress",{attrs:{percentage:50}}),e._v(" "),a("el-progress",{attrs:{percentage:100,format:e.format}}),e._v(" "),a("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{percentage:100,status:"warning"}}),e._v(" "),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{methods:{format:function(e){return 100===e?"Full":e+"%"}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":26,percentage:70}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":24,percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":22,percentage:80,status:"warning"}}),e._v(" "),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":20,percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{percentage:e.percentage,color:e.customColor}}),e._v(" "),a("el-progress",{attrs:{percentage:e.percentage,color:e.customColorMethod}}),e._v(" "),a("el-progress",{attrs:{percentage:e.percentage,color:e.customColors}}),e._v(" "),a("div",[a("el-button-group",[a("el-button",{attrs:{icon:"el-icon-minus"},on:{click:e.decrease}}),e._v(" "),a("el-button",{attrs:{icon:"el-icon-plus"},on:{click:e.increase}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{percentage:20,customColor:"#409eff",customColors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{customColorMethod:function(e){return e<30?"#909399":e<70?"#e6a23c":"#67c23a"},increase:function(){this.percentage+=10,this.percentage>100&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:70,status:"warning"}}),e._v(" "),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-progress",{attrs:{type:"dashboard",percentage:e.percentage,color:e.colors}}),e._v(" "),a("div",[a("el-button-group",[a("el-button",{attrs:{icon:"el-icon-minus"},on:{click:e.decrease}}),e._v(" "),a("el-button",{attrs:{icon:"el-icon-plus"},on:{click:e.increase}})],1)],1)],1)},staticRenderFns:[]}

1,{data:function(){return{percentage:10,colors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{increase:function(){this.percentage+=10,this.percentage>100&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}})}},o=(0,a(14486).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("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 porcentaje. Este es "),a("strong",[e._v("requerido")]),e._v(" y tiene que ser un valor entre "),a("code",[e._v("0-100")]),e._v(". Puede personalizar el formato de texto estableciendo "),a("code",[e._v("format")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="50"></el-progress>\n<el-progress :percentage="100" :format="format"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="100" status="warning"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? \'Full\' : `${percentage}%`;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),a("p",[e._v("En este caso el porcentaje 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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>\n<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),e._m(4),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="percentage" :color="customColor"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColors"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon="el-icon-minus" @click="decrease"></el-button>\n    <el-button icon="el-icon-plus" @click="increase"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: \'#409eff\',\n        customColors: [\n          {color: \'#f56c6c\', percentage: 20},\n          {color: \'#e6a23c\', percentage: 40},\n          {color: \'#5cb87a\', percentage: 60},\n          {color: \'#1989fa\', percentage: 80},\n          {color: \'#6f7ad3\', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return \'#909399\';\n        } else if (percentage < 70) {\n          return \'#e6a23c\';\n        } else {\n          return \'#67c23a\';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),a("demo-block",[a("div",[a("p",[e._v("Puede asignar el atributo "),a("c

1ode",[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("template",{slot:"source"},[a("element-demo3")],1),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="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="70" status="warning"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("También puede especificar el atributo "),a("code",[e._v("type")]),e._v(" a "),a("code",[e._v("dashboard")]),e._v(" para usar la barra de progreso del panel de control.")])]),a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>\n\n<div>\n  <el-button-group>\n    <el-button icon="el-icon-minus" @click="decrease"></el-button>\n    <el-button icon="el-icon-plus" @click="increase"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: \'#f56c6c\', percentage: 20},\n          {color: \'#e6a23c\', percentage: 40},\n          {color: \'#5cb87a\', percentage: 60},\n          {color: \'#1989fa\', percentage: 80},\n          {color: \'#6f7ad3\', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"progreso"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progreso"}},[e._v("¶")]),e._v(" Progreso")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"barra-de-progreso-lineal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-lineal"}},[e._v("¶")]),e._v(" Barra de progreso lineal")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"porcentaje-interno"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#porcentaje-interno"}},[e._v("¶")]),e._v(" Porcentaje interno")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"color-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-personalizado"}},[e._v("¶")]),e._v(" Color personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede utilizar el atributo "),a("code",[e._v("color")]),e._v(" para establecer el color de la barra de progreso.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"barra-de-progreso-circular"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-circular"}},[e._v("¶")]),e._v(" Barra de progreso circular")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"barra-de-progreso-del-panel-de-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#barra-de-progreso-del-panel-de-control"}},[e._v("¶")]),e._v(" Barra de progreso del panel de control")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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/dashboard")]),a("td",[e._v("line")])]),a("tr",[a("td",[e._v("stroke-width")]),a("td",[e._v("anch

1o 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/warning")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("color")]),a("td",[e._v("color de fondo de la barra de progreso. Sobrescribe la propiedad "),a("code",[e._v("status")])]),a("td",[e._v("string/function/array")]),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")])]),a("tr",[a("td",[e._v("stroke-linecap")]),a("td",[e._v("circle/dashboard tipo de diseño al final del camino")]),a("td",[e._v("string")]),a("td",[e._v("butt/round/square")]),a("td",[e._v("round")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("personalizar el formato de texto estableciendo format")]),a("td",[e._v("function(percentage)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("define-back-color")]),a("td",[e._v("background color of progress bar (hex format)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("text-color")]),a("td",[e._v("text color of progress bar (hex format)")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},40397(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({},function(){var e=this;e.$createElement;return e._self._c,e._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"}},[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"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),a("p",[e._v("Proporcionamos un "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("plugin de Element")]),e._v(" para vue-cli@3, que puede utilizar para construir rápidamente un proyecto basado en Element.")]),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"}},[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"}},[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"}},[e._v("¶")]),e._v(" Importando todo")]),a("p",[e._v("En main.js:")]),a("pre",[a("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'mazey-element-ui';\nimport 'mazey-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"}},[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": "mazey-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 'mazey-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/chengchuu/mazey-element-ui/blob/main/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  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  C

1arousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'mazey-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(CheckboxButton);\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(Spinner);\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);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\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"}},[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.")]),a("p",[e._v("La propiedad "),a("code",[e._v("zIndex")]),e._v(" indica el z-index inicial (por defecto: 2000) para los modal:")]),a("p",[e._v("Importando Element completamente：")]),a("pre",[a("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'mazey-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 'mazey-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(". El valor inicial de z-index para los modals se ha establecido a 3000.")]),a("h3",{attrs:{id:"empiece-ya"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empiece-ya"}},[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"}},[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(":")])])}],!1,null,null,null).exports},41810(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-radio",{attrs:{label:"1"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:"2"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"1"}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"selected and disabled"}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-radio-group",{model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[a("el-radio",{attrs:{label:3}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:6}},[e._v("Option B")]),e._v(" "),a("el-radio",{attrs:{label:9}},[e._v("Option C")])],1)],1)},staticRenderFns:[]},{data:function(){return{radio:3}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-radio-group",{model:{value:e.radio1,callback:function(t){e.radio1=t},expression:"radio1"}},[a("el-radio-button",{attrs:{label:"New York"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:e.radio2,callback:function(t){e.radio2=t},expression:"radio2"}},[a("el-radio-button",{attrs:{label:"New York"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:e.radio3,callback:function(t){e.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),e._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:e.radio4,callback:function(t){e.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Washington"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Los Angeles"}}),e._v(" "),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"New York",radio2:"New York",radio3:"New York",radio4:"New York"}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:e.radio1,callback:function(t){e.radio1=t},expression:"radio1"}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:"2",border:""},model:{value:e.radio1,callback:function(t){e.radio1=t},expression:"radio1"}},[e._v("Option B")])],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:e.radio2,callback:function(t){e.radio2=t},expression:"radio2"}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:e.radio2,callback:function(t){e.radio2=t},expression:"radio2"}},[e._v("Option B")])],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:e.radio3,callback:function(t){e.radio3=t},expression:"radio3"}},[a("el-radio",{attrs:{label:"1",border:""}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[e._v("Option B")])],1)],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:e.radio4,callback:function(t){e.radio4=t},expression:"radio4"}},[a("el-radio",{attrs:{label:"1",border:""}},[e._v("Option A")]),e._v(" "),a("el-radio",{attrs:{label:"2",border:""}},[e._v("Option B")])],1)],1)]],2)},staticRenderFns:[]}

1,{data:function(){return{radio1:"1",radio2:"1",radio3:"1",radio4:"1"}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'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("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio">\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        radio: 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("template",{slot:"source"},[a("element-demo3")],1),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="radio1">\n      <el-radio-button label="New York"></el-radio-button>

1\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="radio2" 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="radio3" 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="radio4" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>

1\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        radio1: \'New York\',\n        radio2: \'New York\',\n        radio3: \'New York\',\n        radio4: \'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("template",{slot:"source"},[a("element-demo4")],1),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="radio1" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio1" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio3" 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="radio4" 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        radio1: \'1\',\n        radio2: \'1\',\n        radio3: \'1\',\n        radio4: \'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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio"}},[e._v("¶")]),e._v(" Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"deshabilitado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#deshabilitado"}},[e._v("¶")]),e._v(" Deshabilitado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("El atributo "),a("code",[e._v("disabled")]),e._v(" es utilizado para deshabilitar un Radio.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"grupo-de-elementos-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grupo-de-elementos-radio"}},[e._v("¶")]),e._v(" Grupo de elementos Radio")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"estilo-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-button"}},[e._v("¶")]),e._v(" Estilo Button")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-bordes"}},[e._v("¶")]),e._v(" Con bordes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio"}},[e._v("¶")]),e._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("c

1ode",[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 "),a("code",[e._v("name")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-radio-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-button"}},[e._v("¶")]),e._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 "),a("code",[e._v("name")])]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-radio-group"}},[e._v("¶")]),e._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á deshabilitada")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-radio-group"}},[e._v("¶")]),e._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).exports},25434(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Default")]),e._v(" "),a("el-rate",{model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Color for different levels")]),e._v(" "),a("el-rate",{attrs:{colors:e.colors},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)])},staticRenderFns:[]},{data:function(){return{value1:null,value2:null,colors:["#99A9BF","#F7BA2A","#FF9900"]}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-rate",{attrs:{"icon-classes":e.iconClasses,"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null,iconClasses:["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"]}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:3.7}}})}},o=(0,a(14486).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("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("c

1ode",[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(". O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.")])]),a("template",{slot:"source"},[a("element-demo0")],1),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="colors">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: [\'#99A9BF\', \'#F7BA2A\', \'#FF9900\'] // same as { 2: \'#99A9BF\', 4: { value: \'#F7BA2A\', excluded: true }, 5: \'#FF9900\' }\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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 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 personalizar los iconos pasando "),a("code",[e._v("icon-classes")]),e._v(" un array con tres elementos o un objeto cuya clave es el umbral entre dos niveles y cuyo valor es la clase de icono correspondiente.  En este ejemplo también usamos "),a("code",[e._v("void-icon-class")]),e._v(" para asignar un icono si no está seleccionado.")])]),a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\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        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value"\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        value: 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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"calificacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#calificacion"}},[e._v("¶")]),e._v(" Calificación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("h3",{attrs:{id:"con-texto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#con-texto"}},[e._v("¶")]),e._v(" Con texto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"mas-iconos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-iconos"}},[e._v("¶")]),e._v(" Más iconos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"solo-lectura"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#solo-lectura"}},[e._v("¶")]),e._v(" Solo lectura")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente.")]),a("td",[e._v("array/object")]),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("nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente.")]),a("td",[e._v("array/object")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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("change")]),a("td",[e._v("Se dispara cuando la puntuación es cambiada")]),a("td",[e._v("valor luego del cambio")])])])])}],!1,null,null,null).exports},62870(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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:{sm:12,lg:6}},[a("el-result",{attrs:{icon:"success",title:"Success Tip",subTitle:"Please follow the instructions"}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"medium"}},[e._v("Back")])],1)],2)],1),e._v(" "),a("el-col",{attrs:{sm:12,lg:6}},[a("el-result",{attrs:{icon:"warning",title:"Warning Tip",subTitle:"Please follow the instructions"}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"medium"}},[e._v("Back")])],1)],2)],1),e._v(" "),a("el-col",{attrs:{sm:12,lg:6}},[a("el-result",{attrs:{icon:"error",title:"Error Tip",subTitle:"Please follow the instructions"}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"medium"}},[e._v("Back")])],1)],2)],1),e._v(" "),a("el-col",{attrs:{sm:12,lg:6}},[a("el-result",{attrs:{icon:"info",title:"Info Tip",subTitle:"Please follow the instructions"}},[a("template",{slot:"extra"},[a("el-button",{attrs:{type:"primary",size:"medium"}},[e._v("Back")])],1)],2)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-result",{attrs:{title:"404",subTitle:"Sorry, request error"}},[n("template",{slot:"icon"},[n("el-image",{attrs:{src:a(90089)}})],1),e._v(" "),n("template",{slot:"extra"},[n("el-button",{attrs:{type:"primary",size:"medium"}},[e._v("Back")])],1)],2)],1)},staticRenderFns:[]},{})}},o=(0,a(14486).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("Used to give feedback on the result of user's operation or access exception.")]),e._m(1),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n')])])])],2),e._m(2),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-result title="404" subTitle="Sorry, request error">\n  <template slot="icon">\n    <el-image :src="require(\'examples/assets/images/hamburger.png\')"></el-image>\n  </template>\n  <template slot="extra">\n    <el-button type="primary" size="medium">Back</el-button>\n  </template>\n</el-result>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"result"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#result"}},[e._v("¶")]),e._v(" Result")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[e._v("¶")]),e._v(" Basic usage")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"customized-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-content"}},[e._v("¶")]),e._v(" Customized content")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"result-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#result-attributes"}},[e._v("¶")]),e._v(" Result 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("title")]),a("td",[e._v("title")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("sub-title")]),a("td",[e._v("sub title")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("icon")]),a("td",[e._v("icon type")]),a("td",[e._v("string")]),a("td",[e._v("success / warning / info / error")

1]),a("td",[e._v("info")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"result-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#result-slots"}},[e._v("¶")]),e._v(" Result 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("icon")]),a("td",[e._v("custom icon")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("custom title")])]),a("tr",[a("td",[e._v("subTitle")]),a("td",[e._v("custom sub title")])]),a("tr",[a("td",[e._v("extra")]),a("td",[e._v("custom  extra area")])])])])}],!1,null,null,null).exports},46665(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-select",{attrs:{placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{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:""}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{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:""}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{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:""}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),e._v(" "),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value1:[],value2:[]}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[e._v(e._s(t.label))]),e._v(" "),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[e._v(e._s(t.value))])])}),1)]],2)},staticRenderFns:[]}

1,{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"}],value:""}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},e._l(t.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{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"}]}],value:""}}}),"element-demo7":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{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:""}}}),"element-demo8":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":e.remoteMethod,loading:e.loading},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[],value:[],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:"value:"+e,label:"label:"+e}})},methods:{remoteMethod:function(e){var t=this;""!==e?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options=t.list.filter(function(t){return t.label.toLowerCase().indexOf(e.toLowerCase())>-1})},200)):this.options=[]}}}),"element-demo9":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(e){return a("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value:[]}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("template",{slot:"source"},[a("element-demo1")],1),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      :disabled=\"item.disabled\">\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          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        value: ''\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("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" 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        value: ''\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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" 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        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),a("p",[e._v("Selección múltiple utiliza tags para mostrar las opciones seleccionad

1as.")]),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("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value1" 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="value2"\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        value1: [],\n        value2: []\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("template",{slot:"source"},[a("element-demo5")],1),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 cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">

1\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        value: ''\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("template",{slot:"source"},[a("element-demo6")],1),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-group\n      v-for=\"group in options\"\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        options: [{\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        value: ''\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("template",{slot:"source"},[a("element-demo7")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" 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        value: ''\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("c

1ode",[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("template",{slot:"source"},[a("element-demo8")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value"\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 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: [],\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: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\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("template",{slot:"source"},[a("element-demo9")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    placeholder=\"Choose tags for your article\">\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: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select"}},[e._v("¶")]),e._v(" Select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disabled-en-el-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-option"}},[e._v("¶")]),e._v(" Disabled en el-option")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disabled-en-el-select"}}

1,[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-en-el-select"}},[e._v("¶")]),e._v(" Disabled en el-select")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"select-simple-limpiable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-simple-limpiable"}},[e._v("¶")]),e._v(" Select simple limpiable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccion-multiple-basica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple-basica"}},[e._v("¶")]),e._v(" Selección múltiple básica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizar-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-template"}},[e._v("¶")]),e._v(" Personalizar template")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"agrupando"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agrupando"}},[e._v("¶")]),e._v(" Agrupando")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"filtrado-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-opciones"}},[e._v("¶")]),e._v(" Filtrado de opciones")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"busqueda-remota"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#busqueda-remota"}},[e._v("¶")]),e._v(" Búsqueda remota")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"crear-nuevos-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#crear-nuevos-items"}},[e._v("¶")]),e._v(" Crear nuevos items")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("Si el valor de encuadernación de Select es un objeto, asegúrese de asignar "),a("code",[e._v("value-key")]),e._v(" como el nombre único de la clave de identidad.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"select-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-atributos"}},[e._v("¶")]),e._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("c

1ode",[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("si el select puede ser limpiado")]),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("máximo 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 en la proxima major versión")]),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("método 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 traerán 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("método de búsqueda 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, también puedes usar la configuración de slot = "empty"')]),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. También puedes usar la configuración de slot = "empty"')]),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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-select"}},[e._v("¶")]),e._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("Parámetros")])])]),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 menú 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 múltiple")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots-select"}},[e._v("¶")]),e._v(" Slots 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("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("Lista sin opciones")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-del-grupo-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-grupo-de-opciones"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-opciones"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-opciones"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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 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).exports},5788(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={name:"component-doc",components:{"element-demo0":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-skeleton")]],2)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6}})],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6,animated:""}})],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-skeleton",{staticStyle:{width:"240px"}},[a("template",{slot:"template"},[a("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"p"}}

1),e._v(" "),a("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between"}},[a("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),e._v(" "),a("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1)],2)]],2)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticStyle:{width:"240px"}},[a("p",[a("label",{staticStyle:{"margin-right":"16px"}},[e._v("Switch Loading")]),e._v(" "),a("el-switch",{model:{value:e.loading,callback:function(t){e.loading=t},expression:"loading"}})],1),e._v(" "),a("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:e.loading,animated:""}},[a("template",{slot:"template"},[a("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),e._v(" "),a("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[a("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),e._v(" "),a("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),e._v(" "),[a("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[a("img",{staticClass:"image",attrs:{src:"~examples/assets/images/hamburger.png"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[e._v("Delicious hamberger")]),e._v(" "),a("div",{staticClass:"bottom card-header"},[a("span",{staticClass:"time"},[e._v(e._s(e.currentDate))]),e._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[e._v("Operation button")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01"}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticStyle:{width:"400px"}},[a("p",[a("el-button",{on:{click:e.setLoading}},[e._v("Click me to reload")])],1),e._v(" "),a("el-skeleton",{staticStyle:{width:"400px"},attrs:{loading:e.loading,animated:"",count:3}},[a("template",{slot:"template"},[a("el-skeleton-item",{staticStyle:{width:"400px",height:"267px"},attrs:{variant:"image"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),e._v(" "),a("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[a("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),e._v(" "),a("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),e._v(" "),e._l(e.lists,function(t){return a("el-card",{key:t.name,attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[a("img",{staticClass:"image multi-content",attrs:{src:t.imgUrl}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[e._v("Delicious hamberger")]),e._v(" "),a("div",{staticClass:"bottom card-header"},[a("span",{staticClass:"time"},[e._v(e._s(e.currentDate))]),e._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[e._v("Operation button")])],1)])])})],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01",lists:[]}},mounted:function(){this.loading=!1,this.lists=[{imgUrl:a(75123),name:"Deer"},{imgUrl:a(75123),name:"Horse"},{imgUrl:a(75123),name:"Mountain Lion"}]},methods:{setLoading:function(){var e=this;this.loading=!0,setTimeout(function(){return e.loading=!1},2e3)}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticStyle:{width:"240px"}},[a("p",[a("label",{staticStyle:{"margin-right":"16px"}},[e._v("Switch Loading")]),e._v(" "),a("el-switch",{model:{value:e.loading,callback:function(t){e.loading=t},expression:"loading"}})],1),e._v(" "),a("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:e.loading,animated:"",throttle:500}},[a("template",{slot:"template"},[a("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),e._v(" "),a("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[a("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),e._v(" "),a("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),e._v(" "),[a("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[a("img",{staticClass:"image",attrs:{src:"~examples/assets/images/hamburger.png"}}),e._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[e._v("Delicious hamberger")]),e._v(" "),a("div",{staticClass:"bottom card-header"},[a("span",{staticClass:"time"},[e._v(e._s(e.currentDate))]),e._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}}

1,[e._v("operation button")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!1,currentDate:"2021-06-01"}}})}},o=(0,a(14486).A)(l,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("p",[e._v("The basic skeleton.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-skeleton />\n</template>\n")])])])],2),e._m(3),a("p",[e._v("You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-skeleton :rows="6" />\n')])])])],2),e._m(4),e._m(5),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-skeleton :rows="6" animated />\n')])])])],2),e._m(6),e._m(7),a("p",[e._v("Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-skeleton style="width: 240px">\n    <template slot="template">\n      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />\n      <div style="padding: 14px;">\n        <el-skeleton-item variant="p" style="width: 50%" />\n        <div\n          style="display: flex; align-items: center; justify-items: space-between;"\n        >\n          <el-skeleton-item variant="text" style="margin-right: 16px;" />\n          <el-skeleton-item variant="text" style="width: 30%;" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n')])])])],2),e._m(8),e._m(9),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">Switch Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton style="width: 240px" :loading="loading" animated>\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\' }">\n          <img\n            src="~examples/assets/images/hamburger.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\'\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),a("demo-block",[a("template",{slot:"source"},[a("element-demo5")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 400px">\n    <p>

1\n      <el-button @click="setLoading">Click me to reload</el-button>\n    </p>\n    <el-skeleton style="width:400px" :loading="loading" animated :count="3">\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 400px; height: 267px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style="{ padding: \'0px\', marginBottom: \'1px\' }"\n          v-for="item in lists"\n          :key="item.name"\n        >\n          <img :src="item.imgUrl" class="image multi-content" />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            require(\'examples/assets/images/element-demo.jpeg\'),\n          name: \'Deer\',\n        },\n        {\n          imgUrl:\n            require(\'examples/assets/images/element-demo.jpeg\'),\n          name: \'Horse\',\n        },\n        {\n          imgUrl:\n            require(\'examples/assets/images/element-demo.jpeg\'),\n          name: \'Mountain Lion\',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),a("demo-block",[a("template",{slot:"source"},[a("element-demo6")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">Switch Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton\n      style="width: 240px"\n      :loading="loading"\n      animated\n      :throttle="500"\n    >\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\'}">\n          <img\n            src="~examples/assets/images/hamburger.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: \'2021-06-01\'\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"skeleton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#skeleton"}},[e._v("¶")]),e._v(" Skeleton")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("p",[e._v("When loading data, and you need a rich experience for visual and interactions for your end users, you can choose "),a("code",[e._v("skeleton")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[e._v("¶")]),e._v(" Basic usage")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"configurable-rows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configurable-rows"}},[e._v("¶")]),e._v(" Configurable Rows")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"animation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#animation"}},[e._v("¶")]),e._v(" Animation")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("We have provided a switch flag indicating whether showing the loading animation, called "),a("code",[e._v("animated")]),e._v(" when this is true, all children of "),a("code",[e._v("el-skeleton")]),e._v(" will show animation")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"customized-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-template"}},[e._v("¶")]),e._v(" Customized Template")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Element only provides the most common template, sometimes that could be a problem, so you have a slot named "),a("code",[e._v("template")]),e._v(" to do that work.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"loading-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-state"}},[e._v("¶")]),e._v(" Loading state")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("When "),a("code",[e._v("Loading")]),e._v(" ends, we always need to show the real UI with data to our end users. with the attribtue "),a("code",[e._v("loading")]),e._v(" we can control whether showing the DOM. You can also use slot "),a("code",[e._v("default")]),e._v(" to structure the real DOM element.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rendering-a-list-of-data"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-list-of-data"}},[e._v("¶")]),e._v(" Rendering a list of data")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with "),a("code",[e._v("count")]),e._v(" attribute, you can control how many these templates you need to render to the browser.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"tip"},[a("p",[e._v("We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep "),a("code",[e._v("count")]),e._v(" as small as it can be to make better user experience.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"avoiding-rendering-bouncing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#avoiding-rendering-bouncing"}},[e._v("¶")]),e._v(" Avoiding rendering bouncing.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the "),a("code",[e._v("throttle")]),e._v(" attribute.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"skeleton-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-attributes"}},[e._v("¶")]),e._v(" Skeleton 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("Acceptable Value")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("animated")]),a("td",[e._v("whether showing the animation")]),a("td",[e._v("boolean")]),a("td",[e._v("true / false")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("count")]),a("td",[e._v("how many fake items to render to the DOM")]),a("td",[e._v("number")]),a("td",[e._v("integer")]),a("td",[e._v("1")])]),a("tr",[a("td",[e._v("loading")]),a("td",[e._v("whether showing the skeleton")]),a("td",[e._v("boolean")]),a("td",[e._v("true / false")]),a("td",[e._v("true")])]),a("tr",[a("td",[e._v("rows")]

1),a("td",[e._v("numbers of the row, only useful when no template slot were given")]),a("td",[e._v("number")]),a("td",[e._v("integer")]),a("td",[e._v("4")])]),a("tr",[a("td",[e._v("throttle")]),a("td",[e._v("Rendering delay in millseconds")]),a("td",[e._v("number")]),a("td",[e._v("integer")]),a("td",[e._v("0")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"skeleton-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-item-attributes"}},[e._v("¶")]),e._v(" Skeleton 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("Acceptable Value")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("variant")]),a("td",[e._v("The current rendering skeleton type")]),a("td",[e._v("Enum(string)")]),a("td",[e._v("p / h1 / h3 / text / caption / button / image / circle / rect")]),a("td",[e._v("text")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"skeleton-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-slots"}},[e._v("¶")]),e._v(" Skeleton 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("default")]),a("td",[e._v("\bReal rendering DOM")])]),a("tr",[a("td",[e._v("template")]),a("td",[e._v("Custom rendering skeleton template")])])])])}],!1,null,null,null).exports},82425(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("Default value")]),e._v(" "),a("el-slider",{model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Customized initial value")]),e._v(" "),a("el-slider",{model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Hide Tooltip")]),e._v(" "),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Format Tooltip")]),e._v(" "),a("el-slider",{attrs:{"format-tooltip":e.formatTooltip},model:{value:e.value4,callback:function(t){e.value4=t},expression:"value4"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Disabled")]),e._v(" "),a("el-slider",{attrs:{disabled:""},model:{value:e.value5,callback:function(t){e.value5=t},expression:"value5"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}}),"element-demo1":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("Breakpoints not displayed")]),e._v(" "),a("el-slider",{attrs:{step:10},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[e._v("Breakpoints displayed")]),e._v(" "),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:0}}}),"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-slider",{attrs:{"show-input":""},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[4,8]}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"",marks:e.marks},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[30,60],marks:{0:"0°C",8:"8°C",37:"37°C",50:{style:{color:"#1989FA"},label:this.$createElement("strong","50%")}}}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("template",{slot:"source"},[a("element-demo1")],1),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="value1"\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="value2"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),a("p",[e._v("Inserte el valor a través 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("template",{slot:"source"},[a("element-demo2")],1),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="value"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 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("template",{slot:"source"},[a("element-demo3")],1),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="value"\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        value: [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("template",{slot:"source"},[a("element-demo4")],1),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="value"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),a("demo-block",[a("div",[a("p",[e._v("Use el atributo "),a("code",[e._v("marks")]),e._v("  para mostrar marcas en el slider.")])]),a("template",{slot:"source"},[a("element-demo5")],1),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=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider"}},[e._v("¶")]),e._v(" Slider")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"valores-discretos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#valores-discretos"}},[e._v("¶")]),e._v(" Valores discretos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slider-con-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-con-input"}},[e._v("¶")]),e._v(" Slider con input")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccion-de-rangos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-de-rangos"}},[e._v("¶")]),e._v(" Seleccion de rangos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"modo-vertical"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modo-vertical"}},[e._v("¶")]),e._v(" Modo Vertical")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"mostrar-marcas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mostrar-marcas"}}

1,[e._v("¶")]),e._v(" Mostrar marcas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 mínimo")]),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("c

1ode",[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 mili segundos, 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("—")])]),a("tr",[a("td",[e._v("marks")]),a("td",[e._v("marcas, tipo de clave debe ser "),a("code",[e._v("number")]),e._v(" y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado")]),a("td",[e._v("object")]),a("td",[e._v("—")]),a("td",[e._v("—")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 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)")]),a("td",[e._v("valor después del cambio")])]),a("tr",[a("td",[e._v("input")]),a("td",[e._v("Se dispara cuando los datos cambian (funciona en tiempo real)")]),a("td",[e._v("valor después del cambio")])])])])}],!1,null,null,null).exports},59846(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",[a("el-statistic",{attrs:{"group-separator":",",precision:2,value:e.value2,title:e.title}})],1)]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",[a("el-statistic",{attrs:{title:"Gender Distribution"}},[a("template",{slot:"formatter"},[e._v("\n              456/2\n            ")])],2)],1)]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",[a("el-statistic",{attrs:{"group-separator":",",precision:2,"decimal-separator":".",value:e.value1,title:e.title}},[a("template",{slot:"prefix"},[a("i",{staticClass:"el-icon-s-flag",staticStyle:{color:"red"}})]),e._v(" "),a("template",{slot:"suffix"},[a("i",{staticClass:"el-icon-s-flag",staticStyle:{color:"blue"}})])],2)],1)]),e._v(" "),a("el-col",{attrs:{span:6}},[a("div",[a("el-statistic",{attrs:{value:e.like?521:520,title:"Feedback"}},[a("template",{slot:"suffix"},[a("span",{staticClass:"like",on:{click:function(t){e.like=!e.like}}},[a("i",{directives:[{name:"show",rawName:"v-show",value:!!e.like,expression:"!!like"}],staticClass:"el-icon-star-on",staticStyle:{color:"red"}}),e._v(" "),a("i",{directives:[{name:"show",rawName:"v-show",value:!e.like,expression:"!like"}],staticClass:"el-icon-star-off"})])])],2)],1)])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{like:!0,value1:4154.564,value2:2222,title:"Growth this year"}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:14}},[a("el-card",{staticStyle:{width:"100%"},attrs:{shadow:"hover"}},[a("div",{staticStyle:{width:"100%",display:"inline-block"}},[a("el-statistic",{attrs:{value:e.deadline2,"time-indices":"",title:"

1🎉Price reduction of goods🎉"}},[a("template",{slot:"suffix"},[e._v("\n                panic purchase\n              ")])],2)],1)]),e._v(" "),a("el-card",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{shadow:"hover"}},[a("div",{staticStyle:{width:"100%",display:"inline-block"}},[a("el-statistic",{attrs:{value:e.deadline3,"time-indices":"",title:"The Value of Time"},on:{finish:e.hilarity}},[a("template",{slot:"suffix"},[a("el-button",{attrs:{type:"primary ",size:"small"},on:{click:e.add}},[e._v("add 10s")])],1)],2)],1)])],1),e._v(" "),a("el-col",{attrs:{span:10}},[a("el-card",{staticStyle:{width:"100%"},attrs:{shadow:"hover"}},[a("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[a("span",{staticStyle:{"font-size":"14px"}},[e._v("Henry·Wadsworth·Longfellow")]),e._v(" "),a("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"},on:{click:e.clickFn}},[e._v("suspend")])],1),e._v(" "),a("div",{staticStyle:{"font-size":"16px","text-align":"left"}},[e._v("\n            Don't sigh in the past, it is no longer back\n          ")]),e._v(" "),a("div",{staticStyle:{"font-size":"16px","text-align":"left","margin-top":"15px"}},[e._v("\n            Be wise to improve the present\n          ")]),e._v(" "),a("div",{staticStyle:{"font-size":"16px","text-align":"left","margin-top":"15px"}},[e._v("\n            To not worry not afraid of the firm will into the complicated future\n          ")]),e._v(" "),a("div",{staticStyle:{"margin-top":"40px"}}),e._v(" "),a("el-statistic",{ref:"statistic",attrs:{format:"HH:mm:ss",value:e.deadline4,title:"Distance to Tomorrow:","time-indices":""},on:{finish:e.hilarity}})],1)],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{deadline2:Date.now()+288e5,deadline3:Date.now()+18e5,deadline4:Date.now()+((new Date).setHours(23,59,59)-Date.now()),stop:!0}},methods:{hilarity:function(){this.$notify({title:"Prompt",message:"Time is up, do you know that an inch of gold can't buy an inch of time?",duration:0})},clickFn:function(){this.$refs.statistic.suspend(this.stop),this.stop=!this.stop},add:function(){this.deadline3=this.deadline3+1e4}}})}},o=(0,a(14486).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("Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.")]),a("p",[e._v("Countdown mode")]),e._m(1),a("p",[e._v("The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-row :gutter="20">\n      <el-col :span="6">\n        <div>\n          <el-statistic\n            group-separator=","\n            :precision="2"\n            :value="value2"\n            :title="title"\n          ></el-statistic>\n        </div>\n      </el-col>\n      <el-col :span="6">\n        <div>\n          <el-statistic title="Gender Distribution">\n            <template slot="formatter">\n              456/2\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span="6">\n        <div>\n          <el-statistic\n            group-separator=","\n            :precision="2"\n            decimal-separator="."\n            :value="value1"\n            :title="title"\n          >\n            <template slot="prefix">\n              <i class="el-icon-s-flag" style="color: red"></i>\n            </template>\n            <template slot="suffix">\n              <i class="el-icon-s-flag" style="color: blue"></i>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span="6">\n        <div>\n          <el-statistic :value="like ? 521 : 520" title="Feedback">\n            <template slot="suffix">\n              <span @click="like = !like" class="like">\n                <i\n                  class="el-icon-star-on"\n                  style="color:red"\n                  v-show="!!like"\n                ></i>\n                <i class="el-icon-star-off" v-show="!like"></i>\n              </span>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>

1\n  export default {\n    data() {\n      return {\n        like: true,\n        value1: 4154.564,\n        value2: 2222,\n        title: "Growth this year",\n      };\n    },\n  };\n<\/script>\n<style lang="scss">\n  .like {\n    cursor: pointer;\n    font-size: 25px;\n    display: inline-block;\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),a("demo-block",[a("div",[a("p",[e._v("Providing a future time via 'value' will enable the countdown function")])]),a("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-row :gutter="20">\n      <el-col :span="14">\n        <el-card shadow="hover" style="width: 100%; ">\n          <div style="width: 100%; display: inline-block; ">\n            <el-statistic\n              :value="deadline2"\n              time-indices\n              title="🎉Price reduction of goods🎉"\n            >\n              <template slot="suffix">\n                panic purchase\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">\n          <div style="width: 100%; display: inline-block;">\n            <el-statistic\n              @finish="hilarity"\n              :value="deadline3"\n              time-indices\n              title="The Value of Time"\n            >\n              <template slot="suffix">\n                <el-button type="primary " size="small" @click="add"\n                  >add 10s</el-button\n                >\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n      </el-col>\n      <el-col :span="10">\n        <el-card shadow="hover" style="width: 100%;">\n          <div slot="header" class="clearfix">\n            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>\n            <el-button\n              style="float: right; padding: 3px 0"\n              type="text"\n              @click="clickFn"\n              >suspend</el-button\n            >\n          </div>\n          <div style="font-size: 16px;text-align: left;">\n            Don\'t sigh in the past, it is no longer back\n          </div>\n          <div style="font-size: 16px;text-align: left;margin-top: 15px;">\n            Be wise to improve the present\n          </div>\n          <div style="font-size: 16px;text-align: left;margin-top: 15px;">\n            To not worry not afraid of the firm will into the complicated future\n          </div>\n          <div style="margin-top: 40px;"></div>\n          <el-statistic\n            ref="statistic"\n            @finish="hilarity"\n            format="HH:mm:ss"\n            :value="deadline4"\n            title="Distance to Tomorrow:"\n            time-indices\n          >\n          </el-statistic>\n        </el-card>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        deadline2: Date.now() + 1000 * 60 * 60 * 8,\n        deadline3: Date.now() + 1000 * 60 * 30,\n        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),\n        stop: true,\n      };\n    },\n    methods: {\n      hilarity() {\n        this.$notify({\n          title: "Prompt",\n          message:\n            "Time is up, do you know that an inch of gold can\'t buy an inch of time?",\n          duration: 0,\n        });\n      },\n      clickFn() {\n        this.$refs.statistic.suspend(this.stop);\n        this.stop = !this.stop;\n      },\n      add() {\n        this.deadline3 = this.deadline3 + 1000 * 10;\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)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"statistic"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic"}},[e._v("¶")]),e._v(" Statistic")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[e._v("¶")]),e._v(" Basic usage")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("h3",{attrs:{id:"count-down"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#count-down"}},[e._v("¶")]),e._v(" Count down")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"warning"},[a("p",[e._v("Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **")]),a("p",[e._v("If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a "),a("strong",[e._v("future")]),e._v(" time node, otherwise it is still the end of the countdown")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"statistic-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic-attributes"}},[e._v("¶")]),e._v(" Statistic 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("value")]),a("td",[e._v("Numerical content")]),a("td",[e._v("string | number")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("decimal-separator")]),a("td",[e._v("Setting the decimal point")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v(".")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("Custom numerical presentation")]),a("td",[e._v("v-slot |({value}) => VNode")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("group-separator")]),a("td",[e._v("Sets the thousandth identifier")]),a("td",[e._v("string")]),a("td",[e._v("-")]),a("td",[e._v(",")])]),a("tr",[a("td",[e._v("precision")]),a("td",[e._v("numerical precision")]),a("td",[e._v("number")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("prefix")]),a("td",[e._v("Sets the prefix of a number")]),a("td",[e._v("string | v-slot")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("Sets the suffix of a number")]),a("td",[e._v("string | v-slot")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Numeric titles")]),a("td",[e._v("string | v-slot")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("value-style")]),a("td",[e._v("Styles numeric values")]),a("td",[e._v("style")]),a("td",[e._v("-")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("rate")]),a("td",[e._v("Set the ratio")]),a("td",[e._v("number")]),a("td",[e._v("-")]),a("td",[e._v("1000")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"statistic-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic-slots"}},[e._v("¶")]),e._v(" Statistic 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("prefix")]),a("td",[e._v("Numeric prefix")])]),a("tr",[a("td",[e._v("suffix")]),a("td",[e._v("Suffixes for numeric values")])]),a("tr",[a("td",[e._v("formatter")]),a("td",[e._v("Numerical content")])]),a("tr",[a("td",[e._v("title")]),a("td",[e._v("Numeric titles")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"statistic-countdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic-countdown-attributes"}},[e._v("¶")]),e._v(" Statistic.Countdown 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("Options")]),a("th",[e._v("Default")])])]),a("tbody",[a("tr",[a("td",[e._v("time-indices")]),a("td",[e._v("Whether to enable the countdown function")]),a("td",[e._v("boolean")]),a("td",[e._v("true|false")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("value")]),a("td",[e._v("Required value, enter the bound value")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("format")]),a("td",[e._v("Formatting the countdown display")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("'HH:mm:ss'")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"statistic-countdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic-countdown-events"}},[e._v("¶")]),e._v(" Statistic.Countdown Events")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Method")]),a("th",[e._v("Description")]),a("th",[e._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[e._v("change")]),a("td",[e._v("Enable in the 'countdown' function")]),a("td",[e._v("(value: Date)")])]),a("tr",[a("td",[e._v("finish")]),a("td",[e._v("Launched after the 'countdown' is complete")]),a("td",[e._v("(value: boolean)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"statistic-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#statistic-methods"}},[e._v("¶")]),e._v(" Statistic Methods")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[e._v("Method")]),a("th",[e._v("Description")]),a("th",[e._v("Parameters")]),a("th",[e._v("CallBack")])])]),a("tbody",[a("tr",[a("td",[e._v("suspend")]),a("td",[e._v("Pause the countdown")]),a("td",[e._v("(value:boolean)")]),a("td",[e._v("(value: Date)")])])])])}],!1,null,null,null).exports},4050(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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:[]},{data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("div",[a("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),e._v(" "),a("el-step",{attrs:{title:"Processing"}}),e._v(" "),a("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,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:1}},[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"}})],1)],1)},staticRenderFns:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-steps",{attrs:{active:1}},[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)],1)},staticRenderFns:[]},{}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[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:[]},{}),"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:[]},{})}},o=(0,a(14486).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("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("Number")]),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("template",{slot:"source"},[a("element-demo0")],1),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("c

1ode",[e._v("title")]),e._v(" para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.")])]),a("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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("template",{slot:"source"},[a("element-demo4")],1),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("template",{slot:"source"},[a("element-demo5")],1),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("template",{slot:"source"},[a("element-demo6")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps"}},[e._v("¶")]),e._v(" Steps")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-bar-con-el-estatus"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-el-estatus"}},[e._v("¶")]),e._v(" Step bar con el estatus")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"centrado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centrado"}},[e._v("¶")]),e._v(" Centrado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-bar-con-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-descripcion"}},[e._v("¶")]),e._v(" Step bar con descripción")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-bar-con-icono"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-con-icono"}},[e._v("¶")]),e._v(" Step bar con icono")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-bar-vertical"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-vertical"}},[e._v("¶")]),e._v(" Step bar vertical")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-bar-simple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-simple"}},[e._v("¶")]),e._v(" Step bar simple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"steps-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-atributos"}},[e._v("¶")]),e._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("estatus 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("estatus 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"step-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-atributos"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot-step"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot-step"}},[e._v("¶")]),e._v(" Slot Step")])},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("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("Descripción del paso")])])])])}],!1,null,null,null).exports},31438(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-switch",{model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._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:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tooltip",{attrs:{content:"Switch value: "+e.value,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"100"}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-switch",{attrs:{disabled:""},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),a("el-switch",{attrs:{disabled:""},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!1}}})}},o=(0,a(14486).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("Switch es utilizado 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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value1"\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="value2"\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        value1: true,\n        value2: 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("template",{slot:"source"},[a("element-demo2")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value" placement="top">\n  <el-switch\n    v-model="value"\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        value: \'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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value1"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value2"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: 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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch"}},[e._v("¶")]),e._v(" Switch")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"texto-de-descripcion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#texto-de-descripcion"}},[e._v("¶")]),e._v(" Texto de descripción")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tipos-de-valores-extendidos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipos-de-valores-extendidos"}},[e._v("¶")]),e._v(" Tipos de valores extendidos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled"}},[e._v("¶")]),e._v(" Disabled")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("anch

1o 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(", sobrescribe "),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(", sobrescribe "),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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ámetro")])])]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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("foco al componente Switch")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},75090(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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:[]},{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"}]}}}),"element-demo1":n({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:[]},{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"}]}}}),"element-demo2":n({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:[]},{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"}]}}}),"element-demo3":n({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:[]},{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"}]}}}),"element-demo4":n({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:[]},{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"}]}}}),"element-demo5":n({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:{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"}}),e._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:e.handleClick}},[e._v("Detalle")]),e._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[e._v("Editar")])]}}])})],1)]],2)},staticRenderFns:[]},{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"}]}}}),"element-demo6":n({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:[]},{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"}]}}}),"element-demo7":n({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,"max-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"}}),e._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operaciones",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),e.deleteRow(t.$index,e.tableData)}}},[e._v("\n          Eliminar\n        ")])]}}])})],1)]],2)},staticRenderFns:[]},{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"}]}}}

1),"element-demo8":n({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:[]},{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"}]}}}),"element-demo9":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:e.tableData,"highlight-current-row":""},on:{"current-change":e.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),e._v(" "),a("el-table-column",{attrs:{property:"date",label:"Fecha",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección"}})],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){e.setCurrent(e.tableData[1])}}},[e._v("Seleccionar segunda fila")]),e._v(" "),a("el-button",{on:{click:function(t){e.setCurrent()}}},[e._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]},{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}}}),"element-demo10":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:e.tableData},on:{"selection-change":e.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),e._v(" "),a("el-table-column",{attrs:{label:"Fecha",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v(e._s(t.row.date))]}}])}),e._v(" "),a("el-table-column",{attrs:{property:"name",label:"Nombre",width:"120"}}),e._v(" "),a("el-table-column",{attrs:{property:"address",label:"Dirección","show-overflow-tooltip":""}})],1),e._v(" "),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){e.toggleSelection([e.tableData[1],e.tableData[2]])}}},[e._v("Cambia el estado de selección de la segunda y tercera fila.")]),e._v(" "),a("el-button",{on:{click:function(t){e.toggleSelection()}}},[e._v("Limpiar selección")])],1)]],2)},staticRenderFns:[]},{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}}}),"element-demo11":n({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:[]},{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}}}),"element-demo12":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-button",{on:{click:e.resetDateFilter}}

1,[e._v("清除日期过滤器")]),e._v(" "),a("el-button",{on:{click:e.clearFilter}},[e._v("清除所有过滤器")]),e._v(" "),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:e.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":e.filterHandler}}),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}}),e._v(" "),a("el-table-column",{attrs:{prop:"tag",label:"Etiqueta",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":e.filterTag,"filter-placement":"bottom-end"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","disable-transitions":""}},[e._v(e._s(t.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]},{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}}}),"element-demo13":n({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:{label:"Fecha",width:"180"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("i",{staticClass:"el-icon-time"}),e._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[e._v(e._s(t.row.date))])]}}])}),e._v(" "),a("el-table-column",{attrs:{label:"Nombre",width:"180"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[e._v("Name: "+e._s(t.row.name))]),e._v(" "),a("p",[e._v("Addr: "+e._s(t.row.address))]),e._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[e._v(e._s(t.row.name))])],1)])]}}])}),e._v(" "),a("el-table-column",{attrs:{label:"Operaciones"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){e.handleEdit(t.$index,t.row)}}},[e._v("Editar")]),e._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(a){e.handleDelete(t.$index,t.row)}}},[e._v("Eliminar")])]}}])})],1)]],2)},staticRenderFns:[]},{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)}}}),"element-demo14":n({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.filter(function(t){return!e.search||t.name.toLowerCase().includes(e.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),e._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),e._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:e._u([{key:"header",fn:function(t){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:e.search,callback:function(t){e.search=t},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){e.handleEdit(t.$index,t.row)}}},[e._v("Edit")]),e._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(a){e.handleDelete(t.$index,t.row)}}},[e._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]},{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)}}}),"element-demo15":n({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}}

1,[a("el-table-column",{attrs:{type:"expand"},scopedSlots:e._u([{key:"default",fn:function(t){return[a("p",[e._v("Estado: "+e._s(t.row.state))]),e._v(" "),a("p",[e._v("Ciudad: "+e._s(t.row.city))]),e._v(" "),a("p",[e._v("Dirección: "+e._s(t.row.address))]),e._v(" "),a("p",[e._v("Código postal: "+e._s(t.row.zip))])]}}])}),e._v(" "),a("el-table-column",{attrs:{label:"Fecha",prop:"date"}}),e._v(" "),a("el-table-column",{attrs:{label:"Nombre",prop:"name"}})],1)]],2)},staticRenderFns:[]},{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"}]}}}),"element-demo16":n({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,"row-key":"id",border:"","default-expand-all":""}},[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,"tree-props":{children:"children",hasChildren:"hasChildren"}}},[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:[]},{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){setTimeout(function(){a([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])},1e3)}}}),"element-demo17":n({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:[]},{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,a=e.data,n=[];return t.forEach(function(e,t){if(0!==t){var l=a.map(function(t){return Number(t[e.property])});l.every(function(e){return isNaN(e)})?n[t]="N/A":n[t]="$ "+l.reduce(function(e,t){var a=Number(t);return isNaN(a)?e:e+t},0)}else n[t]="Costo total"}),n}}}

1),"element-demo18":n({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:[]},{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}}}}),"element-demo19":n({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:[]},{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}}})}},o=(0,a(14486).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("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("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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    }

1,\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("template",{slot:"source"},[a("element-demo4")],1),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("template",{slot:"source"},[a("element-demo5")],1),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>

1\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("template",{slot:"source"},[a("element-demo6")],1),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("c

1ode",[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("template",{slot:"source"},[a("element-demo7")],1),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("template",{slot:"source"},[a("element-demo8")],1),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>

1\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("c

1ode",[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("template",{slot:"source"},[a("element-demo9")],1),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("template",{slot:"source"},[a("element-demo10")],1),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>

1\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("c

1ode",[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("template",{slot:"source"},[a("element-demo11")],1),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("template",{slot:"source"},[a("element-demo12")],1),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 información: 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("template",{slot:"source"},[a("element-demo13")],1),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>

1\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("template",{slot:"source"},[a("element-demo14")],1),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 característica de fila expandible.")]),a("demo-block",[a("div",[a("p",[e._v("Puede activar la fila expandible estableciendo la propiedad "),a("c

1ode",[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("template",{slot:"source"},[a("element-demo15")],1),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("Puede visualizar datos de estructura de árbol. Cuando la fila contiene el campo "),a("code",[e._v("children")]),e._v(", se trata como datos anidados. Para renderizar datos anidados, la "),a("code",[e._v("row-key")]),e._v(" es requerida。Ademas, los datos de las filas secundarias pueden ser cargados asincrónicamente. Poner la propiedad "),a("code",[e._v("lazy")]),e._v(" de Table a true y la función "),a("code",[e._v("load")]),e._v(". Especifique el atributo "),a("code",[e._v("hasChildren")]),e._v(" en la fila para determinar qué fila contiene descendencia. Tanto "),a("code",[e._v("children")]),e._v(" como "),a("code",[e._v("hasChildren")]),e._v(" pueden configurarse a través de "),a("code",[e._v("tree-props")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo16")],1),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    row-key=\"id\"\n    border\n    default-expand-all>\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    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\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>

1\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        setTimeout(() => {\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        }, 1000)\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("c

1ode",[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("template",{slot:"source"},[a("element-demo17")],1),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 incluyendo 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")]

1),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("template",{slot:"source"},[a("element-demo18")],1),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("template",{slot:"source"},[a("element-demo19")],1),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>

1\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tablas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tablas"}},[e._v("¶")]),e._v(" Tablas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-basica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-basica"}},[e._v("¶")]),e._v(" Tabla básica")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-franjas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-franjas"}},[e._v("¶")]),e._v(" Tabla con franjas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-bordes"}},[e._v("¶")]),e._v(" Tabla con bordes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-estados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-estados"}},[e._v("¶")]),e._v(" Tabla con estados")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-cabecera-fija"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-cabecera-fija"}},[e._v("¶")]),e._v(" Tabla con cabecera fija")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-columnas-fijas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-fijas"}},[e._v("¶")]),e._v(" Tabla con columnas fijas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tabla-con-columnas-y-cabecera-fija"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabla-con-columnas-y-cabecera-fija"}},[e._v("¶")]),e._v(" Tabla con columnas y cabecera fija.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#altura-fluido-de-tabla-con-cabecera-fija-y-columnas"}},[e._v("¶")]),e._v(" Altura fluido de tabla con cabecera fija (y columnas)")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"agrupando-cabeceras-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agrupando-cabeceras-de-la-tabla"}},[e._v("¶")]),e._v(" Agrupando cabeceras de la tabla")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccion-unica"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-unica"}},[e._v("¶")]),e._v(" Selección única")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccion-multiple"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccion-multiple"}},[e._v("¶")]),e._v(" Selección multiple")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"ordenamiento"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ordenamiento"}},[e._v("¶")]),e._v(" Ordenamiento")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"filtros"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtros"}},[e._v("¶")]),e._v(" Filtros")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"plantilla-de-columna-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#plantilla-de-columna-personalizada"}},[e._v("¶")]),e._v(" Plantilla de columna personalizada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"table-con-cabecera-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-con-cabecera-personalizada"}},[e._v("¶")]),e._v(" Table con cabecera personalizada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fila-expandible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fila-expandible"}},[e._v("¶")]),e._v(" Fila expandible")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"datos-tree-y-modo-lazy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datos-tree-y-modo-lazy"}},[e._v("¶")]),e._v(" Datos tree y modo lazy")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fila-de-resumen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fila-de-resumen"}},[e._v("¶")]),e._v(" Fila de resumen")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fusion-de-filas-y-columnas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fusion-de-filas-y-columnas"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"indice-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indice-personalizado"}},[e._v("¶")]),e._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("c

1ode",[e._v("type=index")]),e._v(" de las columnas.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-la-tabla"}},[e._v("¶")]),e._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("El max-height de la tabla. El valor puede ser un numero o el alto en px.")]),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("highlight-selection-row")]),a("td",[e._v("resaltar la selección de líneas de verificación")]),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 de los datos de las filas, utilizada para optimizar el renderizado. Requerido si "),a("c

1ode",[e._v("reserve-selection")]),e._v(" está activada o muestra los datos del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, "),a("code",[e._v("user.info.id")]),e._v(", pero "),a("code",[e._v("user.info[0].id")]),e._v(" no se admite, en cuyo caso se debe utilizar la función.")]),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 defecto, 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("indentación horizontal de los datos en formato tree")]),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("si se realiza un lazy loading de los datos")]),a("td",[e._v("Boolean")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("load")]),a("td",[e._v("método para cargar las filas de los hijos, solamente funciona cuando "),a("c

1ode",[e._v("lazy")]),e._v("es true")]),a("td",[e._v("Function(row, treeNode, resolve)")]),a("td",[e._v("—")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("tree-props")]),a("td",[e._v("configuración para renderizar datos anidados")]),a("td",[e._v("Object")]),a("td",[e._v("—")]),a("td",[e._v("{ hasChildren: 'hasChildren', children: 'children' }")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-la-tabla"}},[e._v("¶")]),e._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 clic 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 activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded)")]),a("td",[e._v("row, (expandedRows | expanded)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos-de-la-tabla"}},[e._v("¶")]),e._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 seleccionad

1a. 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 selección múltiple, cambia los estados de selección de todas las filas.")]),a("td",[e._v("-")])]),a("tr",[a("td",[e._v("toggleRowExpansion")]),a("td",[e._v("utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega")]),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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slots-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-la-tabla"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-para-las-columnas-de-la-tabla"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-para-las-columnas-de-la-tabla"}},[e._v("¶")]),e._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("c

1ode",[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("c

1ode",[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("el orden de las estrategias de ordenación utilizadas al ordenar los datos, funciona cuando "),a("code",[e._v("sortable")]),e._v(" es "),a("code",[e._v("true")]),e._v(". Acepta un array, a medida que el usuario hace clic en el encabezado, la columna se ordena en el orden de los elementos del array.")]),a("td",[e._v("array")]),a("td",[e._v("los elementos en el arreglo necesitan ser uno de los siguientes: "),a("code",[e._v("ascending")]),e._v(", "),a("code",[e._v("descending")]),e._v(" y "),a("code",[e._v("null")]),e._v(" (restaura el orden original)")]),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("c

1ode",[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("c

1ode",[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 que "),a("code",[e._v("row-key")]),e._v(" es requerido para que esto funcione")]),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 menú 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"table-column-scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot"}},[e._v("¶")]),e._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).exports},33662(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>r});const l={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-tabs",{on:{"tab-click":e.handleClick},model:{value:e.activeName,callback:function(t){e.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[e._v("User")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[e._v("Config")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[e._v("Role")]),e._v(" "),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo1":n({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:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"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"}}

1,[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({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:e.tabPosition,callback:function(t){e.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[e._v("top")]),e._v(" "),a("el-radio-button",{attrs:{label:"right"}},[e._v("right")]),e._v(" "),a("el-radio-button",{attrs:{label:"bottom"}},[e._v("bottom")]),e._v(" "),a("el-radio-button",{attrs:{label:"left"}},[e._v("left")])],1),e._v(" "),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":e.tabPosition}},[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:[]},{data:function(){return{tabPosition:"left"}}}),"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({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:e.handleTabsEdit},model:{value:e.editableTabsValue,callback:function(t){e.editableTabsValue=t},expression:"editableTabsValue"}},e._l(e.editableTabs,function(t,n){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[e._v("\n    "+e._s(t.content)+"\n  ")])}),1)],1)},staticRenderFns:[]},{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(e,t){if("add"===t){var a=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:a,content:"New Tab content"}),this.editableTabsValue=a}if("remove"===t){var n=this.editableTabs,l=this.editableTabsValue;l===e&&n.forEach(function(t,a){if(t.name===e){var o=n[a+1]||n[a-1];o&&(l=o.name)}}),this.editableTabsValue=l,this.editableTabs=n.filter(function(t){return t.name!==e})}}}}),"element-demo6":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){e.addTab(e.editableTabsValue)}}},[e._v("\n    add tab\n  ")])],1),e._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":e.removeTab},model:{value:e.editableTabsValue,callback:function(t){e.editableTabsValue=t},expression:"editableTabsValue"}},e._l(e.editableTabs,function(t,n){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[e._v("\n    "+e._s(t.content)+"\n  ")])}),1)],1)},staticRenderFns:[]},{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:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t},removeTab:function(e){var t=this.editableTabs,a=this.editableTabsValue;a===e&&t.forEach(function(n,l){if(n.name===e){var o=t[l+1]||t[l-1];o&&(a=o.name)}}),this.editableTabsValue=a,this.editableTabs=t.filter(function(t){return t.name!==e})}}})}},o=l,r=(0,a(14486).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 seleccionad

1a como activa, y es posible activar cualquier pestaña estableciendo el atributo de "),a("code",[e._v("value")]),e._v(".")])]),a("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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>

1\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: \'left\'\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("template",{slot:"source"},[a("element-demo4")],1),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("template",{slot:"source"},[a("element-demo5")],1),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.forEac

1h((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("template",{slot:"source"},[a("element-demo6")],1),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(editableTabsValue)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEac

1h((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tabulacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabulacion"}},[e._v("¶")]),e._v(" Tabulación")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"estilo-de-tarjeta"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#estilo-de-tarjeta"}},[e._v("¶")]),e._v(" Estilo de Tarjeta")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tarjeta-con-bordes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tarjeta-con-bordes"}},[e._v("¶")]),e._v(" Tarjeta con Bordes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"posicion-de-tabulacion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posicion-de-tabulacion"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"pestana-personalizada"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pestana-personalizada"}},[e._v("¶")]),e._v(" Pestaña Personalizada")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"agregar-y-cerrar-pestana"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#agregar-y-cerrar-pestana"}},[e._v("¶")]),e._v(" Agregar y cerrar pestaña")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"boton-disparador-personalizado-de-la-nueva-pestana"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boton-disparador-personalizado-de-la-nueva-pestana"}},[e._v("¶")]),e._v(" Botón disparador personalizado de la nueva pestaña")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-de-pestanas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-de-pestanas"}},[e._v("¶")]),e._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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos-de-pestanas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos-de-pestanas"}},[e._v("¶")]),e._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 clic 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 clic 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 clic 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 cliqueados")]),a("td",[e._v("(targetName, action)")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos-del-tab-pane"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos-del-tab-pane"}},[e._v("¶")]),e._v(" Atributos 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 value 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).exports},5308(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>r});const l={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 1")]),e._v(" "),a("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),a("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),a("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),a("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]},{}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",e._l(e.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[e._v("\n  "+e._s(t.name)+"\n")])}),1)},staticRenderFns:[]},{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"}]}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._l(e.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(a){e.handleClose(t)}}},[e._v("\n  "+e._s(t)+"\n")])}),e._v(" "),e.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:e.handleInputConfirm},nativeOn:{keyup:function(t){return!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.handleInputConfirm(t)}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:e.showInput}},[e._v("+ New Tag")])],2)},staticRenderFns:[]},{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 e=this;this.inputVisible=!0,this.$nextTick(function(t){e.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}}),"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:[]},{}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"tag-group"},[a("span",{staticClass:"tag-group__title"},[e._v("Dark")]),e._v(" "),e._l(e.items,function(t){return a("el-tag",{key:t.label,attrs:{type:t.type,effect:"dark"}},[e._v("\n    "+e._s(t.label)+"\n  ")])})],2),e._v(" "),a("div",{staticClass:"tag-group"},[a("span",{staticClass:"tag-group__title"},[e._v("Plain")]),e._v(" "),e._l(e.items,function(t){return a("el-tag",{key:t.label,attrs:{type:t.type,effect:"plain"}},[e._v("\n    "+e._s(t.label)+"\n  ")])})],2)])},staticRenderFns:[]},{data:function(){return{items:[{type:"",label:"Tag 1"},{type:"success",label:"Tag 2"},{type:"info",label:"Tag 3"},{type:"danger",label:"Tag 4"},{type:"warning",label:"Tag 5"}]}}})}},o=l,r=(0,a(14486).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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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),a("demo-block",[a("div",[a("p",[e._v("Use  "),a("code",[e._v("effect")]),e._v(" para cambiarlo, por defecto es "),a("c

1ode",[e._v("light")])])]),a("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="tag-group">\n  <span class="tag-group__title">Dark</span>\n  <el-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="dark">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class="tag-group">\n  <span class="tag-group__title">Plain</span>\n  <el-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="plain">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: \'\', label: \'Tag 1\' },\n          { type: \'success\', label: \'Tag 2\' },\n          { type: \'info\', label: \'Tag 3\' },\n          { type: \'danger\', label: \'Tag 4\' },\n          { type: \'warning\', label: \'Tag 5\' }\n        ]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag"}},[e._v("¶")]),e._v(" Tag")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"etiqueta-removible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#etiqueta-removible"}},[e._v("¶")]),e._v(" Etiqueta removible")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"editar-dinamicamente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#editar-dinamicamente"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tamanos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tamanos"}},[e._v("¶")]),e._v(" Tamaños")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme"}},[e._v("¶")]),e._v(" Theme")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Tag tiene tres diferentes temas: "),a("code",[e._v("dark")]),e._v("、"),a("code",[e._v("light")]),e._v(" y "),a("code",[e._v("plain")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("tipo de Tag")]),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("—")])]),a("tr",[a("td",[e._v("effect")]),a("td",[e._v("Tema del Tag")]),a("td",[e._v("string")]),a("td",[e._v("dark / light / plain")]

1),a("td",[e._v("light")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 dispara cuando el Tag es clic")]),a("td",[e._v("—")])]),a("tr",[a("td",[e._v("close")]),a("td",[e._v("se dispara cuando el Tag es removido")]),a("td",[e._v("—")])])])])}],!1,null,null,null).exports},13697(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:""}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:new Date(2016,9,10,18,40),value2:new Date(2016,9,10,18,40)}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:e.startTime,callback:function(t){e.startTime=t},expression:"startTime"}}),e._v(" "),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:e.startTime}},model:{value:e.endTime,callback:function(t){e.endTime=t},expression:"endTime"}})]],2)},staticRenderFns:[]},{data:function(){return{startTime:"",endTime:""}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value2:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}})}},o=(0,a(14486).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("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 escojan.")]),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("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value\"\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>

1\n  export default {\n    data() {\n      return {\n        value: ''\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 ratón 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("template",{slot:"source"},[a("element-demo1")],1),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="value1"\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="value2"\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        value1: new Date(2016, 9, 10, 18, 40),\n        value2: 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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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="value1"\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="value2"\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        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"selector-de-tiempo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo"}},[e._v("¶")]),e._v(" Selector de Tiempo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"selector-de-tiempo-fijo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-fijo"}},[e._v("¶")]),e._v(" Selector de tiempo fijo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"selector-de-tiempo-arbitrario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selector-de-tiempo-arbitrario"}},[e._v("¶")]),e._v(" Selector de tiempo arbitrario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rango-de-tiempo-fijo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-fijo"}},[e._v("¶")]),e._v(" Rango de tiempo fijo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"rango-de-tiempo-arbitrario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rango-de-tiempo-arbitrario"}},[e._v("¶")]),e._v(" Rango de tiempo arbitrario")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("c

1ode",[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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones-para-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"opciones-para-time-picker-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#opciones-para-time-picker-2"}},[e._v("¶")]),e._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("c

1ode",[e._v("ss")])]),a("td",[e._v("HH:mm:ss")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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).exports},55575(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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("div",{staticClass:"radio"},[e._v("\n    Order: \n    "),a("el-radio-group",{model:{value:e.reverse,callback:function(t){e.reverse=t},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[e._v("descending")]),e._v(" "),a("el-radio",{attrs:{label:!1}},[e._v("ascending")])],1)],1),e._v(" "),a("el-timeline",{attrs:{reverse:e.reverse}},e._l(e.activities,function(t,n){return a("el-timeline-item",{key:n,attrs:{timestamp:t.timestamp}},[e._v("\n      "+e._s(t.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]},{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"}]}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",e._l(e.activities,function(t,n){return a("el-timeline-item",{key:n,attrs:{icon:t.icon,type:t.type,color:t.color,size:t.size,timestamp:t.timestamp}},[e._v("\n      "+e._s(t.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]},{data:function(){return{activities:[{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"}]}}}),"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:[]},{})}},o=(0,a(14486).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("Línea de tiempo visual.")]),e._m(1),a("p",[e._v("El Timeline puede ser dividido en múltiples actividades en forma ascendente o descendente. Las marcas de tiempo son características importantes que los distinguen de otros componentes. Observe la diferencia con Steps.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),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>

1\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("El tamaño, el color y los iconos se pueden personalizar en el nodo.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo1")],1),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 activities\"\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        activities: [{\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("Las marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando éste es demasiado alto.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo2")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"timeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline"}},[e._v("¶")]),e._v(" Timeline")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"nodo-personalizado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nodo-personalizado"}},[e._v("¶")]),e._v(" Nodo personalizado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"marcas-de-tiempo-personalizadas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#marcas-de-tiempo-personalizadas"}},[e._v("¶")]),e._v(" Marcas de tiempo personalizadas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"timeline-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline-atributos"}},[e._v("¶")]),e._v(" Timeline 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("reverse")]),a("td",[e._v("Si el node es ascendente o descendente. Por defecto es ascendente")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"timeline-item-atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-atributos"}},[e._v("¶")]),e._v(" Timeline-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("timestamp")]),a("td",[e._v("Contenido de las marcas de tiempo")]),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("Si se muestra o no timestamp")]),a("td",[e._v("boolean")]),a("td",[e._v("—")]),a("td",[e._v("false")])]),a("tr",[a("td",[e._v("placement")

1]),a("td",[e._v("la posición de 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("tipo de nodo")]),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("color de fondo del nodo")]),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("tamaño del nodo")]),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("nombre de la clase del icono")]),a("td",[e._v("string")]),a("td",[e._v("—")]),a("td",[e._v("-")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"timeline-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot"}},[e._v("¶")]),e._v(" Timeline-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 personalizado del ítem del timeline")])]),a("tr",[a("td",[e._v("dot")]),a("td",[e._v("Definición personalizada del nodo")])])])])}],!1,null,null,null).exports},14961(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[e._v("Dark")])],1),e._v(" "),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),a("br"),e._v("second line")]),e._v(" "),a("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-tooltip",{attrs:{disabled:e.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){e.disabled=!e.disabled}}},[e._v("click to "+e._s(e.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]},{data:function(){return{disabled:!1}}})}},o=(0,a(14486).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("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("c

1ode",[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 por defecto 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("template",{slot:"source"},[a("element-demo0")],1),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("template",{slot:"source"},[a("element-demo1")],1),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>

1\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("Sobrescriba 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("template",{slot:"source"},[a("element-demo2")],1),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("template",{slot:"source"},[a("element-demo3")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip"}},[e._v("¶")]),e._v(" Tooltip")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"tema"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tema"}},[e._v("¶")]),e._v(" Tema")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Tooltip tiene dos temas: "),a("code",[e._v("dark")]),e._v(" y "),a("code",[e._v("light")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"mas-contenido"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mas-contenido"}},[e._v("¶")]),e._v(" Más Contenido")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-avanzado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-avanzado"}},[e._v("¶")]),e._v(" Uso Avanzado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("el atributo "),a("code",[e._v("transition")]),e._v(" permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es "),a("code",[e._v("el-fade-in-linear")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("el atributo "),a("code",[e._v("disabled")]),e._v(" permite deshabilitar "),a("code",[e._v("tooltip")]),e._v(". Solo es necesario definirlo como "),a("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("De hecho, Tooltip es una extensión basada en "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._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 Tooltip funcione.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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")

1]),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/docs/v2/"}},[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/docs/v2/"}},[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 mili segundos")]),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 ratón 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 mili segundos para esconder el Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])]),a("tr",[a("td",[e._v("tabindex")]),a("td",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" de Tooltip")]),a("td",[e._v("number")]),a("td",[e._v("—")]),a("td",[e._v("0")])])])])}],!1,null,null,null).exports},90815(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-transfer",{attrs:{data:e.data},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(){for(var e=[],t=1;t<=15;t++)e.push({key:t,label:"Option "+t,disabled:t%4==0});return e}(),value:[1,4]}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-transfer",{attrs:{filterable:"","filter-method":e.filterMethod,"filter-placeholder":"State Abbreviations",data:e.data},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:(e=[],t=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(a,n){e.push({label:a,key:n,initial:t[n]})}),e),value:[],filterMethod:function(e,t){return t.initial.toLowerCase().indexOf(e.toLowerCase())>-1}};var e,t}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[e._v("Customize data items using render-content")]),e._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":e.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:e.data},on:{change:e.handleChange},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[e._v("Operation")]),e._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[e._v("Operation")])],1)],1),e._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[e._v("Customize data items using scoped slot")]),e._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("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:e.data},on:{change:e.handleChange},scopedSlots:e._u([{key:"default",fn:function(t){var n=t.option;return a("span",{},[e._v(e._s(n.key)+" - "+e._s(n.label))])}}]),model:{value:e.value4,callback:function(t){e.value4=t},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[e._v("Operation")]),e._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[e._v("Operation")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return this.$createElement,{data:function(){for(var e=[],t=1;t<=15;t++)e.push({key:t,label:"Option "+t,disabled:t%4==0});return e}(),value:[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)}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:e.data},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(){for(var e=[],t=1;t<=15;t++)e.push({value:t,desc:"Option "+t,disabled:t%4==0});return e}(),value:[]}}})}},o=(0,a(14486).A)(l,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("c

1ode",[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 ítem, "),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("template",{slot:"source"},[a("element-demo0")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value"\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        value: [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 ítem 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 ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.")])]),a("template",{slot:"source"},[a("element-demo1")],1),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=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\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        data: generateData(),\n        value: [],\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 estatus 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. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. 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("template",{slot:"source"},[a("element-demo2")],1),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="value"\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">

1\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        value: [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("c

1ode",[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("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\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            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer"}},[e._v("¶")]),e._v(" Transfer")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"filtrar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrar"}},[e._v("¶")]),e._v(" Filtrar")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizable"}},[e._v("¶")]),e._v(" Personalizable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"prop-con-alias"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-con-alias"}},[e._v("¶")]),e._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.")

1])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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("left-footer")]),a("td",[e._v("Contenido del footer de la lista de la izquierda")])]),a("tr",[a("td",[e._v("right-footer")]),a("td",[e._v("Contenido del footer de la lista de la derecha")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot"}},[e._v("¶")]),e._v(" 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("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para los datos de los items. El parámetro del scope es { option }")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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("clearQuery")]),a("td",[e._v("borra la palabra clave del filtro de un determinado panel")]),a("td",[e._v("'left' / 'right'")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 lanza 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).exports},87748(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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",[a("el-button",{on:{click:function(t){e.show=!e.show}}},[e._v("Click Me")]),e._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:e.show,expression:"show"}],staticClass:"transition-box"},[e._v(".el-fade-in-linear")])]),e._v(" "),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],staticClass:"transition-box"},[e._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show:!0}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-button",{on:{click:function(t){e.show2=!e.show2}}},[e._v("Click Me")]),e._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:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-center")])]),e._v(" "),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-top")])]),e._v(" "),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show2:!0}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[[a("div",[a("el-button",{on:{click:function(t){e.show3=!e.show3}}},[e._v("Click Me")]),e._v(" "),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[e._v("el-collapse-transition")]),e._v(" "),a("div",{staticClass:"transition-box"}

1,[e._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show3:!0}}})}},o=(0,a(14486).A)(l,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("template",{slot:"source"},[a("element-demo0")],1),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("c

1ode",[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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"transiciones-incorporadas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transiciones-incorporadas"}},[e._v("¶")]),e._v(" Transiciones incorporadas")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("documentación")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade"}},[e._v("¶")]),e._v(" Fade")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom"}},[e._v("¶")]),e._v(" Zoom")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"colapsado"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colapsado"}},[e._v("¶")]),e._v(" Colapsado")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Para efectos de colapsado usar el componente "),a("code",[e._v("el-collapse-transition")]),e._v(".")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"bajo-demanda"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bajo-demanda"}},[e._v("¶")]),e._v(" Bajo demanda")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-js"},[e._v("// fade/zoom\nimport 'mazey-element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'mazey-element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null).exports},40529(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}var l;a.r(t),a.d(t,{default:()=>r});const 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-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]},{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)}}}),"element-demo1":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]},{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"}]):e.level>3?t([]):(a="region1"===e.data.name||"region2"!==e.data.name&&Math.random()>.5,void setTimeout(function(){var e;e=a?[{name:"zone"+n.count++},{name:"zone"+n.count++}]:[],t(e)},500))}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]},{data:function(){return{props:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode:function(e,t){return 0===e.level?t([{name:"region"}]):e.level>1?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]},{data:function(){return{data:[{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"}}}}),"element-demo4":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:e.defaultProps}})],1)},staticRenderFns:[]},{data:function(){return{data:[{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"}}}}),"element-demo5":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{ref:"tree",attrs:{data:e.data,"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:[]},{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{data:[{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"}}}}),"element-demo6":(l=1e3,n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("div",{staticClass:"custom-tree-container"},[a("div",{staticClass:"block"},[a("p",[e._v("Using render-content")]),e._v(" "),a("el-tree",{attrs:{data:e.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":e.renderContent}})],1),e._v(" "),a("div",{staticClass:"block"},[a("p",[e._v("Using scoped slot")]),e._v(" "),a("el-tree",{attrs:{data:e.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:e._u([{key:"default",fn:function(t){var n=t.node,l=t.data;return a("span",{staticClass:"custom-tree-node"},[a("span",[e._v(e._s(n.label))]),e._v(" "),a("span",[a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return e.append(l)}}},[e._v("\n            Append\n          ")]),e._v(" "),a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return e.remove(n,l)}}},[e._v("\n            Delete\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]},{data:function(){var e,t=[{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(e={data:JSON.parse(JSON.stringify(t))}).data=JSON.parse(JSON.stringify(t)),e},methods:{append:function(e){var t={id:l++,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,l=n.findIndex(function(e){return e.id===t.id});n.splice(l,1)},renderContent:function(e,t){var a=this,n=t.node,l=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(l)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(n,l)}}},["Delete"])])])}}})),"element-demo7":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:e.filterText,callback:function(t){e.filterText=t},expression:"filterText"}}),e._v(" "),a("el-tree",{ref:"tree",staticClass:"filter-tree",attrs:{data:e.data,props:e.defaultProps,"default-expand-all":"","filter-node-method":e.filterNode}})],1)},staticRenderFns:[]},{watch:{filterText:function(e){this.$refs.tree.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data:[{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"}}}}

1),"element-demo8":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]},{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)}}}),"element-demo9":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-tree",{attrs:{data:e.data,"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:[]},{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:{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")}}})}},r=(0,a(14486).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 conjunto de datos jerárquicos.")]),e._m(1),a("p",[e._v("Estructura básica de árbol.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo0")],1),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.")

1]),a("demo-block",[a("div",[a("p",[e._v("Este ejemplo también muestra como cargar los datos de forma asíncrona.")])]),a("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(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 "),a("code",[e._v("disabled")]),e._v(" se declara en "),a("code",[e._v("defaultProps")]),e._v(", y algunos nodos se ponen como "),a("code",[e._v("disabled:true")]),e._v(". Los checkboxes correspondientes son desactivados y no se pueden pinchar.")])]),a("template",{slot:"source"},[a("element-demo3")],1),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  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\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        }

1],\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("template",{slot:"source"},[a("element-demo4")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\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        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        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("template",{slot:"source"},[a("element-demo5")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\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        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        }

1],\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 funciones 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 codepen.io 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("template",{slot:"source"},[a("element-demo6")],1),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="data"\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="data"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">

1\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        data: JSON.parse(JSON.stringify(data)),\n        data: 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("c

1ode",[e._v("filter")]),e._v(" de la instancia de Tree para filtrar los nodos. Su parámetro 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("template",{slot:"source"},[a("element-demo7")],1),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=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.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        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        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("template",{slot:"source"},[a("element-demo8")],1),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("template",{slot:"source"},[a("element-demo9")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\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>

1\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      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,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree"}},[e._v("¶")]),e._v(" Tree")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"uso-basico"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#uso-basico"}},[e._v("¶")]),e._v(" Uso básico")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccionable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccionable"}},[e._v("¶")]),e._v(" Seleccionable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"nodos-hoja-en-modo-perezoso-lazy-load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nodos-hoja-en-modo-perezoso-lazy-load"}},[e._v("¶")]),e._v(" Nodos hoja en modo perezoso (lazy load)")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"checkbox-desactivados"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivados"}},[e._v("¶")]),e._v(" Checkbox desactivados")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"desplegado-o-seleccionado-por-defecto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#desplegado-o-seleccionado-por-defecto"}},[e._v("¶")]),e._v(" Desplegado o seleccionado por defecto")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"seleccionando-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#seleccionando-nodos"}},[e._v("¶")]),e._v(" Seleccionando nodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"contenido-personalizado-en-los-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contenido-personalizado-en-los-nod

1os"}},[e._v("¶")]),e._v(" Contenido personalizado en los nodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"filtrado-de-nodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filtrado-de-nodos"}},[e._v("¶")]),e._v(" Filtrado de nodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"acordeon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#acordeon"}},[e._v("¶")]),e._v(" Acordeón")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"draggable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#draggable"}},[e._v("¶")]),e._v(" Draggable")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Puede arrastrar y soltar nodos de Tree añadiendo un atributo "),a("code",[e._v("draggable")]),e._v(" .")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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 selección de un nodo no afecta a sus padres o hijos, cuando "),a("c

1ode",[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("la clave del nodo inicialmente seleccionado")]),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 filtrar, 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 & 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._v(" Métodos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[a("code",[e._v("Tree")]),e._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("c

1ode",[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("devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado)")]),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. Si es "),a("code",[e._v("null")]),e._v(", cancela los nodos actualmente resaltados")])]),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, refNo

1de) 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"eventos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#eventos"}},[e._v("¶")]),e._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 clic con el botón derecho")]),a("td",[e._v("cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, 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 estatus 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 parámetros: 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 parámetros: 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 parámetros: 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 parámetros: 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 parámetros: 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 integración (antes (before), después (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 parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento.")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"scoped-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot"}},[e._v("¶")]),e._v(" 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("Nombre")]),a("th",[e._v("Descripción")])])]),a("tbody",[a("tr",[a("td",[e._v("—")]),a("td",[e._v("Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }.")])])])])}],!1,null,null,null).exports},93236(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>c});var n=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"tipografia"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tipografia"}},[e._v("¶")]),e._v(" Tipografía")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"fuente"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fuente"}},[e._v("¶")]),e._v(" Fuente")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(49953),alt:""}}),t("img",{attrs:{src:a(54164),alt:""}}),t("img",{attrs:{src:a(7615),alt:""}}),t("img",{attrs:{src:a(84100),alt:""}}),t("img",{attrs:{src:a(49686),alt:""}}),t("img",{attrs:{src:a(1610),alt:""}})])},function(){var e=this,t=e.$createElement,a=e._self._c||t;

1return a("h3",{attrs:{id:"convencion-de-fuentes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#convencion-de-fuentes"}},[e._v("¶")]),e._v(" Convención de fuentes")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("tr",[a("td",[e._v("Level")]),a("td",[e._v("Font Size")]),a("td",{staticClass:"color-dark-light"},[e._v("Demo")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"font-line-height"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height"}},[e._v("¶")]),e._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(14237)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family"}},[e._v("¶")]),e._v(" Font-family")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[a("code",{staticClass:"language-css"},[e._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(18264),o=a(37937),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],s={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"};const i={created:function(){l.A.$on(o.a,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e){function t(t,a){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}(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(e){var t=this;r.forEach(function(a){var n=a.replace("$--","").replace(/-/g,"_");e[a]?t[n]=e[a]:t[n]=s[n]})}}}},d=i,c=(0,a(14486).A)(d,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)])},n,!1,null,null,null).exports},3908(e,t,a){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}a.r(t),a.d(t,{default:()=>o});const l={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-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:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:a(75123)},{name:"food2.jpeg",url:a(75123)}]}},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))}}}),"element-demo1":n({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:[]},{data:function(){return{imageUrl:""}}

1,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}}}),"element-demo2":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":e.handlePictureCardPreview,"on-remove":e.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),e._v(" "),a("el-dialog",{attrs:{visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:e.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{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}}}),"element-demo3":n({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-upload",{attrs:{action:"#","list-type":"picture-card","auto-upload":!1},scopedSlots:e._u([{key:"file",fn:function(t){var n=t.file;return a("div",{},[a("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:n.url,alt:""}}),e._v(" "),a("span",{staticClass:"el-upload-list__item-actions"},[a("span",{staticClass:"el-upload-list__item-preview",on:{click:function(t){e.handlePictureCardPreview(n)}}},[a("i",{staticClass:"el-icon-zoom-in"})]),e._v(" "),e.disabled?e._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(t){e.handleDownload(n)}}},[a("i",{staticClass:"el-icon-download"})]),e._v(" "),e.disabled?e._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(t){e.handleRemove(n)}}},[a("i",{staticClass:"el-icon-delete"})])])])}}])},[a("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"})]),e._v(" "),a("el-dialog",{attrs:{visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:e.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1,disabled:!1}},methods:{handleRemove:function(e){console.log(e)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0},handleDownload:function(e){console.log(e)}}}),"element-demo4":n({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:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:a(75123)},{name:"food2.jpeg",url:a(75123)}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}}),"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:{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:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:a(75123)},{name:"food2.jpeg",url:a(75123)}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}}),"element-demo6":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-demo7":n({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:[]},{methods:{submitUpload:function(){this.$refs.upload.submit()}}})}},o=(0,a(14486).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("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("c

1ode",[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("template",{slot:"source"},[a("element-demo0")],1),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: require(\'examples/assets/images/element-demo.jpeg\')}, {name: \'food2.jpeg\', url: require(\'examples/assets/images/element-demo.jpeg\')}]\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("template",{slot:"source"},[a("element-demo1")],1),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("template",{slot:"source"},[a("element-demo2")],1),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),e._m(7),a("demo-block",[a("template",{slot:"source"},[a("element-demo3")],1),a("template",{slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"html"}}

1,[e._v('<el-upload\n  action="#"\n  list-type="picture-card"\n  :auto-upload="false">\n    <i slot="default" class="el-icon-plus"></i>\n    <div slot="file" slot-scope="{file}">\n      <img\n        class="el-upload-list__item-thumbnail"\n        :src="file.url" alt=""\n      >\n      <span class="el-upload-list__item-actions">\n        <span\n          class="el-upload-list__item-preview"\n          @click="handlePictureCardPreview(file)"\n        >\n          <i class="el-icon-zoom-in"></i>\n        </span>\n        <span\n          v-if="!disabled"\n          class="el-upload-list__item-delete"\n          @click="handleDownload(file)"\n        >\n          <i class="el-icon-download"></i>\n        </span>\n        <span\n          v-if="!disabled"\n          class="el-upload-list__item-delete"\n          @click="handleRemove(file)"\n        >\n          <i class="el-icon-delete"></i>\n        </span>\n      </span>\n    </div>\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        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),a("demo-block",[a("template",{slot:"source"},[a("element-demo4")],1),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: require(\'examples/assets/images/element-demo.jpeg\')}, {name: \'food2.jpeg\', url: require(\'examples/assets/images/element-demo.jpeg\')}]\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(9),e._m(10),a("demo-block",[a("template",{slot:"source"},[a("element-demo5")],1),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: require(\'examples/assets/images/element-demo.jpeg\')\n        }, {\n          name: \'food2.jpeg\',\n          url: require(\'examples/assets/images/element-demo.jpeg\')\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),a("p",[e._v("Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.")]),a("demo-block",[a("template",{slot:"source"},[a("element-demo6")],1),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(12),a("demo-block",[a("template",{slot:"source"},[a("element-demo7")],1),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(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"carga-de-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-de-archivos"}},[e._v("¶")]),e._v(" Carga de archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"clic-para-cargar-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clic-para-cargar-archivos"}}

1,[e._v("¶")]),e._v(" Clic para cargar archivos")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"cargar-avatar-de-usuario"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cargar-avatar-de-usuario"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"pared-de-fotografias"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pared-de-fotografias"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"personalizar-el-template-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#personalizar-el-template-thumbnail"}},[e._v("¶")]),e._v(" Personalizar el template thumbnail")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("p",[e._v("Use el "),a("code",[e._v("scoped-slot")]),e._v("  para cambiar el template por defecto del thumbnail.")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"lista-de-archivos-con-miniatura"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lista-de-archivos-con-miniatura"}},[e._v("¶")]),e._v(" Lista de archivos con miniatura")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"control-de-lista-de-archivos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#control-de-lista-de-archivos"}},[e._v("¶")]),e._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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"arrastrar-para-cargar-archivo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrastrar-para-cargar-archivo"}},[e._v("¶")]),e._v(" Arrastrar para cargar archivo")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"carga-normal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carga-normal"}},[e._v("¶")]),e._v(" Carga normal")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"atributos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#atributos"}},[e._v("¶")]),e._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("c

1ode",[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 parámetros son el archivo y la lista de archivos. Si se devuelve "),a("code",[e._v("false")]),e._v(" o se devuelve una "),a("c

1ode",[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 auto cargan 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("sobrescribe 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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[e._v("¶")]),e._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("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,t=e.$createElement,a=e._self._c||t;return a("h3",{attrs:{id:"metodos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#metodos"}},[e._v("¶")]),e._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("Parámetros")])])]),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).exports},53543(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>i});var n=a(18264),l=a(6553),o=a(9119),r=a.n(o);const s={data:function(){return{lang:this.$route.meta.lang,navsData:l,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var a=e.getAttribute("href");e.href=t+a})},goAnchor:function(){var e=this;if(location.href.match(/#/g).length>1){var t=location.href.match(/#[^#]+$/g);if(!t)return;var a=document.querySelector(t[0]);if(!a)return;setTimeout(function(t){e.componentScrollBox.scrollTop=a.offsetTop},50)}},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||n.A.$emit("fadeNav"),this.scrollTop=e}},computed:{showBackToTop:function(){return!this.$route.path.match(/backtop/)}},created:function(){var e=this;n.A.$on("navFade",function(t){e.navFaded=t})},mounted:function(){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(){var a=e.path,l=t.path;a===l&&e.hash&&n.goAnchor(),a!==l&&(document.documentElement.scrollTop=document.body.scrollTop=0,n.renderAnchorHref())},100)}},i=(0,a(14486).A)(s,function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component"},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:e.navsData[e.lang],base:"/"+e.lang+"/component"}})],1),a("div",{staticClass:"page-component__content"},[a("router-view",{staticClass:"content"}),a("footer-nav")],1),e.showBackToTop?a("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}

1):e._e()],1)])},[],!1,null,null,null).exports},78994(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Disciplinas de diseño")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(33448),alt:"Consistency"}}),n("h4",[e._v("Consistencia")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(91319),alt:"Feedback"}}),n("h4",[e._v("Comentarios")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(20521),alt:"Efficiency"}}),n("h4",[e._v("Eficiencia")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(34149),alt:"Controllability"}}),n("h4",[e._v("Control")]),n("span")])])],1),n("h3",[e._v("Consistencia")]),e._m(0),n("h3",[e._v("Comentarios")]),e._m(1),n("h3",[e._v("Eficiencia")]),e._m(2),n("h3",[e._v("Control")]),e._m(3)],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("strong",[e._v("Consistente con la vida real: ")]),e._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.")]),a("li",[a("strong",[e._v("Consistente dentro de la interfaz: ")]),e._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,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("strong",[e._v("Comentarios sobre la operación: ")]),e._v("Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.")]),a("li",[a("strong",[e._v("Comentarios visuales: ")]),e._v("Refleja el estado actual al actualizar o reorganizar los elementos de la página.")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("strong",[e._v("Simplifica el proceso: ")]),e._v("Mantiene el proceso operativo simple e intuitivo.")]),a("li",[a("strong",[e._v("Bien definido y claro: ")]),e._v("Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.")]),a("li",[a("strong",[e._v("Fácil de identificar: ")]),e._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,t=e.$createElement,a=e._self._c||t;return a("ul",[a("li",[a("strong",[e._v("Toma de decisiones: ")]),e._v("Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.")]),a("li",[a("strong",[e._v("Consecuencias controladas: ")]),e._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).exports},42104(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>n});const n=(0,a(14486).A)({data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Disciplinas de diseño"},{path:"/nav",name:"Navegación"}]}}},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:e.navsData,base:"/"+e.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null).exports},78522(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>r});var n=a(9119),l=a.n(n);const o={created:function(){var e=this;this.throttledHandleScroll=l()(10,!0,function(t){e.handleScroll(t)})},methods:{handleScroll:function(e){var t=this.$refs.indexMainImg,a=t.getBoundingClientRect(),n=t.clientHeight+55,l=2*(180-a.top);l<0&&(l=0),l>n&&(l=n),this.mainImgOffset=l}},data:function(){return{lang:this.$route.meta.lang,mainImgOffset:0}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){window.addEventListener("scroll",this.throttledHandleScroll)}},r=(0,a(14486).A)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("div",{ref:"indexMainImg",staticClass:"jumbotron"},[n("img",{attrs:{src:a(71247),alt:""}}),n("div",{staticClass:"jumbotron-red",style:{height:e.mainImgOffset+"px"}},[n("img",{attrs:{src:a(64142),alt:""}})])]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(54388),alt:""}}),n("h3",[e._v("Guía")]),n("p",[e._v("Entender los líneamientos de diseño, ayudando a diseña

1dores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.")]),n("router-link",{attrs:{"active-class":"active",to:"/es/guide/design",exact:""}},[e._v("Ver detalle\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(61461),alt:""}}),n("h3",[e._v("Componentes")]),n("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.")]),n("router-link",{attrs:{"active-class":"active",to:"/es/component/layout",exact:""}},[e._v("Ver detalle\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(27415),alt:""}}),n("h3",[e._v("Theme")]),n("p",[e._v("Customize component styles with Sass variables and command-line tools")]),n("router-link",{attrs:{"active-class":"active",to:"/es/component/custom-theme",exact:""}},[e._v("Ver detalle\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(43874),alt:""}}),n("h3",[e._v("Recursos")]),n("p",[e._v("Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.")]),n("router-link",{attrs:{"active-class":"active",to:"/es/resource",exact:""}},[e._v("Ver detalle\n          ")])],1)])])])])},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"banner"},[a("div",{staticClass:"banner-desc"},[a("h1",[e._v("Un kit de interfaz de usuario para la web")]),a("p",[e._v("Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto")])])])}],!1,null,"acc00c36",null).exports},72372(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>l});const n={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={},l=document;n.left=(l.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}}},l=(0,a(14486).A)(n,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Navegación")]),e._m(0),e._m(1),n("div",{staticClass:"block"},[n("h3",[e._v("Navegación lateral")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[e._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.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(31892),alt:"Categorías de Nivel 1"},on:{click:function(t){e.enlarge(846,t)}}}),n("h5",[e._v("Categorías de Nivel 1")]),n("p",[e._v("Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.")]),n("img",{attrs:{src:a(37007),alt:"Categorías de Nivel 2"},on:{click:function(t){e.enlarge(846,t)}}}),n("h5",[e._v("Categorías de Nivel 2")]),n("p",[e._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.")]),n("img",{attrs:{src:a(71814),alt:"Categorías de Nivel 3"},on:{click:function(t){e.enlarge(846,t)}}}),n("h5",[e._v("Categorías de Nivel 3")]),n("p",[e._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),n("div",{staticClass:"block"},[n("h3",[e._v("Navegación superior")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[e._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.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(53021),alt:""},on:{click:function(t){e.enlarge(846,t)}}}),n("p",[e._v("Adecuado para sitios con pocas navegaciones y grandes trozos.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){e.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:e.imgWrapStyle,on:{click:function(t){e.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:e.imgStyle},[n("img",{attrs:{src:e.imgUrl,alt:""}}

1)])])])],1)},[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"block"},[a("p",[e._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,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"block"},[a("h3",[e._v("Elige la navegación correcta")]),a("p",[e._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).exports},44970(e,t,a){"use strict";a.r(t),a.d(t,{default:()=>l});var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Recursos")]),n("p",[e._v("Se están desarrollando más recursos")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(56793),alt:""}}),n("h3",[e._v("Componetes de Axure")]),n("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.")]),n("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib"}},[e._v("Descarga")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(94868),alt:""}}),n("h3",[e._v("Plantilla de Sketch")]),n("p",[e._v("Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.")]),n("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Descarga")])])])])])])}];const l=(0,a(14486).A)({},function(){var e=this;e.$createElement;return e._self._c,e._m(0)},n,!1,null,"9dbb3ef6",null).exports}}]);