首先上效果图

 

表单外部类似卡片的圆角矩形即本卡片型盒子组件

在所有vue页面中可直接使用,无需再单独进行引入

 

组件编写

<template>
  <div class="basic-box">
    <el-card>
      <slot></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "basicBox"
};
</script>

<style lang="scss" scoped>
.basic-box {
  border-radius: 10px;
  padding: 6px 8px 2px 8px;
  box-sizing: border-box;
  .el-card {
    width: 100%;
  }
}
</style>

直接套用elment-ui的卡片组件,然后在卡片中间自定义一个插槽,这样子在组件内放任何东西都会套在slot内.

 

import BasicBoxComponent from "./basicBox";

const BasicBox = {
  install: function(Vue) {
    Vue.component("BasicBox", BasicBoxComponent);
  }
};

export default BasicBox;

在组件文件夹下创建index.js, 将组件安装

 

import BasicBox from "./components/basicBox/index";

Vue.use(BasicBox);

再到main.js文件内引入导入的组件

完成后即可在vue所有页面内使用, 不过这种方式只是基础款....其他方式可能更佳

目录结构如下: