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

news2024/11/26 14:27:11

 说实话，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组件文档很鸡肋哎。。。

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

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

相关文章

文本可视化之词云图的使用

文本可视化之词云图的使用

环境安装&#xff1a; pip install wordcloud -i https://pypi.tuna.tsinghua.edu.cn/simple/ conda install wordcloud # -i 后面加镜像源网站​ WordCloud(background_color,repeat,max_words600,height480, width584, max_font_size,font_path colormap,mask,mode,coll…
阅读更多...
【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架

【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程&#xff0c;这个过程称之为是生命周期&…
阅读更多...
建筑模板每平方价格怎么算？

建筑模板每平方价格怎么算？

在建筑行业中&#xff0c;建筑模板是一种常用的辅助材料&#xff0c;主要用于浇筑混凝土时形成所需的结构形状。了解建筑模板的定价方式对于预算控制和成本估算至关重要。本文将详细介绍建筑模板每平方米价格的计算方法。 1. 建筑模板的类型和特点建筑模板的种类繁多&#xff0…
阅读更多...
大模型笔记【2】 LLM in Flash

大模型笔记【2】 LLM in Flash

Apple最近发表了一篇文章&#xff0c;可以在iphone, MAC 上运行大模型&#xff1a;【LLM in a flash: Efficient Large Language Model Inference with Limited Memory】。 主要解决的问题是在DRAM中无法存放完整的模型和计算&#xff0c;但是Flash Memory可以存放完整的模型。…
阅读更多...
DRF-源码解析-1.2-CBV流程（视图函数执行流程）

DRF-源码解析-1.2-CBV流程（视图函数执行流程）

在DRF中&#xff0c;所有drf的操作都是在路由匹配完成后&#xff0c;即视图函数执行前和执行后做文章的。 一、代码准备 演示的视图&#xff1a; class TestAPIView(APIView):def get(self,request)return Respponse({code:200,msg:测试通过}) 演示的路由&#xff1a; path…
阅读更多...
Samtec卓越应用 | SEARAY：最大限度提高设计灵活性和密度

Samtec卓越应用 | SEARAY：最大限度提高设计灵活性和密度

【摘要/前言】 SEARAY™是Samtec 的高速、高密度栅格阵列连接器系列。SEARAY™为设计人员提供了大量的设计灵活性&#xff0c;远远超过业内任何其他阵列产品。 【灵活性】 SEARAY™ 是一种 1.27 毫米 X 1.27 毫米的栅格。它是一种开放式引脚字段栅格阵列&#xff0c;即引脚不…
阅读更多...
Jmeter扩展函数？年薪50W+的测试大佬教你怎么玩

Jmeter扩展函数？年薪50W+的测试大佬教你怎么玩

很多同学&#xff0c;都问我&#xff1a;“老师&#xff0c;我的 jmeter 里面&#xff0c;怎么没有 MD5 函数&#xff0c;base64 函数也没有&#xff0c;我是不是用了假的 jmeter&#xff1f;” 哈哈哈&#xff0c;不是的。jmeter 的函数&#xff0c;有自带函数和扩展函数两大…
阅读更多...
Apollo 9.0搭建问题记录

Apollo 9.0搭建问题记录

虚拟机安装 可以看这个&#xff1a;https://blog.csdn.net/qq_45138078/article/details/129815408 写的很详细 内存 为了学习 Apollo &#xff0c;所以只是使用了虚拟机&#xff0c;内存得大一点&#xff08;128G&#xff09;&#xff0c;第一次&#xff0c;就是因为分配内…
阅读更多...
Python办公自动化 – 对数据进行正则表达式匹配

Python办公自动化 – 对数据进行正则表达式匹配

Python办公自动化 – 对数据进行正则表达式匹配 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自动化 – …
阅读更多...
2023年度总结：技术沉淀、持续学习

2023年度总结：技术沉淀、持续学习

2023年度总结&#xff1a;技术沉淀、持续学习 一、引言 今年是我毕业的第二个年头&#xff0c;也是完整的一年&#xff0c;到了做年终总结的时候了 这一年谈了女朋友&#xff0c;学习了不少技术&#xff0c;是充实且美好的一年&#xff01; 首先先看年初定的小目标&#xf…
阅读更多...
安达发|基于APS排程系统的PDM功能

安达发|基于APS排程系统的PDM功能

