常用技巧——div增加disabled样式

第一种

     .disableClass {
            cursor: not-allowed; //pointer-events:none;
            &:hover {

                .nsList {
                    display: none
                }
            }
        }
     // 事件禁用通过条件判断是否存在在这个类  进行reaturn

第二种

 <div id="CompanyId" name="CompanyId" type="select" ></div>
<script>
 $("#CompanyId").attr("disabled", true);    
 </script>
===》
<div id="CompanyId" name="CompanyId" type="select" disabled></div>
### Vue3 中 `el-date-picker` 组件的 `disabledDate` 功能 在 Vue3 的项目中,当使用 Element Plus 提供的 `<el-date-picker>` 组件时,可以通过配置 `picker-options` 属性中的 `disabledDate` 函数来自定义不可选日期。此函数接收一个参数——当前遍历到的时间对象,并返回布尔值决定该时间是否禁用。 下面是一个具体的例子展示如何利用 `disabledDate` 来限制用户仅能选择未来三天内的日期: ```javascript <template> <div> <!-- 使用绑定属性的方式传入选项 --> <el-date-picker v-model="selectedDate" type="date" placeholder="请选择日期" :picker-options="pickerOptions"> </el-date-picker> </div> </template> <script setup> import { ref } from 'vue'; // 定义数据模型用于存储所选日期 const selectedDate = ref(''); // 设置 picker options 配置项 const pickerOptions = { disabledDate(time) { const today = new Date(); // 只允许选择今天之后三天内(含当天) return time.getTime() < today.setDate(today.getDate()) || time.getTime() > today.setDate(today.getDate() + 3); } }; </script> ``` 上述代码片段展示了怎样通过 JavaScript 计算逻辑控制哪些天数可以被点击选取[^1]。需要注意的是,在实际开发过程中可能还需要考虑更多边界情况以及业务需求带来的变化。 对于更复杂的场景比如动态调整可用时间段,则可以在父级作用域维护状态变量并将其传递给子组件作为 props 或者事件监听器来响应外部改变从而实时更新内部的状态[^2]。 此外,如果想要进一步定制化样式的话,可以根据官方文档指导采用合适的 CSS 解决方案[^4]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别动我代码儿

感谢技术精进的你,加油不负韶华

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值