小程序初始提交

cool-unix/pages/demo/form/checkbox.uvue

@@ -0,0 +1,163 @@
+<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>