vue3+ts+uniapp小程序端自定义日期选择器基于内置组件picker-view + 扩展组件 Popup 实现自定义日期选择及其他单列选择

news2024/11/23 23:44:07

vue3+ts 基于内置组件picker-view + 扩展组件 Popup 实现自定义日期选择及单列选择

vue3+ts+uniapp小程序端自定义日期选择器

  • 1.先上效果图
  • 2.代码展示
    • 2.1 组件
    • 2.2 公共方法处理日期
    • 2.3 使用组件(全局自动导入的情况)
  • 3.注意事项
    • 3.1`refSelectDialog`
    • 3.1 `backgroundColor="#fff"` 圆角问题 (已优化)

自我记录

1.先上效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/48ecbb2775794a7cbec358e2c4017a3a.png
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

直接上代码

2.代码展示

2.1 组件

src\components\hbcy-popup.vue

<script setup lang="ts">
import type { Item, PopupType } from '@/types/addInfo'
import { formatDate, parseDate } from '@/utils'
import { onMounted } from 'vue'
import { ref } from 'vue'

const props = defineProps<{
  popupTitle: string
  type: PopupType
  data?: Item[] // 展示数据List
  selectData: string | number // 默认显示 '2023-8-24' || 0
}>()
const emit = defineEmits<{
  (e: 'confirm-popup', params: string | number): void
  (e: 'close-popup'): void
}>()

// 创建选择区间 参考uni文档
const date = new Date()
// 年月日
const TYPEYY_MM_DD = props.type === 'year' || props.type === 'month' || props.type === 'day'
// 月日
const TYPEMM_DD = props.type === 'month' || props.type === 'day'
const TYPEYY = props.type === 'year'
const TYPEMM = props.type === 'month'
const TYPEDD = props.type === 'day'
const TYPESingle = props.type === 'single'
const years = TYPEYY_MM_DD
  ? Array.from({ length: date.getFullYear() - 1989 }, (_, index) => 1990 + index)
  : []
const months = TYPEMM_DD ? Array.from({ length: 12 }, (_, index) => index + 1) : []
const days = TYPEDD ? Array.from({ length: 31 }, (_, index) => index + 1) : []
// 处理默认展示的时间
const defaultDate = TYPEYY_MM_DD ? parseDate(props.selectData as string, props.type) : []
// 单列数据
const singleList = ref(TYPESingle ? props.data : [])
const singleSelect = ref<number>((props.selectData as number) || 0)
// 确保默认时间
const year = ref<number>(defaultDate[0])
const month = ref<number | undefined>(defaultDate[1])
const day = ref<number | undefined>(defaultDate[2])
// 区分日期展示
let showValueList: number[] = []
// 展示日期的选中时间
if (TYPEDD) {
  showValueList = [
    years.indexOf(defaultDate[0]),
    months.indexOf(defaultDate[1]!),
    days.indexOf(defaultDate[2]!),
  ]
} else if (TYPEMM) {
  showValueList = [years.indexOf(defaultDate[0]), months.indexOf(defaultDate[1]!)]
} else if (TYPEYY) {
  showValueList = [years.indexOf(defaultDate[0])]
} else if (TYPESingle) {
  showValueList = [singleSelect.value]
}
const valueList = ref<number[]>()
onMounted(() => {
  // 确保回显的value 在 页面渲染之后
  valueList.value = showValueList
})

// 切换事件
const bindChange: UniHelper.PickerViewOnChange = (e) => {
  const val = e.detail.value

  if (TYPEYY_MM_DD) {
    year.value = years[val[0]]
    month.value = months[val[1]]
    day.value = days[val[2]]
  } else {
    // 单列
    singleSelect.value = val[0]
  }
}
// 确定按钮
const onClickConfirmPopup = (): void => {
  if (TYPEYY_MM_DD) {
    emit('confirm-popup', formatDate(year.value, month.value, day.value))
  } else {
    // 单列
    emit('confirm-popup', singleSelect.value)
  }
  onClosePopup()
}
// 关闭弹出层
const onClosePopup = (): void => {
  emit('close-popup')
}
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="selectBox">
    <view class="selectTitle">
      <text class="cancel" @click="onClosePopup">取消</text>
      <text class="title">{{ '选择' + popupTitle }}</text>
      <text class="cancel ok" @click="onClickConfirmPopup">确定</text>
    </view>
    <block v-if="TYPEYY_MM_DD">
      <picker-view
        :immediate-change="true"
        indicator-class="indicatorClass"
        :value="valueList"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index">{{ item }}</view>
        </picker-view-column>
        <picker-view-column v-if="TYPEMM_DD">
          <view class="item" v-for="(item, index) in months" :key="index">{{ item }}</view>
        </picker-view-column>
        <picker-view-column v-if="TYPEDD">
          <view class="item" v-for="(item, index) in days" :key="index">{{ item }}</view>
        </picker-view-column>
      </picker-view>
    </block>
    <!-- TODO -->
    <block v-else>
      <picker-view
        :immediate-change="true"
        indicator-class="indicatorClass"
        :value="valueList"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="item in singleList" :key="item.key">{{ item.value }}</view>
        </picker-view-column>
      </picker-view>
    </block>
    <!-- 修复启用:safeArea="true" 时 圆角不好实现问题,现在是自己做的适配-->
    <view :style="{ height: safeAreaInsets?.bottom + 'px' }" style="width: 100%" />
  </view>
