vue实现分割线
使用 HTML 和 CSS 实现分割线
在 Vue 中，可以通过纯 HTML 和 CSS 快速实现分割线。使用 <hr> 标签是最简单的方式，结合 CSS 可以自定义样式。
<template>
<div>
<hr class="divider" />
</div>
</template>
<style scoped>
.divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 16px 0;
}
</style>使用组件封装分割线
将分割线封装为可复用的 Vue 组件，方便在项目中多次调用。
<template>
<div class="divider"></div>
</template>
<script>
export default {
name: 'Divider'
}
</script>
<style scoped>
.divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 16px 0;
}
</style>使用时直接引入组件：
<template>
<div>
<Divider />
</div>
</template>
<script>
import Divider from './Divider.vue';
export default {
components: { Divider }
}
</script>支持动态样式
通过 Props 传递样式参数，实现分割线的动态配置。
<template>
<div
class="divider"
:style="{
height: thickness + 'px',
backgroundColor: color,
margin: margin
}"
></div>
</template>
<script>
export default {
name: 'Divider',
props: {
thickness: {
type: Number,
default: 1
},
color: {
type: String,
default: '#e0e0e0'
},
margin: {
type: String,
default: '16px 0'
}
}
}
</script>调用时传入参数：
<Divider :thickness="2" color="#ff0000" margin="24px 0" />使用第三方 UI 库
如果项目中使用 UI 库（如 Element UI、Vuetify 或 Ant Design Vue），可以直接调用其提供的分割线组件。
以 Element UI 为例：
<template>
<el-divider></el-divider>
</template>
<script>
import { ElDivider } from 'element-plus';
export default {
components: { ElDivider }
}
</script>垂直分割线
通过调整 CSS 实现垂直分割线，适用于菜单或布局分隔。
<template>
<div class="vertical-divider"></div>
</template>
<style scoped>
.vertical-divider {
width: 1px;
height: 100%;
background-color: #e0e0e0;
margin: 0 8px;
}
</style>虚线分割线
通过 CSS 的 border-style 属性实现虚线效果。
<template>
<div class="dashed-divider"></div>
</template>
<style scoped>
.dashed-divider {
border: none;
height: 1px;
border-top: 1px dashed #ccc;
margin: 16px 0;
}
</style>带文本的分割线
在分割线中间添加文本，常用于表单或标题分隔。
<template>
<div class="divider-with-text">
<span class="divider-text">Or</span>
</div>
</template>
<style scoped>
.divider-with-text {
display: flex;
align-items: center;
margin: 16px 0;
}
.divider-with-text::before,
.divider-with-text::after {
content: "";
flex: 1;
border-bottom: 1px solid #e0e0e0;
}
.divider-text {
padding: 0 12px;
color: #666;
}
</style>以上方法涵盖了常见的分割线实现需求，可以根据项目需求选择合适的方式。
