pageTools 一个复用的通知条
<template> <el-card class="page-tools"> <el-row type="flex" align="middle" justify="space-between"> <div> <el-button v-if="text" icon="el-icon-info" size="small" type="primary" plain > {{ text }}</el-button > </div> <div> <slot></slot> </div> </el-row> </el-card> </template> <script> // # region // 是否有封装过组件呢? // 有! // 场景1:功能复用,多个页面都用到某个功能 // 场景2:页面逻辑太多,进行拆分功能(添加/修改独立出去) // 注意些什么: // 1. 抽离模板(复用) // 2. 设计props el-button type/size/ // 3. 设计插槽 el-dialog title 插槽 // # endregion export default { name: "PageTools", props: { text: { type: String, }, }, }; </script> <style></style>