复选框 Checkbox ​

<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-checkbox outlined label="苹果"></tm-checkbox>
				<tm-checkbox color="orange" label="香蕉"></tm-checkbox>
				<tm-checkbox color="green" label="其它水果"></tm-checkbox>
			</view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="选择组"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="str ? str : '请选择'"></tm-text>
			</view>
			<tm-checkbox :indeterminate="banxuan" v-model="allCheckbox" @change="allChange" :value="true" label="全选"></tm-checkbox>
			<tm-checkbox-group @change="boxlistchange" v-model="checkboxlist" direction="customCol">
				<tm-checkbox
					value="apple"
					label="苹果常规赋值测试3.2秒后观察自动选中结果常规赋值测试3.2秒后观察自动选中结果常规赋值测试3.2秒后观察自动选中结果"
				></tm-checkbox>
				<tm-checkbox color="orange" value="banner" label="香蕉"></tm-checkbox>
				<tm-checkbox color="pink" value="test" label="测试项"></tm-checkbox>
				<tm-checkbox color="green" value="other" label="其它水果"></tm-checkbox>
			</tm-checkbox-group>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="常规赋值测试3.2秒后观察自动选中结果"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="str2"></tm-text>
			</view>

			<tm-checkbox-group @change="boxlistchange" v-model="checkboxlist1">
				<tm-checkbox v-for="(item, index) in listvalue" :key="index" :value="item.value" :label="item.label"></tm-checkbox>
			</tm-checkbox-group>
		</tm-sheet>

		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="一些样式属性"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-checkbox :size="54" :fontSize="28" value="apple" label="大小"></tm-checkbox>
				<tm-checkbox :round="10" color="orange" value="banner" label="形状"></tm-checkbox>
				<tm-checkbox color="orange" disabled value="banner" label="禁用"></tm-checkbox>
				<tm-checkbox icon="tmicon-position-fill" color="green" value="other" label="选中图标"></tm-checkbox>
				<tm-checkbox :border="1" linear="bottom" :defaultChecked="true" color="green" value="other" label="渐变"></tm-checkbox>
				<tm-checkbox border-style="dashed" color="green" value="other" label="虚线边框"></tm-checkbox>
			</view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="选中前的勾子"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-checkbox :beforeChecked="beforeChecked" v-model="allCheckbox" value="88" label="异步选中"></tm-checkbox>
			</view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
import tmCheckboxGroup from '@/tmui/components/tm-checkbox-group/tm-checkbox-group.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const listvalue = ref([
	{ label: '香蕉', value: 'banner' },
	{ label: '数字1', value: 2 },
	{ label: '数字2', value: 8 },
	{ label: '其它', value: 'other' }
])
const checkboxlist1 = ref(['banner'])

const checkboxlist = ref(['banner'])
const str = computed(() => checkboxlist.value.join(' '))
const str2 = computed(() => checkboxlist1.value.join(','))
const banxuan = ref(true)
const allCheckbox = ref(false)
function allChange(e: boolean) {
	if (e == false) {
		checkboxlist.value = []
		banxuan.value = false
	} else if (e == true) {
		checkboxlist.value = ['apple', 'banner', 'test', 'other']
		banxuan.value = false
	}
}
function boxlistchange(e: Array<string>) {
	if (e.length == 0) {
		banxuan.value = false
		allCheckbox.value = false
	} else if (e.length == 4) {
		banxuan.value = false
		allCheckbox.value = true
	} else {
		banxuan.value = true
		allCheckbox.value = true
	}
}

function beforeChecked(e:any) {
	console.log(e)
	return new Promise((res) => {
		setTimeout(function () {
			
			res(true)
		}, 1000)
	})
}
checkboxlist1.value = [3, 4]
setTimeout(function () {
	listvalue.value = [
		{ label: '香蕉2', value: 3 },
		{ label: '其它3', value: 'other' },
		{ label: '其它34', value: 4 }
	]
}, 3200)

// console.log(uni.getSystemInfoSync())
</script>