uniapp自定义封装只有时分秒的组件，时分秒范围选择

 说实话，uniapp和uview的关于只有时分秒的组件实在是不行。全是日历，但是实际根本就不需要日历这玩意。百度了下，终于看到了一个只有时分秒的组件。原地址：原地址，如若侵犯请联系我删除

<template>
  <view class="hms">
    <!-- //显示时间的地方，样式可以自行修改 -->
    <view class="hmsText" @click="show">{{ hmsVal }}</view>
    <!-- //弹出选择时间的弹框 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="hms_content">
        <view class="hmsBtn">
          <view class="close" @click="close">取消</view>
          <view class="complete" @click="completeFun">完成</view>
        </view>
        <picker-view indicator-style="100rpx" @change="bindChange" class="picker-view" :value="pickerArrIndex">
          <picker-view-column>
            <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  props: {
    //父组件传过来的初始值，不是必须传，不传默认值为00:00:00
    hmsval: {
      type: String,
      default() {
        return '00:00:00';
      }
    }
  },
  data() {
    return {
      hours: [],
      minute: [],
      second: [],
      h: '00',
      m: '00',
      s: '00',
      hmsVal: '00:00:00',//页面使用的显示值
      pickerArrIndex: [0, 0, 0]//picker-view 显示默认
    };
  },
  watch: {
    //监听父组件传过来的从新赋值给新的变量显示
    hmsval(newval, oldval) {
      this.hmsVal = newval;
    }
  },
  created() {
    this.hoursFun();
    this.minuteFun();
    this.secondFun();
  },
  methods: {
    // 时
    hoursFun() {
      for (var i = 0; i <= 23; i++) {
        if (i < 10) {
          i = '0' + i;
          this.hours.push(i);
        } else {
          this.hours.push(i);
        }
      }
    },
    // 分
    minuteFun() {
      for (var i = 0; i <= 59; i++) {
        if (i < 10) {
          i = '0' + i;
          this.minute.push(i);
        } else {
          this.minute.push(i);
        }
      }
    },
    // 秒
    secondFun() {
      for (var i = 0; i <= 59; i++) {
        if (i < 10) {
          i = '0' + i;
          this.second.push(i);
        } else {
          this.second.push(i);
        }
      }
    },
    //picker值改变的事件
    bindChange(e) {
      const val = e.detail.value;
      this.h = this.hours[val[0]] ? this.hours[val[0]] : this.h;
      this.m = this.minute[val[1]] ? this.minute[val[1]] : this.m;
      this.s = this.second[val[2]] ? this.second[val[2]] : this.s;
    },
    show() {
      // picker-view 显示默认值
      var hmsArr = this.hmsVal.split(':');
      var hindex = this.hours.findIndex(item => item == hmsArr[0]);
      var mindex = this.minute.findIndex(item => item == hmsArr[1]);
      var sindex = this.second.findIndex(item => item == hmsArr[2]);
      this.pickerArrIndex = [hindex, mindex, sindex];
      this.$refs.popup.open();
    },
    // 关闭popup
    close() {
      this.$refs.popup.close();
    },
    //点击完成
    completeFun() {
      //点击完成赋值
      this.hmsVal = `${this.h}:${this.m}:${this.s}`;
      //新的值传给父组件
      this.$emit('complete', this.hmsVal)
      this.$refs.popup.close();
    }
  }
};

</script>
<style lang='scss' scoped>
.picker-view {
  height: 400rpx;
  background: #fff;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.hmsText {
  width: 160rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px solid #ddd;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  margin-left: 10rpx;
}
.hmsBtn {
  display: flex;
  align-items: center;
  background: #fff;
  height: 80rpx;
  line-height: 80rpx;
  justify-content: space-between;
  padding: 0 20rpx;
  border-bottom: 1px solid #ddd;
  .complete {
    color: #0055ff;
  }
}
</style>

父组件使用：

<uniHms hmsval="21:20:00" @complete="complete" />

然后实际效果是：

兄弟搞得不错！可惜了我需要一个时间段！！！ 但是这是个很好的例子。于是按照这个修改加了一个时间段的时分秒选择器。（这里我试了其他样式，终究选了一个自己满意的时间范围选择格式，如果需要可以自行修改样式，大致逻辑方法是不变的）

先上代码：

