当前位置: 首页 > news >正文

vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法

一般在开发时,设置了 date/time/datetime 等类型的 input 属性 placeholder 提示文本时,
发现实际展示中却并不生效,如图:

处理后效果如图:

处理逻辑

判断表单项未设置值时,则设置其伪类样式,文本内容为 placeholder 属性值,展示样式重叠在表单项组件上,以达到 placeholder 提示文本效果;

以下是在 vue 开发中的处理方法

例:

HTML:

<input :disabled="is_submit" v-model.trim="value1" class="send_input" :class="{'show_placeholder' : !value1}" type="datetime-local" value="" placeholder="请选择日期及时间" />
<input :disabled="is_submit" v-model.trim="value2" class="send_input" :class="{'show_placeholder' : !value2}" type="date" value="" placeholder="请选择日期" />
<input :disabled="is_submit" v-model.trim="value3" class="send_input" :class="{'show_placeholder' : !value3}" type="time" value="" placeholder="请选择时间" />

CSS:

.send_input{ width: 530px; height: 80px; padding: 0 30px; margin-bottom: 28px; color: #1B5541; font-size: 32px; border-radius: 40px; border: none; background: #F1E5D5; position: relative;}.send_input.show_placeholder::after{ content: attr(placeholder); width: 100%; height: 100%; padding: 0 30px; background: #F1E5D5; position: absolute; left: 0; top: 0; pointer-events: none;display: flex; justify-content: flex-start; align-items: center;
}


JQ设置方法:
https://blog.csdn.net/qq_16494241/article/details/51564552

相关文章:

vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法

一般在开发时&#xff0c;设置了 date/time/datetime 等类型的 input 属性 placeholder 提示文本时&#xff0c; 发现实际展示中却并不生效&#xff0c;如图&#xff1a; 处理后效果如图&#xff1a; 处理逻辑 判断表单项未设置值时&#xff0c;则设置其伪类样式&#xff0c;文…...

书生·浦语大模型全链路开源体系-第3课

书生浦语大模型全链路开源体系-第3课 书生浦语大模型全链路开源体系-第3课相关资源RAG 概述在 InternLM Studio 上部署茴香豆技术助手环境配置配置基础环境下载基础文件下载安装茴香豆 使用茴香豆搭建 RAG 助手修改配置文件 创建知识库运行茴香豆知识助手 在茴香豆 Web 版中创建…...

Weblogic任意文件上传漏洞(CVE-2018-2894)漏洞复现(基于vulhub)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…...

链表基础3——单链表的逆置

链表的定义 #include <stdio.h> #include <stdlib.h> typedef struct Node { int data; struct Node* next; } Node; Node* createNode(int data) { Node* newNode (Node*)malloc(sizeof(Node)); if (!newNode) { return NULL; } newNode->data …...

Fiddler:网络调试利器

目录 第1章:Fiddler简介和安装 1.1 Fiddler概述 1.2 Fiddler的安装步骤 步骤1:下载Fiddler 步骤2:运行安装程序 步骤3:启动Fiddler 1.3 配置Fiddler代理 配置操作系统代理 配置浏览器代理 Google Chrome Mozilla Firefox 第2章:Fiddler界面和基本操作 2.1 Fi…...

【笔记】mysql版本6以上时区问题

前言 最近在项目中发现数据库某个表的createTime字段的时间比中国时间少了13个小时&#xff0c;只是在数据库中查看显示时间不对&#xff0c;但是在页面&#xff0c;又是正常显示中国时区的时间。 排查 项目中数据库的驱动使用的是8.0.19&#xff0c;驱动类使用的是com.mysq…...

Scala实战:打印九九表

本次实战的目标是使用不同的方法实现打印九九表的功能。我们将通过四种不同的方法来实现这个目标&#xff0c;并在day02子包中创建相应的对象。 方法一&#xff1a;双重循环 我们将使用双重循环来实现九九表的打印。在NineNineTable01对象中&#xff0c;我们使用两个嵌套的fo…...

Excel文件解析

