element ui 下拉组件 el-select 禁用时鼠标悬浮没有禁用图标 显示小手 要到边边上才会显示禁用图标

最新推荐文章于 2024-01-11 15:55:41 发布
最新推荐文章于 2024-01-11 15:55:41 发布
阅读量1.2k 收藏
点赞数 1
文章标签： vue.js javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TAAAAAB/article/details/127635379
版权

如图所示 该下拉框实际为禁用状态 但是鼠标移上去会显示小手 效果扔为禁用状态 需要移动到边框位置才会显示禁用图标

在这里插入图片描述
如图所示
在这里插入图片描述
虽然不影响禁用效果 但看着很不爽

于是使用css变量

在el-select组件上使用css变量
在这里插入图片描述

在css中使用
在这里插入图片描述
至此问题解决

暂时只想到这个方法 记录一下 如有更好的方法欢迎指点

super5⁢
关注
disabled el-select禁用样式 修改 去掉禁用样式 disabled 变为 readonly
weixin_50885665的博客
02-27 1938
【代码】disabled el-select禁用样式 修改 去掉禁用样式。
Element ui下拉选框（el-select）实现树下拉，全选功能
ddsuuny的博客
08-26 3482
Element ui下拉选框（el-select）实现树下拉，全选功能
## el-select option内鼠标悬浮文字提示
qq_44721405的博客
12-07 2056
el-select option内鼠标悬浮文字提示 前置条件 option固定宽度而内容文字超出 主要 ：:title=“item.text” 鼠标悬浮在option时提示内容 <el-option v-for="item in option" :key="item.value" :label="item.text"
elementui下拉框禁用和加特殊标识
weixin_45816407的博客
01-11 1585
特别注意，在el-option中，设定disabled值为 true，即可禁用该选项。拉取数据，传usageStatus: ‘1’，过滤掉警用的。
有关el-select选择器内容展示不完整的解决方案
J_mine的博客
04-09 5634
最近接手个工程， 发现了el-select展示不完整；效果如下如图 应该是代码里有之前设置的默认样式导致； 不过由于时间太紧急，没来得及细细查找问题 而是采用了个简单粗暴的办法。 1. 给el-select 标签上插入 :popper-append-to-body="false" 2. css样式 里写 ::v-deep .el-select-dropdown__wrap.el-scrollbar__wrap { margin-bottom: 0 !important; .
element-ui禁用组件时展示禁用小图标
qq_42243957的博客
11-26 2926
Vue解决el-select下拉框选择值后框上不显示问题
ningmengbu_suan的博客
07-19 3127
Vue解决el-select下拉框选择值后框上不显示问题
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
elementui多选下拉取消按钮_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题...
weixin_32534011的博客
02-15 1538
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。实现效果：el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。解决思路(从el-select 的角度来考虑，其他组件组合的情况暂不考虑)想要实现某些选项是不删除，1、需要tag 不可删除，2、options 不可选择option...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
vue实现鼠标悬停出现图标
Gpointy的博客
11-04 331
0 效果 1 样式
element的el-time-select 下拉框位置偏移解决思路
weixin_44416517的博客
11-27 2643
element的el-time-select 下拉框位置偏移的情况，在没有popper-append-to-body属性的情况下的解决思路
el-select实现鼠标悬浮在下拉选项上显示该项的其他信息
Komorebi_00的博客
12-23 4144
实现鼠标悬浮在Select选择器下拉选项上显示该项的其他信息 使用@mouseover.native实现鼠标悬浮在下拉选项显示该项的地址信息 <el-select v-model="value" filterable placeholder="请选择"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.
动态设置select禁用
00年女程序员分享自己的学习笔记
08-16 4916
动态设置select禁用 有两个输入框，让第一个有值时，第二个选择框才可选择内容。 因为你关之前isDisabled=false，，此时disabled不为true（刷新页面过后才是初始页面，初始时disabled为true）再打开时未选择第一个输入框的值，就不会触发方法，disabled仍为false。这样写的话，当我第一个输入框选中值之后，第二个select变为不禁用，此时，我使用clearable清空第一个输入框，第一个输入框没有值，第二个应该变成禁用，但是并没有变成禁用。...
input设置disable鼠标移上去怎么出现禁止的红色图标
qq_37672347的博客
07-05 7133
如何修改input disabled时默认样式
elementUI禁用按钮时给出弹框提示
hello world
12-15 3950
需求描述 比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是正常的状态，允许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；如果是正常状态，当鼠标悬浮的时候就不出现任何变化。好像挺简单的，不过里面有一个细节，需要注意下。我们先看一下最终的效果图 遇到问题 饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也
vue使用elementui select下拉库组件鼠标hover出现下拉框
weixin_45799605的博客
01-08 1638
vue使用elementui select下拉库组件鼠标hover出现下拉框
a标签添加disabled属性后，没有鼠标禁用的红色样式（cursor:not-allowed不生效）
最新发布
licongmingli的博客
01-11 1468
给a标签disabled属性添加上了`鼠标禁用样式`cursor:not-allowed和`鼠标禁用事件`pointer-event:none，但禁用样式不生效。
VUE+ElementUI 多选框/单选框鼠标hover悬浮时的提示信息组件
qq_45726323的博客
06-27 3542
VUE+ElementUI+js编写一个多选框/单选框，当鼠标hover悬浮时的提示信息组件。
帮我封装一个原生微信小程序的下拉选择器，类似element-ui的el-select组件
05-30
好的，下面是一个简单的封装示例： 1. 在 `components` 目录下新建一个 `select` 目录，然后在 `select` 目录下新建两个文件 `select.wxml` 和 `select.js`。 2. 在 `select.wxml` 文件中编写下拉选择器的模板代码，示例如下： ``` <view class="el-select" bindtap="onSelectTap"> <view class="el-select__input"> <input type="text" class="el-select__inner" placeholder="{{placeholder}}" disabled="{{disabled}}" value="{{selectedText}}"> <i class="el-select__caret el-icon-arrow-down"></i> </view> <view class="el-select-dropdown" hidden="{{!showDropdown}}" catchtouchmove="catchTouchMove"> <scroll-view scroll-y="{{true}}" class="el-select-dropdown__list"> <view class="el-select-dropdown__item" wx:for="{{options}}" wx:key="{{item.value}}" bindtap="onOptionTap" data-value="{{item.value}}"> {{item.label}} </view> </scroll-view> </view> </view> ``` 其中，`placeholder` 表示选择器的占位符，`disabled` 表示选择器是否禁用，`selectedText` 表示当前选中的文本，`showDropdown` 表示下拉框是否显示，`options` 表示下拉框的选项列表。 3. 在 `select.js` 文件中编写组件的逻辑代码，示例如下： ``` Component({ properties: { options: { type: Array, value: [] }, placeholder: { type: String, value: '' }, disabled: { type: Boolean, value: false }, value: { type: [String, Number], value: '', observer: 'onValueChange' } }, data: { selectedValue: '', selectedText: '', showDropdown: false }, methods: { onValueChange: function(newVal) { var options = this.data.options; var selectedItem = options.find(function(item) { return item.value == newVal; }); if (selectedItem) { this.setData({ selectedValue: selectedItem.value, selectedText: selectedItem.label }); } }, onSelectTap: function() { if (this.data.disabled) { return; } this.setData({ showDropdown: !this.data.showDropdown }); }, onOptionTap: function(event) { var value = event.currentTarget.dataset.value; this.setData({ selectedValue: value, selectedText: this.data.options.find(function(item) { return item.value == value; }).label, showDropdown: false }); this.triggerEvent('change', { value: value }); }, catchTouchMove: function() { // 阻止滚动穿透 } } }); ``` 其中，`options` 表示下拉框的选项列表，`placeholder` 表示选择器的占位符，`disabled` 表示选择器是否禁用，`value` 表示当前选中的值，`selectedValue` 表示当前选中的值，`selectedText` 表示当前选中的文本，`showDropdown` 表示下拉框是否显示。 4. 在需要使用下拉选择器的页面中，引入 `select` 组件并传入相关参数，示例如下： ``` <import src="../../components/select/select.wxml" /> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" /> ``` 其中，`options` 表示下拉框的选项列表，`placeholder` 表示选择器的占位符，`value` 表示当前选中的值。 5. 在需要监听选择器值改变的页面中，使用 `bind:change` 绑定事件即可，示例如下： ``` <import src="../../components/select/select.wxml" /> <view class="page"> <template is="select" data="{{ options: options, placeholder: '请选择', value: value }}" bind:change="onSelectChange" /> </view> ``` 其中，`onSelectChange` 表示选择器值改变时触发的事件处理函数。 这只是一个简单的示例，如果需要更多功能可以根据实际需求进行扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值