uniapp 弹框组件实现下拉列表

baibai_b

已于 2023-12-18 10:04:29 修改

阅读量732

点赞数 11

文章标签： javascript 前端 vue.js

于 2023-12-15 16:25:08 首次发布

本文链接：https://blog.csdn.net/baibai_b/article/details/135019951

版权

本文介绍了如何在Vue中使用TS编写一个子组件，实现卡池筛选功能，包括模板、属性绑定和事件处理。组件接受`drawTypeName`、`selectText`和`selectIndex`等props，并通过`itemClick`方法处理用户选择和关闭弹出框。

摘要由CSDN通过智能技术生成

子组件

<template>
    <view class="card-sift" @click="selectAllClick"> 卡池筛选:
        <view class="card-sift-btn"> {{ selectText }}
            <text :class="selectAll ? 'card-sift-icon' : 'card-sift-icon-top'"> </text>
            <uni-popup ref="popup" type="top" mask-background-color="rgba(0,0,0,0.0)" :animation="false">
                <view class="popup-box-bg">
                    <view class="popup-box">
                        <view class="popup-box-item" :style="{ 'background': selectIndex === index ? '#FF7F30' : '' }"
                            v-for="(item, index) in drawTypeName" :key="index" @click="itemClick(item, index)">
                            {{ item }}
                        </view>
                    </view>
                </view>

            </uni-popup>
        </view>
    </view>
</template>
  
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref, type ComponentPublicInstance } from 'vue';
defineProps({
    drawTypeName: {
        type: Array as PropType<string[]>,
        default() {
            return []
        }
    },
    selectText: {
        type: String,

    },
    selectIndex: {
        type: Number,
        default: 0,
    },
})
const emit = defineEmits([
    'changeTeltle', // 点击标题
    "update:selectText",
    "update:selectIndex"
])


const popup = ref<ComponentPublicInstance | null>(null)
const selectAll = ref(false)
// 卡池筛选按钮展示隐藏
const selectAllClick = () => {
    (popup.value as any)?.open()
    selectAll.value = !selectAll.value
}
//卡池筛选
const itemClick = (item: string, index: number) => {
    (popup.value as any)?.close()
    emit('changeTeltle', item)
    emit("update:selectText", item)
    emit("update:selectIndex", index)
}

</script>
  
<style lang="scss" scoped>
.card-sift {
    height: 85rpx;
    background: #F5F5F5;
    display: flex;
    font-size: 35rpx;
    font-weight: 500;
    align-items: center;
    padding-left: 40rpx;

    .card-sift-btn {
        font-size: 32rpx;
        font-weight: 500;
        display: flex;
        align-items: flex-end;
    }

    .card-sift-icon {
        margin-left: 8rpx;
        border-top: 22rpx solid #FF7F30;
        border-bottom: 8rpx solid transparent;
        border-left: 15rpx solid transparent;
        border-right: 15rpx solid transparent;
    }

    .card-sift-icon-top {
        margin-left: 8rpx;
        margin-bottom: 13rpx;
        border-bottom: 22rpx solid #FF7F30;
        border-left: 15rpx solid transparent;
        border-right: 15rpx solid transparent;
    }

    .popup-box-bg {
        margin: 146rpx 30rpx 0 30rpx;
        .popup-box {
            height: 500rpx;
            text-align: center;
            border-bottom-right-radius: 25rpx;
            border-bottom-left-radius: 25rpx;
            overflow: auto;
            box-shadow: 0 0rpx 10rpx rgba(0, 0, 0, .4);
            background: #fff;

            .popup-box-item {
                line-height: 73rpx;
                height: 73rpx;
                border-bottom: 2rpx #e0dede solid;
            }
        }
    }


}
</style>

父组件

   <cardBookAllDialog :drawTypeName="drawTypeName" @changeTeltle="changeTeltle" v-model:selectText="selectText"
        v-model:selectIndex="selectIndex">


//数据
const drawTypeName=ref([])
//选择的文本
const selectText=ref()
//选择的下标
const selectIndex=ref()

//卡池筛选列表
onLoad(() => {
  store.xxx.then((res) => {
    drawTypeName.value = res
//根据接口返回数据渲染列表

  })
})

const changeTeltle = (title: string) => {
  //选择后做的处理

}