<template>
  <view class="hms">
    <!-- //显示时间的地方，样式可以自行修改 -->
    <view class="hmsText" @click="show">{{ hmsVal_start + '-' + hmsVal_end }}</view>
    <!-- //弹出选择时间的弹框 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="hms_content">
        <view class="hmsBtn">
          <view class="close" @click="close">取消</view>
          <view class="tip">{{ hmsVal_start + '至' + hmsVal_end }}</view>
          <view class="complete" @click="completeFun">完成</view>
        </view>

        <view class="picker">
          <picker-view indicator-style="100rpx" @change="bindChange" class="picker-view" :value="pickerArrIndexLeft">
            <picker-view-column>
              <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view>
            </picker-view-column>
          </picker-view>
          <view class="line">-</view>
          <picker-view indicator-style="100rpx" @change="bindChange2" class="picker-view" :value="pickerArrIndexRight">
            <picker-view-column>
              <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  props: {
    //父组件传过来的初始值，不是必须传，不传默认值为00:00:00
    hmsval: {
      type: String,
      default() {
        return '00:00:00-00:00:00';
      }
    }
  },
  data() {
    return {
      hours: [],
      minute: [],
      second: [],
      /* 开始时间 */
      h: '00',
      m: '00',
      s: '00',
      /* 结束时间 */
      h2: '00',
      m2: '00',
      s2: '00',
      hmsVal_start: '00:00:00',//页面使用的显示值
      hmsVal_end: '00:00:00',//页面使用的显示值
      pickerArrIndexLeft: [0, 0, 0],//picker-view 显示默认
      pickerArrIndexRight: [0, 0, 0],//picker-view 显示默认
    };
  },
  watch: {
    //监听父组件传过来的从新赋值给新的变量显示
    hmsval: {
      immediate: true,
      handler(newval) {
        console.log('newval :>> ', newval);
        if (newval != '00:00:00-00:00:00') {
          this.hmsVal_start = newval.split('-')[0]
          this.hmsVal_end = newval.split('-')[1]
        }
      }
    }
  },
  created() {
    this.hoursFun();
    this.minuteFun();
    this.secondFun();
  },
  methods: {
    // 时
    hoursFun() {
      for (var i = 0; i <= 23; i++) {
        if (i < 10) {
          i = '0' + i;
          this.hours.push(i);
        } else {
          this.hours.push(i);
        }
      }
    },
    // 分
    minuteFun() {
      for (var i = 0; i <= 59; i++) {
        if (i < 10) {
          i = '0' + i;
          this.minute.push(i);
        } else {
          this.minute.push(i);
        }
      }
    },
    // 秒
    secondFun() {
      for (var i = 0; i <= 59; i++) {
        if (i < 10) {
          i = '0' + i;
          this.second.push(i);
        } else {
          this.second.push(i);
        }
      }
    },
    //picker值改变的事件
    bindChange(e) {
      const val = e.detail.value;
      this.h = this.hours[val[0]] ? this.hours[val[0]] : this.h;
      this.m = this.minute[val[1]] ? this.minute[val[1]] : this.m;
      this.s = this.second[val[2]] ? this.second[val[2]] : this.s;
      this.hmsVal_start = this.h + ':' + this.m + ':' + this.s
    },
    //picker值改变的事件
    bindChange2(e) {
      const val = e.detail.value;
      this.h2 = this.hours[val[0]] ? this.hours[val[0]] : this.h2;
      this.m2 = this.minute[val[1]] ? this.minute[val[1]] : this.m2;
      this.s2 = this.second[val[2]] ? this.second[val[2]] : this.s2;
      this.hmsVal_end = this.h2 + ':' + this.m2 + ':' + this.s2
    },
    show() {
      // picker-view 显示默认值
      var hmsArr = this.hmsVal_start.split(':');
      var hmsArr2 = this.hmsVal_end.split(':');
      var hindex = this.hours.findIndex(item => item == hmsArr[0]);
      var mindex = this.minute.findIndex(item => item == hmsArr[1]);
      var sindex = this.second.findIndex(item => item == hmsArr[2]);
      var hindex2 = this.hours.findIndex(item => item == hmsArr2[0]);
      var mindex2 = this.minute.findIndex(item => item == hmsArr2[1]);
      var sindex2 = this.second.findIndex(item => item == hmsArr2[2]);
      this.pickerArrIndexLeft = [hindex, mindex, sindex];
      this.pickerArrIndexRight = [hindex2, mindex2, sindex2];
      this.$refs.popup.open();
    },
    // 关闭popup
    close() {
      this.$refs.popup.close();
    },
    //点击完成
    completeFun() {
      //新的值传给父组件
      this.$emit('complete', this.hmsVal_start + '-' + this.hmsVal_end)
      this.$refs.popup.close();
    }
  }
};

