javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(): checkbox code for composition (#2153)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu
2021-06-08 13:15:13 +08:00
committed by GitHub
parent 5a276e48bc
commit c7debd978c
5 changed files with 789 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
website/docs/en-US/checkbox.md
View File

@@ -22,6 +22,22 @@ Checkbox can be used alone to switch between two states.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
```
:::
@@ -46,6 +62,23 @@ Disabled state for checkbox.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return {
checked1,
checked2,
};
},
});
</setup>
-->
```
:::
@@ -75,6 +108,23 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checkList = ref(['selected and disabled','Option A']);
return {
checkList,
};
},
});
</setup>
-->
```
:::
@@ -116,6 +166,40 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cities.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cities.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
},
});
</setup>
-->
```
:::
@@ -145,6 +229,28 @@ The `min` and `max` properties can help you to limit the number of checked items
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -191,6 +297,31 @@ Checkbox with button styles.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -235,6 +366,30 @@ Checkbox with button styles.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

154
website/docs/es/checkbox.md
View File

@@ -22,6 +22,22 @@ Checkbox puede ser usado para alternar entre dos estados.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
```
:::
@@ -46,6 +62,23 @@ Estado deshabilitado para el checkbox.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return {
checked1,
checked2,
};
},
});
</setup>
-->
```
:::
@@ -75,6 +108,22 @@ Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indic
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checkList = ref(['Seleccionado y deshabilitado','Opción A']);
return {
checkList,
};
},
});
</setup>
-->
```
:::
@@ -116,6 +165,40 @@ La propiedad `indeterminate` puede ser usada para generar el efecto de marcar to
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cities.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cities.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
},
});
</setup>
-->
```
:::
@@ -145,6 +228,28 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -191,6 +296,31 @@ Checkbox con estilo tipo Botón.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -235,6 +365,30 @@ Checkbox con estilo tipo Botón.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

154
website/docs/fr-FR/checkbox.md
View File

@@ -22,6 +22,22 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
```
:::
@@ -46,6 +62,23 @@ La checkbox peut être désactivée.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return {
checked1,
checked2,
};
},
});
</setup>
-->
```
:::
@@ -75,6 +108,22 @@ Utile pour grouper des checkbox, indiquant si une option est sélectionnée en v
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checkList = ref(['selected and disabled','Option A']);
return {
checkList,
};
},
});
</setup>
-->
```
:::
@@ -116,6 +165,40 @@ La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout"
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cities.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cities.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
},
});
</setup>
-->
```
:::
@@ -145,6 +228,28 @@ Les propriétés `min` et `max` permettent de limiter la quantité d'éléments
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -191,6 +296,31 @@ Des checkbox avec une apparence de bouton.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -235,6 +365,30 @@ Des checkbox avec une apparence de bouton.
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

170
website/docs/jp/checkbox.md
View File

@@ -22,6 +22,38 @@ checkbox単独で使用して2つの状態を切り替えることができま
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
```
:::
@@ -46,6 +78,23 @@ checkboxを無効にした状態。
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return {
checked1,
checked2,
};
},
});
</setup>
-->
```
:::
@@ -75,6 +124,22 @@ checkboxを無効にした状態。
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checkList = ref(['selected and disabled','Option A']);
return {
checkList,
};
},
});
</setup>
-->
```
:::
@@ -116,6 +181,40 @@ checkboxを無効にした状態。
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cities.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cities.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
},
});
</setup>
-->
```
:::
@@ -145,6 +244,28 @@ checkboxを無効にした状態。
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -191,6 +312,31 @@ checkboxを無効にした状態。
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default defineComponent({
setup() {
const state = reactive({
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -235,6 +381,30 @@ checkboxを無効にした状態。
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

156
website/docs/zh-CN/checkbox.md
View File

@@ -21,6 +21,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked = ref(true);
return {
checked,
};
},
});
</setup>
-->
```
:::
@@ -45,6 +61,23 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checked1 = ref(false);
const checked2 = ref(true);
return {
checked1,
checked2,
};
},
});
</setup>
-->
```
:::
@@ -74,6 +107,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const checkList = ref(['选中且禁用', '复选框 A']);
return {
checkList,
};
},
});
</setup>
-->
```
:::
@@ -115,6 +164,40 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default defineComponent({
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cities.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cities.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
},
});
</setup>
-->
```
:::
@@ -144,6 +227,29 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default defineComponent({
setup() {
const state = reactive({
checkedCities: ['上海', '北京'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -190,6 +296,32 @@
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default defineComponent({
setup() {
const state = reactive({
checkboxGroup1: ['上海'],
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
cities: cityOptions,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -234,6 +366,30 @@
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::