Text 文本

用于展示各种文本内容,支持多种样式和格式化选项。

基础用法

<zk-text text="基础文本" />
<zk-text text="主要文本" type="primary" />
<zk-text text="成功文本" type="success" />
<zk-text text="警告文本" type="warning" />
<zk-text text="危险文本" type="danger" />

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="text文本">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="text-row">
				<zk-text text="默认文本" margin="0 0 20rpx 0" />
				<zk-text text="主要文本" type="primary" margin="0 0 20rpx 0" />
				<zk-text text="成功文本" type="success" margin="0 0 20rpx 0" />
				<zk-text text="警告文本" type="warning" margin="0 0 20rpx 0" />
				<zk-text text="危险文本" type="danger" margin="0 0 20rpx 0" />
				<zk-text text="信息文本" type="info" margin="0 0 20rpx 0" />
			</view>
		</zk-theme>

		<!-- 文字大小 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字大小" />
			<view class="text-row">
				<zk-text text="24rpx文字" :size="24" margin="0 0 20rpx 0" />
				<zk-text text="28rpx文字" :size="28" margin="0 0 20rpx 0" />
				<zk-text text="32rpx文字" :size="32" margin="0 0 20rpx 0" />
				<zk-text text="36rpx文字" :size="36" margin="0 0 20rpx 0" />
				<zk-text text="40rpx文字" :size="40" margin="0 0 20rpx 0" />
			</view>
		</zk-theme>

		<!-- 文字粗细 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字粗细" />
			<view class="text-row">
				<zk-text text="正常文字" margin="0 0 20rpx 0" />
				<zk-text text="加粗文字" bold margin="0 0 20rpx 0" />
			</view>
		</zk-theme>

		<!-- 文字装饰 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字装饰" />
			<view class="text-row">
				<zk-text text="下划线文字" decoration="underline" margin="0 0 20rpx 0" />
				<zk-text text="删除线文字" decoration="line-through" margin="0 0 20rpx 0" />
			</view>
		</zk-theme>

	 

 

		<!-- 文本对齐 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文本对齐" />
			<view class="text-row">
				<zk-text text="左对齐文本" align="left" margin="0 0 20rpx 0" block />
				<zk-text text="居中文本" align="center" margin="0 0 20rpx 0" block />
				<zk-text text="右对齐文本" align="right" margin="0 0 20rpx 0" block />
			</view>
		</zk-theme>

		<!-- 文本截断 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文本截断" />
			<view class="text-row">
				<zk-text text="这是一段很长的文本,超过一行会自动截断,这是一段很长的文本,超过一行会自动截断" :lines="1" margin="0 0 20rpx 0" block />
				<zk-text text="这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断" :lines="2"
					margin="0 0 20rpx 0" block />
					<zk-text text="这是一段很长的文本,最多显示三行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断" :lines="3"
						margin="0 0 20rpx 0" block />
			</view>
			
		</zk-theme>

 
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.text-row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
</style>
			

API

Props 属性

参数 说明 类型 默认值
text 显示的文本内容 string ''
type 主题类型,可选值:primary / secondary / success / warning / danger / info string ''
mode 文本模式,可选值:text / price / phone / name / date / link string text
bold 是否加粗 boolean false
size 字体大小,单位rpx string / number 28
color 文本颜色 string ''
decoration 文本装饰,可选值:none / underline / line-through string none

Events 事件

事件名 说明 回调参数
click 点击文本时触发 event: Event