</template>
<style lang="scss" scoped>
::v-deep.indicatorClass {
  height: 100rpx;
}
.picker-view {
  width: 750rpx;
  height: 500rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.selectBox {
  width: 100%;
  height: fit-content;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  .selectTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    font-size: 32rpx;
    .title {
      font-size: 32rpx;
    }
    .cancel {
      width: 160rpx;
      text-align: center;
      color: #ff976a;
      font-size: 32rpx;
    }
    .ok {
      font-size: 32rpx;
      color: #07c160;
    }
  }
}
</style>

2.2 公共方法处理日期

src\utils\index.ts

// 将 yyyy-mm-dd 的字符串 2023-08-24 => [2023,8,24] || [2023,8] || [2023]
export function parseDate(dateString: string, type: string): [number, number?, number?] {
  const date = dateString ? new Date(dateString) : new Date()
  const year = date.getFullYear()
  const month = type === 'day' || type === 'month' ? date.getMonth() + 1 : undefined
  const day = type === 'day' ? date.getDate() : undefined
  return [year, month, day]
}

// 将数字格式的年、月、日转换成格式为 yyyy-mm-dd 的字符串 || yyyy-mm || yyyy
export function formatDate(year: number, month?: number, day?: number): string {
  const formattedMonth = month !== undefined ? (month < 10 ? `0${month}` : `${month}`) : ''
  const formattedDay = day !== undefined ? (day < 10 ? `0${day}` : `${day}`) : ''
  return `${year}${formattedMonth ? `-${formattedMonth}` : ''}${
    formattedDay ? `-${formattedDay}` : ''
  }`
}
// 获取当前年月日并返回yyyy-mm-dd格式
export function getCurrentDate(): string {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = (currentDate.getMonth() + 1).toString().padStart(2, '0')
  const day = currentDate.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}

2.3 使用组件(全局自动导入的情况)