在此模块的学习中&#xff0c;我们需要一个新的开源类库---Apahche POI开源类库。这个类库的用途是&#xff1a;解析并生成Excel文件(Word、ppt)。Apahche POI基于DOM方式进行解析&#xff0c;将文件直接加载到内存&#xff0c;所以速度比较快&#xff0c;适合Excel文件数据量不…...

纯css实现switch开关

代码比较简单&#xff0c;有需要直接在下边粘贴使用吧~ html: <div class"switch-box"><input id"switch" type"checkbox"><label></label></div> css&#xff1a; .switch-box {position: relative;height: 25px…...

Unity3d 微信小游戏 AB资源问题

简介 最近在做微信小游戏&#xff0c;因为对unity比较熟悉&#xff0c;而且微信也支持了用unity3d直接导出到小游戏的工具&#xff0c;所以就记录下这期间遇到的问题 微信小游戏启动时间主要受以下三点影响&#xff1a; 下载小游戏首包数据文件下载和编译wasm代码引擎初始化…...

Leetcode二叉树刷题

给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true public boolean isSymmetric(TreeNode root) {if(rootnull)return true;return compare(root.left,root.right);}public boole…...

如何给自己的网站添加 https ssl 证书

文章目录 一、简介二、申请 ssl 证书三、下载 ssl 证书四、配置 nginx五、开放 443 端口六、常见问题解决(一)、配置后&#xff0c;访问 https 无法连接成功(二) 证书配置成功&#xff0c;但是访问 https 还是报不安全 总结参考资料 一、简介 相信大家都知道 https 是更加安全…...

Vue路由跳转及路由传参

跳转 跳转使用 router vue 的路由跳转有 3 个方法&#xff1a; go 、 push 、 replace go &#xff1a;接收数字&#xff0c; 0 刷新&#xff0c;正数前进&#xff0c;负数后退 push &#xff1a;添加&#xff0c;向页面栈中添加一条记录&#xff0c;可以后退 replace &#…...

计算机网络常见面试总结

文章目录 1. 计算机网络基础1.1 网络分层模型1. OSI 七层模型是什么&#xff1f;每一层的作用是什么&#xff1f;2.TCP/IP 四层模型是什么&#xff1f;每一层的作用是什么&#xff1f;3. 为什么网络要分层&#xff1f; 1.2 常见网络协议1. 应用层有哪些常见的协议&#xff1f;2…...

时隔一年,再次讨论下AutoGPT-安装篇

AutoGPT是23年3月份推出的&#xff0c;距今已经1年多的时间了。刚推出时&#xff0c;我们还只能通过命令行使用AutoGPT的能力&#xff0c;但现在&#xff0c;我们不仅可以基于AutoGPT创建自己的Agent&#xff0c;我们还可以通过Web页面与我们创建的Agent进行聊天。这次的AutoGP…...

项目三:学会如何使用python爬虫请求库(小白入门级)

根据上一篇文章我们学会的如何使用请求库和编写请求函数&#xff0c;这一次我们来学习一下爬虫常用的小技巧。 自定义Headers Headers是请求的一部分&#xff0c;包含了关于请求的元信息。我们可以在requests调用中传递一个字典来自定义Headers。代码如下 import requests h…...

【热门话题】PyTorch:深度学习领域的强大工具

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 PyTorch&#xff1a;深度学习领域的强大工具一、PyTorch概述二、PyTorch核心特性…...

SQL注入sqli_libs靶场第一题

第一题 联合查询 1&#xff09;思路&#xff1a; 有回显值 1.判断有无注入点 2.猜解列名数量 3.判断回显点 4.利用注入点进行信息收集 爆用户权限&#xff0c;爆库&#xff0c;爆版本号 爆表&#xff0c;爆列&#xff0c;爆账号密码 2&#xff09;解题过程&#xff1…...

QT_day3

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…...

使用ADO.NET访问数据库

目录 访问数据库的步骤 &#xff11;、建立数据库 &#xff12;、设置链接参数 &#xff08;1&#xff09;web网页和数据库连接的方法一 &#xff08;2&#xff09;web网页和数据库连接的方法二 &#xff13;、建立链接对象 &#xff14;、显示数据库 &#xff15;、数…...

