翻牌器单独设置前后缀样式

翻牌器单独设置前后缀样式

在这里插入图片描述

<template><div :style="[fontStyle,styleBackGroundColor]"><!--        <span style="color: #1d1d1d"> {{optionData}}</span>--><!-- 设置前缀样式 --><span class="prefix" :style="prefixStyle" v-if="cellInfo.options.prefix">{{ cellInfo.options.prefix }}</span><count-to :startVal="cellInfo.options.startVal":endVal="Number(optionData)"v-if="!loading":decimals="cellInfo.options.decimals":duration="cellInfo.options.duration*1000"/><!-- 设置后缀样式 --><span class="suffix" :style="suffixStyle" v-if="cellInfo.options.suffix">{{ cellInfo.options.suffix }}</span></div>
</template>
<script>
import countTo from "vue-count-to"//备注:如果翻牌器出现一条横线==》需要配置lineHeight:行高 让它显示在蓝框中
export default {name: "ele-count",components: {countTo},computed: {fontStyle() {let style = {display: this.cellInfo.options.style.align!=undefined?'':"flex",width: this.cellInfo.common.width + 'px',height: this.cellInfo.common.height + 'px',fontSize: this.cellInfo.options.style.fontSize + 'px',color: this.cellInfo.options.style.color,fontWeight: this.cellInfo.options.style.thickness,fontFamily: this.cellInfo.options.style.fontSheet,textAlign: this.cellInfo.options.style.align + ' !important',lineHeight: this.cellInfo.options.style.height + 'px',letterSpacing: this.cellInfo.options.style.space + 'px'}return style;},suffixStyle() {let style = {fontSize: this.cellInfo.options.style.suffixfontSize==undefined?this.cellInfo.options.style.fontSize + 'px':this.cellInfo.options.style.suffixfontSize + 'px',color: this.cellInfo.options.style.suffixcolor,marginLeft: this.cellInfo.options.style.suffixmarginLeft + 'px'||'-10px',letterSpacing: this.cellInfo.options.style.suffixspace + 'px'||'0px',}return style;},prefixStyle() {let style = {fontSize: this.cellInfo.options.style.prefixfontSize==undefined?this.cellInfo.options.style.fontSize + 'px':this.cellInfo.options.style.prefixfontSize + 'px',color: this.cellInfo.options.style.prefixcolor,marginRight: this.cellInfo.options.style.prefixmarginRight + 'px',letterSpacing: this.cellInfo.options.style.prefixspace + 'px'||'0px',}return style;},},data() {return {config: {}};},}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/44999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么样的主食冻干算好冻干?品质卓越、安全可靠的主食冻干分享

当前主食冻干市场产品质量参差不齐。一些品牌过于追求营养数据的堆砌和利润的增长&#xff0c;却忽视了猫咪健康饮食的基本原则&#xff0c;导致市场上出现了以肉粉冒充鲜肉、修改产品日期等不诚信行为。更令人担忧的是&#xff0c;部分产品未经过严格的第三方质量检测便上市销…

Hadoop的HA模式搭建

准备三台虚拟机 bigdata007&#xff0c;bigdata008&#xff0c;bigdata009 1.前置工作 1.修改虚拟机的IP地址和hostname 2.配置集群中的ip映射&#xff08;/etc/hosts&#xff09; 192.168.111.57 bigdata007 192.168.111.58 bigdata008 192.168.111.59 bigdata0093.关闭虚拟…

武夷山细节决定成败抓质量求生存

在当今竞争激烈的市场环境中&#xff0c;细节决定成败&#xff0c;质量求生存的理念已成为企业发展的关键。蓝鹏测控科技有限公司&#xff0c;一家专业从事工业测量领域的高新技术企业&#xff0c;正是秉持这一理念&#xff0c;在工业测径仪领域取得了显著成就。 蓝鹏测控科技…

pandas修改时间索引报错处理