全局自动导入看(https://blog.csdn.net/zhgweb/article/details/132499886?spm=1001.2014.3001.5502 第11标题
没有配置全局自动导入的需要自己手动引入!
src\pages\test\index.vue

<script setup lang="ts">
import type { Ref } from 'vue'
import { ref } from 'vue'
import { getCurrentDate } from '@/utils'
type Item = {
  key: number | string
  value: string
}

// 日期相关
const isShowPopop = ref(false)
// 弹出层实例
const refSelectDialog: Ref<UniHelper.UniPopup | null> = ref(null)
const dateTime = ref(getCurrentDate()) // 默认显示当前时间
// 单列相关
let list = [
  { key: 1, value: '最高' },
  { key: 2, value: '最低' },
  { key: 3, value: '自定义' },
]
const singleList = ref<Item[]>(list)
const singleSelect = ref(0)
const isShowSingPopop = ref(false)
const selectItem = ref<Item>(singleList.value[singleSelect.value]) // 默认选中

// 打开日期弹窗 or 单列
const onClickPopup = (type?: string) => {
  refSelectDialog.value!.open()
  if (type === 'single') {
    isShowSingPopop.value = true
  } else {
    isShowPopop.value = true
  }
}
// 关闭弹窗
const onClosePopup = () => {
  refSelectDialog.value!.close()
  isShowPopop.value = false
  isShowSingPopop.value = false
}
// 确定日期弹窗
const onConfirmPopup = (val: string | number, type: string) => {
  if (type === 'single') {
    singleSelect.value = val as number
    selectItem.value = singleList.value[singleSelect.value]
    console.log(selectItem.value, 'singleSelect')
  } else {
    dateTime.value = val as string
    console.log(dateTime.value, 'dateTime.value')
  }
}
</script>

<template>
  <view class="test-page">
    <!-- 使用组件 -->
    <uni-popup
      ref="refSelectDialog"
      type="bottom"
      :maskClick="false"
      :isMaskClick="false"
      :safeArea="false"
      :close="onClosePopup"
    >
      <hbcy-popup
        v-if="isShowPopop"
        popup-title="日期"
        type="day"
        :select-data="dateTime"
        @confirm-popup="onConfirmPopup($event, 'dateTime')"
        @close-popup="onClosePopup"
      />
      <hbcy-popup
        v-if="isShowSingPopop"
        popup-title="社保基数"
        type="single"
        :data="singleList"
        :select-data="singleSelect"
        @confirm-popup="onConfirmPopup($event, 'single')"
        @close-popup="onClosePopup"
      />
    </uni-popup>
  </view>
</template>
<style lang="scss" scoped>
.test-page {
  .item-date {
    width: 300rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #999;
    font-size: 28rpx;

    &-placeholder {
      color: #999;
    }

    &-txt {
      color: #333;
    }
  }
}
</style>

3.注意事项

3.1refSelectDialog

// 弹出层实例
const refSelectDialog: Ref<UniHelper.UniPopup | null> = ref(null)
  • ts类型有一些问题,找了好久不知道该给什么类型!!! 新手TS,有大佬的话请指出,感谢!

3.1 backgroundColor="#fff" 圆角问题 (已优化)

<uni-popup backgroundColor="#fff" />  // 可以不加了
  • 因为默认是开启适配的,需要加上背景色,否则就是透明的底部区域
  • 示例如下:
  • 在这里插入图片描述
  • 源码查看
  • 在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    整理不易,如有转载请备注原文地址!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/959939.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python做数据分析更快,为什么很多人只学Excel,不学Python?

在当今信息时代&#xff0c;数据分析已经成为了各个行业不可或缺的工作内容。而在数据分析中&#xff0c;Excel一直是最常被使用的工具之一。然而&#xff0c;随着Python编程的兴起&#xff0c;越来越多的数据分析师开始转向Python进行数据分析。本文将从速度、灵活性、可视化和…

跳转语句(个人学习笔记黑马学习)

break语句 #include <iostream> using namespace std;int main() {cout << "请选择副本难度" << endl;cout << "1、普通" << endl;cout << "2、中等" << endl;cout << "3、困难" <…

gRPC-GateWay Swagger 实战

上一次我们分享了关于 gRPC-Gateway 快速实战 &#xff0c;可以查看地址来进行回顾 : 也可以查看关于 gRPC 的历史文章&#xff1a; gRPC介绍 gRPC 客户端调用服务端需要连接池吗&#xff1f; gRPC的拦截器 gRPC的认证 分享一下 gRPC- HTTP网关 I 今天主要是分享关于 gRPC-G…

zabbix安装部署

前期准备&#xff1a;安装mysql数据库和nginx 一、下载zabbix rpm -Uvh https://repo.zabbix.com/zabbix/4.4/rhel/7/x86_64/zabbix-release-4.4-1.el7.noarch.rpm yum-config-manager --enable rhel-7-server-optional-rpms yum install epel-release numactl yum install…

洞察商机,驱动创新:智能数据分析引领企业发展

“五度易链”产业大数据解决方案由产业经济、智慧招商、企业服务、数据服务四大应用解决方案组成&#xff0c;囊括了产业经济监测、产业诊断分析、企业监测预警、企业综合评估、大数据精准招商、招商智能管理、企业管理、企业培育、企业市场服务、企业金融服务、产业数据开放服…

Layer 2盛夏已至,StarkNet如何实现价值跃迁?

作者&#xff5c;Jason Jiang Layer 2概念在2023年夏天迎来爆发。Coinbase、ConsenSys等加密巨头纷纷下场&#xff0c;其部署的原生L2解决方案Base、Linea在过去两个月内相继完成主网上线&#xff1b;被誉为L2 四大天王之一的StarkNet也在夏天顺利完成“量子跃迁”升级&#x…

SQL优化案例教程0基础(小白必看)

前提准备&#xff1a;本案例准备了100W的数据进行SQL性能测试&#xff0c;数据库采用的是MySQL&#xff0c; 总共介绍了常见的14种SQL优化方式&#xff0c;每一种优化方式都进行了实打实的测试&#xff0c; 逐行讲解&#xff0c;通俗易懂&#xff01; 一、前提准备 提前准备一…

Sqoop实操案例-互联网招聘数据迁移

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

mybatis plus 3.4以上分页无效问题,limit一直加不上,MybatisPlusInterceptor无效

解决方案 1、已注册 Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();PaginationInnerInterceptor paginationInnerInterceptor new PaginationInnerInterceptor(DbType.MYSQL);paginationIn…

idea全局搜索失效,Ctrl+shift+F快捷键不起作用

方法1&#xff1a;是否与搜狗等输入法软件存在快捷键冲突&#xff0c;当然也可能是你新下载的什么软件导致的快捷键冲突导致IDEA全局搜索失效。比如下图&#xff1a; 可以改掉输入法的快捷键或者直接关闭输入法的快捷键&#xff0c;这样idea的全局搜索功能就恢复了。 方法2&…

一文掌握光模块知识,成为网络工程师的必备技能

在这个信息爆炸的时代&#xff0c;数据传输已经成为我们生活中不可或缺的一部分。而在众多的数据传输方式中&#xff0c;光纤通信以其高速、高带宽、低损耗的特点&#xff0c;成为了现代通信的主流。而在这个光纤通信的背后&#xff0c;有一个神奇的器件在默默地发挥着作用&…

qt creater11 翻译国际化教程教程:

先出效果图。 闲聊几句&#xff1a;qt这个翻译很方便&#xff0c;能直接导出项目里所有文字。 具体步骤如下&#xff1a; 在Qt中&#xff0c;我们可以使用QTranslator类来实现多语言切换。以下是一般步骤&#xff1a; 1. 在你的源代码中&#xff0c;所有需要翻译的字符串都…

每日一题——下一个排列

下一个排列 题目链接 读懂题目 要理解题目的意思&#xff0c;主要是要读懂这一句&#xff1a;整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。 我们来逐词分析&#xff1a; 其整数&#xff0c;即我们要将这个数组的数字构成一个十进制整数&#xff0c;例如数组…

Android之自定义时间选择弹框

文章目录 前言一、效果图二、实现步骤1.自定义Dialog2.xml布局3.背景白色转角drawable4.取消按钮背景drawable5.确定按钮背景drawable6.NumberPicker样式和弹框样式7.弹框动画8.Activity使用 总结 前言 随着产品人员不断变态下&#xff0c;总是会要求我们的界面高大上&#xf…

JVM之堆和方法区

目录 1.堆 1.1 堆的结构 1.1.1 新生代&#xff08;Young Generation&#xff09; 1.1.2 年老代&#xff08;Old Generation&#xff09; 1.1.3 永久代/元空间&#xff08;Permanent Generation/Metaspace&#xff09; 1.2 堆的内存溢出 1.3 堆内存诊断 1.3.1 jmap 1.3.2…

五大优势,让你坚定选择低代码开发平台

随着数字化时代的到来&#xff0c;企业纷纷寻求新的方式来提高业务效率、降低成本&#xff0c;并满足不断变化的客户需求。在这个过程中&#xff0c;低代码平台逐渐成为一种备受瞩目的技术&#xff0c;因为其具有五大特殊优势&#xff0c;能够极大地提高企业数字化转型的效率。…

如何用代理IP解决Tik Tok直播时卡顿的问题?

Tik Tok如今已经成为了一种非常流行的社交互动模式&#xff0c;但是在直播过程中突然的卡顿往往会让人抓狂&#xff0c;流失很多客户。除非您的内容足够吸引人&#xff0c;不然很少有人会有耐心等下去。每每遇到这种情况&#xff0c;运营Tik Tok的朋友就会开始挠头&#xff0c;…

算法通关村——从40个亿中产生一个不存在的整数

Titile: 海量数据场景下的热门算法题 从40个亿中产生一个不存在的整数 题目要求&#xff1a;给定一个输入文件&#xff0c;包含40亿个非负整数&#xff0c;请设计一个算法&#xff0c;产生一个不存在该文件中的整数&#xff0c;假设你有1GB的内存来完成这项任务。 进阶&…

总线:特性、分类、性能指标、系统总线的结构、总线仲裁、总线定时、总线标准

总线&#xff08;Bus&#xff09;&#xff0c;是一组为各功能部件之间进行信息传送的公共线路。 总线的特性&#xff1a; 机械特性&#xff08;物理特性&#xff09;&#xff1a;尺寸、形状、引脚数、排列顺序。电气特性&#xff1a;每根信号线上的信号传输方向、表示信号有效…

六、员工信息分页+启用/禁用员工账号(前端经典大数/精度丢失问题)

员工信息分页 整体流程&#xff1a; 1、创建mybatisplus配置类 在config包下创建mybatisplusconfig /*** 配置MybatisPlus分页插件*/ Configuration //既然是配置类&#xff0c;要加配置类的注解 public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatis…