uni-app LED效果插件需求 支持设置LED字体颜色 背景颜色 支持显示负数 小数

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app LED效果插件需求 支持设置LED字体颜色 背景颜色 支持显示负数 小数

无内容

3 回复

uniapp打包app,页面上需要做一个功能,比如显示数字300,需要显示为LED样式,需要这么一个插件,有会封装插件的大佬么,有偿也可以。

为了满足uni-app中LED效果插件的需求,我们可以利用Vue.js和CSS来创建一个自定义组件。这个组件将支持设置LED字体颜色、背景颜色,并且能够显示负数和小数。以下是一个基本的实现案例:

首先,创建一个名为LEDDisplay.vue的组件文件:

<template>
  <div class="led-display" :style="containerStyle">
    <span :style="textStyle">{{ formattedValue }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    fontColor: {
      type: String,
      default: '#FF0000' // 默认红色字体
    },
    bgColor: {
      type: String,
      default: '#000000' // 默认黑色背景
    }
  },
  computed: {
    containerStyle() {
      return {
        backgroundColor: this.bgColor,
        display: 'inline-block',
        padding: '10px',
        borderRadius: '5px',
        fontSize: '24px',
        textAlign: 'center'
      };
    },
    textStyle() {
      return {
        color: this.fontColor
      };
    },
    formattedValue() {
      return this.value.toFixed(2); // 保留两位小数
    }
  }
};
</script>

<style scoped>
.led-display {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>

然后,在你的uni-app页面的<template>中使用这个组件:

<template>
  <view>
    <LEDDisplay :value="-123.456" fontColor="#00FF00" bgColor="#0000FF" />
    <LEDDisplay :value="45.67" fontColor="#FFFF00" bgColor="#FF00FF" />
  </view>
</template>

<script>
import LEDDisplay from '@/components/LEDDisplay.vue';

export default {
  components: {
    LEDDisplay
  }
};
</script>

<style>
/* 页面样式,如果需要 */
</style>

在这个实现中:

  1. LEDDisplay.vue 组件接收三个属性:value(显示的值),fontColor(字体颜色),和bgColor(背景颜色)。
  2. containerStyle 计算属性返回包含背景颜色和样式的对象。
  3. textStyle 计算属性返回包含字体颜色的对象。
  4. formattedValue 计算属性将传入的值格式化为保留两位小数,这样可以支持显示小数。
  5. 在页面中使用<LEDDisplay>组件时,可以传入不同的值、字体颜色和背景颜色来测试效果。

这个组件能够处理负数、小数,并且允许自定义LED效果的字体和背景颜色。你可以根据需要进一步扩展和美化这个组件。

回到顶部