uniapp+ts模仿popup弹出框（下拉框）

效果图（未展开的样子）：

效果图（展开的样子）：

子组件代码：

2. <!--
3. * @Date: 2024-04-26 14:30:00
4. * @LastEditTime: 2025-05-29 09:01:06
5. * @Description: 技术服务
6. -->
7. <template>
8.     <view class="reg-info">
9.         <view class="item-class">
10.             <view class="title-region flex-center-start" @click="arrowClick()">
11.                 <view class="title">{{ currentDate }}</view>
12.                 <view class="arrow-region">
13.                     <view class="iconfont icon-arrow-chevron-down1" />
14.                 </view>
15.             </view>
16.             <view class="content-region" :style="{ height: showSelect ? `${dateContBgHeight}vh` : '0' }">
17.                 <view class="content-region-cont" :style="{ height: showSelect ? `${dateContHeight}rpx` : '0' }">
18.                     <view class="content-item-box">
19.                         <view
20.                             v-for="(item, index) in dateList"
21.                             :key="index"
22.                             class="content-item flex-column-center"
23.                             :class="{ selected: item.date === currentDate }"
24.                             @click="selectDate(item)"
25.                         >
26.                             <view class="server-order-week">
27.                                 {{ item.week }}
28.                             </view>
29.                             <view class="server-order-date">
30.                                 {{ item.date }}
31.                             </view>
32.                             <view class="server-order-num"> （12） </view>
33.                         </view>
34.                     </view>
35.                 </view>
36.             </view>
37.         </view>
38.     </view>
39. </template>
41. <script setup lang="ts">
42. import { ref } from 'vue';
43. import { formatDateAsMD } from '@/utils/DateUtils';
44. // 星期映射表
45. const WEEKDAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
47. const currentDate = ref(formatDateAsMD(new Date())); // 默认今日日期
48. const showSelect = ref(true); //下拉框
49. const dateContBgHeight = ref(100); //遮罩层
50. const dateContHeight = ref(584); //484白色弹框
51. // 获取当前日期对象
52. const today = new Date();
53. // 用于存储日期的数组 - 修改为对象数组格式
54. const dateList = ref<{ week: string; date: string }[]>([]);
56. // 填充前4天的日期
57. for (let i = 4; i > 0; i--) {
58.     const tempDate = new Date(today.getTime() - i * 24 * 60 * 60 * 1000);
59.     const month = (tempDate.getMonth() + 1).toString().padStart(2, '0');
60.     const day = tempDate.getDate().toString().padStart(2, '0');
61.     const week = WEEKDAYS[tempDate.getDay()]; // 获取星期几
62.     dateList.value.push({
63.         week,
64.         date: `${month}.${day}`,
65.     });
66. }
68. // 填充今天的日期
69. const todayMonth = (today.getMonth() + 1).toString().padStart(2, '0');
70. const todayDay = today.getDate().toString().padStart(2, '0');
71. const todayWeek = WEEKDAYS[today.getDay()]; // 获取今天星期几
72. dateList.value.push({
73.     week: todayWeek,
74.     date: `${todayMonth}.${todayDay}`,
75. });
77. // 填充后11天的日期
78. for (let i = 1; i <= 11; i++) {
79.     const tempDate = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
80.     const month = (tempDate.getMonth() + 1).toString().padStart(2, '0');
81.     const day = tempDate.getDate().toString().padStart(2, '0');
82.     const week = WEEKDAYS[tempDate.getDay()]; // 获取星期几
83.     dateList.value.push({
84.         week,
85.         date: `${month}.${day}`,
86.     });
87. }
89. const arrowClick = () => {
90.     showSelect.value = !showSelect.value;
91. };
93. // 新增日期选择方法
94. const selectDate = (item: { week: string; date: string }) => {
95.     currentDate.value = item.date;
96.     showSelect.value = false;
97. };
98. </script>
99. <style lang="scss">
100. // @import './index.scss';
101. .reg-info {
102.     height: auto;
103.     background: #fff;
104.     padding: 40rpx 0 0 0;
105.     .item-class {
106.         &:nth-child(n + 2) {
107.             margin: 40rpx 0 0 0;
108.         }
109.         .title-region {
110.             padding: 0 30rpx;
111.             position: absolute;//父组件最外层div设置position: relative;
112.             height: 45rpx;
113.             font-family: DINAlternate, DINAlternate;
114.             font-weight: bold;
115.             font-size: 28rpx;
116.             color: #13161b;
117.             line-height: 32rpx;
118.         }
119.         .content-region {
120.             width: 100%;
121.             background: rgba(0, 0, 0, 0.5);
122.             margin: 20rpx 0 0 0;
123.             overflow: hidden;
124.             position: absolute;
125.             left: 0;
126.             top: 61rpx;
127.             height: 0rpx;
128.             .content-region-cont {
129.                 height: 0rpx;
130.                 padding: 20rpx 40rpx;
131.                 background: #ffffff;
132.                 transition: all 0.38s;
133.             }
134.         .content-item-box {
135.             display: grid;
136.             grid-template-columns: repeat(4, 1fr);//固定显示4个
137.         }
138.         .content-item {
139.             border: 2rpx solid rgba(151, 151, 151, 0.2);
140.             margin-left: -2rpx; /* 抵消相邻边框 */
141.             margin-top: -2rpx; /* 抵消相邻边框 */
142.             padding: 4rpx 0;
143.             height: 110rpx;
144.             box-sizing: border-box;
145.             position: relative;
146.             z-index: 1;
147.         }
148.       /* 处理边缘边框 */
149.         .content-item:nth-child(4n + 1) {
150.             margin-left: 0;
151.         }
152.         .content-item:nth-child(-n + 4) {
153.             margin-top: 0;
154.         }
155.             .selected {
156.                 color: rgba(255, 167, 38, 1);
157.             border-color: rgba(255, 167, 38, 1);
158.             background: rgba(255, 233, 179, 0.20);
159.             z-index: 2;
160.             }
161.         }
162.     }
163. }
164. </style>

复制代码

 父组件代码

2. <template>
3.    <view class="service-order">     
4.        <view class="service-order-filter flex">
5.             <timeSelect />
6.         </view>
7.    </view>
8. </template>
10. <script setup lang="ts">
11.     import timeSelect from '@/components/time-select/time-select.vue';//引入子组件
12. </script>
14. <style lang="scss">
15. .service-order {
16.     width: 100vw;
17.     background: #f1f2f5;
18.     box-sizing: border-box;
19.     position: relative;//父组件一定要定义
20.     .service-order-filter{
21.         width: 100%;
22.         background: #fff;
23.         position: sticky;
24.         height: 80rpx;
25.         top: 0;
26.         left: 0;
27.     }
28. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告