Vue组件，带标题的边框

最新推荐文章于 2024-05-25 08:44:35 发布

遥远的理想国

最新推荐文章于 2024-05-25 08:44:35 发布

阅读量2.3k

点赞数 3

分类专栏： Vue 文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_41740463/article/details/126626072

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

出于业务需求要做一个这个东西，这叫啥页不知道。。但是做法就是边框上添加字段，elementUI没找到合适的组件，所以用定位写了一个，留下来当轮子用，做成了组件。

目前测试下来适用性还行，底色按需修改即可

组件：

<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>