Text实现美团部分样式

Text基础

首先是Text的相关基础。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text-0000001815927600

Text是显示一段文本的组件。

可以包含Span、ImageSpan、SymbolSpan和ContainerSpan子组件。

接口

Text(content?: string | Resource, value?: TextOptions)

参数名参数类型必填参数描述
contentstring | Resource否文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：' '
value11+TextOptions否文本组件初始化选项。

属性

除支持通用属性和文本通用属性外，还支持以下属性：

下表只有部分属性。

名称参数类型描述
textAlignTextAlign设置文本段落在水平方向的对齐方式。默认值：TextAlign.Start
textOverflow{overflow: TextOverflow}设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}说明：文本截断是按字截断。
maxLinesnumber设置文本的最大行数。说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。
lineHeightstring | number | Resource设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
decoration{type: TextDecorationType,color?: ResourceColor}设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}

效果实现

最终效果如下：

下面的内容主要介绍了如何使用Text组件实现上图中的各种文字效果。

名称

名称的关键代码如下：

Text(relaxPlaceInfo.name)
  .fontSize(15)
  .textAlign(TextAlign.Start)
  .width('100%')
  .maxLines(1)// 文本超长显示
  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文本超长显示省略号

maxLines设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。

textOverflow设置文本超长时的显示方式。TextOverflow.Ellipsis表示文本超长显示省略号。

textAlign属性设置文本绘制中的文本对齐方式

可选值为：

- 'left'：文本左对齐。

- 'right'：文本右对齐。

- 'center'：文本居中对齐。

- 'start'：文本对齐界线开始的地方。

- 'end'：文本对齐界线结束的地方。

ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。

默认值：'left'

评分

关键代码如下：

Row() {
  Rating({ rating: relaxPlaceInfo.rating, indicator: false })
    .stars(5)
    .stepSize(0.5)
    .width(70)
    .height(30)
    .padding({ left: 0, top: 0 })

  Text(relaxPlaceInfo.rating.toString())
    .fontSize(11)
    .fontColor('#fe7445')
    .margin({ left: 3 })
}

这个很简单，主要就是字体的大小与字体颜色的设置。

单价、地点等

关键代码如下：

// 单价
Text('￥'+relaxPlaceInfo.singlePrice.toString()+'/人')
  .fontSize(12)
  .fontColor('#a5a5a5')
  .textAlign(TextAlign.Start)

// 消费人数
Text(relaxPlaceInfo.consumptionNumber.toString()+'人消费')
  .fontSize(12)
  .fontColor('#a5a5a5')
  .textAlign(TextAlign.End)
  .layoutWeight(1)
  ......

这些主要也是字体的大小与字体颜色的设置。

距离

关键代码如下：

// 距离
Text(relaxPlaceInfo.distance) {
  ImageSpan($r('app.media.ic_relax_pos'))
    .width('12')
    .height('12')
    .objectFit(ImageFit.Fill)
    .verticalAlign(ImageSpanAlignment.CENTER)
  Span(relaxPlaceInfo.distance)
    .fontColor('#a5a5a5')
    .fontSize(12)
    .margin({ left: 1 })
}
.textAlign(TextAlign.End)
.layoutWeight(1)

Text可以包含Span、ImageSpan、SymbolSpan和ContainerSpan子组件。

这里使用了ImageSpan、Span子组件。

ImageSpan用于显示行内图片：

名称参数类型描述
verticalAlignImageSpanAlignment图片基于文本的对齐方式。默认值：ImageSpanAlignment.BOTTOM
objectFitImageFit设置图片的缩放类型。默认值：ImageFit.Cover

ImageSpanAlignment

名称描述
TOP图片上边沿与行上边沿对齐。
CENTER图片中间与行中间对齐。
BOTTOM图片下边沿与行下边沿对齐。
BASELINE图片下边沿与文本BaseLine对齐。

ImageFit

名称描述
Contain保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Cover保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Auto图像会根据其自身尺寸和组件的尺寸进行适当缩放，以在保持比例的同时填充视图。
Fill不保持宽高比进行放大缩小，使得图片充满显示边界。
ScaleDown保持宽高比显示，图片缩小或者保持不变。
None保持原有尺寸显示。

Span用于显示行内文本。

标签

实现代码如下：

