Skip to content

Commit

Permalink
chore(checkbox): split demo (#2844)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Jan 16, 2024
1 parent 827a486 commit ec8d47a
Show file tree
Hide file tree
Showing 30 changed files with 634 additions and 1,294 deletions.
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<nut-cell>
<nut-checkbox v-model="val1"> Right </nut-checkbox>
<nut-checkbox v-model="val2" text-position="left"> Left </nut-checkbox>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val1 = ref(true);
const val2 = ref(false);
</script>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/disabled.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<nut-cell>
<nut-checkbox v-model="val1" disabled> checked </nut-checkbox>
<nut-checkbox v-model="val2" disabled> unchecked </nut-checkbox>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val1 = ref(true);
const val2 = ref(false);
</script>
12 changes: 12 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/event.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<nut-cell>
<nut-checkbox v-model="val" @change="change"> Change </nut-checkbox>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(false);
const change = (state) => {
console.log(state);
};
</script>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/group-disabled.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-cell>
<nut-checkbox-group v-model="val" disabled>
<nut-checkbox label="1"> A </nut-checkbox>
<nut-checkbox label="2"> B </nut-checkbox>
<nut-checkbox label="3"> C </nut-checkbox>
<nut-checkbox label="4"> D </nut-checkbox>
</nut-checkbox-group>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(['2', '3']);
</script>
15 changes: 15 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/group.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<nut-cell>
<nut-checkbox-group v-model="val">
<nut-checkbox label="1"> A </nut-checkbox>
<nut-checkbox label="2"> B </nut-checkbox>
<nut-checkbox label="3"> C </nut-checkbox>
<nut-checkbox label="4"> D </nut-checkbox>
</nut-checkbox-group>
</nut-cell>
<nut-cell> {{ val }} </nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(['2', '3']);
</script>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/icon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-cell>
<nut-checkbox v-model="val">
Icon
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-checkbox>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
import { Checklist } from '@nutui/icons-vue-taro';
const val = ref(false);
</script>
9 changes: 9 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/indeterminate.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<nut-cell>
<nut-checkbox v-model="val" indeterminate> Indeterminate </nut-checkbox>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(false);
</script>
272 changes: 74 additions & 198 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,209 +1,85 @@
<template>
<Demo>
<nut-cell-group title="基础用法-左右">
<nut-cell>
<nut-checkbox v-model="data.checkbox1" label="复选框" @change="changeBox1">复选框</nut-checkbox>
</nut-cell>
<nut-cell>
<nut-checkbox v-model="data.checkbox2" text-position="left" @change="changeBox2">复选框</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="半选状态">
<nut-cell>
<nut-checkbox v-model="data.checkbox9" :indeterminate="true" label="复选框">复选框</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="禁用状态">
<nut-cell>
<nut-checkbox v-model="data.checkbox3" disabled>未选时禁用状态</nut-checkbox>
</nut-cell>
<nut-cell>
<nut-checkbox v-model="data.checkbox4" disabled>选中时禁用状态</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="自定义尺寸">
<nut-cell>
<nut-checkbox v-model="data.checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
</nut-cell>
<nut-cell>
<nut-checkbox v-model="data.checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="自定义图标">
<nut-cell>
<nut-checkbox v-model="data.checkbox7"
>自定义图标
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="点击触发change事件">
<nut-cell>
<nut-checkbox v-model="data.checkbox8" @change="changeBox3">change复选框</nut-checkbox>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="checkboxGroup使用">
<nut-cell>
<nut-checkbox-group v-model="data.checkboxgroup1">
<nut-checkbox label="1">组合复选框</nut-checkbox>
<nut-checkbox label="2">组合复选框</nut-checkbox>
<nut-checkbox label="3">组合复选框</nut-checkbox>
<nut-checkbox label="4">组合复选框</nut-checkbox>
</nut-checkbox-group>
</nut-cell>
<nut-cell>
<div class="demo-check">当前选中值</div>
<div>{{ data.checkboxgroup1 }}</div>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="checkboxGroup禁用">
<nut-cell>
<nut-checkbox-group v-model="data.checkboxgroup2" disabled>
<nut-checkbox label="1">组合复选框</nut-checkbox>
<nut-checkbox label="2">组合复选框</nut-checkbox>
<nut-checkbox label="3">组合复选框</nut-checkbox>
<nut-checkbox label="4">组合复选框</nut-checkbox>
</nut-checkbox-group>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="checkboxGroup 全选/取消">
<nut-cell>
<nut-checkbox-group ref="group" v-model="data.checkboxgroup3" @change="changeBox4">
<nut-checkbox v-for="item in data.checkboxsource" :key="item.label" :label="item.label">{{
item.value
}}</nut-checkbox>
</nut-checkbox-group>
</nut-cell>
<nut-cell>
<nut-button type="primary" style="margin: 0 10px 0 0" @click="toggleAll(true)">全选</nut-button>
<nut-button type="info" style="margin: 0 10px 0 0" @click="toggleAll(false)">取消</nut-button>
<nut-button type="warning" @click="toggleReverse()">反选</nut-button>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="checkboxGroup使用，限制最大可选数（2个）">
<nut-cell>
<nut-checkbox-group v-model="data.checkboxgroup4" :max="2">
<nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
<nut-checkbox label="2">组合复选框</nut-checkbox>
<nut-checkbox label="3" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox>
<nut-checkbox label="4">组合复选框</nut-checkbox>
</nut-checkbox-group>
</nut-cell>
<nut-cell>
<div class="demo-check">当前选中值</div>
<div>{{ data.checkboxgroup4 }}</div>
</nut-cell>
</nut-cell-group>
<nut-cell-group title="全选/半选/取消">
<nut-cell>
<nut-checkbox v-model="data.checkbox10" :indeterminate="data.indeterminate" @change="changeBox5"
>全选</nut-checkbox
>
</nut-cell>
<nut-checkbox-group ref="group2" v-model="data.checkboxgroup5" @change="changeBox6">
<nut-cell><nut-checkbox label="1" style="margin: 2px 20px 0 0">组合复选框</nut-checkbox></nut-cell>
<nut-cell><nut-checkbox label="2">组合复选框</nut-checkbox></nut-cell>
<nut-cell><nut-checkbox label="3">组合复选框</nut-checkbox></nut-cell>
<nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
</nut-checkbox-group>
</nut-cell-group>
<nut-cell-group title="按钮形状">
<nut-cell>
<nut-checkbox-group v-model="data.checkboxgroup6">
<nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
<nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
</nut-checkbox-group>
</nut-cell>
</nut-cell-group>
</Demo>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue';
import { Checklist } from '@nutui/icons-vue-taro';
<h2>{{ t('basic') }}</h2>
<Basic />

const group = ref(null) as Ref;
const group2 = ref(null) as Ref;
const data = reactive({
checkbox1: true,
checkbox2: false,
checkbox3: false,
checkbox4: true,
checkbox5: false,
checkbox6: false,
checkbox7: false,
checkbox8: false,
checkbox9: true,
checkbox10: false,
checkboxgroup1: ['2', '3'],
checkboxgroup2: ['2'],
checkboxgroup3: ['2'],
checkboxgroup4: ['2'],
checkboxgroup5: [],
checkboxgroup6: [],
checkboxsource: [
{ label: '1', value: '组合复选框' },
{ label: '2', value: '组合复选框' },
{ label: '3', value: '组合复选框' },
{ label: '4', value: '组合复选框' },
{ label: '5', value: '组合复选框' },
{ label: '6', value: '组合复选框' }
],
indeterminate: false
});
const changeBox1 = (state: boolean, label: string) => {
console.log(state, label);
};
<h2>{{ t('indeterminate') }}</h2>
<Indeterminate />

const changeBox2 = (state: boolean, label: string) => {
console.log(state, label);
};
<h2>{{ t('disabled') }}</h2>
<Disabled />

const changeBox3 = (state: boolean, label: string) => {
console.log(`${state ? '选中' : '取消'} ${label}`);
};
<h2>{{ t('size') }}</h2>
<Size />

const changeBox4 = (label: any[]) => {
console.log(label);
};
<h2>{{ t('icon') }}</h2>
<IconDemo />

const changeBox5 = (value: boolean) => {
group2.value.toggleAll(value);
};
<h2>{{ t('event') }}</h2>
<Event />

const changeBox6 = (label: string[]) => {
if (label.length === 4) {
data.indeterminate = false;
data.checkbox10 = true;
} else if (label.length && label.length < 4) {
data.indeterminate = true;
} else {
data.indeterminate = false;
data.checkbox10 = false;
}
};
<h2>{{ t('group') }}</h2>
<Group />

const toggleAll = (f: boolean) => {
console.log(`${f ? '全选' : '取消'}`);
group.value.toggleAll(f);
};
<h2>{{ t('groupDisabled') }}</h2>
<GroupDisabled />

const toggleReverse = () => {
console.log(`反选`);
group.value.toggleReverse();
};
</script>
<style lang="scss">
.demo-check {
margin-right: 10px;
}
.nut-checkbox-group {
display: flex;
flex-wrap: wrap;
}
.nut-checkbox {
.nut-checkbox__label {
margin-left: 10px;
<h2>{{ t('methods') }}</h2>
<Methods />

<h2>{{ t('max') }}</h2>
<Max />

<h2>{{ t('methods2') }}</h2>
<Methods2 />

<h2>{{ t('shape') }}</h2>
<Shape />
</Demo>
</template>
<script setup lang="ts">
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Indeterminate from './indeterminate.vue';
import Disabled from './disabled.vue';
import Size from './size.vue';
import IconDemo from './icon.vue';
import Event from './event.vue';
import Group from './group.vue';
import GroupDisabled from './group-disabled.vue';
import Methods from './methods.vue';
import Max from './max.vue';
import Methods2 from './methods2.vue';
import Shape from './shape.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
indeterminate: '半选状态',
disabled: '禁用状态',
size: '自定义尺寸',
icon: '自定义图标',
event: 'Change 事件',
group: 'CheckboxGroup',
groupDisabled: 'CheckboxGroup 禁用',
methods: 'CheckboxGroup 方法',
max: 'CheckboxGroup 限制最大可选数',
methods2: '全选/半选/取消',
shape: '按钮形状'
},
'en-US': {
basic: 'Basic Usage',
indeterminate: 'Indeterminate',
disabled: 'Disabled',
size: 'Custom Size',
icon: 'Custom Icon',
event: 'Change Event',
group: 'CheckboxGroup',
groupDisabled: 'Disabled CheckboxGroup',
methods: 'Checkboxgroup Methods',
max: 'CheckboxGroup Limit the maximum number of options',
methods2: 'Select all / half / cancel',
shape: 'Button Shape'
}
}
</style>
});
</script>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/checkbox/max.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-cell>
<nut-checkbox-group v-model="val" :max="2">
<nut-checkbox label="1"> A </nut-checkbox>
<nut-checkbox label="2"> B </nut-checkbox>
<nut-checkbox label="3"> C </nut-checkbox>
<nut-checkbox label="4"> D </nut-checkbox>
</nut-checkbox-group>
</nut-cell>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(['2', '3']);
</script>
Loading

0 comments on commit ec8d47a

Please sign in to comment.