102 lines
2.1 KiB
Markdown
102 lines
2.1 KiB
Markdown
|
[toc]
|
|||
|
|
|
|||
|
|
# 静态文本（`StaticText`）
|
|||
|
|
|
|||
|
|
> 展示一个静态文本，主要用于页面静态文本展示
|
|||
|
|
|
|||
|
|
<RenderComponent
|
|||
|
|
:config="StaticTextComponent"
|
|||
|
|
:component="StaticText"
|
|||
|
|
:prop-value="{
|
|||
|
|
base: {
|
|||
|
|
text: '我们一起建设OpenDataV吧',
|
|||
|
|
type: 'text'
|
|||
|
|
}
|
|||
|
|
}"
|
|||
|
|
:style="{
|
|||
|
|
color: '#d03050',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontWeight: 800,
|
|||
|
|
width: 550,
|
|||
|
|
height: 100
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
title="静态文本"
|
|||
|
|
mode="debug"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
## 属性
|
|||
|
|
|
|||
|
|
### 基础属性
|
|||
|
|
|
|||
|
|
| 配置项 | 作用 | 说明 |
|
|||
|
|
| :----------: | :----------------: | :--: |
|
|||
|
|
| `文本类型` | `文本(text)`或者`符号(symbol)` | 符号可选项目中已加载的iconfont 图标，具体详见`工具栏`的`图标` |
|
|||
|
|
| `自定义文本` | 静态文本的文件内容 | 任意文本内容 |
|
|||
|
|
|
|||
|
|
## 样式
|
|||
|
|
|
|||
|
|
### 字体设置
|
|||
|
|
|
|||
|
|
| 配置项 | 作用 | 说明 |
|
|||
|
|
| :-: | :-: | :-: |
|
|||
|
|
| `颜色` | 文字颜色，支持`HEXA`、`HSLA`和`RGBA` 颜色表示方法 | |
|
|||
|
|
| `字体大小` | 字体大小 | 单位`px`|
|
|||
|
|
| `字体宽度` | 字体宽度 | 100-900，必须是 100 的整倍数 |
|
|||
|
|
| `字体` | 字体名称 | 保证该字体在本机上存在，否则采用浏览器默认字体 |
|
|||
|
|
|
|||
|
|
## 示例
|
|||
|
|
|
|||
|
|
<div class="demo">
|
|||
|
|
|
|||
|
|
<RenderComponent
|
|||
|
|
:config="StaticTextComponent"
|
|||
|
|
:component="StaticText"
|
|||
|
|
:prop-value="propValue"
|
|||
|
|
:style="style"
|
|||
|
|
title="静态文本"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<RenderComponent
|
|||
|
|
:config="StaticTextComponent"
|
|||
|
|
:component="StaticText"
|
|||
|
|
:prop-value="symbolPropValue"
|
|||
|
|
:style="{
|
|||
|
|
color: '#18a058',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontWeight: 800,
|
|||
|
|
width: 450,
|
|||
|
|
height: 100
|
|||
|
|
}"
|
|||
|
|
title="符号文本"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script setup lang="ts" name="StaticTextDoc">
|
|||
|
|
import RenderComponent from 'docs/RenderComponent.vue'
|
|||
|
|
import StaticTextComponent from './config'
|
|||
|
|
import StaticText from './StaticText.vue'
|
|||
|
|
import type { StaticTextType } from './type'
|
|||
|
|
const propValue: StaticTextType = {
|
|||
|
|
base: {
|
|||
|
|
text: 'OpenDataV',
|
|||
|
|
type: 'text'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const style = {
|
|||
|
|
color: '#d03050',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontWeight: 800,
|
|||
|
|
width: 450,
|
|||
|
|
height: 100
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const symbolPropValue: StaticTextType = {
|
|||
|
|
base: {
|
|||
|
|
text: 'icon-clock',
|
|||
|
|
type: 'symbol'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|