vant组件改为 uview-plus 组件的时分秒组件

news2024/11/20 2:44:02

项目中本来使用过了vant 的组件，但是uniapp 和vant并不兼容，除了几个普通的组件能用之外，想使用弹窗的话vant就完成不了了，还好uniapp官方支持的 uview-plus 支持vue3，就给项目更换了。之前使用vant封装的组件这时候也不能使用了 ，只好更换组件，最麻烦的是组件功能类似，时间传递方式传递参数却变了，真是糟心那！经过两天的组件改写总算是完成了 uview-plus 的年月日时分秒的组件封装，还有默认时间的选择，全套代码哦！

<template>
    <!-- 弹出层 -->
    <u-popup :show="data.isPicker" mode="bottom" @close="confirmOn">
        <u-picker
            :show="data.isPicker"
            :columns="data.columns"
            keyName="text"
            @cancel="cancelOn"
            @confirm="onConfirm"
            :defaultIndex="data.defaultIndex"
        ></u-picker>
    </u-popup>
</template>
<script setup>
import { reactive, watch, getCurrentInstance } from 'vue';
import { split, findIndex } from 'lodash';
let { proxy } = getCurrentInstance();

const customFieldName = {
    text: 'value',
    value: 'values',
    children: ''
};
const data = reactive({
    isPicker: false, //是否显示弹出层
    columns: [], //所有时间
    Mdays: '', //弹窗关闭时月份所在值
    Dindex: null,
    selectedValues: [],
    defaultIndex: []
});

const props = defineProps({
    showPicker: {
        type: Boolean
    },
    values: {
        type: String
    }
});
const emit = defineEmits(['changeValue', 'confirm']); //定义要向父组件传递的事件

watch(
    () => data.isPicker,
    val => {
        !val && emit('changeValue');
        data.columns = [];
        getcolumns();
    }
);
watch(
    () => props.showPicker,
    val => {
        data.isPicker = val;
    }
);
watch(
    () => props.values,
    val => {
        if (val == '') {
            data.Mdays = '';
            data.Dindex = null;
        }
    }
);

