# myText文本
提示
myText组件是uniapp中比较基础的组件.可以方便地设置文本,前缀图标,后缀图标等
# 基本使用
<template>
<view>
<myCard>
<myText text="这是文本"></myText>
<myText text="这是文本2" prefix="chat" marginTop="32"></myText>
<myText text="这是文本3" suffix="lock" iconColor="red" iconSize="60"></myText>
<myText text="100" money @confirm="confirm"></myText>
</myCard>
</view>
</template>
<script>
export default {
methods: {
confirm() {
console.log('点击了确认按钮')
},
}
}
</script>
# Props属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 文本内容 | String | '' |
show | 是否显示 | Boolean | false |
money | 是否显示金额单位 | Boolean | false |
col | 是否竖直方向 | Boolean | false |
type | 类型 1代表主要颜色 2代表次要颜色 3代表备注颜色 primary蓝色 success绿色 warning橙色 error红色 info灰色 | String | '' |
position | 相对位置 | String | '' |
zIndex | 层级 | Number\String | '' |
top | 顶部 | Number\String | '' |
right | 右侧 | Number\String | '' |
bottom | 下边 | Number\String | '' |
left | 左边 | Number\String | '' |
width | 默认宽度 | Number\String | '' |
height | 默认高度 | Number\String | '' |
maxWidth | 最大宽度 | Number\String | '' |
minWidth | 最小宽度 | Number\String | '' |
href | 跳转链接 包括路径和网址 | String | '' |
prefix | 前置图标 可为图片可为icon | String | '' |
suffix | 后置图标 /static/cloudCompany/sj.png 小三角 | String | '' |
iconSize | 图标大小 | String | '32' |
iconColor | 图标颜色 默认跟随文本 设置了才采用自定义 | String | '' |
iconMarginTop | 图标距离顶部 | Number\String | '2' |
iconMarginRight | 图标距离右侧 | Number\String | '4' |
iconMarginBottom | 图标距离底部 | Number\String | '' |
iconMarginLeft | 图标距离左侧 | Number\String | '4' |
iconBorderRadius | 图标圆角 | Number\String | '' |
selectable | 是否可选 | Boolean | fasle |
block | 是否块状 块状就跟view一样 占一行 | Boolean | fasle |
lines | 超过多少行省略 | Number\String | '' |
color | 文字颜色 | String | '' |
size | 文字大小 | Number\String | '28' |
fontStyle | 字体样式 normal italic oblique inherit | String | '' |
decoration | 文字装饰 | String | '' |
whiteSpace | 空白符 normal pre nowrap pre-wrap pre-line inherit | String | '' |
wordBreak | 单词换行 break-all keep-all | String | '' |
textIndent | 是否空俩格 | Boolean | false |
marginTop | 默认距离顶部 | Number\String | '2' |
marginRight | 右边距 | Number\String | '' |
marginBottom | 底边距 | Number\String | '' |
marginLeft | 默认距离左侧 | Number\String | '' |
padding | 文本内边距 | Number\String | '' |
borderRadius | 文本容器圆角 | Number\String | '' |
background | 背景色 | Number\String | 'white' |
bgWidth | 外层宽度 | Number\String | '' |
bgHeight | 外层高度 | Number\String | '' |
flex | 布局 | Number\String | '' |
bgPadding | 外层内边距 | Number\String | '' |
bgBackground | 外层背景颜色 | String | '' |
bgBorderRadius | 外层圆角 | String | '' |
bgJustifyContent | 外层对齐 | String | 'center' |
bgAlignItems | 外层对齐 | String | '' |
bgTextAlign | 外层对齐 | String | '' |
justifyContent | 对齐 | Number\String | '' |
alignItems | 对齐 | String | '' |
textAlign | 对齐 | String | '' |
call | 是否拨打 | Boolean | false |
showConfirm | 是否显示确认 | Boolean | false |
tip | 确认提示语 | String | '' |
cancelText | 取消提示语 | String | '取消' |
cancelColor | 取消颜色 | String | '' |
confirmText | 确定提示语 | String | '确定' |
# Event事件
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 点击时触发 | 无 |
cancel | 取消时触发 | 无 |