</script>
<style lang='scss' scoped>
.picker-view {
  height: 400rpx;
  background: #fff;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.hmsText {
  line-height: 50rpx;
  text-align: center;
  background: #fff;
  margin-left: 10rpx;
}
.hmsBtn {
  display: flex;
  align-items: center;
  background: #fff;
  height: 80rpx;
  justify-content: space-between;
  padding: 0 20rpx;
  border-bottom: 1px solid #ddd;
  .complete {
    color: #0055ff;
  }
  .tip {
    color: #939393;
  }
}
.picker {
  display: flex;
  align-items: center;
  .line {
    font-weight: bolder;
    position: relative;
    top: 10rpx;
  }
}
/deep/.picker-view {
  width: 50%;
}
</style>

父组件：

<uniHms hmsval="21:20:00-23:56:00" @complete="complete" />

格式是时间-时间。

然后页面显示效果图：

 欧耶，完成！！！需要的和不需要的赶紧收藏起来，只要干这行的说不定哪天就需要用到呢！！！！

另外补充一句，uniapp组件文档很鸡肋哎。。。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

BlogPark测试报告

BlogPark测试报告

目录 一&#xff0c;项目背景 二&#xff0c;项目功能 三&#xff0c;测试计划 3.1 测试用例的设计 3.2 功能测试 1.正常登录 2.正常写博客测试 &#xff08;输入完整的标题和内容&#xff09; 3.发布博客之后跳转到详情页观察是否有刚发布的博客 4.删除博客观察列表的…
阅读更多...
会计报名照片怎么压缩？这几种方法一定要会

会计报名照片怎么压缩？这几种方法一定要会

会计师报名考试的时候&#xff0c;在上传证件照信息时通常会对图片大小、格式、尺寸、还有照片dpi分辨率以及照片背景颜色都有具体的要求&#xff0c;小编在这边建议考生提前了解好报名照片的要求&#xff0c;避免照片审核失败&#xff0c;那么会计报名照片怎么压缩呢&#xff…
阅读更多...
基于springboot在线考试系统源码和论文

基于springboot在线考试系统源码和论文

网络的广泛应用给生活带来了十分的便利。所以把在线考试管理与现在网络相结合&#xff0c;利用java技术建设在线考试系统&#xff0c;实现在线考试的信息化。则对于进一步提高在线考试管理发展&#xff0c;丰富在线考试管理经验能起到不少的促进作用。 在线考试系统能够通过互…
阅读更多...
ISIS基本概率与配置（HCIP完整版）

ISIS基本概率与配置（HCIP完整版）

目录 一、ISIS协议基础 1、ISIS概述&#xff08;认识ISIS&#xff09; 2、ISIS的应用 4、ISIS的工作过程 5、ISIS路由器的类型 6、ISIS区域 7、ISIS报文 8、ISIS基础配置 9、进程号&#xff1a; 10、NET地址 11、ISIS邻居关系 二、邻居表分析 1、ISIS邻居表字段解析…
阅读更多...
MVC设计模式和与三层架构的关系

MVC设计模式和与三层架构的关系

MVC设计模式和与三层架构的关系 MVC是一种设计模式&#xff0c;将软件按照模型、视图、控制器来划分&#xff1a; M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据 JavaBean分为两类&#xff1a; 一类称为数据承载Bean&#x…
阅读更多...
JavaSec基础 反射修改Final修饰的属性及绕过高版本反射限制

JavaSec基础 反射修改Final修饰的属性及绕过高版本反射限制

