vue+element ui 带字或者组件分割线

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>