ElementPlus Divider 分割線

Divider 分割線

區(qū)隔內(nèi)容的分割線。

基礎(chǔ)用法

對(duì)不同章節(jié)的文本段落進(jìn)行分割。

<template>
  <div>
    <span>青春是一個(gè)短暫的美夢(mèng), 當(dāng)你醒來(lái)時(shí), 它早已消失無(wú)蹤</span>
    <el-divider></el-divider>
    <span>少量的邪惡足以抵消全部高貴的品質(zhì), 害得人聲名狼藉</span>
  </div>
</template>

設(shè)置文案

可以在分割線上自定義文案內(nèi)容。

<template>
  <div>
    <span>頭上一片晴天，心中一個(gè)想念</span>
    <el-divider content-position="left">少年包青天</el-divider>
    <span>餓了別叫媽, 叫餓了么</span>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <span>為了無(wú)法計(jì)算的價(jià)值</span>
    <el-divider content-position="right">阿里云</el-divider>
  </div>
</template>

垂直分割

<template>
  <div>
    <span>雨紛紛</span>
    <el-divider direction="vertical"></el-divider>
    <span>舊故里</span>
    <el-divider direction="vertical"></el-divider>
    <span>草木深</span>
  </div>
</template>

Divider Attributes