Text 文本组件文档

简介

Text 是一个用于显示文本内容的 Vue 组件。它支持文本截断、自定义标签、行数限制、提示信息以及样式设置。

使用方式

<Text
:truncated="truncated"
:tag="tag"
:lineClamp="lineClamp"
:tip="tip"
:fontSize="fontSize"
:color="color"
@click="handleClick"
>

我是文本内容

<template>
  <Text
    :truncated="truncated"
    :tag="tag"
    :lineClamp="lineClamp"
    :tip="tip"
    :fontSize="fontSize"
    :color="color"
    @click="handleClick"
  >
    <!-- 文本内容插槽 -->
    我是文本内容
  </Text>
</template>

<script setup>
import { ref } from 'vue'
import Text from '@/components/Text/Text.tsx'

const truncated = ref(false) // 是否文本截断
const tag = ref('span') // 自定义标签，默认为 span
const lineClamp = ref(1) // 行数限制，默认为 1
const tip = ref('') // 提示信息
const fontSize = ref('') // 字体大小
const color = ref('') // 文本颜色

const handleClick = () => {
  // 点击事件处理逻辑
}
</script>

Props

Events

插槽

这样的文档形式清晰地展示了组件的属性、事件和插槽，同时使用了 setup 函数管理组件的状态和逻辑，使代码更加简洁和可维护。