模板简易轮子（直接使用）

最新推荐文章于 2024-07-23 22:43:52 发布

RenBaiLi

最新推荐文章于 2024-07-23 22:43:52 发布

阅读量192

点赞数

分类专栏：前端开发文章标签： css html css3

本文链接：https://blog.csdn.net/renbaili/article/details/127903043

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<template>
  <div class="form-template">
    <slot name="head"></slot>
    <slot name="content"></slot>
    <slot name="page"></slot>
  </div>
</template>
<script>
export default {
  name: 'form-template',
  components: {},
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.form-template {
  width: 99%;
  height: 100%;
  margin: 0 auto;
  background-color: white;
}

.template-head {
  height: 50px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.template-content {
  height: calc(100% - 120px);
  padding: 0 15px;
}

.template-page {
  height: 70px;
  padding: 0 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

::v-deep .el-col {
  margin-bottom: 0;
}

::v-deep .equality {
  display: flex;
  justify-content: flex-end;
}
</style>

import TemplateIndex from '@/components/base-dialog/templateTable'

components: {

TemplateIndex,

},

 <TemplateIndex>
            <div slot="head" class="template-head">
              
            </div>
            <div slot="content" class="template-content">
               
            </div>
            <div slot="page" class="template-page">
            </div>
        </TemplateIndex>