// 标签
Row() {
  ForEach(relaxPlaceInfo.tags, (tag: MyTag) => {
    Text(tag.name)
      .fontSize(10)
      .fontColor(tag.fontColor)
      .backgroundColor(tag.backgroundColor)
      .borderRadius(2)
      .margin({ right: 3, top: 5 })
      .padding({
        left: 1,
        right: 1,
        top: 1,
        bottom: 1
      })
  })
}

通过ForEach来实现多个标签的展示，根据传入参数的不同实现不同的效果。

使用fontColor属性来设置字体的颜色，这里通过传入的参数来分别显示不同的字体颜色

使用backgroundColor属性来设置字体的背景颜色，这里通过传入的参数来分别展示不同的字体背景颜色。

通过borderRadius属性设置元素的边框圆角半径。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-border-0000001478341105-V2

名称参数类型描述
borderRadiusLength | BorderRadiuses9+设置元素的边框圆角半径，不支持百分比。从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框圆角半径。

渐变背景标签

关键代码如下:

Text(relaxActivity.tag)
  .fontSize(12)
  .fontColor('#b87658')
  .width(80)
  .textAlign(TextAlign.End)
  .margin({ left: 10 })// 设置颜色渐变起始角度为顺时针方向90°
  .linearGradient({
    angle: 90,
    colors: [
      [Color.White, 0.0],
      ['#fcebe1', 1.0],
    ]
  })

这里面主要是linearGradient这个属性

名称参数描述
linearGradient{angle?: number | string,direction?: GradientDirection,colors: Array<[ResourceColor, number]>,repeating?: boolean}线性渐变。- angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180- direction: 线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom- colors: 为渐变的颜色描述。- repeating: 为渐变的颜色重复着色。默认值：false

惠标签

关键代码:

Text('惠')
  .fontSize(11)
  .fontColor('#ff7511')
  .backgroundColor('#ffede3')
  .borderRadius(5)
  .margin({ left: 10 })
  .padding({
    left: 1.5,
    right: 1.5,
    top: 1.5,
    bottom: 1.5
  })

这块很简单,就是backgroundColor、borderRadius和padding属性的设置。

项目当前价格

关键代码：

// ￥
Text('￥')
  .fontSize(10)
  .fontColor('#fd531d')
  .textAlign(TextAlign.End)
  .margin({ left: 3 })
// 价格
Text(relaxActivity.currentPrice)
  .fontSize(13)
  .fontColor('#fd531d')

整体由两个部分组合而成。

设置不同的fontSize，设置相同的fontColor。

折扣

关键代码如下：

// 打折
Text(relaxActivity.discount + '折')
  .fontSize(11)
  .fontColor('#fc8358')
  .backgroundColor(Color.White)
  .margin({ left: 2 })
  .border({ width: 1 })
  .borderRadius(2)
  .borderColor('#efa58d')
  .visibility(relaxActivity.discount != '' ? Visibility.Visible : Visibility.None)

使用border属性设置边框的宽度。

使用borderColor属性设置边框的颜色。

名称参数类型描述
border{width?: Length | EdgeWidths9+,color?: ResourceColor | EdgeColors9+,radius?: Length | BorderRadiuses9+,style?: BorderStyle | EdgeStyles9+}统一边框样式设置接口。- width：设置边框宽度。- color：设置边框颜色。- radius：设置边框圆角半径。- style：设置边框样式。说明：边框宽度默认值为0，即不显示边框。
borderColorResourceColor | EdgeColors9+设置元素的边框颜色。默认值：Color.Black
borderRadiusLength | BorderRadiuses9+设置元素的边框圆角半径，不支持百分比。

原价格

关键代码：

// 原价格
Text('￥' + relaxActivity.oldPrice)
  .fontSize(12)
  .fontColor('#a5a5a5')
  .margin({ left: 2 })
  .decoration({ type: TextDecorationType.LineThrough, color: '#a5a5a5' })

这里主要是decoration这个属性。

名称参数类型描述
decoration{type: TextDecorationType,color?: ResourceColor}设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}

项目标题

关键代码：

Text(relaxActivity.description)
  .fontSize(13)
  .margin({ left: 2, right: 2 })
  .fontColor(Color.Black)
  .maxLines(1)// 文本超长显示
  .textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号
  .flexShrink(1)

