uniApp实战五：自定义组件实现便捷选择

1.最终效果预览

2.快速选择组件封装

基于 uv-ui 的行组件实现的快速选择，默认展示前三个值

3.弹框组件封装

		
			请选择
			
				
					{{ item.name }}
				
			
			
				确定
				取消
			
		
	

这两个放一个页面了，没必要再单独封装一个弹框组件了

4.组件逻辑实现

import {
		defineProps,
		defineEmits,
		computed,
		ref
	} from 'vue'

	const props = defineProps({
		isShowBorder: {
			type: Boolean,
			required: true
		},
		title: {
			type: String,
			required: true
		},
		content: {
			type: String,
			required: true
		},
		list: {
			type: Array,
			required: true
		},

		maxShow: {
			type: Number,
			default: 3
		}
	})
	const emit = defineEmits(['tagClick', 'tagMoreClick', 'selectionConfirmed'])
	const showList = computed(() => {
		return props.list.slice(0, props.maxShow)
	})
	const allList = computed(() => {
		return props.list
	})


	const handleTagClick = (index) => {
		emit('tagClick', index)
	}
	const handleMoreClick = () => {
		emit('tagMoreClick')
	}


	const showPopup = ref()
	const selectedIndex = ref({})
	const showMoreOptions = () => {
		showPopup.value.open()
	}
	const handleRadioChange = (index) => {
		selectedIndex.value = index
	}
	const confirmSelection = () => {
		emit('selectionConfirmed', selectedIndex.value)
		closePopup()
	}

	const closePopup = () => {
		showPopup.value.close()
	}

5.组件样式

.title-key {
		width: 150rpx;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
	}

	.content-tag {
		margin: 0 0 10rpx 10rpx;
	}

	.popup-content {
		padding: 20rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.popup-actions {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
	}

6.页面引入

import RowSel from '@/components/rowSel.vue'







    const radio1Click = (index) => {

	}

	const radio2Click = (index) => {

	}

	const tagMore1Click = (index) => {
		radio1Click(index)
	}
	const tagMore2Click = (index) => {
		radio2Click(index)
	}

在点击事件中实现自己的逻辑选择即可