IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue 重置 Element UI 组件默认样式 -> 正文阅读

[JavaScript知识库]Vue 重置 Element UI 组件默认样式

参考资料:

  1. 巧用:is()或:where()伪类让scoped的style依然全局匹配
  2. vue 深度作用选择器 >>>、/deep/、::v-deep


一. ?需求场景

项目中使用了Element UI中的el-date-picker组件,渲染效果如下
可以看到,年月选择框之间的距离太宽了.需要调整一下.

在这里插入图片描述

  • 日期选择框的代码
<el-form-item label="年月:" label-position="left" prop="months" style="width:100%">
   <div class="block monthWidth">
     <el-date-picker 
       v-model="listQuery.months"
       type="monthrange" 
       range-separator="" 
       start-placeholder="开始年月"
       end-placeholder="结束年月" 
       :clearable="clearable" 
       value-format="yyyy-MM-dd"
       format="yyyy-MM" 
       :disabled="disabled" 
     />
   </div>
</el-form-item>

二. 🤪尝试解决

<style scoped>
.monthWidth {
  width: 47%;
}

/* 重置日期选择框的宽度 */
.monthWidth input {
  width: 60px;
}

/* 重置波浪线的宽度 */
.monthWidth span {
  width: 20px;
}
</style>

😅可以看到Vue工程在编译之后,为我们添加了一个属性选择器data-v-xxx,从而导致我们追加的样式并没有生效.
在这里插入图片描述


三. 💪最终解决

3.1 :is()伪类

???Vue等框架中使用:is()伪类,选择器就不会再增加随机属性选择器

<style scoped>
.monthWidth {
  width: 47%;
}

/* 重置日期选择框的宽度 */
.monthWidth :is(input) {
  width: 60px;
}

/* 重置波浪线的宽度 */
.monthWidth :is(span) {
  width: 20px;
}
</style>

在这里插入图片描述

3.2 >>> 深度选择器

?没有指定style的lang的情况下,默认为css
?>>>只能在css的情况下使用

<style scoped>
.monthWidth {
  width: 47%;
}

/* 重置日期选择框的宽度 */
.monthWidth >>> input {
  width: 60px;
}

/* 重置波浪线的宽度 */
.monthWidth >>> span {
  width: 20px;
}
</style>

在这里插入图片描述

3.3 ::v-deep 深度选择器

?::v-deep只能在scss语言中使用

<style lang="scss" scoped>
.monthWidth {
  width: 47%;
}

/* 重置日期选择框的宽度 */
.monthWidth {
  ::v-deep input {
    width: 60px;
  }
}

/* 重置波浪线的宽度 */
.monthWidth {
  ::v-deep span {
    width: 20px;
  }
}
</style>

在这里插入图片描述

3.4 /deep/ 深度选择器

?/deep/只能在less语言中使用

<style lang="less" scoped>
.monthWidth {
  width: 47%;
}

/* 重置日期选择框的宽度 */
.monthWidth {
  /deep/ input {
    width: 60px;
  }
}

/* 重置波浪线的宽度 */
.monthWidth {
  /deep/ span {
    width: 20px;
  }
}
</style>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-24 20:47:38  更:2022-09-24 20:52:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年6日历 -2024/6/15 8:48:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码