element-plus的el-text组件（文本组件）的介绍和使用

news2024/11/27 14:40:35

el-text（适合文本操作的组件）

设置文本type,如default,primary,success,info,warning,danger
超出容器尺寸自动省略，tuncated属性
设置size属性控制文本大小，有large,default,small
设置tag属性，值为html5标签名，其内容会被该标签覆盖

<script setup lang="ts">
import { ref } from 'vue';

</script>

    
<template>

  <el-container :direction="vertical">
    <el-header height="">
      <!-- Header content -->
    </el-header>
    <el-container :direction="horizontal">
      <el-aside width="200px">
        <!-- Aside content -->
      </el-aside>
      <el-container :direction="vertical">
        <el-main height="">
          <el-text type="primary" size="small">
               small primary
          </el-text>
          <el-text type="primary" >
               primary
          </el-text>
          <el-text type="default" size="large">
               large primary
          </el-text>

          <el-text type="default" truncated style="width: 100px;">
               truncate test,123456789ABCDEFGHIJKLMNOPQRSTasdasd
          </el-text>


          <br/>
          <el-text type="default" truncated tag="h1">
               tag test,123456789ABCDEFGHIJKLMNOPQRSTasdasd
          </el-text>

          <el-text type="default" truncated tag="p">
               tag test,123456789ABCDEFGHIJKLMNOPQRSTasdasd
          </el-text>

        </el-main>
        <el-footer height="">
          <!-- Footer content -->
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
  


</template>

<style scoped>

</style>