这个没什么特别的，所有用的上面已经说过了。

完整代码

布局

/**
 * 地点卡片
 * @param relaxPlaceInfos 地点信息
 */
@Builder
function placeCard(relaxPlaceInfos: RelaxPlaceInfo[]) {
  List() {
    ForEach(relaxPlaceInfos, (relaxPlaceInfo: RelaxPlaceInfo) => {
      ListItem() {
        Column() {
          Row() {
            // 地点图片
            Image(relaxPlaceInfo.image)
              .width(80)
              .height(80)
              .borderRadius(8)
              .margin({ left: 10, top: 10, bottom: 10 })

            // 详细信息
            Column() {
              // 地点名称
              Text(relaxPlaceInfo.name)
                .fontSize(15)
                .textAlign(TextAlign.Start)
                .width('100%')
                .maxLines(1)// 文本超长显示
                .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文本超长显示省略号
              // 星级评分
              Row() {
                Rating({ rating: relaxPlaceInfo.rating, indicator: false })
                  .stars(5)
                  .stepSize(0.5)
                  .width(70)
                  .height(30)// .colorBlend('#ff5703')
                  .padding({ left: 0, top: 0 })

                Text(relaxPlaceInfo.rating.toString())
                  .fontSize(11)
                  .fontColor('#fe7445')
                  .margin({ left: 3 })

                // 单价
                Text('￥'+relaxPlaceInfo.singlePrice.toString()+'/人')
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.Start)

                // 消费人数
                Text(relaxPlaceInfo.consumptionNumber.toString()+'人消费')
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.End)
                  .layoutWeight(1)
              }
              .width('74%')
              .margin({ left: 0, top: 0 })

              Row() {
                // 地点
                Text(relaxPlaceInfo.position)
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.Start)

                // 分类
                Text(relaxPlaceInfo.category)
                  .fontSize(12)
                  .width('25%')
                  .fontColor('#a5a5a5')
                  .margin({ left: 5 })
                  .textAlign(TextAlign.Start)

                // 距离
                Text(relaxPlaceInfo.distance) {
                  ImageSpan($r('app.media.ic_relax_pos'))
                    .width('12')
                    .height('12')
                    .objectFit(ImageFit.Fill)
                    .verticalAlign(ImageSpanAlignment.CENTER)
                  Span(relaxPlaceInfo.distance)
                    .fontColor('#a5a5a5')
                    .fontSize(12)
                    .margin({ left: 1 })
                }
                .textAlign(TextAlign.End)
                .layoutWeight(1)
              }
              .width('74%')
              .margin({ left: 0, top: 0 })
              .justifyContent(FlexAlign.Start)

              // 标签
              Row() {
                ForEach(relaxPlaceInfo.tags, (tag: MyTag) => {
                  Text(tag.name)
                    .fontSize(10)
                    .fontColor(tag.fontColor)
                    .backgroundColor(tag.backgroundColor)
                    .borderRadius(2)
                    .margin({ right: 3, top: 5 })
                    .padding({
                      left: 1,
                      right: 1,
                      top: 1,
                      bottom: 1
                    })
                })
              }

              // 描述
              Text(relaxPlaceInfo.description)
                .fontSize(12)
                .fontColor('#a5a5a5')
                .textAlign(TextAlign.Start)
                .margin({ top: 5 })
            }
            .margin({ left: 10, top: 10 })
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')

          Column() {
            ForEach(relaxPlaceInfo.relaxActivities, (relaxActivity: RelaxActivity) => {
              Row() {
                // 标签
                Text(relaxActivity.tag)
                  .fontSize(12)
                  .fontColor('#b87658')
                  .width(80)
                  .textAlign(TextAlign.End)
                  .margin({ left: 10 })// 设置颜色渐变起始角度为顺时针方向90°
                  .linearGradient({
                    angle: 90,
                    colors: [
                      [Color.White, 0.0],
                      ['#fcebe1', 1.0],
                    ]
                  })
                // 惠
                Text('惠')
                  .fontSize(11)
                  .fontColor('#ff7511')
                  .backgroundColor('#ffede3')
                  .borderRadius(5)
                  .margin({ left: 10 })
                  .padding({
                    left: 1.5,
                    right: 1.5,
                    top: 1.5,
                    bottom: 1.5
                  })
                // ￥
                Text('￥')
                  .fontSize(10)
                  .fontColor('#fd531d')
                  .textAlign(TextAlign.End)
                  .margin({ left: 3 })
                // 价格
                Text(relaxActivity.currentPrice)
                  .fontSize(13)
                  .fontColor('#fd531d')
                // 打折
                Text(relaxActivity.discount + '折')
                  .fontSize(11)
                  .fontColor('#fc8358')
                  .backgroundColor(Color.White)
                  .margin({ left: 2 })
                  .border({ width: 1 })
                  .borderRadius(2)
                  .borderColor('#efa58d')
                  .visibility(relaxActivity.discount != '' ? Visibility.Visible : Visibility.None)
                // 原价格
                Text('￥' + relaxActivity.oldPrice)
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .margin({ left: 2 })
                  .decoration({ type: TextDecorationType.LineThrough, color: '#a5a5a5' })
                // 项目标题
                Text(relaxActivity.description)
                  .fontSize(13)
                  .margin({ left: 2, right: 2 })
                  .fontColor(Color.Black)
                  .maxLines(1)// 文本超长显示
                  .textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号
                  .flexShrink(1)
              }
              .width('100%')
              .margin({ top: 10 })
            })
          }
          .width('100%')
        }
        .width('96%')
        .backgroundColor(Color.White)
        .borderRadius(5)
        .margin({ left: 2, right: 2, top: 10 })
        .padding({ top: 3, bottom: 10 })
      }
    })
  }
  .width('100%')
  .height('80%')
  .padding({ bottom: 10 })
  .scrollBar(BarState.Off)
  .alignListItem(ListItemAlign.Center)
}

