Uniapp text 样式设置

1. 使用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>

2. 单个属性设置,使用样式直接配置

 .....
<text class="textStyle" >
	文字样式
</text>
.....
	.textStyle {
		color: #007AFF;
		font-size: 50rpx;
	}