import pandas as pd import numpy as np import osdfpd.DataFrame(index[a,b,c],data{序列:[1,2,3]}) df.rename(index{a:a1},inplaceTrue) print(df) print(df.index.dtype)df1pd.DataFrame(index[2024-01-01,2024-01-02,2024-01-03],data{序列:[1,2,3]}) df1.rename(index{2…

Excel——REPLACE函数实现敏感信息打码

第一步&#xff1a; 以素材Excel文档为例。 在F2单元格中输入函数“REPLACE(B2,4,5,"*****")”&#xff0c;输入完毕后&#xff0c;按Enter键开始计算&#xff0c;并使用填充柄对其他区域进行填充。 这个函数的意思是&#xff1a;从第4位数字开始的5个数字用5个“…

医院门诊预约挂号小程序模板源码

医院门诊预约挂号小程序模板源码,主要有&#xff1a;绿色的医院住院办理&#xff0c;门诊预约挂号微信小程序页面模板。包含&#xff1a;办卡绑定、快速办理预约挂号、门诊缴费、住院服务、医院信息、个人中心、添加就诊人、找医生等等。 医院门诊预约挂号小程序模板源码

Elasticsearch:使用 Filebeat 从 Node.js Web 应用程序提取日志

本指南演示了如何从 Node.js Web 应用程序中提取日志并将其安全地传送到 Elasticsearch Service 部署中。你将设置 Filebeat 来监控具有标准 Elastic Common Schema (ECS) 格式字段的 JSON 结构日志文件&#xff0c;然后在向 Node.js 服务器发出请求时&#xff0c;你将在 Kiban…

Doris安装部署

Doris安装部署 1、 MPP概念2.Doris简要介绍 1、 MPP概念 MPP (Massively Parallel Processing)&#xff0c;即大规模并行处理&#xff0c;在数据库非共享集群中&#xff0c;每个节点都有独立的磁盘存储系统和内存系统&#xff0c;业务数据根据数据库模型和应用特点划分到各个节…

无人机之电池保养

一、充电时 1、推荐使用官方充电器和充电管家 2、充电时确保电池处于关闭状态 3、冷却后再充电理想充电温度22-28度 二、使用时 1、首次使用需要充电唤醒电池 2、切勿将电池耗尽过放容易造成电池鼓包 三、储存时 1、存放在环境干燥通风的地方 2、不使用时每两个月充一…

谷粒商城实战-25-分布式组件-SpringCloud Alibaba-Nacos配置中心-加载多配置集

文章目录 一&#xff0c;拆分配置集二&#xff0c;配置文件中配置多配置集1&#xff0c;引用多配置集2&#xff0c;验证 三&#xff0c;多配置集总结1&#xff0c;使用场景2&#xff0c;优先级 这一节介绍如何加载多个配置集。 大多数情况下&#xff0c;我们把配置全部放在一个…

C语言 结构体和共用体——对结构体的操作

目录 如何访问结构体的成员&#xff1f; 结构体变量的赋值操作 结构体变量的取地址值操作 如何访问结构体的成员&#xff1f; 结构体变量的赋值操作 结构体变量的取地址值操作

如何为谷歌seo打好基础?

选择获取一个合适的域名&#xff0c;选择一个好的域名是 SEO 成功的第一步。以下是一些建议&#xff1a; 域名名称&#xff1a;要短小易记&#xff0c;不要强行插入关键词。最好用你的公司名称&#xff0c;避免使用连字符或特殊字符。用户在输入一个复杂的域名时容易出错&…

Ozon俄罗斯哪些产品热销中?Ozon7月市场热卖趋势放送

Ozon俄罗斯哪些产品热销工具&#xff1a;D。DDqbt。COm/74rD 据Ozon数据&#xff0c;2023年&#xff0c;在自提服务方面&#xff0c;Ozon投资了100亿扩展自提网络&#xff0c;自提点数量激增至超过5万个&#xff0c;是之前的2.6倍。 物流基础设施方面&#xff0c;Ozon在仓库建…

树莓派4B_OpenCv学习笔记19:OpenCV舵机云台物体追踪

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; Python 版本3.7.3&#xff1a; ​​ 今日学习&#xff1…

【数据结构】排序——快速排序

前言 本篇博客我们继续介绍一种排序——快速排序&#xff0c;让我们看看快速排序是怎么实现的 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;数据结构 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 ​ 目录 …

前端JS特效第30波:jquery图片列表按顺序分类排列图片组效果

jquery图片列表按顺序分类排列图片组效果&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &…

Profibus协议转Profinet协议网关模块连接智能电表通讯案例

一、背景 在工业自动化领域&#xff0c;Profibus协议和Profinet协议是两种常见的工业通讯协议&#xff0c;而连接智能电表需要用到这两种协议之间的网关模块。本文将通过一个实际案例&#xff0c;详细介绍如何使用Profibus转Profinet模块&#xff08;XD-PNPBM20&#xff09;实…

启航IT之旅:为新生绘制的学习路线图

随着七月的热浪悄悄席卷而来&#xff0c;各地高考成绩陆续放榜&#xff0c;对于刚迈过高考这座独木桥的你们&#xff0c;这不仅仅是一个故事的终章&#xff0c;更是另一段冒险的序曲。特别是那些心中有一团IT火焰燃烧的少年们&#xff0c;暑假的钟声已经敲响&#xff0c;是时候…

2493-04A-6 同轴连接器

型号简介 2493-04A-6是Southwest Microwave的连接器。该连接器是一种端子连接器&#xff0c;采用 1.0 毫米插头&#xff08;公头&#xff09;进行连接。它由多个部件组成&#xff0c;包括过渡块、接地板、螺纹夹紧板、发射针、冷板、底座、电路板和外壳等。 型号特点 外壳&…