element-plus/DOCS es1.a0110d56c4f557c74337.js
2020-12-16 15:13:03 +00:00

376 lines
20 KiB
JavaScript

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[64],{
/***/ 599:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
var vue_esm_browser = __webpack_require__(0);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/es/avatar.md?vue&type=template&id=3f73b496
var avatarvue_type_template_id_3f73b496_hoisted_1 = {
class: "content element-doc"
};
var avatarvue_type_template_id_3f73b496_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
id: "avatar"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#avatar"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Avatar")], -1);
var avatarvue_type_template_id_3f73b496_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.", -1);
var avatarvue_type_template_id_3f73b496_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "basico"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#basico"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Básico")], -1);
var avatarvue_type_template_id_3f73b496_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Use los props "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "shape"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" y "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "size"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" para establecer la forma y el tamaño del avatar")], -1);
var avatarvue_type_template_id_3f73b496_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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: \"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\",\n squareUrl: \"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png\",\n sizeList: [\"large\", \"medium\", \"small\"]\n }\n }\n }\n</script>\n\n")], -1);
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "tipos"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#tipos"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Tipos")], -1);
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Soporta imágenes, iconos o caracteres.", -1);
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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=\"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png\"></el-avatar>\n </div>\n <div>\n <el-avatar> user </el-avatar>\n </div>\n </div>\n</template>\n")], -1);
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "fallback-cuando-se-produce-un-error-de-carga-de-imagen"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#fallback-cuando-se-produce-un-error-de-carga-de-imagen"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Fallback cuando se produce un error de carga de imagen")], -1);
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Fallback cuando se produce un error de carga de imagen", -1);
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<template>\n <div class=\"demo-type\">\n <el-avatar :size=\"60\" src=\"https://empty\" @error=\"errorHandler\">\n <img src=\"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png\"/>\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")], -1);
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "como-encaja-la-imagen-en-su-contenedor"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#como-encaja-la-imagen-en-su-contenedor"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Cómo encaja la imagen en su contenedor")], -1);
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
href: "https://developer.mozilla.org/es/docs/Web/CSS/object-fit"
}, "object-fit"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")], -1);
var _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<template>\n <div class=\"demo-fit\">\n <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\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: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n }\n }\n }\n</script>\n\n")], -1);
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"atributos\"><a class=\"header-anchor\" href=\"#atributos\">¶</a> Atributos</h3><table><thead><tr><th>Atributo</th><th>Descripción</th><th>Tipo</th><th>Valores aceptados</th><th>Por defecto</th></tr></thead><tbody><tr><td>icon</td><td>establece el tipo de representación a Icono, más información en Componente Icon</td><td>string</td><td></td><td></td></tr><tr><td>size</td><td>Establece el tamaño del avatar</td><td>number/string</td><td>number / large / medium / small</td><td>large</td></tr><tr><td>shape</td><td>establece la forma del avatar</td><td>string</td><td>circle / square</td><td>circle</td></tr><tr><td>src</td><td>la dirección de la imagen para un avatar de imagen</td><td>string</td><td></td><td></td></tr><tr><td>srcSet</td><td>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.</td><td>string</td><td></td><td></td></tr><tr><td>alt</td><td>Este atributo define una descripción de texto alternativo de la imagen</td><td>string</td><td></td><td></td></tr><tr><td>fit</td><td>establece cómo encaja la imagen en su contenedor para un avatar de imagen</td><td>string</td><td>fill / contain / cover / none / scale-down</td><td>cover</td></tr></tbody></table><h3 id=\"eventos\"><a class=\"header-anchor\" href=\"#eventos\">¶</a> Eventos</h3><table><thead><tr><th>Nombre</th><th>Descripción</th><th>Parámetros</th></tr></thead><tbody><tr><td>error</td><td>cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado</td><td>(e: Event)</td></tr></tbody></table><h3 id=\"slot\"><a class=\"header-anchor\" href=\"#slot\">¶</a> Slot</h3><p>| Nombre | Descripción | | default | personalice el contenido del avatar |</p>", 6);
function avatarvue_type_template_id_3f73b496_render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
var _component_element_demo3 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo3");
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", avatarvue_type_template_id_3f73b496_hoisted_1, [avatarvue_type_template_id_3f73b496_hoisted_2, avatarvue_type_template_id_3f73b496_hoisted_3, avatarvue_type_template_id_3f73b496_hoisted_4, avatarvue_type_template_id_3f73b496_hoisted_5, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [avatarvue_type_template_id_3f73b496_hoisted_6];
}),
_: 1
}), _hoisted_7, _hoisted_8, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_9];
}),
_: 1
}), _hoisted_10, _hoisted_11, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_12];
}),
_: 1
}), _hoisted_13, _hoisted_14, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_15];
}),
_: 1
}), _hoisted_16]);
}
// CONCATENATED MODULE: ./website/docs/es/avatar.md?vue&type=template&id=3f73b496
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
var helpers_extends = __webpack_require__(8);
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/es/avatar.md?vue&type=script&lang=ts
/* harmony default export */ var avatarvue_type_script_lang_ts = ({
name: 'component-doc',
components: {
"element-demo0": function () {
var _createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
class: "sub-title"
}, "circle", -1);
var _hoisted_2 = {
class: "demo-basic--circle"
};
var _hoisted_3 = {
class: "block"
};
var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
class: "sub-title"
}, "square", -1);
var _hoisted_5 = {
class: "demo-basic--circle"
};
var _hoisted_6 = {
class: "block"
};
function render(_ctx, _cache) {
var _component_el_avatar = _resolveComponent("el-avatar");
var _component_el_col = _resolveComponent("el-col");
var _component_el_row = _resolveComponent("el-row");
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_row, {
class: "demo-avatar demo-basic"
}, {
default: _withCtx(function () {
return [_createVNode(_component_el_col, {
span: 12
}, {
default: _withCtx(function () {
return [_hoisted_1, _createVNode("div", _hoisted_2, [_createVNode("div", _hoisted_3, [_createVNode(_component_el_avatar, {
size: 50,
src: _ctx.circleUrl
}, null, 8, ["src"])]), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.sizeList, function (size) {
return _openBlock(), _createBlock("div", {
class: "block",
key: size
}, [_createVNode(_component_el_avatar, {
size: size,
src: _ctx.circleUrl
}, null, 8, ["size", "src"])]);
}), 128
/* KEYED_FRAGMENT */
))])];
}),
_: 1
}), _createVNode(_component_el_col, {
span: 12
}, {
default: _withCtx(function () {
return [_hoisted_4, _createVNode("div", _hoisted_5, [_createVNode("div", _hoisted_6, [_createVNode(_component_el_avatar, {
shape: "square",
size: 50,
src: _ctx.squareUrl
}, null, 8, ["src"])]), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.sizeList, function (size) {
return _openBlock(), _createBlock("div", {
class: "block",
key: size
}, [_createVNode(_component_el_avatar, {
shape: "square",
size: size,
src: _ctx.squareUrl
}, null, 8, ["size", "src"])]);
}), 128
/* KEYED_FRAGMENT */
))])];
}),
_: 1
})];
}),
_: 1
})]);
}
var democomponentExport = {
data: function data() {
return {
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
sizeList: ["large", "medium", "small"]
};
}
};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo1": function () {
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
_withCtx = vue_esm_browser["eb" /* withCtx */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */];
var _hoisted_1 = {
class: "demo-type"
};
var _hoisted_2 = /*#__PURE__*/_createTextVNode(" user ");
function render(_ctx, _cache) {
var _component_el_avatar = _resolveComponent("el-avatar");
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_createVNode("div", null, [_createVNode(_component_el_avatar, {
icon: "el-icon-user-solid"
})]), _createVNode("div", null, [_createVNode(_component_el_avatar, {
src: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
})]), _createVNode("div", null, [_createVNode(_component_el_avatar, null, {
default: _withCtx(function () {
return [_hoisted_2];
}),
_: 1
})])])]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo2": function () {
var _createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */];
var _hoisted_1 = {
class: "demo-type"
};
var _hoisted_2 = /*#__PURE__*/_createVNode("img", {
src: "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
}, null, -1);
function render(_ctx, _cache) {
var _component_el_avatar = _resolveComponent("el-avatar");
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_createVNode(_component_el_avatar, {
size: 60,
src: "https://empty",
onError: _ctx.errorHandler
}, {
default: _withCtx(function () {
return [_hoisted_2];
}),
_: 1
}, 8, ["onError"])])]);
}
var democomponentExport = {
methods: {
errorHandler: function errorHandler() {
return true;
}
}
};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo3": function () {
var _renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */];
var _hoisted_1 = {
class: "demo-fit"
};
var _hoisted_2 = {
class: "title"
};
function render(_ctx, _cache) {
var _component_el_avatar = _resolveComponent("el-avatar");
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.fits, function (fit) {
return _openBlock(), _createBlock("div", {
class: "block",
key: fit
}, [_createVNode("span", _hoisted_2, _toDisplayString(fit), 1), _createVNode(_component_el_avatar, {
shape: "square",
size: 100,
fit: fit,
src: _ctx.url
}, null, 8, ["fit", "src"])]);
}), 128
/* KEYED_FRAGMENT */
))])]);
}
var democomponentExport = {
data: function data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
};
}
};
return extends_default()({
render: render
}, democomponentExport);
}()
}
});
// CONCATENATED MODULE: ./website/docs/es/avatar.md?vue&type=script&lang=ts
// CONCATENATED MODULE: ./website/docs/es/avatar.md
avatarvue_type_script_lang_ts.render = avatarvue_type_template_id_3f73b496_render
/* harmony default export */ var avatar = __webpack_exports__["default"] = (avatarvue_type_script_lang_ts);
/***/ })
}]);