vue项目中需要用到带文字或者是按钮的分割线,并点击分割线进行另外组件的展示或者隐藏,研究了一下,记录一下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="line-left-right">
<el-button size="mini" round style="position:relative;bottom:15px">查勘结果<i ref="btn_pic" :class="iconClass"></i></el-button>
</div>
</div>
</template>
<style>
.line-left-right {
padding: 0 0px 0px;
margin: 20px 0px;
line-height: 1px;
border-left: 750px solid rgb(221, 221, 221);
border-right: 750px solid rgb(221, 221, 221);
text-align: center;
height: 2px;
}
</style>