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

1.最终效果预览

2.快速选择组件封装

<uv-cell :border="isShowBorder"><template v-slot:title><text class="title-key">{{ title }}</text></template><template v-slot:label><text style="font-size: 28rpx;color: #999;">{{content}}</text></template><template v-slot:value><view class="content"><view class="content-tag" v-for="(item, index) in showList" :key="index"><uv-tags :text="item.name" :plain="!item.checked" :name="index" shape="circle"@click="handleTagClick(index)"></uv-tags></view></view></template><template v-slot:right-icon><view class="content-tag" v-if="showList.length < list.length"><uv-icon size="30rpx" name="arrow-right" @click="showMoreOptions"></uv-icon></view></template></uv-cell>

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

3.弹框组件封装

<uv-popup ref="showPopup" mode="top"><view class="popup-content"><view class="popup-title">请选择</view><uv-radio-group v-model="selectedIndex" @change="handleRadioChange"><view v-for="(item, index) in list" :key="index" style="margin-right: 10px;"><uv-radio :name="index">{{ item.name }}</uv-radio></view></uv-radio-group><view class="popup-actions"><uv-button type="primary" @click="confirmSelection">确定</uv-button><uv-button @click="closePopup">取消</uv-button></view></view></uv-popup>

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

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'<RowSel :isShowBorder="true" :title="'维修大类'" :content="largeContent" :list="wxLargeAllList"@tagClick="radio1Click" @selectionConfirmed="tagMore1Click">
</RowSel>
<RowSel :title="'维修小类'" :content="smallContent" :list="wxSmallAllList" @tagClick="radio2Click"@selectionConfirmed="tagMore2Click">
</RowSel>const radio1Click = (index) => {}const radio2Click = (index) => {}const tagMore1Click = (index) => {radio1Click(index)}const tagMore2Click = (index) => {radio2Click(index)}

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