uniapp 卡片勾选-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 卡片勾选。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

公司的app项目使用的uniapp，项目里有一个可勾选的卡片功能，效果图如下：
uniapp 卡片勾选,vue基础,uni-app,javascript,前端
找了一圈没找到什么太好的组件，于是就自己简单写了一个，记录一下。避免以后还会用到

代码

<template>
	<view class="card-selection">
		<checkbox-group @change="checkboxChange">
			<view v-for="(item, index) in checkboxList" :key="index">
				<!-- 顶部标题部分 -->
				<slot name="header" :row="item" :rowIndex="index"></slot>
				<label>
					<view v-if="item.checkboxShow" class="card-selection-item" :style="itemStyle">
						<!-- 左侧复选框 -->
						<view class="item1">
							<checkbox :value="item[rowKey]" :disabled="item.checkboxDisabled"
								:checked="item.checkboxChecked" />
						</view>
						<!-- 右侧自定义插槽内容 -->
						<view class="item2">
							<slot name="default" :row="item"></slot>
						</view>
					</view>
				</label>
			</view>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		props: {
			// 唯一值
			rowKey: {
				type: String,
				default: 'id'
			},
			// 样式
			itemStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 列表
				checkboxList: [],
				// 记录已经勾选了的数据
				hasCheckedList: []
			}
		},
		methods: {
			// 初始化
			init(list) {
				this.checkboxList = []
				// 添加选中、禁用、是否显示等属性
				list.forEach(item => {
					item.checkboxChecked = false
					item.checkboxDisabled = false
					item.checkboxShow = true
					this.checkboxList.push(item)
				})
			},
			// 复选框勾选
			checkboxChange(e) {
				this.hasCheckedList = e?.detail?.value || []
				//console.log("复选框勾选数据：", this.hasCheckedList)
				// 返回给父组件勾选的值
				const checkedList = this.checkboxList.filter(item => this.hasCheckedList.includes(item[this.rowKey]))
				// 修改被勾选的数据的checkboxChecked
				this.checkboxList.forEach(item => {
					item.checkboxChecked = this.hasCheckedList.includes(item[this.rowKey])
				})
				//console.log("数据列表：",this.checkboxList)
				this.$emit('checkboxChange', {
					checkedValueList: this.hasCheckedList,
					checkedList: checkedList
				})
				console.log("复选框勾选数据：", {
					checkedValueList: this.hasCheckedList,
					checkedList: checkedList
				})
			},
			// 复选框禁用逻辑
			checkboxDisabled(callback) {
				this.checkboxList.forEach(item => {
					item.checkboxDisabled = Boolean(callback(item))
				})
			},
			// 复选框勾选逻辑
			checkboxCheckd(callback) {
				this.checkboxList.forEach(item => {
					//console.log("复选框勾选：", item, callback(item))
					item.checkboxChecked = Boolean(callback(item))
				})
				// 自动勾选不会触发checkboxChange事件，这里需要手动更新
				let valueList = this.checkboxList.filter(item => item.checkboxChecked).map(item => item[this.rowKey])
				this.checkboxChange({
					detail:{
						value:valueList
					}
				})
				this.$forceUpdate()
			},
			// 清空勾选
			clearChecked() {
				this.checkboxList.forEach(item => {
					item.checkboxChecked = false
				})
				// 自动勾选不会触发checkboxChange事件，这里需要手动更新
				let valueList = this.checkboxList.filter(item => item.checkboxChecked).map(item => item[this.rowKey])
				this.checkboxChange({
					detail:{
						value:valueList
					}
				})
			},
			// 清空禁用
			clearDisabled() {
				this.checkboxList.forEach(item => {
					item.checkboxDisabled = false
				})
			},
			// 控制数据的显示和隐藏，用于可能出现数据筛选的情况
			showCheckboxData(callback) {
				this.checkboxList.forEach(item => {
					item.checkboxShow = Boolean(callback(item))
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.card-selection-item {
		padding: 10px;
		display: flex;

		.item1 {
			width: 30px;
			height: 30px;
			flex-shrink: 0;
		}

		.item2 {
			flex-shrink: 1;
			width: 100%;
		}
	}
</style>