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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Blazor Hybrid适配到HarmonyOS系统
· 支付宝 IoT 设备入门宝典(下)设备经营篇
· 万字调研——AI生成内容检测
· 解决跨域问题的这6种方案,真香!
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库