提交 60aa7de9 编写于 作者: H hulinneil

删除多余的uni自定义组件

上级 c018ec79
<template name="graceCountd">
<view class="grace-countdown">
<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{h}}</view>
<view class="grace-countdown-splitor" :style="{color:splitorColor}">:</view>
<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{i}}</view>
<view class="grace-countdown-splitor" :style="{color:splitorColor}">:</view>
<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{s}}</view>
</view>
</template>
<script>
export default {
name: "graceCountd",
props: {
bgrColor: {
type: String,
default: "#FFFFFF"
},
borderColor:{
type:String,
default : "#000000"
},
fontColor: {
type: String,
value: "#000000"
},
splitorColor: {
type: String,
default: "#000000"
},
timer:{
type:String,
default:""
}
},
data() {
return {
setTime:null,
h: '00',
i: '00',
s: '00',
leftTime: 0
}
},
created:function(e){
var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
var res = this.timer.match(reg);
if (res == null){
console.log('时间格式错误'); return false;
}else{
var year = parseInt(res[1]);
if (year < 1000) { console.log('时间格式错误'); return false; }
var month = parseInt(res[2]);
var day = parseInt(res[3]);
var h = parseInt(res[4]);
if (h < 0 || h > 24) { console.log('时间格式错误'); return false; }
var i = parseInt(res[5]);
if (i < 0 || i > 60) { console.log('时间格式错误'); return false; }
var s = parseInt(res[6]);
if (s < 0 || s > 60) { console.log('时间格式错误'); return false; }
var leftTime = new Date(year, month - 1, day, h, i, s);
this.leftTime = leftTime;
this.countDown(this);
this.setInterValFunc(this);
}
},
beforeDestroy(){
clearInterval(this.setTime)
},
methods: {
setInterValFunc:function(obj){
this.setTime = setInterval(function(){ obj.countDown(obj);}, 1000);
},
countDown: function (self){
var leftTime = self.leftTime - new Date();
if (leftTime > 0) {
var hours = parseInt(leftTime / 1000 / 60 / 60 , 10);
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
var seconds = parseInt(leftTime / 1000 % 60, 10);
}else{
var hours = 0, minutes = 0, seconds = 0;
}
if (hours < 10) { hours = '0' + hours;}
if (minutes < 10) { minutes = '0' + minutes; }
if (seconds < 10) { seconds = '0' + seconds; }
self.h = hours; self.i = minutes; self.s = seconds;
}
}
}
</script>
<style>
.grace-countdown{padding:2rpx 0; flex-wrap:nowrap;}
.grace-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
.grace-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
</style>
\ No newline at end of file
<template>
<view class="uni-numbox">
<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>
<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>
</view>
</template>
<script>
export default {
name: 'number-box',
props: {
value: {
type: Number,
default: 0
},
min: {
type: Number,
default: -Infinity
},
max: {
type: Number,
default: Infinity
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
inputValue: this.value
}
},
computed: {
disableSubtract() {
return this.value <= this.min
},
disableAdd() {
return this.value >= this.max
}
},
watch: {
value(val) {
this.inputValue = val;
},
inputValue(val) {
this.$emit('change', val);
}
},
methods: {
_calcValue(type) {
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === 'subtract') {
value -= step
} else if (type === 'add') {
value += step
}
if (value < this.min || value > this.max) {
return
}
this.inputValue = value / scale;
},
_getDecimalScale() {
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
},
_onBlur(event) {
let value = event.detail.value;
if (!value) {
this.inputValue = 0;
return
}
value = +value;
if (value > this.max) {
value = this.max;
} else if (value < this.min) {
value = this.min
}
this.inputValue = value
}
}
}
</script>
<style>
.uni-numbox {
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 70upx;
}
.uni-numbox-minus,
.uni-numbox-plus {
margin: 0;
background-color: #f9f9f9;
width: 80upx;
height: 100%;
line-height: 70upx;
text-align: center;
color: #555555;
}
.uni-numbox-minus {
border: 2upx solid #cccccc;
border-right: none;
border-top-left-radius: 6upx;
border-bottom-left-radius: 6upx;
}
.uni-numbox-plus {
border: 2upx solid #cccccc;
border-left: none;
border-top-right-radius: 6upx;
border-bottom-right-radius: 6upx;
}
.uni-numbox-value {
border: 2upx solid #cccccc;
background-color: #ffffff;
width: 80upx;
height: 100%;
text-align: center;
}
.uni-numbox-disabled {
color: #c0c0c0;
}
</style>
<template>
<view class="segmented-control" :class="styleType" :style="wrapStyle">
<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle"
@click="onClick(index)">
{{item}}
</view>
</view>
</template>
<script>
export default {
name: 'segmented-control',
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return [];
}
},
activeColor: {
type: String,
default: '#007aff'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: this.current
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val;
}
}
},
computed: {
wrapStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `border:0;`;
break;
default:
styleString = `border-color: ${this.activeColor}`;
break;
}
return styleString;
},
itemStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `color:#000;border-left:0;`;
break;
default:
styleString = `color:${this.activeColor};border-color:${this.activeColor};`;
break;
}
return styleString;
},
activeStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;`;
break;
default:
styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
break;
}
return styleString;
}
},
methods: {
onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index;
this.$emit('clickItem', index);
}
}
},
}
</script>
<style>
.segmented-control {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
font-size: 30upx;
border-radius: 12upx;
box-sizing: border-box;
margin: 0 auto;
overflow: hidden;
}
.segmented-control.button {
border: 1upx solid;
}
.segmented-control.text {
border: 0;
border-radius: 0upx;
}
.segmented-control-item {
flex: 1;
text-align: center;
line-height: 70upx;
box-sizing: border-box;
}
.segmented-control-item.button {
border-left: 1upx solid;
}
.segmented-control-item.text {
border-left: 0;
}
.segmented-control-item:first-child {
border-left-width: 0;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册