如上圖所示，自定義封裝了一個vue的邊框組件，代碼如下，具體的樣式可以自己調整，當前案例支持傳入寬度、高度、最小高度、標題。

<template><div :style="{ width: width, height: height, minHeight: minHeight }" class="box"><div class="box-content"><div class="title">{{title}}</div><slot name="content"></slot></div><div class="angle-border left-top-border"></div><div class="angle-border right-top-border"></div><div class="angle-border left-bottom-border"></div><div class="angle-border right-bottom-border"></div></div> </template><script> export default {props: {'width': {default: '100%'},'height': {default: '100%'},'minHeight': {default: '0px'},'title': {default: ''},} } </script><style lang="less" scoped> .box {position: relative;overflow: auto;overflow-x: hidden;background-color: rgb(42,53,77);border: 1px solid #178d97;.box-content {width: 100%;height: 100%;.title {position: absolute;z-index: 2;margin-left: 5px;font-size: 16px;color: rgb(49,224,240);}}.angle-border {position: absolute;width: 8px;height: 8px;}.left-top-border {top: 0;left: 0;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}.right-top-border {top: 0;right: -1px;border-top: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}.left-bottom-border {bottom: 0;left: 0;border-bottom: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}.right-bottom-border {right: -1px;bottom: 0;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;} } </style>

使用方式：此處組件名稱自定義BorderDecorate，import引用并在components中注冊，用具名插槽content包裹住就可以了，得設置寬高（或者用有寬高的父標簽包裹）。

<border-decorate title="標題" width="300px" height="300px"><template #content><div>123</div></template> </border-decorate>

總結

以上是生活随笔為你收集整理的vue自定封装的边框组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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