出于業務需求要做一個這個東西，這叫啥頁不知道。。但是做法就是邊框上添加字段，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组件，带标题的边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。