1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Divider：
在你的 Vue 组件中导入 Divider，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-divider></el-divider>
<p>这是分割线上面的内容。</p>
<el-divider></el-divider>
<p>这是分割线下面的内容。</p>
</div>
</template>
<script>
import { ElDivider } from 'element-plus';
export default {
components: {
ElDivider,
},
};
</script>
在上述代码中，我们导入了 ElDivider 组件，并在模板中使用它。ElDivider 组件创建了一条默认样式的分割线。
3. 自定义 Divider：
你可以根据需要自定义 Divider，例如，设置文本、样式等：
<template>
<div>
<el-divider orientation="left">左侧文本</el-divider>
<p>这是分割线上面的内容。</p>
<el-divider orientation="right">右侧文本</el-divider>
<p>这是分割线下面的内容。</p>
<el-divider dashed>虚线分割线</el-divider>
<p>这是虚线分割线下面的内容。</p>
<el-divider style="color: #1890ff; font-size: 18px;">自定义样式</el-divider>
<p>这是自定义样式分割线下面的内容。</p>
</div>
</template>
<script>
import { ElDivider } from 'element-plus';
export default {
components: {
ElDivider,
},
};
</script>
在这个例子中，我们通过 orientation 属性设置了分割线上的文本位置，通过 dashed 属性创建了虚线分割线，通过内联样式设置了自定义样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5583/ElementPlus