基于Ant Design of Vue实现时长组件 duration

最近遇到一个需求，需要一个输入时长的组件，在经过一番寻找后没有合适的，最终自己动手写一个（实现了v-model双向绑定），记录一下，也给小伙伴们提供一个方便。
本示例基于ant design of vue实现，如使用其他组件库的可以参照实现，原理大同小异。

<!--本示例仅提供基础方法，如有其他需求可动手实现，也可以通过评论提出-->
<l-duration v-model="value"/>

模板文件部分

<template><a-popover trigger="click" placement="bottom" @visibleChange="handleVisibleChange"><a-input v-model="showValue" read-only :disabled="disabled"/><template #content><a-input-number v-model="hour" :min="0" :precision="0"/>时<a-input-number v-model="minute" :min="0" :precision="0"/>分</template></a-popover>
</template><script>
import {isNumber, minutesToDate, parseCustomDate} from "@/dateUtil";
import arithmetic from "@/arithmetic";export default {name: "LDuration",model: {prop: 'value',event: 'change'},props: {value: {type: Number,default: undefined,},disabled: {type: Boolean,default: false,}},data() {return {showValue: "",hour: undefined,minute: undefined,}},watch: {value(newVal) {if (isNumber(newVal)) {let customDate = minutesToDate(newVal, 'hm')this.showValue = parseCustomDate(customDate)this.hour = customDate.hourthis.minute = customDate.minute} else {this.showValue = ""this.hour = undefinedthis.minute = undefined}}},methods: {handleVisibleChange(visible) {if (!visible) {//计算时长，单位：分钟，延迟一会再算setTimeout(() => {let hour = this.hour, minute = this.minute, value = undefinedif (isNumber(hour) || isNumber(minute)) {value = arithmetic.add(arithmetic.multiply(hour || 0, 60), minute || 0).toNumber()}this.$emit('change', value)}, 100)}},}
}
</script>

公共方法之dateUtil.js

/*** 是否为数字*/
export function isNumber(obj) {return typeof obj === 'number' && !isNaN(obj)
}/*** 分钟转日期格式** @param {Number} minutes 分钟* @param {String} formatter='dhm' 格式 [d：日，h：时，m：分]* @author 乐享生活522* @date 2022/5/17 15:44*/export function minutesToDate(minutes, formatter = 'dhm') {if (!isNumber(minutes)) {return undefined}let day = 0, hour = 0, minute = 0if (formatter === 'dhm') {day = Math.floor(minutes / (60 * 24));hour = Math.floor(minutes / 60 % 24);minute = Math.ceil((minutes % 60));} else if (formatter === 'hm') {hour = Math.floor(minutes / 60);minute = Math.ceil((minutes % 60));} else {minute = minutes;}return {day, hour, minute}
}/*** 解析自定义日期** @param {Object} customDate 自定义日期格式的对象* @param {Number} customDate.day 天* @param {Number} customDate.hour 时* @param {Number} customDate.minute 分* @author 乐享生活522* @date 2022/5/17 16:12*/
export function parseCustomDate(customDate) {let result = ''let {day, hour, minute} = customDateif (day) {result += day + '天';}if (hour) {result += hour + '时';}if (minute) {result += minute + '分';}return result
}

公共方法之arithmetic

//依赖math.js相关方法
import {create, all} from 'mathjs'//使用配置创建一个mathjs实例
const config = {number: 'BigNumber',precision: 64,//默认情况下为64，仅适用于BigNumbers
}
const math = create(all, config)let arithmetic = {//加法add(num1, num2) {return math.add(math.bignumber(num1), math.bignumber(num2));},//减法subtract(num1, num2) {return math.subtract(math.bignumber(num1), math.bignumber(num2));},//乘法multiply(num1, num2) {return math.multiply(math.bignumber(num1), math.bignumber(num2));},// 除法divide(num1, num2, fractionDigits) {let quotient = math.divide(math.bignumber(num1), math.bignumber(num2))if (fractionDigits) {return math.round(quotient, fractionDigits)}return quotient;},//四舍五入round(num, fractionDigits) {return math.round(num, fractionDigits)}}
export default arithmetic;

基于Ant Design of Vue实现时长组件 duration相关推荐

使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
一种基于Gradient Boosting的公交车运行时长预测方法
一种基于Gradient Boosting的公交车运行时长预测方法赖永炫1,2, 杨旭3, 曹琦4, 曹辉彬1,2, 王田5, 杨帆6 1 厦门大学信息学院,福建厦门 361005 2 厦门大学深 ...
ant design of vue分页/layui实现分页
ant design of vue分页官方文档:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-paginationv-i ...

基于Ant Design of Vue实现时长组件 duration

模板文件部分

公共方法之dateUtil.js

公共方法之arithmetic

基于Ant Design of Vue实现时长组件 duration相关推荐

最新文章

热门文章