文本

介绍

定义文本类型、文本样式，提供点击、鼠标按下等事件配置

API

Props

参数名	描述	类型	默认值
status	默认状态	'default' | 'disbaled' | 'hide'	'default'
type	类型	'title' | 'text' | 'paragraph'	'text'
data	内容	string	文本
titleLevel	标题级别	'h1' | 'h2' | 'h3' | 'h4'| 'h5'	'h1'
expandRows	最大行数	string	-
textType	文本类型	'secondary'|'primary'|'success'|'danger'|'warning'	'secondary'
fontStyle	样式	'bold'|'code'|'delete'|'underline'|'mark'	-
copyable	复制	boolean	false
editable	编辑	boolean	false
ellipsis	超出省略	boolean	false
expandable	展开折叠	boolean	false
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
width	宽 ， 布局容器宽度	string	-
opacity	不透明度 ， 布局容器背景色透明度	string	-
display	显示, 设置组件的显示布局模式	Display	-
boxStyle	盒模型， margin,border,padding设置	BoxStyle	-
fontSize	字号	number	-
lineHeight	行高	number	-
fontWeight	字重	'100'|'normal'|'500'|'600'|'700'|'900'	'normal'
textColor	文字颜色	string	-
textAlign	对齐	'left'|'center'|'right'|'justify'	'left'
background	背景	Background	-
boxShadow	阴影	BoxShadow	-
uniqueKey	唯一标识, 组件的唯一标识	string	-
loop	循环数据, 循环渲染设置	Loop	-

Events

事件名	描述	参数
editSaveEvent	保存事件	ctx params:MouseEvent loop:LoopParams
onClick	点击按钮	ctx params:MouseEvent loop:LoopParams
onMousedown	鼠标按下时触发	ctx params:MouseEvent loop:LoopParams
onMouseup	鼠标松开时触发	ctx params:MouseEvent loop:LoopParams

Type

//显示
type Display = {
  type:"block"|"inline-block"|"inline"|"flex",
  // type选择flex可配置以下属性
  flex:{
    flexDirection:"row"|"column"|"row-reverse"|"column-reverse",
    alignItems:"flex-start"|"center"|"flex-end"|"stretch"|"base-line",
    justifyContent:"flex-start"|"center"|"flex-end"|"space-between"|"space-around"
  }
}

// 盒模型
type BoxStyle = {
  "marigin": [string|string|string|string],
  "border": [string|string|string|string],
  "padding": [string|string|string|string],
  "borderColor": 'color-border-1'|'color-border-2'|'color-border-3'|'color-border-4',
  "borderStyle": 'solid'|'dotted'|'dashed'
}

// 盒模型
type Collapse = {
  "marigin": [string|string|string|string],
  "border": [string|string|string|string],
  "padding": [string|string|string|string],
  "borderColor": 'color-border-1'|'color-border-2'|'color-border-3'|'color-border-4',
  "borderStyle": 'solid'|'dotted'|'dashed'
}

// 背景样式
type Background = {
  "color": string,
  "size": "cover"|"contain"|"length"
  "width": {
    "unit": "px"|"%",
    "value": number
  }
  "height":{
    "unit": "px"|"%",
    "value": number
  }
}

// 阴影
type BoxShadow = {
  "color":string,
  "hShadow":string,
  "vShadow":string,
  "blur":number,
}

// 循环
type Loop = {
  "data": any[],
  "paramName": string,
  "indexName": string,
  "key": string
}

// 循环变量数据参数
type LoopParams = {
  "indexName":string,
  "paramName":string,
  "ref":ComputedRefImpl, // 全部的循环变量数据
  "row":number,
  "rowIndex":number
}[]