针对vue3+ts+element-plus对不同项目进行样式封装思路

1、创建我们要全局公共使用的布局组件

页面：

<template>
    <div class="app-container">
      <div class="app-context">
        <div class="context-title">
          {{ contextTitle }}
        </div>
        <div class="query-form">
          <slot name="queryForm"></slot>
        </div>
        <div class="tool-btns">
          <slot name="toolBtns"></slot>
        </div>
        <div class="main-context">
          <!-- 表单的主体内容 -->
          <slot></slot>
        </div>
        <div class="main-page">
        <!-- 分页插槽 -->
        <slot name="page"></slot>
        </div>
      </div>
      <slot name="dialog"></slot>
    </div>
  </template>
  
  <script lang='ts' setup>
  import { ref, reactive } from 'vue'
  
  const props = defineProps({
    contextTitle: {
      type: String
    },
  
  })
  
  </script>
  
  <style scoped lang='scss'>
  @import url('./index.scss');
  </style>

样式：

.app-container {
    position: relative;
    padding: 24px 17px 21px 20px;
    background-color: #F8F8F8;
  
    .container-title {
      position: absolute;
      top: 0;
      left: 20px;
      z-index: 1;
      color: #333;
      font-size: 14px;
    }
  }
  
  .app-context {
    padding: 23px 16px 40px 18px;
    background-color: #fff;
    border-radius: 2px;
  }
  .main-page {
     position: absolute;
     right: 90px;
     bottom: 40px;
  }
  :deep(.query-form .el-input__wrapper) {
    background-color: #F7F8FA;
    box-shadow: none;
  }
  
  :deep(.query-form .el-form-item__label) {
    color: #4E5969;
    font-weight: normal;
  }
  
  .query-form,
  .main-context,
  .tool-btns {
    margin-top: 20px;
  }
  
  :deep(.main-context .el-table__cell) {
    background-color: #fff;
  }
  
  :deep(.main-context .el-tree-node__expand-icon) {
    font-size: 26px;
  }

2、在main.ts进行全局注册

// 表格表单样式组件
import AppContainer from "@/components/AppContainer/contentIndex.vue"
app.component("AppContainer", AppContainer);

3、使用的方法

-   ##### 全局表格页面框架样式组件
  <App-Container context-title="白色背景位置的标题">
    <template #queryForm><!-- 搜索框的el-form --></template>
    <template #toolBtns><!-- 创建/下载的操作按钮 --></template>
    <template><!-- 表单的主题内容 --></template>
    <template #dialog><!-- 表单的弹窗 --></template>
  </App-Container>

例子：

<template>
  <App-Container context-title="白色背景位置的标题">
    <template #queryForm>
      <!-- 搜索框的el-form -->
      <el-form :model="queryParams" inline class='top'>
			<el-form-item label="标题">
				<el-input  placeholder="请输入工作通知名称"></el-input>
			</el-form-item>
			<el-form-item label="发布时间">
				<el-date-picker  type="date" placeholder="请选择发布时间" value-format="YYYY-MM-DD" />
			</el-form-item>
			<el-button type="primary">查询</el-button>
			<el-button>重置</el-button>
		</el-form>
    </template>
    <template #toolBtns>
      <!-- 创建/下载的操作按钮 -->
      <el-button type="primary"  @click='createDialog=true'>创建</el-button>
    </template>
      <!-- 表单的主题内容 -->
      表单的内容
    <template #dialog>
      <!-- 表单的弹窗 -->
      <AiDialog v-model="createDialog" width="600px" :title="title">
        111
      </AiDialog>
    </template>
    <template #page>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </template>
  </App-Container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const createDialog = ref(false)
const title = ref('标题')
</script>
<style lang='scss' scoped>
.top {
  display:flex;
}
</style>

页面效果：