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