164 lines
3.7 KiB
Plaintext
164 lines
3.7 KiB
Plaintext
<template>
|
|
<cl-page>
|
|
<view class="p-3">
|
|
<demo-item :label="t('基础用法')">
|
|
<view class="flex flex-row flex-wrap">
|
|
<cl-checkbox
|
|
v-model="checked2"
|
|
v-for="(item, index) in options"
|
|
:key="index"
|
|
:value="item.value"
|
|
:pt="{
|
|
className: 'mr-5'
|
|
}"
|
|
>
|
|
{{ item.label }}
|
|
</cl-checkbox>
|
|
</view>
|
|
</demo-item>
|
|
|
|
<demo-item :label="t('单个 true / false')">
|
|
<view class="flex flex-row items-center">
|
|
<cl-checkbox v-model="checked4">同意并阅读</cl-checkbox>
|
|
<cl-text color="primary">《用户协议》</cl-text>
|
|
|
|
<view class="flex-1"></view>
|
|
|
|
<cl-switch v-model="checked4"></cl-switch>
|
|
</view>
|
|
</demo-item>
|
|
|
|
<demo-item :label="t('纵向排列')">
|
|
<cl-checkbox
|
|
v-model="checked"
|
|
v-for="(item, index) in options"
|
|
:key="index"
|
|
:value="item.value"
|
|
:pt="{
|
|
className: parseClass([
|
|
'py-2',
|
|
[
|
|
isVerticalCustom,
|
|
'justify-between border border-solid border-surface-200 rounded-lg p-2 !my-1'
|
|
]
|
|
])
|
|
}"
|
|
>
|
|
{{ item.label }}
|
|
</cl-checkbox>
|
|
|
|
<cl-list
|
|
border
|
|
:pt="{
|
|
className: 'mt-2'
|
|
}"
|
|
>
|
|
<cl-list-item :label="t('换个样式')">
|
|
<cl-switch v-model="isVerticalCustom"></cl-switch>
|
|
</cl-list-item>
|
|
</cl-list>
|
|
</demo-item>
|
|
|
|
<demo-item :label="t('自定义')">
|
|
<view class="mb-3 flex flex-row flex-wrap">
|
|
<cl-checkbox
|
|
v-model="checked3"
|
|
v-for="(item, index) in options"
|
|
:key="index"
|
|
:value="item.value"
|
|
:disabled="isDisabled"
|
|
:show-icon="!isHideIcon"
|
|
:active-icon="isIcon ? 'heart-fill' : 'checkbox-line'"
|
|
:inactive-icon="isIcon ? 'heart-line' : 'checkbox-blank-line'"
|
|
:pt="{
|
|
className: parseClass([
|
|
'mr-5',
|
|
[isCustom, 'bg-surface-100 py-2 px-3 rounded-lg !mr-2 !mb-2'],
|
|
{
|
|
'!bg-surface-700': isDark && isCustom
|
|
}
|
|
]),
|
|
icon: {
|
|
className: parseClass([
|
|
[
|
|
isCustom && checked3.includes(item.value as string),
|
|
'text-red-500'
|
|
]
|
|
])
|
|
},
|
|
label: {
|
|
className: parseClass([
|
|
[
|
|
isCustom && checked3.includes(item.value as string),
|
|
'text-red-500'
|
|
]
|
|
])
|
|
}
|
|
}"
|
|
>
|
|
{{ item.label }}
|
|
</cl-checkbox>
|
|
</view>
|
|
|
|
<cl-list border>
|
|
<cl-list-item :label="t('换个图标')">
|
|
<cl-switch v-model="isIcon"></cl-switch>
|
|
</cl-list-item>
|
|
|
|
<cl-list-item :label="t('不显示图标')">
|
|
<cl-switch v-model="isHideIcon"></cl-switch>
|
|
</cl-list-item>
|
|
|
|
<cl-list-item :label="t('禁用')">
|
|
<cl-switch v-model="isDisabled"></cl-switch>
|
|
</cl-list-item>
|
|
|
|
<cl-list-item :label="t('其他样式')">
|
|
<cl-switch v-model="isCustom"></cl-switch>
|
|
</cl-list-item>
|
|
</cl-list>
|
|
</demo-item>
|
|
</view>
|
|
</cl-page>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import DemoItem from "../components/item.uvue";
|
|
import { useUi, type ClCheckboxOption } from "@/uni_modules/cool-ui";
|
|
import { isDark, parseClass } from "@/cool";
|
|
import { t } from "@/locale";
|
|
|
|
const ui = useUi();
|
|
|
|
const isIcon = ref(false);
|
|
const isCustom = ref(false);
|
|
const isDisabled = ref(false);
|
|
const isHideIcon = ref(false);
|
|
const isVerticalCustom = ref(false);
|
|
|
|
const checked = ref<string[]>([]);
|
|
const checked2 = ref<string[]>(["2"]);
|
|
const checked3 = ref<string[]>(["2", "3"]);
|
|
const checked4 = ref(false);
|
|
|
|
const options = ref<ClCheckboxOption[]>([
|
|
{
|
|
label: "Vue",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "React",
|
|
value: "2"
|
|
},
|
|
{
|
|
label: "Angular",
|
|
value: "3"
|
|
},
|
|
{
|
|
label: "Svelte",
|
|
value: "4"
|
|
}
|
|
]);
|
|
</script>
|