element-plus input组件iPad端禁用状态文字显示异常，看不见问题解决

最新推荐文章于 2023-10-23 17:09:01 发布
最新推荐文章于 2023-10-23 17:09:01 发布
阅读量800 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39111074/article/details/126479064
版权

项目开发时，使用了element-plus前端框架，用到了- - -input 数字输入框 和- - -input 文字输入框，
电脑端input 输入框 禁用状态下 - - -文字颜色置灰
但是iPad上面看到页面 input输入框禁用状态下 文字看不见，可编辑状态下的话文字正常显示，
仔细看发现禁用状态下有文字，但是颜色特别淡，几乎看不见

设置了禁用状态下文字颜色，但是不生效

适配代码，eg:

:deep(.el-input.is-disabled .el-input__inner)
      color #a8abb2
      // 以下为适配代码
      -webkit-text-fill-color #a8abb2
      -webkit-opacity 1
      opacity 1

添加下面几行适配代码后，禁用状态下文字颜色正常显示

零OO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 :red_apple: 尝试 $ git clone https://github.com/ntnyq/element-plus-admin.git $ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
element-pro-components:基于element-plus的Vue 3的组件库
04-18
元素亲组件（WIP） 基于element-plus的Vue 3的组件库 | 去做： 组件 ProLayout 专业菜单 面包屑 ProTabs ProTable 专业表格 ProInputTag ProRadio ProRadioButton ProCheckbox ProCheckboxButton ProSelect ProCrud ProSerach ProList ProUpload ... docs 测试 vetur ... 安装 yarn add element-pro-components # or npm i element-pro-components 用法 import { createApp } from 'vue' import App from './App.vue' import ElementPro from '
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
【ElementUI】表单组件el-input填写不显示填写内容
ColdCoder的博客
05-17 2757
el-input输入不显示现象： input框填写不显示、日期组件选择不了，这与可能存在的动态加载的数据存在异步问题有关，这会导致组件内容不能及时更新； 解决方法： <!-- 文本标签 --> <el-input v-if="item.type=='4'" v-model="form[item.field]" @input="forceUpdate($event)"></el-input> <!-- 日期标签 --> <el-date-picke
input输入内容只显示一半
Hero_rong的博客
08-26 5667
输入的内容没有全部显示，感觉就像是有padding-right属性似的，其实并没有 解决办法 给input设置 min-width: 78%;或者 max-width: 78%;
el-input内容过多时展示不下
weixin_43866250的博客
08-30 3759
在上述示例中，我们在 el-input 组件上设置了 type=“textarea” 来使用多行文本框，然后通过 :autosize 属性设置了最小行数（minRows）和最大行数（maxRows），以控制输入框的高度。这样，在鼠标悬浮在 el-input 组件上时，浏览器会显示一个浮动的文本提示框，并将 inputValue 的值作为提示框中的内容显示出来。当 el-input 组件的内容过多时，可以通过设置 el-input 的样式或者使用 el-input 的属性来解决展示不下的问题。
el-form el-input禁用时,内容过长加省略号，并根据是否有省略号来控制提示是否显示
我爱美女S的博客
10-20 1478
el-form el-input禁用时,内容过长加省略号，并根据是否有省略号来控制提示是否显示
elementUI禁用按钮时给出弹框提示
滕青山博客
12-15 3699
需求描述 比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是正常的状态，允许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；如果是正常状态，当鼠标悬浮的时候就不出现任何变化。好像挺简单的，不过里面有一个细节，需要注意下。我们先看一下最终的效果图 遇到问题 饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也
Element UI非活性时（Disabled），改变字体颜色
捷锐CSDN专栏
11-24 3241
Element UI组件在非活性时（Disabled)，字体颜色太淡，显示不清楚，加上以下样式，就可以改变字体颜色了。
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-plus(element-plus@2.5.5) 本地离线资源
最新发布
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法
小墨鱼的前端问题录
09-21 1827
【代码】【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法。
elinput内容过长显示悬浮框_悬浮显示input中所有的内容及css处理文字过长时显示为多余部分省略...
weixin_39616477的博客
12-20 2219
1.悬浮显示input中所有的内容项目中经常会遇到这个问题，在一个内容框中，由于框的宽度是固定的，但是里面的内容却有很多这个时候需要悬浮显示input中所有的内容，而title提示则要在input添加以下代码，这样既可实现用title提示文本框中所有内容如果input里面的内容固定,或者悬浮显示div里面的文字,需要悬浮显示,可以直接写为 ,补充：在ie8中，select用这个方法还不能正常的提示...
element input输入多行内容反显时自动换行
m0_56471534的博客
10-23 1566
组件里输入内容过多时，在页面回显时内容不能够进行换行处理，造成页面显示不美观。当点击编辑按钮对原因进行编辑修改时，弹出编辑弹窗，当在。
el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
启猿泰坦的博客
05-17 767
【代码】el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
修改el-input、textarea、el-checkbox的禁用状态下的颜色
qq_1336674576的博客
02-25 5014
修改el-input、textarea、el-checkbox的禁用状态下的颜色
解决Safari浏览器input输入框在disabled不显示文字
fangxin222的博客
08-04 831
解决Safari浏览器input输入框在disabled不显示文字。
安装vite框架，报错“Cannot find module ‘./App.vue‘ or its corresponding type declaration” 问题解决方法
热门推荐
qq_39111074的博客
03-13 1万+
安装vite框架，报错“Cannot find module ‘./App.vue‘ or its corresponding type declaration” 问题解决方法
element-plus input插槽
07-28
element-plus 是一套基于 Vue.js 的 UI 组件库，而 input 插槽是其中一个组件的一部分。在 element-plus 的 input 组件中，插槽可以用于自定义 input 输入框的内容或者样式。 在 element-plus 中，input 组件的插槽包括以下几个： 1. `prefix`: 前缀插槽，可以在 input 输入框前面添加一些自定义内容，比如图标或者文字。 2. `suffix`: 后缀插槽，可以在 input 输入框后面添加一些自定义内容，比如图标或者按钮。 3. `prepend`: 前置内容插槽，可以在 input 输入框前面添加一些额外的内容，比如标签或者按钮。 4. `append`: 后置内容插槽，可以在 input 输入框后面添加一些额外的内容，比如标签或者按钮。 通过使用这些插槽，你可以根据自己的需求来自定义 input 输入框的样式和功能。具体的使用方法可以参考 element-plus 的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值