Angular Flex-Layout终极指南:掌握fxLayout、fxFlex、fxLayoutAlign核心指令

Angular Flex-Layout终极指南&#xff1a;掌握fxLayout、fxFlex、fxLayoutAlign核心指令 【免费下载链接】flex-layout Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API 项目地址: https://gitcode.com/gh_mirrors/fl/flex-layout …...

vLLM-v0.17.1入门必看:从零部署支持多LoRA的开源推理框架

vLLM-v0.17.1入门必看&#xff1a;从零部署支持多LoRA的开源推理框架 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;最新发布的v0.17.1版本带来了多项重要改进&#xff0c;特别是增强了对多LoRA适配器的支持。这个开源项目最初由加州…...

3步实现会呼吸的界面边界:让表单交互体验提升300%的动态效果

3步实现会呼吸的界面边界&#xff1a;让表单交互体验提升300%的动态效果 【免费下载链接】motion-primitives UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source. 项目地址: https://gitcode.com/gh_mirrors/mo/motion-primitives 在现…...

5大突破:抖音音乐批量下载与智能管理解决方案

5大突破&#xff1a;抖音音乐批量下载与智能管理解决方案 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作与音乐收藏领域&#xff0c;高效获取和管理抖音平台的音频资源一直是用户面临的核心挑…...

从座舱芯片到指尖触控:聊聊高通8155/8295上那个你可能没注意到的Virtio Touch框架

从座舱芯片到指尖触控&#xff1a;高通8155/8295中的Virtio Touch框架解析 当你的手指在车载中控屏上滑动时&#xff0c;一组坐标数据正以微秒级速度穿越两个操作系统——这背后是高通座舱芯片中鲜为人知的Virtio Touch框架在发挥作用。作为连接QNX Hypervisor与Android系统的神…...

Elasticsearch-03-kNN算法

Elasticsearch-03-kNN算法详解 概述 Elasticsearch提供了强大的k近邻&#xff08;k-Nearest Neighbors, kNN&#xff09;搜索功能&#xff0c;支持两种实现方式&#xff1a;暴力搜索和近似搜索。本文档将详细介绍这两种kNN算法的原理、优缺点和适用场景。 1. 暴力搜索&#xff…...

情感GDP报告:测试员负面情绪成经济指标的行业变革

一、导言&#xff1a;情感GDP的崛起与测试行业新坐标 2025年全球情感计算市场规模突破596亿元&#xff08;数据来源&#xff1a;2024年情感计算行业报告&#xff09;&#xff0c;"情感GDP"作为衡量情绪价值的经济指标&#xff0c;正重塑职业评价体系。软件测试领域首…...

保姆级教程:在NUC12Pro上配置Ego_planner无人机自主飞行系统(含D435i与Pixhawk 6C)

在NUC12Pro上构建Ego_planner无人机自主飞行系统的全流程指南 当硬件堆满工作台时&#xff0c;最令人兴奋的莫过于将它们组装成一个能自主思考的飞行系统。本文将带您完成从零搭建基于NUC12Pro、D435i深度相机和Pixhawk 6C飞控的完整解决方案&#xff0c;重点解决那些官方文档从…...

C++ 静态成员的生命周期管理

C静态成员的生命周期管理是面向对象编程中一个既基础又关键的话题。静态成员作为类的特殊成员&#xff0c;其生命周期与普通成员变量截然不同&#xff0c;理解它们的初始化、销毁时机以及线程安全等问题&#xff0c;对于编写健壮高效的C代码至关重要。本文将深入探讨静态成员的…...

5分钟解决经典游戏兼容性问题:DDrawCompat完整使用指南

5分钟解决经典游戏兼容性问题&#xff1a;DDrawCompat完整使用指南 【免费下载链接】DDrawCompat DirectDraw and Direct3D 1-7 compatibility, performance and visual enhancements for Windows Vista, 7, 8, 10 and 11 项目地址: https://gitcode.com/gh_mirrors/dd/DDraw…...