反射重拾 半年没碰java了 先写点基础回忆一下 反射弹计算器 public class Test {public static void main(String[] args) throws Exception {Class<?> clazz Class.forName("java.lang.Runtime");clazz.getDeclaredMethod("exec", String.cla…
阅读更多...
记录汇川：H5U与Fctory IO测试5

记录汇川：H5U与Fctory IO测试5

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 自动程序 Fctory IO配置&#xff1a; 触摸屏如下&#xff1a; 实际动作如下&#xff1a; Fctory IO测试5
阅读更多...
力扣：18.四数之和

力扣：18.四数之和

一、做题链接&#xff1a;18. 四数之和 - 力扣&#xff08;LeetCode&#xff09; 二、题目分析 1.做这一道题之前本博主建议先看上一篇《三数之和》 2.题目分析 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重…
阅读更多...
java连接池、C3P0、Druid德鲁伊连接池技术

java连接池、C3P0、Druid德鲁伊连接池技术

java线程池 连接池C3P0Druid 连接池 概念&#xff1a;其实就是一个容器(集合)&#xff0c;存放数据库连接的容器。当系统初始化好后&#xff0c;容器被创建&#xff0c;容器中会申请一些连接对象&#xff0c;当用户来访问数据库时&#xff0c;从容器中获取连接对象&#xff0c…
阅读更多...
信息论与编码期末复习——计算题+基础汇总(二)

信息论与编码期末复习——计算题+基础汇总(二)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…
阅读更多...
微信小程序连接数据库与WXS的使用

微信小程序连接数据库与WXS的使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…
阅读更多...
基于Springboot+vue高校宿舍管理系统（前后端分离）

基于Springboot+vue高校宿舍管理系统（前后端分离）

该项目完全免费 高校宿舍管理系统采用前后端分离的架构方式&#xff0c;是为学校宿舍管理打造的一套系统,可以让管理者更为便捷地处理学生公寓问题,从而大大提高管理效率,让学生公寓的资源合理分配,事半功倍,进而改善了学生公寓管理。 系统分为三种角色&#xff0c;分别是系统…
阅读更多...
这些开源自动化测试框架，会用等于白嫖一个w

这些开源自动化测试框架，会用等于白嫖一个w

作者&#xff1a;黑马测试 链接&#xff1a;https://www.zhihu.com/question/19923336/answer/2585952461 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 随着计算机技术人员的大量增加&#xff0c;通过编写代码来…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的大学计算机课程管理平台

【开源】基于JAVA+Vue+SpringBoot的大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…
阅读更多...
mysql进阶-视图

mysql进阶-视图

目录 1. 用途 2. 语法 2.1 创建或替换视图 2.2 修改视图 2.3 查看视图&#xff1a; 2.4 删除视图&#xff1a; 3. 其他 3.1 操作视图 3.2 迁移数据库 1. 用途 视图可以理解为一个复杂查询的简称&#xff0c;它可以帮助我们简化查询&#xff0c;主要用于报表查询:例如…
阅读更多...
BigDecimal使用记录

BigDecimal使用记录

在公司经费这块用到了BigDecimal类&#xff0c;特此整理记录一下。 一、BigDecimal简介&#xff1a; float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算&#xff0c;这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的。然而&a…
阅读更多...
Python接口自动化 —— 什么是接口测试、为什么要做接口测试（详解）

Python接口自动化 —— 什么是接口测试、为什么要做接口测试（详解）

什么是接口测试 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。　 一般来说&#xff0c;测试接…
阅读更多...
mysql基础-常用函数汇总

mysql基础-常用函数汇总

目录 1. 查询技巧 2. 时间函数 2.1 now() 2.2 current_date() 2.3 时间差timestampdiff&#xff08;&#xff09;与datediff&#xff08;&#xff09; 2.4 其他时间函数 3. 字符函数 3.1 截取函数 3.2 分割函数 3.3 left与right函数 3.4 其他函数 4. 数字函数 5. …
阅读更多...
2024年跨境电商上半年营销日历最全整理

2024年跨境电商上半年营销日历最全整理

2024年伊始&#xff0c;跨境电商开启新一轮的营销竞技&#xff0c;那么首先需要客户需求&#xff0c;节假日与用户需求息息相关&#xff0c;那么接下来小编为大家整理2024上半年海外都有哪些节日和假期&#xff1f;跨境卖家如何见针对营销日历选品&#xff0c;助力卖家把握2024…
阅读更多...
JAVA基础学习笔记-day15-File类与IO流

JAVA基础学习笔记-day15-File类与IO流

JAVA基础学习笔记-day15-File类与IO流 1. java.io.File类的使用1.1 概述1.2 构造器1.3 常用方法1、获取文件和目录基本信息2、列出目录的下一级3、File类的重命名功能4、判断功能的方法5、创建、删除功能 2. IO流原理及流的分类2.1 Java IO原理2.2 流的分类2.3 流的API 3. 节点…
阅读更多...
最新文章

Copyright @ 2022~2023