- 使用perps定义样式数组
<template>
<view class="timeCounter">
<text :style='{ color: fontColor, fontSize: fontSize, fontWeight: fontWeight }'>
{{ time }}
</text>
</view>
</template>
<script>
export default {
name: "timeCounter",
components: {},
data() {
return {
time: null,
intervalTimer: null,
};
},
props: {
fontColor: {
type: String,
default: '#666666'
},
fontSize: {
type: String,
default: '32rpx'
},
fontWeight: {
type: Number,
default: 700
}
},
computed: {},
watch: {},
mounted() {
this.getTime();
this.intervalTimer = setInterval(this.getTime, 1000);
},
destroyed() {
clearInterval(this.intervalTimer);
},
methods: {
getTime() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
hours = hours < 10 ? `0${hours}` : hours;
minutes = minutes < 10 ? `0${minutes}` : minutes;
seconds = seconds < 10 ? `0${seconds}` : seconds;
this.time = `${hours}:${minutes}:${seconds}`;
console.log(this.time);
},
},
};
</script>
<style lang='scss' scoped>
.timeCounter {
display: flex;
align-items: center;
justify-content: center;
> text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>
- 单个属性设置,使用样式直接配置
.....
<text class="textStyle" >
文字样式
</text>
.....
.textStyle {
color: #007AFF;
font-size: 50rpx;
}