样式需求：边框线中写文字

封装组件：

<template>
    <div class="borderTitle">
        <span>{{title}}</span>
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
            default:()=>{
                return ''
            }
        }
    }
}
</script>
<style lang="less" scoped>
.borderTitle {
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 20px;
    margin: 10px;
    > span {
        position: absolute;
        left: 20px;
        top: -11px;
        width: 80px;
        text-align: center;
        font-size: 16px;
        color: #606266;
        font-weight: 900;
        background: #fff;
    }
}
</style>

使用：
<div>
    <border-titleVue :title="title">
        任何内容
    </border-titleVue>
</div>
<script>
import borderTitleVue from './borderTitle.vue'
export default {
    components: {
        borderTitleVue,
    },
    data(){
        return{
            title:'标题',
        }
    }
}
</script>

或者使用标签

<fieldset style="border:1px solid #909399;padding:5px;">
      <legend>员工管理</legend>
      <el-row>
        <el-input
          class="srarch_input"
          v-model="rangeName"
          placeholder="请输入名称"
          style="width: 280px;"
        ></el-input>
        <el-button @click="searchRange">查询</el-button>
        <el-button @click="newlyIncreased">新增</el-button>
      </el-row>
    </fieldset>