类

export class RelaxActivity {
  tag: string;
  currentPrice: string;
  discount: string;
  oldPrice: string;
  description: string;

  constructor(tag: string, currentPrice: string, discount: string, oldPrice: string, description: string) {
    this.tag = tag;
    this.currentPrice = currentPrice;
    this.discount = discount;
    this.oldPrice = oldPrice;
    this.description = description;
  }
}

export class RelaxPlaceInfo {
  image: Resource;
  name: string;
  rating: number;
  singlePrice: number;
  consumptionNumber: number;
  category: string;
  position: string;
  distance: string;
  tags: MyTag[];
  description: string;
  relaxActivities: RelaxActivity[];

  constructor(image: Resource, name: string, rating: number,singlePrice: number, consumptionNumber: number, category: string, position: string, distance: string,
    tags: MyTag[],
    description: string, relaxActivities: RelaxActivity[]) {
    this.image = image;
    this.name = name;
    this.rating = rating;
    this.singlePrice = singlePrice;
    this.consumptionNumber = consumptionNumber;
    this.category = category;
    this.position = position;
    this.distance = distance;
    this.tags = tags;
    this.description = description;
    this.relaxActivities = relaxActivities;
  }
}

export class MyTag {
  name: string;
  fontColor: string;
  backgroundColor: string;

