数据可视化大屏 项目开发中经常会需要各种各样的边框，为了方便复用可能会出现的类似边框，这里将可能会遇到的 数据可视化大屏边框组件 都整理出来，今天整理的是四角边框效果。

效果截图

演示地址：

vue3 数据可视化大屏边框组件-四角边框

组件代码

<template>
  <div class="item1Body">
    <slot></slot>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  components: {},
  computed: {},
  mounted() {
    var that = this;
  },
  methods: {},
  filters: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.item1Body {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(7, 166, 255, 0.8);
  box-shadow: 3px 3px 4px 0px #000000;
  background-image: url("./assets/bianjiao_left_top.png"),
  url("./assets/bianjiao_left_bottom.png"),
  url("./assets/bianjiao_right_top.png"),
  url("./assets/bianjiao_right_bottom.png");
  background-size: 36px 36px, 36px 36px, 36px 36px, 36px 36px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, left bottom, right top, right bottom;
}
</style>

更多数据可视化大屏边框效果

vue3 数据可视化大屏边框效果整理