function getcolumns() {
    data.selectedValues = [];
    let strtime = props.values;
    let date = new Date(strtime.replace(/-/g, '/'));
    let vmoduletime = date.getTime();

    let vmoduledate;
    if (props.values != '') {
        vmoduledate = new Date(vmoduletime);
    } else {
        vmoduledate = new Date(); //没有传入时间则默认当前时刻
    }

    let Y = vmoduledate.getFullYear();
    let M = vmoduledate.getMonth();
    let D = vmoduledate.getDate();
    let h = vmoduledate.getHours();
    let m = vmoduledate.getMinutes();
    let s = vmoduledate.getSeconds();
    let year = []; //获取前后十年数组
    // year.values = [];
    let Currentday = new Date().getFullYear();
    for (let i = Currentday - 10; i < Currentday + 10; i++) {
        year.push({ text: i.toString(), value: i });
    }

    data.selectedValues.push(Y);

    const _M = M < 10 ? `0${M + 1}` : M.toString();
    const _D = D < 10 ? `0${D + 1}` : D.toString();
    const _h = h < 10 ? `0${h + 1}` : h.toString();
    const _m = m < 10 ? `0${m + 1}` : m.toString();
    const _s = s < 10 ? `0${s}` : s.toString();

    data.selectedValues.push(_M);
    data.selectedValues.push(_D);
    data.selectedValues.push(_h);
    data.selectedValues.push(_m);
    data.selectedValues.push(_s);

    data.columns.push(year);

    let month = []; //获取12月数组
    // month.defaultIndex = M;
    month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    month.splice(0, 1);
    data.columns.push(month);
    //获取当月的天数
    let days = getCountDays(Y, data.Mdays == '' ? M + 1 : data.Mdays);
    let day = []; //创建当月天数数组
    // day.defaultIndex = data.Dindex == null ? D - 1 : data.Dindex;
    day = Object.keys(Array.apply(null, { length: days + 1 })).map(function (
        item
    ) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    day.splice(0, 1);
    data.columns.push(day);
    let hour = []; //创建小时数组
    // hour.defaultIndex = h;
    hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(hour);
    let mi = []; //创建分钟数组
    // mi.defaultIndex = m;
    mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(mi);
    let ss = []; //创建秒数数组
    // ss.defaultIndex = s;
    ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(ss);

    onChangeDefaultIndex(data.columns, data.selectedValues);
}
function onChangeDefaultIndex(columns, selected) {
    // 设置默认值
    let defaultIndex = [];
    selected.forEach((o, index) => {
        const _index = findIndex(columns[index], a => a.value == o);

        defaultIndex.push(_index);
    });

    data.defaultIndex = defaultIndex;
}
function onChange(value) {
    console.log(value);
    // const dateTime = selectedOptions.map(o => o.text);
    // onConfirm(dateTime);
}
function getCountDays(year, month) {
    //获取某年某月多少天
    let day = new Date(year, month, 0);
    return day.getDate();
}

// 关闭弹框
function confirmOn() {
    emit('changeValue');
}
//时间选择器关闭
function cancelOn() {
    // console.log(value);
    // let endval =
    //     value[0] +
    //     '-' +
    //     value[1] +
    //     '-' +
    //     value[2] +
    //     ' ' +
    //     value[3] +
    //     ':' +
    //     value[4] +
    //     ':' +
    //     value[5];

    // emit('changeValue', endval);
    emit('confirm');
}
// 时间选择器确定
function onConfirm({ value }) {
    console.log(value);
    let endval =
        value[0].text +
        '-' +
        value[1].text +
        '-' +
        value[2].text +
        ' ' +
        value[3].text +
        ':' +
        value[4].text +
        ':' +
        value[5].text;

    emit('changeValue', endval);
    emit('confirm', endval);
}
</script>

使用方法：

    <date-time-picker
        :values="timeVal"
        @changeValue="showAcceptDate = false"
        :showPicker="showAcceptDate"
        @confirm="onConfirmDateTime"
    />

效果图：

 

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

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

相关文章

品达通用权限系统-Day02

品达通用权限系统-Day02

文章目录 2.3 自定义starter2.3.1 案例一2.3.1.1 开发starter2.3.1.2 使用starter 2.3.2 案例二2.3.2.1 开发starter2.3.2.2 使用starter 2.3 自定义starter 本小节我们通过自定义两个starter来加强starter的理解和应用。 2.3.1 案例一 2.3.1.1 开发starter 开发工具&#…
阅读更多...
软件测试入门（了解软件）

软件测试入门（了解软件）

一、什么是软件 软件&#xff1a;通过大代码逻辑开发出来的程序&#xff0c;称为软件。 二、软件的种类 web端&#xff1a;电脑、手机的浏览器可以打开的网页&#xff0c;就是web的软件。比如&#xff1a;公司官网、淘宝网等等 客户端&#xff1a;电脑客户端&#xff1a;需要…
阅读更多...
聊聊glibc中malloc函数的unlink

聊聊glibc中malloc函数的unlink

unlink的意思其实就是删除。在介绍这个函数之前&#xff0c;我们得介绍一点概念。在程序中&#xff0c;如果我们使用malloc申请的内存在不用或者不需要的时候&#xff0c;是需要程序员手动去释放&#xff0c;也就是free操作。我们知道malloc操作free操作都是涉及到内存管理的。…
阅读更多...
USB Monitor只抓数据时的设置

USB Monitor只抓数据时的设置

一&#xff0c;简介 在抓HID数据时&#xff0c;只关注数据的收发&#xff0c;不太关注其他的数据例如SOF等信息&#xff0c;所以要对上位机软件的过滤设置进行勾选。 二&#xff0c;过滤设置 原则&#xff1a;带data的都要&#xff0c;不带data的可以不要。 点击“设置”-&…
阅读更多...
挽输出和开漏输出

挽输出和开漏输出

GPIO口配置为输出时会有两种模式&#xff0c;一种叫推挽输出&#xff0c;一种叫开漏模式。 三种输出状态 如下图所示为将GPIO配置为输出时的内部示意图&#xff1a; 由上图可以看出&#xff0c;GPIO的输出状态完全取决于两个MOS管Q1和Q2的导通状态&#xff1a; Q1导通、Q2关断…
阅读更多...
js 数组中和为 0 的三个数

js 数组中和为 0 的三个数

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 …
阅读更多...
Makerbase SimpleFOC ESP32 例程10 步进电机开环速度测试

Makerbase SimpleFOC ESP32 例程10 步进电机开环速度测试

Makerbase SimpleFOC ESP32 例程10 步进电机开环速度测试 第一部分 硬件介绍 1.1 硬件清单 序号品名数量1ESP32 FOC V1.0 主板1235HB27-401A步进电机1312V电源适配器14USB 线1 注意&#xff1a; 35HB27-401A是两相1.8步进电机&#xff0c;对应极对数为50。   硬件清单如下…
阅读更多...
[框架]Spring框架

[框架]Spring框架

目录 关于Spring框架 Spring框架创建对象 Spring框架创建对象的方式之一--组件扫描 Spring框架创建对象的方式之二--Bean方法 Spring框架创建对象的方式的选取 Spring Bean的名称 Spring Bean的作用域 Spring Bean的生命周期 Spring的自动装配 关于为属性注入值的做法…
阅读更多...
stm32或gd32移植libcanard实现UAVCAN协议

stm32或gd32移植libcanard实现UAVCAN协议

一、源码下载 1、git下载 点击我下载 2、csdn下载 自己上传的点击下载 二、源码移植 我自己是使用rt-thread操作系统移植的。但是不局限与操作系统&#xff0c;裸机也可以。 1、首先将源码加入到工程 2、分别实现一个内存的分配与释放函数&#xff0c;他是一个指针函数&…
阅读更多...
Keras-深度学习-神经网络-电影评论情感分析模型

Keras-深度学习-神经网络-电影评论情感分析模型

目录 模型搭建 模型训练 模型搭建 使用到的数据集为IMDB电影评论情感分类数据集&#xff0c;该数据集包含 50,000 条电影评论&#xff0c;其中 25,000 条用于训练&#xff0c;25,000 条用于测试。每条评论被标记为正面或负面情感&#xff0c;因此该数据集是一个二分类问题。…
阅读更多...
AD利用嘉立创的封装

AD利用嘉立创的封装

1.首先&#xff0c;打开元件库&#xff0c;搜索元器件 2.点开它的封装&#xff08;符号&#xff09; 3.文件-->导出-->Altium Designer 4.然后在AD上面打开这个文件 5.将其复制&#xff0c;粘贴放到PCB库中 6.然后在原理图中的封装管理器中&#xff0c;添加封装&#xf…
阅读更多...
ODrive引脚排列

ODrive引脚排列

对引脚配置的更改仅在odrv0.save_configuration()和odrv0.reboot()之后生效 如果 GPIO 设置为不支持的模式，它将保持未初始化状态。 当将 GPIO 设置为特殊用途模式（例如GpioMode.UART_A）时，您还必须启用相应的功能（例如<odrv>.config.enable_uart_a）。 数字模式是一…
阅读更多...
如何创新玩转元服务开发-趋势、分类与我们实践的方向！

如何创新玩转元服务开发-趋势、分类与我们实践的方向！

一、软件发展分类与元服务&#xff08;一&#xff09;软件分类发展简要分析 软件总体分为系统软件和应用软件两大类。用户、设备、操作系统系统软件、流量入口、应用形态应用软件关系及发展见下表—— 从表中分析得知&#xff0c;从互联网时期到移动互联网主导的发展&#xff…
阅读更多...
前端开发两年半，我裸辞了

前端开发两年半，我裸辞了

☀️ 前言 一晃两年半过去了&#xff0c;我离开了我的第一份前端开发工作&#xff0c;当你看到这篇文章&#xff0c;我已经离职两个月了&#xff0c;目前仍在艰难求职中&#xff0c;想记录分享一下我的经历&#xff0c;感兴趣的可以继续往下看&#xff0c;希望能给大家一些启示…
阅读更多...
学Python能做哪些副业？我一般不告诉别人！建议存好

学Python能做哪些副业？我一般不告诉别人！建议存好

前两天一个朋友找到我吐槽&#xff0c;说工资一发交完房租水电&#xff0c;啥也不剩&#xff0c;搞不懂朋友圈里那些天天吃喝玩乐的同龄人钱都是哪来的&#xff1f;确实如此&#xff0c;刚毕业的大学生工资起薪都很低&#xff0c;在高消费、高租金的城市&#xff0c;别说存钱&a…
阅读更多...
C++继承机制下析构和构造函数的执行分析

C++继承机制下析构和构造函数的执行分析

析构函数在下边3种情况时被调用&#xff1a; 对象生命周期结束&#xff0c;被销毁时&#xff1b;delete指向对象的指针时&#xff0c;或delete指向对象的基类类型指针&#xff0c;而其基类虚构函数是虚函数时&#xff1b;对象i是对象o的成员&#xff0c;o的析构函数被调用时&a…
阅读更多...
SRM 供应商管理系统都有哪些模块？

SRM 供应商管理系统都有哪些模块？

3k字干货&#xff01; SRM必备6大模块&#xff1a;供应商管理、采购需求管理、采购寻源、采购履约、交付结算。下面针对环节中的核心场景进行讲解。 1、供应商全生命周期管理 过去&#xff0c;企业业务简单&#xff0c;对接供应商数量少&#xff0c;需求供给匹配、价格合适就…
阅读更多...
如何使用KoodousFinder搜索和分析Android应用程序中的安全威胁

如何使用KoodousFinder搜索和分析Android应用程序中的安全威胁

关于KoodousFinder KoodousFinder是一款功能强大的Android应用程序安全工具，在该工具的帮助下，广大研究人员可以轻松对目标Android应用程序执行安全研究和分析任务，并寻找出目标应用程序中潜在的安全威胁和安全漏洞。 账号和API密钥 在使用该工具之前，我们首选需要访问该…
阅读更多...
适合初创企业租赁的办公模式-共享办公室

适合初创企业租赁的办公模式-共享办公室

随着共享经济的兴起&#xff0c;共享办公室已经成为越来越多人的选择。共享办公室提供了一个灵活、高效、舒适的工作环境&#xff0c;能够帮助个人和团队提高工作效率和创造力。下面我将从三个角度来介绍共享办公室。 共享办公室的优势 首先&#xff0c;共享办公室具有成本效益…
阅读更多...
合肥先进光源束测步进电机及驱动器的选择

合肥先进光源束测步进电机及驱动器的选择

大规模电机控制的方案选择-电机和驱动器篇 在上面文档的系统里选择的是免电池带绝对值编码器的步进伺服电机方案&#xff0c;现在有些场合只是普通的步进电机就好了&#xff0c;同样从电机控制的龙头企业鸣志的产品中选择&#xff0c;依然选择现成熟的ethercat总线技术的驱动器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023