Text 文本 | Press UI

# Text 文本

# 引入

import PressText from 'press-ui/press-text/press-text';

export default {
  components: {
    PressText,
  }
}

# 代码演示

# 基础用法

通过 text 参数设置文本内容。

<PressText text="朝花夕拾" />

# 设置主题

通过 type 参数可以设置文本主题。

<PressText type="primary" text="主色"/>
<PressText type="error"   text="错误"/>
<PressText type="success" text="成功"/>
<PressText type="warning" text="警告"/>
<PressText type="info" text="信息"/>

# 拨打电话

通过将 mode 属性设置为 phone 即可调用拨打电话，提供加密值 encrypt。

<PressText mode="phone" text="19012345678" call/>
<PressText mode="phone" text="19012345678" format="encrypt"/>

# 日期格式化

通过将 mode 属性设置为 date，可使用日期格式，

<PressText mode="date" text="1720633407953"/>

# 姓名

通过将 mode 属性设置为 name，可使用姓名格式。

<PressText mode="name" text="花木兰" format="encrypt"/>

# 超链接

添加 href 指定链接地址。

<PressText
  mode="link"
  text="Go to Press UI docs"
  href="https://novlan1.github.io/press-ui/"
/>

# 显示金额

通过将 mode 属性设置为 name，可显示金额。

<PressText mode="price" text="728732.32"/>

# 前后图标

添加 prefixIcon, suffixIcon 指定图标和位置，iconStyle 设置图标样式。

<PressText
  prefix-icon="like-o"
  icon-style="font-size: 19px"
  :text="t('snow')"
/>
<PressText
  suffix-icon="arrow"
  icon-style="font-size: 18px"
  :text="t('checkMore')"
/>

# 超出隐藏

内置了文字超出隐藏样式，设置 lines 属性表明几行后隐藏。

<PressText
  :lines="2"
  :text="t('longText')"
/>

# 小程序开放能力

通过 open-type 可使用小程序开放能力。

<PressText
  text="分享小程序"
  open-type="share"
  type="success"
  @click="onClick"
/>

export default {
  methods: {
    onClick() {},
  }
}

# API

# Props

参数	说明	类型	默认值
type	主题颜色	string	-
show	是否显示	boolean	`true`
text	值	string	-
prefix-icon	前置图标	string	-
suffix-icon	后置图标	string	-
mode	模式，`text` 普通文本，`price` 价格，`phone` 手机号，`name` 姓名， `date` 日期，`link` 超链接	string	-
href	`mode` 为 `link` 时，配置的链接	string	-
format	格式化规则	string \| function	-
call	`mode` 为 `phone` 时，点击文本是否拨打电话	boolean	`false`
open-type	小程序的打开方式	string	-
bold	是否粗体	boolean	`false`
block	是否块状	boolean	`false`
lines	文本显示的行数，如果设置，超出此行数，将会显示省略号	string \| number	-
color	文本颜色	string	`#303133`
size	字体大小	string \| number	-
icon-style	图标的样式	string	-
decoration	文字装饰，下划线，中划线等，可选值 `none \| underline \| line-through`	string	`none`
margin	外边距	string \| number \| object	-
line-height	文本行高	string	-
align	文本对齐方式，可选值 `left \| center \| right`	string	`left`
word-wrap	文字换行，可选值 `break-word \| normal \| anywhere`	string	`normal`

# Events

事件名	说明	参数
click	点击	-

横屏

← Style Toast →