arc-text

更新时间:

弧形文本,文本内容展示在 arc-text 组件盒模型内最大且居中的圆周上,超出的内容将会被截断。

如下图示例

子组件

不支持

属性

支持通用属性

样式

支持通用样式

名称 类型 默认值 必填 描述
color <color> #000000 文本颜色
font-size <length> 30px 文本尺寸
font-weight normal | bold | lighter | border | <number> normal 当前平台仅支持 normal 与 bold 两种效果
direction clockwise | counterclockwise clockwise 文本绘制方向,clockwise 顺时针方向,counterclockwise 逆时针方向。
start-angle <deg> 0deg 文本绘制起始角度,以时钟 0 点为基线,取值范围为 0 到 360。

事件

支持通用事件

arc-text组件示例

基础用法
<template>
  <div class="wrapper">
    <div class="text-container">
      <arc-text>{{ content }}</arc-text>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content:
        '文本过长,超出部分会被截断 hello world abcdefghijklmnopqrstuvwxyz 0123456789'
    }
  }
}
</script>

<style>
.wrapper {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.text-container {
  margin: 40px;
  width: 400px;
  height: 400px;
  flex-direction: column;
}
</style>
复制代码
图标图标
图标图标
图标图标
上一篇
progress
下一篇
barcode
以上内容对您是否有帮助?
  • 毫无帮助
  • 帮助不大
  • 一般
  • 很好
  • 非常好
意见反馈