复选框 Checkbox ​

<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-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="font-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">
				<tm-checkbox value="apple" label="苹果"></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="font-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="font-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="font-weight-b" label="选中前的勾子"></tm-text>
			<tm-divider></tm-divider>
			<view class=" flex flex-row flex-wrap">
				<tm-checkbox :beforChecked="beforChecked" 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 beforChecked(){
	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>