elementUi重置Select选择器样式、option、deep、vue3、plus

这篇具有很好参考价值的文章主要介绍了elementUi重置Select选择器样式、option、deep、vue3、plus。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

样式标签属性为<style scoped lang="scss"></style>文章来源地址https://www.toymoban.com/news/detail-628096.html


select选框样式(element-plus)

// 设置选择框的背景样式
::v-deep .el-input__wrapper {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
    font-size: 20px;
}

// 设置选择框的鼠标经过样式
::v-deep .el-input__wrapper:hover {
    box-shadow: 0 0 0 0 transparent !important;
}

// 设置选择框的宽
::v-deep .el-input__inner {
    width: 136px;
}

// 设置选择框聚焦时的边框样式
::v-deep .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 0 transparent !important;
}

// 设置选择框赋值后的边框样式
::v-deep .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 transparent !important;
}

option选项面板样式(element-plus)

.el-select-dropdown__item {
    width: 286px;
}

到了这里,关于elementUi重置Select选择器样式、option、deep、vue3、plus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+ElementUI el-select选择器:绑定的值为对象

    业务需求: el-select选择器,后台接口需要的参数为name,name会存在重复情况,前端唯一标识选择用id,所以最后决定使用select绑定对象值将数据保存下来。 实现思路: 常规的select选择器,v-model 形式绑定的参数只能是boolean,string,number,但是仔细翻阅官方文档发现,selelct是可以

    2024年02月14日
    浏览(32)
  • vue3+elementUI-plus实现select下拉框的虚拟滚动

    网上查了几个方案,要不就是不兼容,要不就是不支持vue3, 最终找到一个合适的,并且已上线使用,需要修改一下样式: 代码如下: main.js里引用 vue文件: js代码: css代码:

    2024年02月13日
    浏览(32)
  • elementui全局给select option添加title属性

    有天边上的同事问了我一个问题,示例如下,有个数据特别长,导致下拉部分被横向撑大。希望在全局对所有的 option 进行处理,按照 select 的宽度,超出隐藏。 方式一 第一眼看过去直接修改源码好了,修改一下样式,再配合 patch-package 做一个补丁包即可。 方式二 转念一想

    2024年02月16日
    浏览(25)
  • 【Vue3+Ts】项目启动准备和配置项目代码规范和css样式的重置

    创建项目( 使用Vite 构建工具创建项目模板) 创建完项目,npm install 一下即可 目录介绍 插件安装 看一下vscode推荐的插件 安装所推荐的插件,为了更好的类型检测 创建别名 编译说明 项目配置 配置icon和标题 配置项目别名 配置ts.config.json 检测vscode的插件是否配置 配置项目代

    2024年02月10日
    浏览(35)
  • 【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)

    可以看到在截图中这个日期默认高亮显示的是30号,但是我选中其他日期后30号这个数字的高亮并没有移除。 年、月的样式同理。 这显然是不符合需求的,但是又需要用到这些控件,所以就可以通过style来改写el-date-picker的对应样式,以使组件达到需求要求的效果。 于是我通

    2024年02月02日
    浏览(44)
  • 实现ElementUI中两个Select选择联动效果

    先上图 通过赋值的方式实现 即子级下拉选项循环数组为空 将所需的值对空数组 重新赋值 代码如下 第一个循环数组为 procedureType 第二个是 causeGroup 暂且称之为父级与子级 须注意的是父级下拉绑定的change事件 要对子级作出滞空操作 也就是 清空子选项的值 不然会出现切换选

    2024年02月15日
    浏览(36)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(38)
  • elementUI --- el-select 下拉框 日历 级联选择

    element UI 组件库中的 select 选择器 中下拉列表的样式,在页面渲染的时候,总是渲染为仅次于body级别的div ,这样子覆盖样子会影响全局其他的select选择器下拉框样式,试图通过给el-select加父标签来覆盖,然而并没有卵用。 控制台看到的渲染结果: 解决方法: 通过 popper-cla

    2024年02月15日
    浏览(37)
  • 【elementUI】el-select选择框位置错位、偏移bug

    在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。 这个时候需要手动为下拉框设置: popper-append-to-body=\\\"false\\\" 属性,并设置以下CSS样式解决问题:

    2024年02月15日
    浏览(34)
  • ElementUI Select选择器如何根据value值显示对应的label

    修改前效果如图所示,数据值状态应显示为可用,但实际上仅显示了状态码1,并没有显示其对应的状态信息。在排查了数据类型对应关系问题后,并没有产生实质性影响,只好对代码进行了如下修改。 修改前代码: 修改后代码:

    2024年02月15日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包