checkbox.uvue

<script>
	type ItemType = {
		value : string
		name : string
		checked : boolean
	}
	export default {
		data() {
			return {
				items: [
					{
						value: 'CHN',
						name: '中国',
						checked: true,
					},
					{
						value: 'USA',
						name: '美国',
						checked: false,
					},
					{
						value: 'BRA',
						name: '巴西',
						checked: false,
					},
					{
						value: 'JPN',
						name: '日本',
						checked: false,
					},
					{
						value: 'ENG',
						name: '英国',
						checked: false,
					},
					{
						value: 'FRA',
						name: '法国',
						checked: false,
					},
				] as ItemType[],

				text: '未选中',
				wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
				value: [] as string[],
				disabled: true,
				checked: true,
				color: '#007aff',
				// 组件属性 autotest
				checked_boolean: false,
				disabled_boolean: false,
				color_input: "#007aff",
				backgroundColor_input: "#ffffff",
				borderColor_input: "#d1d1d1",
				activeBackgroundColor_input: "#ffffff",
				activeBorderColor_input: "#d1d1d1",
				iconColor_input: "#007aff"
			}
		},
		methods: {
			checkboxChange: function (e : CheckboxGroupChangeEvent) {
				const selectedNames : string[] = []
				this.items.forEach((item) => {
					if (e.detail.value.includes(item.value)) {
						selectedNames.push(item.name)
					}
				})
				uni.showToast({
					icon: 'none',
					title: '当前选中:' + selectedNames.join(','),
				})
			},
			testChange: function (e : CheckboxGroupChangeEvent) {
				this.value = e.detail.value
			},
			checkbox_click() { console.log("组件被点击时触发") },
			checkbox_touchstart() { console.log("手指触摸动作开始") },
			checkbox_touchmove() { console.log("手指触摸后移动") },
			checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
			checkbox_touchend() { console.log("手指触摸动作结束") },
			checkbox_tap() { console.log("手指触摸后马上离开") },
			checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
			change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
			change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
			confirm_color_input(value : string) { this.color_input = value },
			confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
			confirm_borderColor_input(value : string) { this.borderColor_input = value },
			confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
			confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
			confirm_iconColor_input(value : string) { this.iconColor_input = value }
		}
	}
</script>

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
		<!-- #endif -->
	<view class="main">
		<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
			:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
			:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
			:iconColor="iconColor_input" @click="checkbox_click" @touchstart="checkbox_touchstart"
			@touchmove="checkbox_touchmove" @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend"
			@tap="checkbox_tap" @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
	</view>

		<view class="content nvue">
			<page-head title="组件属性"></page-head>
			<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
			<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
			<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
			<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
				@confirm="confirm_backgroundColor_input"></input-data>
			<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
				@confirm="confirm_borderColor_input"></input-data>
			<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
				@confirm="confirm_activeBackgroundColor_input"></input-data>
			<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
				@confirm="confirm_activeBorderColor_input"></input-data>
			<input-data defaultValue="#007aff" title="checkbox的图标颜色，优先级大于color属性" type="text"
				@confirm="confirm_iconColor_input"></input-data>
		</view>

		<view>
			<page-head title="默认及使用"></page-head>
			<view class="uni-padding-wrap uni-common-mt">
				<view class="uni-title uni-common-mt">
					<text class="uni-title-text"> 默认样式 </text>
				</view>
				<view>
					<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
						<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx" class="checkbox cb">选中
						</checkbox>
						<checkbox value="cb1" style="margin-right: 30rpx" class="checkbox cb1">{{ text }}</checkbox>
						<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
						<checkbox value="cb3" style="margin-top: 20rpx" class="checkbox cb3">
							{{ wrapText }}
						</checkbox>
					</checkbox-group>
				</view>
				<view class="uni-title uni-common-mt">
					<text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
				</view>
				<view>
					<checkbox-group class="uni-flex uni-row checkbox-group">
						<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
							class="checkbox">选中
						</checkbox>
						<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
					</checkbox-group>
				</view>
			</view>

			<view class="uni-padding-wrap">
				<view class="uni-title uni-common-mt">
					<text class="uni-title-text"> 推荐展示样式 </text>
				</view>
			</view>
			<view class="uni-list uni-common-pl">
				<checkbox-group @change="checkboxChange" class="checkbox-group">
					<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
						:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
						{{ item.name }}
					</checkbox>
				</checkbox-group>
			</view>
		</view>

		<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<style>
	.main {
		max-height: 500rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid rgba(0, 0, 0, .06);
		flex-direction: row;
		justify-content: center;
	}

	.main .list-item {
		width: 100%;
		height: 200rpx;
		border: 1px solid #666;
	}

	.uni-list-cell {
		justify-content: flex-start;
	}
</style>