加班结束

加班结束。

工作调动之后,生活充实起来。于是再一次的明确,快乐来自于能够用心去做自己想做的事情,又或者,来自于看着自己关心的事物向前发展,一如曾经什么时候,看到自己关心的人的笑容。向上是一种生活状态,是生命的本来状态。想来自己以前总是在不断的劝别人努力面对生活,自己却不如其然,问朋友这两年你过得还好么,一瞬间涌上心来的漫无边际的忧愁,还是容易淹没。虽然说医者不可自医,但终究是愧于心,浮于行。可喜的是终究有些改变。

有朋友说我写字晦涩。

那又如何。

要将 `加班开始时间` 和 `加班结束时间` 改为水印(placeholder)样式,可以通过 **CSS 透明度 + 占位符类名** 的方式实现。以下是修改后的代码: ### 修改后的代码 ```html <template> <view class="form-item"> <picker mode="selector" :range="datetimeRange" @change="handleStartChange"> <view class="input"> <text :class="['placeholder', { 'hide-placeholder': overtimeStart }]">加班开始时间</text> <text class="selected-value">{{ overtimeStart }}</text> </view> </picker> </view> <view class="form-item"> <picker mode="selector" :range="datetimeRange" @change="handleEndChange"> <view class="input"> <text :class="['placeholder', { 'hide-placeholder': overtimeEnd }]">加班结束时间</text> <text class="selected-value">{{ overtimeEnd }}</text> </view> </picker> </view> </template> <script> export default { data() { return { overtimeStart: '', overtimeEnd: '', datetimeRange: ['09:00', '10:00', '11:00', '12:00'] // 示例数据 }; }, methods: { handleStartChange(e) { this.overtimeStart = this.datetimeRange[e.detail.value]; }, handleEndChange(e) { this.overtimeEnd = this.datetimeRange[e.detail.value]; } } }; </script> <style> .input { position: relative; height: 40px; line-height: 40px; border: 1px solid #ddd; padding: 0 10px; } .placeholder { color: #999; position: absolute; left: 10px; top: 0; } .selected-value { display: block; padding-left: 100px; /* 避免和placeholder重叠 */ } .hide-placeholder { display: none; } </style> ``` ### 关键改进点: 1. **双文本标签**: - 用 `<text class="placeholder">` 显示灰色水印文字。 - 用 `<text class="selected-value">` 显示用户选择的值。 2. **动态隐藏水印**: - 通过 `:class="{ 'hide-placeholder': overtimeStart }"` 在用户选择后隐藏水印。 3. **样式优化**: - `placeholder` 用绝对定位模拟水印效果。 - `selected-value` 用 `padding-left` 避免和 placeholder 重叠。 ### 替代方案(更简洁) 如果不想拆分两个 `<text>`,也可以用 `::after` 伪元素实现水印: ```html <view class="input"> {{ overtimeStart || '' }} </view> ``` ```css .input { position: relative; color: #333; } .input:empty::after { content: "加班开始时间"; position: absolute; left: 10px; color: #999; } ``` ### 最终效果 - 未选择时:显示灰色水印文字。 - 选择后:水印消失,显示实际值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值