Press UI

# Text

# Import

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

export default {
  components: {
    PressText,
  }
}

# Code demonstration

# Basic usage

Set the text content through the text parameter.

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

# Set the theme

The type parameter can be used to set the text theme.

<PressText type="primary" text="Primary color"/>
<PressText type="error" text="Error"/>
<PressText type="success" text="Success"/>
<PressText type="warning" text="Warning"/>
<PressText type="info" text="Information"/>

# Make a call

Call by setting the mode attribute to phone and providing the encryption value encrypt.

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

# Date format

By setting the mode attribute to date, you can use the date format,

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

# Name

By setting the mode attribute to name, you can use the name format.

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

Add href to specify the link address.

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

# Displaying the Amount

The amount can be displayed by setting the mode attribute to name.

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

# Prefix and Postfix Icons

Add prefixIcon, suffixIcon to specify the icon and position, and iconStyle to set the icon style.

<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')"
/>

# Beyond hidden

The text beyond hidden style is built-in. Set the lines property to indicate how many lines to hide.

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

# Mini Program Open Capabilities

The Mini Program open capabilities can be used through open-type.

<PressText
  text="Share to Mini Program"
  open-type="share"
  type="success"
  @click="onClick"
/>

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

# API

# Props

Parameter Description Type Default value
type Theme color string -
show Whether to display boolean true
text Value string -
prefix-icon Prefix icon string -
suffix-icon Postfix icon string -
mode Mode
text Normal text, price Price, phone Phone number
name name, date date, link hyperlink		 string -
href When mode is link, the configured link string -
format Formatting rules string | function -
call When mode is phone, whether to make a call by clicking on the text boolean false
open-type How to open the applet string -
bold Whether bold boolean false
block Whether block boolean false
lines The number of lines displayed for text. If set, ellipsis will be displayed if the number of lines exceeds this string | number -
color Text color string #303133
size Font size string | number -
icon-style Icon style string -
decoration Text decoration, underline, strikethrough, etc., optional values ​​are none | underline | line-through string none
margin Margin string | number | object -
line-height Text line height string -
align Text alignment, optional values ​​are left | center | right string left
word-wrap Text wrap, optional values ​​are break-word | normal | anywhere string normal

# Events

Event name Description Parameters
click Click -
横屏

← Toast →