mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
917 lines
51 KiB
JavaScript
917 lines
51 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[162],{
|
|
|
|
/***/ 467:
|
|
/***/ (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/jp/progress.md?vue&type=template&id=06b77a07
|
|
|
|
var _hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "jin-bu-zhuang-kuang"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#jin-bu-zhuang-kuang"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 進捗状況")], -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "現在の操作の進捗状況を表示し、ユーザーに現在の状態を知らせるために使用されます。", -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "xian-xingpuroguresuba"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#xian-xingpuroguresuba"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 線形プログレスバー")], -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("パーセントを設定するには "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "percentage"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性を用いる。"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "必須"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("で、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "0-100"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("の間で指定する必要があります。"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "format"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("を設定することで、テキストの書式をカスタマイズすることができます。")])], -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "nei-bu-bi-lu"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#nei-bu-bi-lu"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 内部比率")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "この場合、パーセンテージは追加のスペースを取りません。", -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "ストローク幅"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("属性はプログレスバーの幅を決定し、プログレスバーの中に説明を加えるには"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "text-inside"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("属性を使う。")])], -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "kasutamukara"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#kasutamukara"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" カスタムカラー")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("プログレスバーの色を設定するには "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "color"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" attr を使うことができ、色文字列、関数、配列のいずれかを受け付けます。")], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "yuan-xingnopuroguresuba"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#yuan-xingnopuroguresuba"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 円形のプログレスバー")], -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性に "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "circle"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" を指定すると円形のプログレスバーが利用でき、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "width"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性を指定すると円形の大きさを変更することができます。")])], -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "datusiyubodonopuroguresuba"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#datusiyubodonopuroguresuba"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" ダッシュボードのプログレスバー")], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "dashboard"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" に "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性を指定することでダッシュボードのプログレスバーも利用できる。")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></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: 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")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"shu-xing\"><a class=\"header-anchor\" href=\"#shu-xing\">¶</a> 属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>percentage</strong></td><td>パーセンテージ、 <strong>required</strong></td><td>number</td><td>0-100</td><td>0</td></tr><tr><td>type</td><td>プログレスバーの種類</td><td>string</td><td>line/circle/dashboard</td><td>line</td></tr><tr><td>stroke-width</td><td>プログレスバーの幅</td><td>number</td><td>—</td><td>6</td></tr><tr><td>text-inside</td><td>パーセントをプログレスバーの中に配置するかどうか、<code>type</code>が 'line'の場合のみ動作します。</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>status</td><td>プログレスバーの現在の状態</td><td>string</td><td>success/exception/warning</td><td>—</td></tr><tr><td>color</td><td>プログレスバーの背景色を指定します。<code>status</code> プロップをオーバーライドします。</td><td>string/function/array</td><td>—</td><td>''</td></tr><tr><td>width</td><td>サークルプログレスバーのキャンバス幅</td><td>number</td><td>—</td><td>126</td></tr><tr><td>show-text</td><td>パーセンテージ表示の有無</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>stroke-linecap</td><td>終点でのサークル/ダッシュボード型の形状</td><td>string</td><td>butt/round/square</td><td>round</td></tr></tbody></table>", 2);
|
|
|
|
function progressvue_type_template_id_06b77a07_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");
|
|
|
|
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", _hoisted_1, [_hoisted_2, _hoisted_3, _hoisted_4, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 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_10];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_11, _hoisted_12, 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_13];
|
|
}),
|
|
_: 1
|
|
}), _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_16];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_17, _hoisted_18, 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_demo4)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_19];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_20]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/jp/progress.md?vue&type=template&id=06b77a07
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/jp/progress.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var progressvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
percentage: 50
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
format: _ctx.format
|
|
}, null, 8, ["format"]), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
methods: {
|
|
format: function format(percentage) {
|
|
return percentage === 100 ? 'Full' : percentage + "%";
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 26,
|
|
percentage: 70
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 24,
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 22,
|
|
percentage: 80,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 20,
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
var _component_el_button = _resolveComponent("el-button");
|
|
|
|
var _component_el_button_group = _resolveComponent("el-button-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColor
|
|
}, null, 8, ["percentage", "color"]), _createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColorMethod
|
|
}, null, 8, ["percentage", "color"]), _createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColors
|
|
}, null, 8, ["percentage", "color"]), _createVNode("div", null, [_createVNode(_component_el_button_group, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_button, {
|
|
icon: "el-icon-minus",
|
|
onClick: _ctx.decrease
|
|
}, null, 8, ["onClick"]), _createVNode(_component_el_button, {
|
|
icon: "el-icon-plus",
|
|
onClick: _ctx.increase
|
|
}, null, 8, ["onClick"])];
|
|
}),
|
|
_: 1
|
|
})])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
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 customColorMethod(percentage) {
|
|
if (percentage < 30) {
|
|
return '#909399';
|
|
} else if (percentage < 70) {
|
|
return '#e6a23c';
|
|
} else {
|
|
return '#67c23a';
|
|
}
|
|
},
|
|
increase: function increase() {
|
|
this.percentage += 10;
|
|
|
|
if (this.percentage > 100) {
|
|
this.percentage = 100;
|
|
}
|
|
},
|
|
decrease: function decrease() {
|
|
this.percentage -= 10;
|
|
|
|
if (this.percentage < 0) {
|
|
this.percentage = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 0
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 25
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 70,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
var _component_el_button = _resolveComponent("el-button");
|
|
|
|
var _component_el_button_group = _resolveComponent("el-button-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
type: "dashboard",
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.colors
|
|
}, null, 8, ["percentage", "color"]), _createVNode("div", null, [_createVNode(_component_el_button_group, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_button, {
|
|
icon: "el-icon-minus",
|
|
onClick: _ctx.decrease
|
|
}, null, 8, ["onClick"]), _createVNode(_component_el_button, {
|
|
icon: "el-icon-plus",
|
|
onClick: _ctx.increase
|
|
}, null, 8, ["onClick"])];
|
|
}),
|
|
_: 1
|
|
})])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
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 increase() {
|
|
this.percentage += 10;
|
|
|
|
if (this.percentage > 100) {
|
|
this.percentage = 100;
|
|
}
|
|
},
|
|
decrease: function decrease() {
|
|
this.percentage -= 10;
|
|
|
|
if (this.percentage < 0) {
|
|
this.percentage = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/jp/progress.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/jp/progress.md
|
|
|
|
|
|
|
|
progressvue_type_script_lang_ts.render = progressvue_type_template_id_06b77a07_render
|
|
|
|
/* harmony default export */ var progress = __webpack_exports__["default"] = (progressvue_type_script_lang_ts);
|
|
|
|
/***/ }),
|
|
|
|
/***/ 685:
|
|
/***/ (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/fr-FR/progress.md?vue&type=template&id=20065d41
|
|
|
|
var _hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "progress"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#progress"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Progress")], -1);
|
|
|
|
var _hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.", -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "barre-de-progression-lineaire"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#barre-de-progression-lineaire"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Barre de progression linéaire")], -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Utilisez l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "percentage"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour indiquer le pourcentage. Cet attribut est "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("strong", null, "requis"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" et doit être compris entre 0 et 100. You can custom text format by setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "format"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")])], -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "pourcentage-interne"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#pourcentage-interne"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Pourcentage interne")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Dans ce cas le pourcentage ne prends pas de place en plus.", -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("L'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "stroke-width"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" détermine le "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "width"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" de la barre de progression. Utilisez "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "text-inside"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" mettre la description à l'intérieur de la barre.")])], -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "couleur-personnalisee"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#couleur-personnalisee"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Couleur personnalisée")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez utiliser l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "color"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.")], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "barre-de-progression-circulaire"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#barre-de-progression-circulaire"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Barre de progression circulaire")], -1);
|
|
|
|
var _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez mettre l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" à "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "circle"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour obtenir une barre circulaire, et utiliser "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "width"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour changer la taille du cercle.")])], -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "barre-de-progression-du-tableau-de-bord"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#barre-de-progression-du-tableau-de-bord"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Barre de progression du tableau de bord")], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez également spécifier l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" de "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "dashboard"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour utiliser la barre de progression du tableau de bord.")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></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: 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")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"attributs\"><a class=\"header-anchor\" href=\"#attributs\">¶</a> Attributs</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td><strong>percentage</strong></td><td>Le pourcentage, <strong>requis</strong>.</td><td>number</td><td>0-100</td><td>0</td></tr><tr><td>type</td><td>Le type de barre.</td><td>string</td><td>line/circle/dashboard</td><td>line</td></tr><tr><td>stroke-width</td><td>La largeur de la barre.</td><td>number</td><td>—</td><td>6</td></tr><tr><td>text-inside</td><td>Si le pourcentage doit être à l'intérieur de la barre, ne marche que si <code>type</code> est 'line'.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>status</td><td>Le statut actuel de la progression.</td><td>string</td><td>success/exception/text</td><td>—</td></tr><tr><td>color</td><td>La couleur de fon de la barre. Écrase <code>status</code>.</td><td>string/function/array</td><td>—</td><td>''</td></tr><tr><td>width</td><td>La largeur du canvas dans le cas d'une barre circulaire.</td><td>number</td><td>—</td><td>126</td></tr><tr><td>show-text</td><td>Si le pourcentage doit être affiché.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>stroke-linecap</td><td>circle/dashboard type shape at the end path</td><td>string</td><td>butt/round/square</td><td>round</td></tr></tbody></table>", 2);
|
|
|
|
function progressvue_type_template_id_20065d41_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");
|
|
|
|
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", _hoisted_1, [_hoisted_2, _hoisted_3, _hoisted_4, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_5];
|
|
}),
|
|
_: 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_10];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_11, _hoisted_12, 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_13];
|
|
}),
|
|
_: 1
|
|
}), _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_16];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_17, _hoisted_18, 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_demo4)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_19];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_20]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/progress.md?vue&type=template&id=20065d41
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/fr-FR/progress.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var progressvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
percentage: 50
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
format: _ctx.format
|
|
}, null, 8, ["format"]), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 100,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
methods: {
|
|
format: function format(percentage) {
|
|
return percentage === 100 ? 'Full' : percentage + "%";
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 26,
|
|
percentage: 70
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 24,
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 22,
|
|
percentage: 80,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
"text-inside": true,
|
|
"stroke-width": 20,
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
var _component_el_button = _resolveComponent("el-button");
|
|
|
|
var _component_el_button_group = _resolveComponent("el-button-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColor
|
|
}, null, 8, ["percentage", "color"]), _createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColorMethod
|
|
}, null, 8, ["percentage", "color"]), _createVNode(_component_el_progress, {
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.customColors
|
|
}, null, 8, ["percentage", "color"]), _createVNode("div", null, [_createVNode(_component_el_button_group, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_button, {
|
|
icon: "el-icon-minus",
|
|
onClick: _ctx.decrease
|
|
}, null, 8, ["onClick"]), _createVNode(_component_el_button, {
|
|
icon: "el-icon-plus",
|
|
onClick: _ctx.increase
|
|
}, null, 8, ["onClick"])];
|
|
}),
|
|
_: 1
|
|
})])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
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 customColorMethod(percentage) {
|
|
if (percentage < 30) {
|
|
return '#909399';
|
|
} else if (percentage < 70) {
|
|
return '#e6a23c';
|
|
} else {
|
|
return '#67c23a';
|
|
}
|
|
},
|
|
increase: function increase() {
|
|
this.percentage += 10;
|
|
|
|
if (this.percentage > 100) {
|
|
this.percentage = 100;
|
|
}
|
|
},
|
|
decrease: function decrease() {
|
|
this.percentage -= 10;
|
|
|
|
if (this.percentage < 0) {
|
|
this.percentage = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 0
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 25
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 100,
|
|
status: "success"
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 70,
|
|
status: "warning"
|
|
}), _createVNode(_component_el_progress, {
|
|
type: "circle",
|
|
percentage: 50,
|
|
status: "exception"
|
|
})]);
|
|
}
|
|
|
|
var democomponentExport = {};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": function () {
|
|
var _resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_progress = _resolveComponent("el-progress");
|
|
|
|
var _component_el_button = _resolveComponent("el-button");
|
|
|
|
var _component_el_button_group = _resolveComponent("el-button-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_progress, {
|
|
type: "dashboard",
|
|
percentage: _ctx.percentage,
|
|
color: _ctx.colors
|
|
}, null, 8, ["percentage", "color"]), _createVNode("div", null, [_createVNode(_component_el_button_group, null, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_button, {
|
|
icon: "el-icon-minus",
|
|
onClick: _ctx.decrease
|
|
}, null, 8, ["onClick"]), _createVNode(_component_el_button, {
|
|
icon: "el-icon-plus",
|
|
onClick: _ctx.increase
|
|
}, null, 8, ["onClick"])];
|
|
}),
|
|
_: 1
|
|
})])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
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 increase() {
|
|
this.percentage += 10;
|
|
|
|
if (this.percentage > 100) {
|
|
this.percentage = 100;
|
|
}
|
|
},
|
|
decrease: function decrease() {
|
|
this.percentage -= 10;
|
|
|
|
if (this.percentage < 0) {
|
|
this.percentage = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/progress.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/progress.md
|
|
|
|
|
|
|
|
progressvue_type_script_lang_ts.render = progressvue_type_template_id_20065d41_render
|
|
|
|
/* harmony default export */ var progress = __webpack_exports__["default"] = (progressvue_type_script_lang_ts);
|
|
|
|
/***/ })
|
|
|
|
}]); |