1. Divider分割線

1.1. Divider分割線區隔內容的分割線。

1.2. Divider Attributes

參數	說明	類型	可選值	默認值
direction	設置分割線方向	string	horizontal / vertical	horizontal
content-position	設置分割線文案的位置	string	left / right / center	center

2. Divider分割線例子

2.1. 使用腳手架新建一個名為element-ui-divider折疊面板的前端項目, 同時安裝Element插件。

2.2. 在components下創建Divider.vue?

<template><div><h1>基礎用法</h1><h4>對不同章節的文本段落進行分割。</h4><div><span>青春是一個短暫的美夢, 當你醒來時, 它早已消失無蹤</span><el-divider></el-divider><span>少量的邪惡足以抵消全部高貴的品質, 害得人聲名狼藉</span></div><h1 style="margin-top: 100px;">設置文案</h1><h4>可以在分割線上自定義文案內容。</h4><div><span>頭上一片晴天, 心中一個想念</span><el-divider content-position="left">少年包青天</el-divider><span>餓了別叫媽, 叫餓了么</span><el-divider><i class="el-icon-mobile-phone"></i></el-divider><span>為了無法計算的價值</span><el-divider content-position="right">阿里云</el-divider></div><h1 style="margin-top: 100px;">垂直分割</h1><div><span>雨紛紛</span><el-divider direction="vertical"></el-divider><span>舊故里</span><el-divider direction="vertical"></el-divider><span>草木深</span></div></div> </template>

2.3. 運行項目, 訪問http://localhost:8080/#/Divider

總結

以上是生活随笔為你收集整理的047_Divider分割线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。