mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
1583 lines
91 KiB
JavaScript
1583 lines
91 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[128],{
|
|
|
|
/***/ 451:
|
|
/***/ (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/checkbox.md?vue&type=template&id=51563ba8
|
|
|
|
var checkboxvue_type_template_id_51563ba8_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var checkboxvue_type_template_id_51563ba8_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "checkbox"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#checkbox"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Checkbox")], -1);
|
|
|
|
var checkboxvue_type_template_id_51563ba8_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "複数の選択肢がある場合の選択肢グループ", -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "ji-ben-dena-shii-fang"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#ji-ben-dena-shii-fang"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 基本的な使い方")], -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "checkbox単独で使用して2つの状態を切り替えることができます。", -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" の "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "v-model"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" バインド変数)を定義する。デフォルト値は単一の "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" の場合、 "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" で、チェックを選択した場合は "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" になります。el-checkbox`タグ内の内容は、checkboxのボタンに続く説明文になります。")])], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <!-- `checked` should be true or false -->\n <el-checkbox v-model=\"checked\">Option</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "wu-xiao-zhuang-tai"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#wu-xiao-zhuang-tai"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 無効状態")], -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "checkboxを無効にした状態。", -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "disabled"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性を設定する。")])], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <el-checkbox v-model=\"checked1\" disabled>Option</el-checkbox>\n <el-checkbox v-model=\"checked2\" disabled>Option</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")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "checkboxgurupu"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#checkboxgurupu"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Checkboxグループ")], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "1つのグループに固定された複数のcheckboxに使用され、選択肢が選択されているかどうかをチェックして表示します。", -1);
|
|
|
|
var _hoisted_14 = /*#__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, "checkbox-group"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 要素は "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Array"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" としてバインドされた "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "v-model"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" を用いて複数のcheckboxを一つのグループにまとめて管理することができる。"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 要素の内部では、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" がcheckboxの値である。このタグにコンテンツが入れ子になっていない場合、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" はcheckboxのボタンに続く説明文としてレンダリングされます。"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__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 <el-checkbox-group v-model=\"checkList\">\n <el-checkbox label=\"Option A\"></el-checkbox>\n <el-checkbox label=\"Option B\"></el-checkbox>\n <el-checkbox label=\"Option C\"></el-checkbox>\n <el-checkbox label=\"disabled\" disabled></el-checkbox>\n <el-checkbox label=\"selected and disabled\" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "bu-que-ding"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#bu-que-ding"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 不確定")], -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "indeterminate"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("プロパティは「すべてをチェックする」効果を加えるのに役立ちます。")], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">Check all</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")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "zui-xiao-zui-datietuku-xiang-mu"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#zui-xiao-zui-datietuku-xiang-mu"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 最小/最大チェック項目")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "min"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" と "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "max"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" プロパティは、チェックする項目の数を制限するのに役立つ。")], -1);
|
|
|
|
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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'];\n export default {\n data() {\n return {\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "botansutairu"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#botansutairu"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" ボタンスタイル")], -1);
|
|
|
|
var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "ボタンスタイルのcheckbox。", -1);
|
|
|
|
var _hoisted_24 = /*#__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, "EL-CHECKBOX"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 要素を "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "EL-CHECKBOX-BUTTON"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 要素に変更すればよい。また、"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "size"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性も提供されています。")])], -1);
|
|
|
|
var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "jing-jie-xianwotukeru"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#jing-jie-xianwotukeru"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 境界線をつける")], -1);
|
|
|
|
var _hoisted_27 = /*#__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, "border"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("属性はcheckboxに境界線を追加することができます。")])], -1);
|
|
|
|
var _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div>\n <el-checkbox v-model=\"checked1\" label=\"Option1\" border></el-checkbox>\n <el-checkbox v-model=\"checked2\" label=\"Option2\" border></el-checkbox>\n </div>\n <div style=\"margin-top: 20px\">\n <el-checkbox v-model=\"checked3\" label=\"Option1\" border size=\"medium\"></el-checkbox>\n <el-checkbox v-model=\"checked4\" label=\"Option2\" 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=\"Option1\" border></el-checkbox>\n <el-checkbox label=\"Option2\" 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=\"Option1\" border></el-checkbox>\n <el-checkbox label=\"Option2\" 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")], -1);
|
|
|
|
var _hoisted_29 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"checkbox-shu-xing\"><a class=\"header-anchor\" href=\"#checkbox-shu-xing\">¶</a> Checkbox属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Options</th><th>Default</th></tr></thead><tbody><tr><td>value / v-model</td><td>バインディング値</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>label</td><td><code>checkbox-group</code> の中で使われる場合のcheckboxの値</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>checkboxがチェックされている場合は、checkboxの値</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>checkboxがチェックされていない場合のcheckboxの値</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>checkboxを無効にするかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>border</td><td>checkboxの周りにボーダーを追加するかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>checkboxのサイズ、<code>border</code> がtrueの場合にのみ動作します。</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>name</td><td>ネイティブ 'name' 属性</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>checkboxがチェックされているかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>indeterminate</td><td>ネイティブcheckboxの <code>indeterminate</code> と同じ</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table><h3 id=\"checkboxnoibento\"><a class=\"header-anchor\" href=\"#checkboxnoibento\">¶</a> Checkboxのイベント</h3><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>バインディング値が変更された場合にトリガされます。</td><td>the updated value</td></tr></tbody></table><h3 id=\"checkboxgurupuno-shu-xing\"><a class=\"header-anchor\" href=\"#checkboxgurupuno-shu-xing\">¶</a> Checkboxグループの属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Options</th><th>Default</th></tr></thead><tbody><tr><td>value / v-model</td><td>バインディング値</td><td>array</td><td>—</td><td>—</td></tr><tr><td>size</td><td>checkboxのボタンや枠線の大きさ</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>disabled</td><td>ネスティングcheckboxを無効にするかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>min</td><td>checkboxの最小チェック数</td><td>number</td><td>—</td><td>—</td></tr><tr><td>max</td><td>checkboxの最大チェック数</td><td>number</td><td>—</td><td>—</td></tr><tr><td>text-color</td><td>ボタンがアクティブなときのフォント色</td><td>string</td><td>—</td><td>#ffffff</td></tr><tr><td>fill</td><td>ボタンがアクティブなときの境界線と背景色</td><td>string</td><td>—</td><td>#409EFF</td></tr></tbody></table><h3 id=\"checkboxgurupunoibento\"><a class=\"header-anchor\" href=\"#checkboxgurupunoibento\">¶</a> Checkboxグループのイベント</h3><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>バインディング値が変更された場合にトリガされます。</td><td>the updated value</td></tr></tbody></table><h3 id=\"checkboxbotanno-shu-xing\"><a class=\"header-anchor\" href=\"#checkboxbotanno-shu-xing\">¶</a> Checkboxボタンの属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Options</th><th>Default</th></tr></thead><tbody><tr><td>label</td><td><code>checkbox-group</code> の中で使われる場合のcheckboxの値</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>チェックされている場合の、checkboxの値</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>チェックされていない場合の、checkboxの値</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>checkboxを無効にするかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>name</td><td>ネイティブ 'name' 属性</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>checkboxがチェックされているかどうか</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table>", 10);
|
|
|
|
function checkboxvue_type_template_id_51563ba8_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");
|
|
|
|
var _component_element_demo5 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo5");
|
|
|
|
var _component_element_demo6 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo6");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", checkboxvue_type_template_id_51563ba8_hoisted_1, [checkboxvue_type_template_id_51563ba8_hoisted_2, checkboxvue_type_template_id_51563ba8_hoisted_3, _hoisted_4, _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 [_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_8, _hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_12, _hoisted_13, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_16, _hoisted_17, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_18];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_19, _hoisted_20, 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_21];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_22, _hoisted_23, 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_demo5)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_25];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_24];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_26, 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_demo6)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_28];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_27];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_29]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/jp/checkbox.md?vue&type=template&id=51563ba8
|
|
|
|
// 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/checkbox.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var checkboxvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked: true
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked1 = $event;
|
|
}),
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checked2 = $event;
|
|
}),
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked1: false,
|
|
checked2: true
|
|
};
|
|
}
|
|
};
|
|
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_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkList,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkList = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option A"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option B"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option C"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "disabled",
|
|
disabled: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "selected and disabled",
|
|
disabled: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkList: ['selected and disabled', 'Option A']
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_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 */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Check all");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
style: {
|
|
"margin": "15px 0"
|
|
}
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
indeterminate: _ctx.isIndeterminate,
|
|
modelValue: _ctx.checkAll,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkAll = $event;
|
|
}),
|
|
onChange: _ctx.handleCheckAllChange
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["indeterminate", "modelValue", "onChange"]), _hoisted_2, _createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkedCities,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checkedCities = $event;
|
|
}),
|
|
onChange: _ctx.handleCheckedCitiesChange
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue", "onChange"])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkAll: false,
|
|
checkedCities: ['Shanghai', 'Beijing'],
|
|
cities: cityOptions,
|
|
isIndeterminate: true
|
|
};
|
|
},
|
|
methods: {
|
|
handleCheckAllChange: function handleCheckAllChange(val) {
|
|
this.checkedCities = val ? cityOptions : [];
|
|
this.isIndeterminate = false;
|
|
},
|
|
handleCheckedCitiesChange: function handleCheckedCitiesChange(value) {
|
|
var checkedCount = value.length;
|
|
this.checkAll = checkedCount === this.cities.length;
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": 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 */],
|
|
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkedCities,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkedCities = $event;
|
|
}),
|
|
min: 1,
|
|
max: 2
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkedCities: ['Shanghai', 'Beijing'],
|
|
cities: cityOptions
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo5": 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 */],
|
|
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */];
|
|
var _hoisted_1 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_2 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_3 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox_button = _resolveComponent("el-checkbox-button");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkboxGroup1 = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_1, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checkboxGroup2 = $event;
|
|
}),
|
|
size: "medium"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_2, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.checkboxGroup3 = $event;
|
|
}),
|
|
size: "small"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
disabled: city === 'Beijing',
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label", "disabled"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup4,
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
|
return _ctx.checkboxGroup4 = $event;
|
|
}),
|
|
size: "mini",
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkboxGroup1: ['Shanghai'],
|
|
checkboxGroup2: ['Shanghai'],
|
|
checkboxGroup3: ['Shanghai'],
|
|
checkboxGroup4: ['Shanghai'],
|
|
cities: cityOptions
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo6": 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 */];
|
|
var _hoisted_1 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_2 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_3 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked1 = $event;
|
|
}),
|
|
label: "Option1",
|
|
border: ""
|
|
}, null, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checked2 = $event;
|
|
}),
|
|
label: "Option2",
|
|
border: ""
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_1, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.checked3 = $event;
|
|
}),
|
|
label: "Option1",
|
|
border: "",
|
|
size: "medium"
|
|
}, null, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked4,
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
|
return _ctx.checked4 = $event;
|
|
}),
|
|
label: "Option2",
|
|
border: "",
|
|
size: "medium"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_2, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup1,
|
|
"onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
|
|
return _ctx.checkboxGroup1 = $event;
|
|
}),
|
|
size: "small"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option1",
|
|
border: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option2",
|
|
border: "",
|
|
disabled: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup2,
|
|
"onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
|
|
return _ctx.checkboxGroup2 = $event;
|
|
}),
|
|
size: "mini",
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option1",
|
|
border: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option2",
|
|
border: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked1: true,
|
|
checked2: false,
|
|
checked3: false,
|
|
checked4: true,
|
|
checkboxGroup1: [],
|
|
checkboxGroup2: []
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/jp/checkbox.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/jp/checkbox.md
|
|
|
|
|
|
|
|
checkboxvue_type_script_lang_ts.render = checkboxvue_type_template_id_51563ba8_render
|
|
|
|
/* harmony default export */ var jp_checkbox = __webpack_exports__["default"] = (checkboxvue_type_script_lang_ts);
|
|
|
|
/***/ }),
|
|
|
|
/***/ 667:
|
|
/***/ (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/checkbox.md?vue&type=template&id=eed91b5c
|
|
|
|
var checkboxvue_type_template_id_eed91b5c_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var checkboxvue_type_template_id_eed91b5c_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
|
|
id: "checkbox"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#checkbox"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Checkbox")], -1);
|
|
|
|
var checkboxvue_type_template_id_eed91b5c_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Un groupe d'options à choix multiples.", -1);
|
|
|
|
var _hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "usage"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#usage"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Usage")], -1);
|
|
|
|
var _hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Checkbox peut être utilisé seul pour switcher entre deux états.", -1);
|
|
|
|
var _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Définissez "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "v-model"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" (variable liée) dans "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". La valeur par défaut est un "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" pour une seule "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" et devient "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" quand elle est sélectionnée. Le contenu à l'intérieur de la balise "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" deviendra le label du bouton de la checkbox.")])], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <!-- `checked` should be true or false -->\n <el-checkbox v-model=\"checked\">Option</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "desactivation"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#desactivation"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Désactivation")], -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "La checkbox peut être désactivée.", -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Ajouter l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "disabled"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")])], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <el-checkbox v-model=\"checked1\" disabled>Option</el-checkbox>\n <el-checkbox v-model=\"checked2\" disabled>Option</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")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "checkbox-groupees"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#checkbox-groupees"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Checkbox groupées")], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Utile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.", -1);
|
|
|
|
var _hoisted_14 = /*#__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'élément "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "checkbox-group"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" peut gérer plusieurs checkbox d'un groupe en utilisant "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "v-model"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", qui sera un "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "Array"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". Dans l'élément "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" sera également la description de la checkbox. "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.")])], -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 <el-checkbox-group v-model=\"checkList\">\n <el-checkbox label=\"Option A\"></el-checkbox>\n <el-checkbox label=\"Option B\"></el-checkbox>\n <el-checkbox label=\"Option C\"></el-checkbox>\n <el-checkbox label=\"Désactivée\" disabled></el-checkbox>\n <el-checkbox label=\"Sélectionnée et désactivée\" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "indeterminee"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#indeterminee"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Indéterminée")], -1);
|
|
|
|
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("La propriété "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "indeterminate"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" permet de réaliser un effet \"Sélectionner tout\".")], -1);
|
|
|
|
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">Sélectionner tout</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")], -1);
|
|
|
|
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "minimum-maximum-d-elements-selectionnes"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#minimum-maximum-d-elements-selectionnes"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Minimum / Maximum d'éléments sélectionnés")], -1);
|
|
|
|
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Les propriétés "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "min"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" et "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "max"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" permettent de limiter la quantité d'éléments sélectionnés.")], -1);
|
|
|
|
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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'];\n export default {\n data() {\n return {\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "style-bouton"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#style-bouton"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Style bouton")], -1);
|
|
|
|
var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Des checkbox avec une apparence de bouton.", -1);
|
|
|
|
var _hoisted_24 = /*#__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 */])("Il vous suffit de changer "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" en "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-checkbox-button"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". Il existe aussi un attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "size"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")])], -1);
|
|
|
|
var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<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")], -1);
|
|
|
|
var _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "bordures"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#bordures"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Bordures")], -1);
|
|
|
|
var _hoisted_27 = /*#__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, "border"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" ajoute une bordure aux checkbox.")])], -1);
|
|
|
|
var _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div>\n <el-checkbox v-model=\"checked1\" label=\"Option1\" border></el-checkbox>\n <el-checkbox v-model=\"checked2\" label=\"Option2\" border></el-checkbox>\n </div>\n <div style=\"margin-top: 20px\">\n <el-checkbox v-model=\"checked3\" label=\"Option1\" border size=\"medium\"></el-checkbox>\n <el-checkbox v-model=\"checked4\" label=\"Option2\" 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=\"Option1\" border></el-checkbox>\n <el-checkbox label=\"Option2\" 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=\"Option1\" border></el-checkbox>\n <el-checkbox label=\"Option2\" 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")], -1);
|
|
|
|
var _hoisted_29 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"attributs-checkbox\"><a class=\"header-anchor\" href=\"#attributs-checkbox\">¶</a> Attributs Checkbox</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Options</th><th>Défaut</th></tr></thead><tbody><tr><td>value / v-model</td><td>La valeur liée.</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>label</td><td>Valeur de la checkbox quand utilisée dans un <code>checkbox-group</code>.</td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>Valeur de la checkbox si cochée.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>Valeur de la checkbox si non cochée.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>Désactive la checkbox.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>border</td><td>Ajoute une bordure à la checkbox.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>taille de la checkbox, ne marche que si <code>border</code> est 'true'</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>name</td><td>Attribut 'name' natif.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>Si la checkbox est cochée.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>indeterminate</td><td>Identique à <code>indeterminate</code> dans les checkbox natives.</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table><h3 id=\"evenements-checkbox\"><a class=\"header-anchor\" href=\"#evenements-checkbox\">¶</a> Évènements Checkbox</h3><table><thead><tr><th>Nom</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>change</td><td>Se déclenche quand la valeur change.</td><td>La nouvelle valeur</td></tr></tbody></table><h3 id=\"attributs-checkbox-group\"><a class=\"header-anchor\" href=\"#attributs-checkbox-group\">¶</a> Attributs Checkbox-group</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Options</th><th>Défaut</th></tr></thead><tbody><tr><td>value / v-model</td><td>La valeur liée.</td><td>array</td><td>—</td><td>—</td></tr><tr><td>size</td><td>Taille des checkbox-boutons ou des checkbox avec bordure.</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>disabled</td><td>Si les checkbox imbriquées sont désactivées.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>min</td><td>Nombre minimum de checkbox cochées.</td><td>number</td><td>—</td><td>—</td></tr><tr><td>max</td><td>Nombre maximum de checkbox cochées.</td><td>number</td><td>—</td><td>—</td></tr><tr><td>text-color</td><td>Couleur de police quand le bouton est actif.</td><td>string</td><td>—</td><td>#ffffff</td></tr><tr><td>fill</td><td>Couleur de la bordure et du fond quand le bouton est actif.</td><td>string</td><td>—</td><td>#409EFF</td></tr></tbody></table><h3 id=\"evenements-checkbox-group\"><a class=\"header-anchor\" href=\"#evenements-checkbox-group\">¶</a> Évènements Checkbox-group</h3><table><thead><tr><th>Nom</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>change</td><td>Se déclenche quand la valeur change.</td><td>La nouvelle valeur</td></tr></tbody></table><h3 id=\"attributs-checkbox-button\"><a class=\"header-anchor\" href=\"#attributs-checkbox-button\">¶</a> Attributs Checkbox-button</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Options</th><th>Défaut</th></tr></thead><tbody><tr><td>label</td><td>Valeur de la checkbox quand utilisée dans un <code>checkbox-group</code></td><td>string / number / boolean</td><td>—</td><td>—</td></tr><tr><td>true-label</td><td>Valeur de la checkbox si cochée.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>false-label</td><td>Valeur de la checkbox si non cochée.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>Si la checkbox est désactivée.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>name</td><td>Attribut 'name' natif.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>checked</td><td>Si la checkbox est cochée.</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table>", 10);
|
|
|
|
function checkboxvue_type_template_id_eed91b5c_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");
|
|
|
|
var _component_element_demo5 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo5");
|
|
|
|
var _component_element_demo6 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo6");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", checkboxvue_type_template_id_eed91b5c_hoisted_1, [checkboxvue_type_template_id_eed91b5c_hoisted_2, checkboxvue_type_template_id_eed91b5c_hoisted_3, _hoisted_4, _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 [_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_8, _hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_11];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_12, _hoisted_13, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_15];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_14];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_16, _hoisted_17, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_18];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_19, _hoisted_20, 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_21];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_22, _hoisted_23, 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_demo5)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_25];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_24];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_26, 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_demo6)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_28];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_27];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_29]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/checkbox.md?vue&type=template&id=eed91b5c
|
|
|
|
// 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/checkbox.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var checkboxvue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked: true
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createTextVNode("Option");
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked1 = $event;
|
|
}),
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checked2 = $event;
|
|
}),
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_2];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked1: false,
|
|
checked2: true
|
|
};
|
|
}
|
|
};
|
|
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_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkList,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkList = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option A"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option B"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option C"
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Désactivée",
|
|
disabled: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Sélectionnée et désactivée",
|
|
disabled: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkList: ['selected and disabled', 'Option A']
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo3": function () {
|
|
var _createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_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 */];
|
|
|
|
var _hoisted_1 = /*#__PURE__*/_createTextVNode("Sélectionner tout");
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
|
|
style: {
|
|
"margin": "15px 0"
|
|
}
|
|
}, null, -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox, {
|
|
indeterminate: _ctx.isIndeterminate,
|
|
modelValue: _ctx.checkAll,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkAll = $event;
|
|
}),
|
|
onChange: _ctx.handleCheckAllChange
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_hoisted_1];
|
|
}),
|
|
_: 1
|
|
}, 8, ["indeterminate", "modelValue", "onChange"]), _hoisted_2, _createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkedCities,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checkedCities = $event;
|
|
}),
|
|
onChange: _ctx.handleCheckedCitiesChange
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue", "onChange"])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkAll: false,
|
|
checkedCities: ['Shanghai', 'Beijing'],
|
|
cities: cityOptions,
|
|
isIndeterminate: true
|
|
};
|
|
},
|
|
methods: {
|
|
handleCheckAllChange: function handleCheckAllChange(val) {
|
|
this.checkedCities = val ? cityOptions : [];
|
|
this.isIndeterminate = false;
|
|
},
|
|
handleCheckedCitiesChange: function handleCheckedCitiesChange(value) {
|
|
var checkedCount = value.length;
|
|
this.checkAll = checkedCount === this.cities.length;
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
|
}
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo4": 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 */],
|
|
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */];
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkedCities,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkedCities = $event;
|
|
}),
|
|
min: 1,
|
|
max: 2
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkedCities: ['Shanghai', 'Beijing'],
|
|
cities: cityOptions
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo5": 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 */],
|
|
_createTextVNode = vue_esm_browser["n" /* createTextVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_withCtx = vue_esm_browser["eb" /* withCtx */],
|
|
_createVNode = vue_esm_browser["o" /* createVNode */];
|
|
var _hoisted_1 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_2 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_3 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox_button = _resolveComponent("el-checkbox-button");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", null, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checkboxGroup1 = $event;
|
|
})
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_1, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checkboxGroup2 = $event;
|
|
}),
|
|
size: "medium"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_2, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.checkboxGroup3 = $event;
|
|
}),
|
|
size: "small"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
disabled: city === 'Beijing',
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label", "disabled"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup4,
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
|
return _ctx.checkboxGroup4 = $event;
|
|
}),
|
|
size: "mini",
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.cities, function (city) {
|
|
return _openBlock(), _createBlock(_component_el_checkbox_button, {
|
|
label: city,
|
|
key: city
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createTextVNode(_toDisplayString(city), 1
|
|
/* TEXT */
|
|
)];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["label"]);
|
|
}), 128
|
|
/* KEYED_FRAGMENT */
|
|
))];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checkboxGroup1: ['Shanghai'],
|
|
checkboxGroup2: ['Shanghai'],
|
|
checkboxGroup3: ['Shanghai'],
|
|
checkboxGroup4: ['Shanghai'],
|
|
cities: cityOptions
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo6": 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 */];
|
|
var _hoisted_1 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_2 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
var _hoisted_3 = {
|
|
style: {
|
|
"margin-top": "20px"
|
|
}
|
|
};
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_checkbox = _resolveComponent("el-checkbox");
|
|
|
|
var _component_el_checkbox_group = _resolveComponent("el-checkbox-group");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", null, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.checked1 = $event;
|
|
}),
|
|
label: "Option1",
|
|
border: ""
|
|
}, null, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.checked2 = $event;
|
|
}),
|
|
label: "Option2",
|
|
border: ""
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_1, [_createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.checked3 = $event;
|
|
}),
|
|
label: "Option1",
|
|
border: "",
|
|
size: "medium"
|
|
}, null, 8, ["modelValue"]), _createVNode(_component_el_checkbox, {
|
|
modelValue: _ctx.checked4,
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
|
|
return _ctx.checked4 = $event;
|
|
}),
|
|
label: "Option2",
|
|
border: "",
|
|
size: "medium"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_2, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup1,
|
|
"onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
|
|
return _ctx.checkboxGroup1 = $event;
|
|
}),
|
|
size: "small"
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option1",
|
|
border: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option2",
|
|
border: "",
|
|
disabled: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.checkboxGroup2,
|
|
"onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
|
|
return _ctx.checkboxGroup2 = $event;
|
|
}),
|
|
size: "mini",
|
|
disabled: ""
|
|
}, {
|
|
default: _withCtx(function () {
|
|
return [_createVNode(_component_el_checkbox, {
|
|
label: "Option1",
|
|
border: ""
|
|
}), _createVNode(_component_el_checkbox, {
|
|
label: "Option2",
|
|
border: ""
|
|
})];
|
|
}),
|
|
_: 1
|
|
}, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
checked1: true,
|
|
checked2: false,
|
|
checked3: false,
|
|
checked4: true,
|
|
checkboxGroup1: [],
|
|
checkboxGroup2: []
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/checkbox.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/checkbox.md
|
|
|
|
|
|
|
|
checkboxvue_type_script_lang_ts.render = checkboxvue_type_template_id_eed91b5c_render
|
|
|
|
/* harmony default export */ var fr_FR_checkbox = __webpack_exports__["default"] = (checkboxvue_type_script_lang_ts);
|
|
|
|
/***/ })
|
|
|
|
}]); |