  constructor(name: string, fontColor: string, backgroundColor: string) {
    this.name = name;
    this.fontColor = fontColor;
    this.backgroundColor = backgroundColor;
  }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于SpringBoot设计模式之结构型设计模式·桥接模式

基于SpringBoot设计模式之结构型设计模式·桥接模式

文章目录 介绍开始架构图定义类的功能定义类的实现 测试样例 总结 介绍 将抽象部分与它的实现部分分离&#xff0c;使他们都可以独立地发生变化。 Bridge的意思是桥梁。就像在现实世界中&#xff0c;桥梁的功能是将河流的两侧连接起来一样, Bridge模式的作用也是将两样东西连接…
阅读更多...
西南大学的计算机怎么样?

西南大学的计算机怎么样?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 西南大学计算机学院2024届考研呈现"背道而驰"的走势&#xff0c;学硕(计算机科学与技术)分数线大幅提升23分至333分&#xff0c;而专硕(电子信息)分数线大幅下降30分至300分。学硕实际录取36人&#xff0c;复…
阅读更多...
安装vue发生异常：npm ERR! the command again as root/Administrator.

安装vue发生异常：npm ERR! the command again as root/Administrator.

一、异常 npm ERR! The operation was rejected by your operating system. npm ERR! Its possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might b…
阅读更多...
AI创作3款软件分享，助力内容创作者高效产出优质作品

AI创作3款软件分享，助力内容创作者高效产出优质作品

为了增加创造力和作品质量&#xff0c;许多创作者开始利用人工智能辅助工具。这些工具不仅可以帮助我们迅速生成各种类型的内容&#xff0c;例如文章、绘画、视频广告等&#xff0c;还提供语法检查和优化建议等实用功能。本文将向大家推荐三款适用于Ai先行者、Tracup、Adoe Fir…
阅读更多...
PDF.js的使用及其跨域问题解决

PDF.js的使用及其跨域问题解决

目录 一、PDF.js 简介 二、使用配置和步骤 1.引入PDF.js 2.加载PDF文件 3.渲染PDF页面 三、在Vue中使用PDF.js示例 1.安装PDF.js 2.在Vue组件中使用 四、在原生js中使用PDF.js示例 1.加载PDF文件并渲染页面 五、解决跨域问题 1.服务器配置 2.使用代理服务器 下面介…
阅读更多...
【大模型】3分钟了解提示(Prompt)工程、检索增强(RAG)和微调

【大模型】3分钟了解提示(Prompt)工程、检索增强(RAG)和微调

我们先看下面这个图&#xff1a; 简单理解大模型是通过海量训练数据训练出来的&#xff0c;它的能力非常强&#xff0c;但是有时候会给出错误的回答。那产生错误的原因可能是什么呢&#xff1f; 1.提问错误&#xff08;提示工程&#xff09; 在我们提问的方式不对的情况下&a…
阅读更多...
MySql中常用的日期函数

MySql中常用的日期函数

TIMESTAMPDIFF(unit, start_time, end_time)&#xff1a;日期相减 计算两个时间之间的差值&#xff0c;并以指定的单位返回结果。unit参数可以是以下之一&#xff1a;SECOND、MINUTE、HOUR、DAY、WEEK、MONTH、QUARTER或YEAR。这个函数返回的是两个时间之间的差值&#xff0c;可…
阅读更多...
Anchor DETR论文笔记

Anchor DETR论文笔记

原文链接 [2109.07107] Anchor DETR: Query Design for Transformer-Based Object Detection (arxiv.org)https://arxiv.org/abs/2109.07107 原文笔记 What 提出了一种新的基于锚点的查询设计&#xff0c;即将锚点编码为对象查询。 Why 对象检测任务是预测图像中每个对象…
阅读更多...
消息队列（仿RabbitMQ）—— 生产消费模型

消息队列（仿RabbitMQ）—— 生产消费模型

本篇将实现一个3000多行的一个小项目&#xff0c;基于AMQP&#xff08;高级消息队列协议&#xff09;的消息队列&#xff0c;主要仿照 RabbitMQ 实现该代码&#xff0c;其本质也是生产消费模型的一个升级版本。实现的功能为&#xff1a;消息发布端将消息发送到服务器端&#xf…
阅读更多...
vue elementui el-table实现增加行，行内编辑修改

vue elementui el-table实现增加行，行内编辑修改

需求&#xff1a; 前端进行新增表单时&#xff0c;同时增加表单的明细数据。明细数据部分&#xff0c;可进行行编辑。 效果图&#xff1a; <el-card><div slot"header"><span style"font-weight: bold">外来人员名单2</span><…
阅读更多...
Idea、VS Code 如何安装Fitten Code插件使用

Idea、VS Code 如何安装Fitten Code插件使用

简介 Fitten Code是由非十大模型驱动的AI编程助手&#xff0c;它可以自动生成代码&#xff0c;提升开发效率&#xff0c;帮您调试Bug&#xff0c;节省您的时间。还可以对话聊天&#xff0c;解决您编程碰到的问题。免费且支持80多种语言&#xff1a;Python、C、Javascript、Typ…
阅读更多...
Spring Cache Caffeine 高性能缓存库

Spring Cache Caffeine 高性能缓存库

​ Caffeine 背景 Caffeine是一个高性能的Java缓存库&#xff0c;它基于Guava Cache进行了增强&#xff0c;提供了更加出色的缓存体验。Caffeine的主要特点包括&#xff1a; 高性能&#xff1a;Caffeine使用了Java 8最新的StampedLock乐观锁技术&#xff0c;极大地提高了缓存…
阅读更多...
多模态大语言模型（MLLM）-Deepseek Janus

多模态大语言模型（MLLM）-Deepseek Janus

论文链接&#xff1a;https://arxiv.org/abs/2410.13848 代码链接&#xff1a;https://github.com/deepseek-ai/Janus 本次解读Janus: Decoupling Visual Encoding for Unified Multimodal Understanding and Generation 前言 Deepseek出品&#xff0c;必属精品。 创新点 传…
阅读更多...
Redis学习笔记（二）--Redis的安装与配置

Redis学习笔记（二）--Redis的安装与配置

文章目录 一、Redis的安装1、克隆并配置主机2、安装前的准备工作1.安装gcc2.下载Redis3.上传到Linux 3、安装Redis1.解压Redis2.编译3.安装3.查看bin目录 4、Redis启动与停止1.前台启动2.命令式后台启动3.Redis的停止4.配置式后台启动 二、连接前的配置1、绑定客户端IP2、关闭保…
阅读更多...
使用 Elasticsearch 作为向量数据库询问有关你的 GitHub 存储库的问题

使用 Elasticsearch 作为向量数据库询问有关你的 GitHub 存储库的问题

作者&#xff1a;来自 Elastic Fram Souza 本博客介绍了使用 RAG 和 Elasticsearch 实现语义代码查询的 GitHub Assistant&#xff0c;提供对 GitHub 存储库的洞察&#xff0c;并可扩展到 PR 反馈、问题处理和生产准备情况审查。 该项目允许你直接与 GitHub 存储库交互并利用语…
阅读更多...
xlsx xlsx-style-vite 实现前端根据element 表格导出excel且定制化样式 背景 列宽等

xlsx xlsx-style-vite 实现前端根据element 表格导出excel且定制化样式 背景 列宽等

前言 先看下最终效果图吧&#xff0c;需要的可以参考我的实现方式 这是最终导出的表格文件 类似这种的&#xff0c;特定单元格需要额外标注&#xff0c;表头也有月份然后细分的&#xff0c;表格组件是这样的 注意 别使用xlsx-style 这个库&#xff0c;太多问题了&#xff0c;…
阅读更多...
如何选择云主机或者VPS挂EA？

如何选择云主机或者VPS挂EA？

近年来&#xff0c;随着EA交易在零售外汇圈的逐渐流行&#xff0c;越来越多的交易者开始使用外汇VPS&#xff08;虚拟专用服务器&#xff09;来挂载EA&#xff08;智能交易系统&#xff09;进行交易。通过外汇VPS&#xff0c;可以最大程度地减少MT4客户终端与MT4服务器之间的延…
阅读更多...
多特征变量序列预测(四) Transformer-BiLSTM风速预测模型

多特征变量序列预测(四) Transformer-BiLSTM风速预测模型

往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较 全是干货 | 数据集、学习资料、建模资源分享&#xff01; EMD、EEMD、FEEMD、CEEMD、CEEMDAN的区别、原理和Python实现&#xff08;一&#xff09;EMD-CSDN博客 EMD、EEM…
阅读更多...
【模型部署】python中socket编程入门知识-系列1

【模型部署】python中socket编程入门知识-系列1

写在前面&#xff1a; 首先感谢兄弟们的订阅&#xff0c;让我有创作的动力&#xff0c;在创作过程我会尽最大能力&#xff0c;保证作品的质量&#xff0c;如果有问题&#xff0c;可以私信我&#xff0c;让我们携手共进&#xff0c;共创辉煌。 路虽远&#xff0c;行则将至&#…
阅读更多...
[实时计算flink]基于Paimon的数据库实时入湖快速入门

[实时计算flink]基于Paimon的数据库实时入湖快速入门

Apache Paimon是一种流批统一的湖存储格式&#xff0c;支持高吞吐的写入和低延迟的查询。本文通过Paimon Catalog和MySQL连接器&#xff0c;将云数据库RDS中的订单数据和表结构变更导入Paimon表中&#xff0c;并使用Flink对Paimon表进行简单分析。 背景信息 Apache Paimon是一…
阅读更多...
最新文章

Copyright @ 2022~2023