Vite + Vue3 《企业级项目》二次封装 el-table、el-pagination、el-tooltip、el-dialog

 ​前期回顾    ​      

Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）_0.活在风浪里的博客-CSDN博客_vue3+vite​webpack回顾 ​ （移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目) https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%25221656https://blog.csdn.net/m0_57904695/article/details/125487996?spm=1001.2014.3001.5501

目录

封装的功能有哪些？

最简单示例

类似这样：

Vue3 表格封装

目录结构：

子组件：index.vue

抽离的 emits.ts

抽离的  props.ts

抽离的 slots.ts

全局css

 

页面使用：

效果： 

el-tooltip 

子组件：

父组件：

el-dialog

子组件：

全局动画弹框css

 

父组件：

---

 封装了一个子组件（table、分页），在不同页面引入

封装的功能有哪些？

 分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型（selection/index/expand）、格式化 、不同页面不同操作列、vuex、vue持久化插件、

说思路：data数据请求接口拿到，表头数据一般也是后台接口，如没，前台可自定义自己写

最简单示例

//lable指定表头名 //prop指定每一项数据 

   
  



//表头
 tableHeader:[
		  {label:'姓名' , prop : 'uname'},
		  {label:'年龄' , prop : 'age'},
		  {label:'性别' , prop : 'sex'},
	    ],
			    
  //表数据
tableData:[
			 {uname:"小明",age:'20',sex:'男'}, 
             {uname:"小黑",age:'18',sex:'男'},
          ]
	
	

类似这样：

 念及此！那开始正文

Vue3 表格封装

目录结构：

子组件：index.vue

抽离的 emits.ts

export default [
    // 这里是自定义事件 emits
    'handleSizeChange',
    'handleCurrentChange',
];

抽离的  props.ts

export default {
    // 表格显示的数据
    tableData: {
        default: function ()
        {
            return [];
        },
    },
    // 表格的高度
    tableHeight: {
        type: String || Number,
        default: 'calc(100vh - 220px)',
    },

    // 表头数据
    tableHeader: {
        type: Array,
        default: function ()
        {
            return [];
        },
    },
    // 总页数
    total: {
        type: Number,
        // 必传类型
        required: true,
        default: 0,
    },
    // 分页的页容量数组
    pageSizesArr: {
        type: Array as () => number[],
        default()
        {
            return [10, 20, 30, 50];
        },
    },
    // 分页的布局
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper',
    },
    // 分页是否显示
    paginationFlag: {
        type: Boolean,
        default: true
    }
}

抽离的 slots.ts

export default [
// 这里是自定义slots
    'item-edit',
    'item-del',
    'item-switch'
]

全局css

/* 全局样式 个人不允许修改全局样式【重要！！！】*/

/* 开关样式
------------------------------------------------ */

.el-switch__label--left {
	position: relative;
	left: 45px;
	color: #fff;
	z-index: -1111;
}

.el-switch__core {
	width: 50px !important;
}

.el-switch__label--right {
	position: relative;
	right: 46px;
	color: #fff;
	z-index: -1111;
}

.el-switch__label--right.is-active {
	z-index: 1111;
	color: #fff !important;
}

.el-switch__label--left.is-active {
	z-index: 1111;
	color: #fff !important;
}

---

封装完成，下面在使用的页面调用

页面使用：

效果： 

---

el-tooltip 

子组件：

父组件：

---

el-dialog

子组件：

全局动画弹框css

/* 全局样式 个人不允许修改全局样式【重要！！！】*/

/* 全部dialog进入动画
------------------------------------------------ */
.dialog-fade-enter-active {
	display: inline-block;
	animation: zoomIn;
	animation-duration: 0.5s;
	background-color: rgba(0, 0, 0, 0);
}

@keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}



/* 全部dialog离开动画
------------------------------------------------ */
.dialog-fade-leave-active {
	display: inline-block;
	animation: zoomOut;
	animation-duration: 0.5s;
	background-color: rgba(0, 0, 0, 0);
}


@keyframes zoomOut {
	from {
		opacity: 1;
	}

	60% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 0;
	}
}

父组件：

 本文完！