类的设计---麻球与油果

前段时间和一个广西的朋友一起去吃早餐,朋友按照广西的说法要点一份油果,服务员半天没搞懂是什么东西,后面几经解释,说是麻球之后服务员瞬间get到意思了。

这件事情后面稍微想了一下,为什么服务员一直没搞懂油果是个什么东西。说实话,如果不是之前知道,确实很难把油果这个名词跟图片中的食物联想的起来。

想一下,这种食物用面向对象思路怎么去定义,

1:油果   继承自水果类,里面有个成员变量:油

2:麻球  继承自球抽象类,里面有个成员变量: 芝麻

第一种定义方法,水果类公共的特质,例如水果需要有生长的环境;有发芽、生长、开花、结果的生命周期。显然它不具备,所以这个名称即使在现实生活中也让人费解。

第二种定义方法,麻球,见名知意。芝麻、球状的东西,在饭店这种场景下。很容易图中食物联想起来。

代码实现其实也是现实生活场景的表达。我们在代码实现中定义事物中也可能遇到类似的场景。

油果的说法虽然浪漫,听起来更能勾起人的食欲。逻辑、实用性上可能不及麻球来的准确。

对于我们程序员,还是跟服务员说声:“幺妹儿,来份麻球”。

转载于:https://www.cnblogs.com/daghai/p/10856974.html

### 自定义 `el-calendar` 头部的方法 在 Vue 和 Element Plus 中,`el-calendar` 是一个用于显示日历的组件。虽然官方文档并未提供直接针对头部 (`head`) 的自定义选项[^1],但可以通过一些间接方式实现对头部部分的功能扩展或样式修改。 #### 方法一:通过插槽 (Slot) 实现自定义 Element Plus 提供了一些内置插槽来支持开发者对组件的部分结构进行定制。尽管 `el-calendar` 并未显式声明头部分的插槽,但仍可以尝试利用通用插槽机制覆盖默认行为: ```vue <template> <el-calendar v-model="currentDate"> <!-- 使用具名插槽替换头部 --> <template #header="{ date }"> <div class="custom-header"> {{ formatDate(date) }} <button @click="prevMonth">上个月</button> <button @click="nextMonth">下个月</button> </div> </template> </el-calendar> </template> <script> export default { data() { return { currentDate: new Date(), }; }, methods: { prevMonth() { this.currentDate = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1 ); }, nextMonth() { this.currentDate = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1 ); }, formatDate(date) { const year = date.getFullYear(); const month = date.getMonth() + 1; return `${year}年${month}月`; }, }, }; </script> <style scoped> .custom-header { display: flex; justify-content: space-between; align-items: center; } </style> ``` 上述代码展示了如何通过 `#header` 插槽来自定义日历头部的内容和交互逻辑。 #### 方法二:CSS 覆盖默认样式 如仅需调整头部外观而无需更改其功能,则可以直接使用 CSS 来重写默认样式。例如: ```css /* 修改 el-calendar 默认头部样式 */ .el-calendar__title { font-size: 20px; color: blue; } .el-calendar__button-group button { background-color: lightgray; border-radius: 5px; } ``` 此方法适用于简单的视觉优化场景。 #### 方法三:动态加载外部资源并注册新组件 对于更复杂的自定义需求,可考虑借助第三方工具如 Vuegister 动态加载 `.vue` 文件作为独立模块引入项目中。这种方式允许创建完全个性化的子组件替代原有标准控件的行为模式。 ```javascript // 假设已安装 vuegister 库 const customHeadComponent = require('path/to/CustomHead.vue'); Vue.component('custom-head', customHeadComponent); ``` 随后,在模板里调用 `<custom-head>` 即可完成高级定制化操作。 --- ### 总结 综上所述,无论是基于插槽机制还是纯粹依赖于样式的手段都能有效达成目标;而对于极端情况下的高度自由度改造则推荐采用动态加载技术路径解决实际开发中的难题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值