Vue中使用SVG作为边框

首先我们看下目录结构

image.png

1、定义borderBox组件

<template>
  <div class="borderBox110">
    <svg class="borderBox" width="374" height="226" xmlns="http://www.w3.org/2000/svg">
      <g>
        <title>background</title>
        <rect fill="#fff" id="canvas_background" height="228" width="376" y="-1" x="-1"/>
        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
        </g>
      </g>
      <g>
        <title>Layer 1</title>
        <rect id="svg_1" height="190" width="372" y="0.749997" x="0.75" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <rect id="svg_2" height="3" width="2" y="81.749997" x="100.75" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <rect id="svg_3" height="188" width="347" y="17.749997" x="12.75" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <rect id="svg_4" height="193" width="320" y="31.749997" x="29.75" fill-opacity="null" stroke-opacity="null"
              stroke-width="1.5" stroke="#000" fill="#fff"/>
      </g>
    </svg>
    <div class="content">
      <slot></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: "borderBox110"
}
</script>

<style lang="scss" scoped>
.borderBox110 {
  position: relative;

  .borderBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content{
    position: absolute;
    left: 0;
    top: 0;
  }

}
</style>

2、全局注册组件

• 1、新建一个index.js文件

import borderBox110 from "./borderBox110";

// 这里是重点
export default function (Vue) {
    Vue.component(borderBox110.name, borderBox110)
}

• 2、在外部同样定义一个index.js文件，用来全局注册

import Vue from 'vue'

import borderBox110 from "@/components/borderBox/borderBox1/index";

Vue.use(borderBox110)

• 2、在main.js中引入刚才新建的index.js文件

import './components/borderBox/index'

3、使用
在其他组件中我们可以直接使用<borderBox110></borderBox110>便签即可

 <borderBox110 class="borderBox">
    <p class="test">
      测试
    </p>
  </borderBox110>

4、显示

image.png