APS系统&#xff08;Advanced Planning and Scheduling&#xff0c;先进计划与排程&#xff09;是一种基于APS系统&#xff08;Advanced Planning and Scheduling&#xff0c;先进计划与排程&#xff09;是一种基于供应链管理和生产管理的综合性软件系统。它通过整合企业内外部…
阅读更多...
C# Winform 在低DPI创建窗体后，在高DPI运行时，窗体会自动拉伸，导致窗体显示不全

C# Winform 在低DPI创建窗体后，在高DPI运行时，窗体会自动拉伸，导致窗体显示不全

C# Winform 在低DPI创建窗体后&#xff0c;在高DPI运行时&#xff0c;窗体会自动拉伸&#xff0c;导致窗体显示不全&#xff0c; 比如在分辨率为100% 的电脑创建C#项目&#xff0c;当运动到分辨率为125%的电脑运行时&#xff0c;后者运行的窗体会自动拉伸&#xff0c;窗体显示…
阅读更多...
C++ OpenGL 3D Game Tutorial 2: Making OpenGL 3D Engine学习笔记

C++ OpenGL 3D Game Tutorial 2: Making OpenGL 3D Engine学习笔记

视频地址https://www.youtube.com/watch?vPH5kH8h82L8&listPLv8DnRaQOs5-MR-zbP1QUdq5FL0FWqVzg&index3 一、main类 接上一篇内容&#xff0c;main.cpp的内容增加了一些代码&#xff0c;显得严谨一些&#xff1a; #include<OGL3D/Game/OGame.h> #include<i…
阅读更多...
5分钟使用Hologres实时湖仓加速分析挑战赛来袭

5分钟使用Hologres实时湖仓加速分析挑战赛来袭

活动简介 5分钟快速使用Hologres实时湖仓能力&#xff0c;加速分析数据湖OSS上Hudi、Delta、Paimon、ORC等格式数据&#xff0c;赢取精美礼品 活动入口&#xff1a;Hologres实时湖仓分析挑战赛-阿里云开发者社区 或点击文末【阅读全文】参与挑战 活动时间 2024年1月4日-202…
阅读更多...
第7章-第4节-Java中的Set集合和自然排序compareble

第7章-第4节-Java中的Set集合和自然排序compareble

1、HashSet&#xff1a; 1&#xff09;、 Set集合的特点 元素存储可以有序&#xff0c;可以无序&#xff08;要看选择的具体子类 HashSet 无序 LinkedHashSet&#xff08;有序&#xff09;,TreeSet&#xff08;排序&#xff09;&#xff09; 没有索引&#xff0c;不能通过索引…
阅读更多...
109.第一个qt项目

109.第一个qt项目

今天正式开始qt的学习。在安装完qt开发环境之后&#xff0c;下面我们来使用QtCreator创建项目。 1.创建项目 创建基于窗口的qt应用程序。选择编译套件, 编译套件用于项目文件的编译, 如果安装了多个编译套件, 在这里选择其中一个就可以了。选择版本控制工具。 2.项目文件&…
阅读更多...
狂拿offer，这12道性能测试面试题你会多少？不要再被挖坑了

狂拿offer，这12道性能测试面试题你会多少？不要再被挖坑了

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、性能测试包含了…
阅读更多...
使用Scrapy框架和代理IP进行大规模数据爬取

使用Scrapy框架和代理IP进行大规模数据爬取

目录 一、前言 二、Scrapy框架简介 三、代理IP介绍 四、使用Scrapy框架进行数据爬取 1. 创建Scrapy项目 2. 创建爬虫 3. 编写爬虫代码 4. 运行爬虫 五、使用代理IP进行数据爬取 1. 安装依赖库 2. 配置代理IP和User-Agent 3. 修改爬虫代码 4. 运行爬虫 六、总结 一…
阅读更多...
Verilog学习记录

Verilog学习记录

目录 一、Verilog简介 &#xff08;一&#xff09;Verilog 的主要特性 &#xff08;二&#xff09;Verilog的主要应用 &#xff08;三&#xff09;Verilog设计方法 二、Verilog基础语法 &#xff08;一&#xff09;标识符和关键字 &#xff08;二&#xff09;Verilog数据…
阅读更多...
多模态推荐系统综述：一、特征交互 Bridge

多模态推荐系统综述：一、特征交互 Bridge

一、特征交互 挑战1.如何融合不同语义空间中的模态特征并获得每种模态的偏好。GNN注意力 挑战2.如何在数据稀疏的情况下获得推荐模型的全面表示。对比学习解缠学习 挑战3. 如何优化轻量级推荐模型和参数化模态编码器。 1. Bridge 侧重于考虑多模态信息来捕获用户和项目之间的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023