直播平台源代码，Uniapp text 样式设置

直播平台源代码，Uniapp text 样式设置

1、使用perps定义样式数组

 

1

<template><br>  <view><br>    <text :style='{ color: fontColor, fontSize: fontSize, fontWeight: fontWeight }'><br>      {{ time }}<br>    </text><br>  </view><br></template><br> <br><script><br>export default {<br>  name: "timeCounter",<br>  components: {},<br>  data() {<br>    return {<br>      time: null,<br>      intervalTimer: null,<br>    };<br>  },<br>  props: {<br>    fontColor: {<br>      type: String,<br>      default: '#666666'<br>    },<br>    fontSize: {<br>      type: String,<br>      default: '32rpx'<br>    },<br>    fontWeight: {<br>      type: Number,<br>      default: 700<br>    }<br>  },<br>  computed: {},<br>  watch: {},<br>  mounted() {<br>    this.getTime();<br>    this.intervalTimer = setInterval(this.getTime, 1000);<br>  },<br>  destroyed() {<br>    clearInterval(this.intervalTimer);<br>  },<br>  methods: {<br>    getTime() {<br>      let date = new Date();<br>      let hours = date.getHours();<br>      let minutes = date.getMinutes();<br>      let seconds = date.getSeconds();<br>      hours = hours < 10 ? `0${hours}` : hours;<br>      minutes = minutes < 10 ? `0${minutes}` : minutes;<br>      seconds = seconds < 10 ? `0${seconds}` : seconds;<br>      this.time = `${hours}:${minutes}:${seconds}`;<br>      console.log(this.time);<br>    },<br>  },<br>};<br></script><br><style scoped><br>.timeCounter {<br>  display: flex;<br>  align-items: center;<br>  justify-content: center;<br>  > text {<br>    overflow: hidden;<br>    white-space: nowrap;<br>    text-overflow: ellipsis;<br>  }<br>}<br></style><br>

​

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

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

 以上就是直播平台源代码，Uniapp text 样式设置， 更多内容欢迎关注之后的文章