Vue组件，带标题的边框

出于业务需求要做一个这个东西，这叫啥页不知道。。但是做法就是边框上添加字段，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>

总结

以上是生活随笔为你收集整理的Vue组件，带标题的边框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。