直播平臺原始碼，Uniapp text 樣式設定

直播平臺原始碼，Uniapp text 樣式設定

1、使用perps定義樣式陣列

<template>
  <view>
    <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 scoped>
.timeCounter {
  display: flex;
  align-items: center;
  justify-content: center;
  > text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

2、單個屬性設定,使用樣式直接配置

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

 以上就是直播平臺原始碼，Uniapp text 樣式設定， 更多內容歡迎關注之後的文章