【Vue】样式

关注

原创 2023-07-25 15:02:01 1.4k 阅读 AI 写同款· GEO 优化 ›

Vue布局秘籍：用这些技巧打造炫酷页面！ el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件，有着以下关系：- el-container：容器组件，是整个布局的最外层容器，包含了页面的整体布局。- el-header：头部组件，位于容器组件的顶部，通常用于放置导航栏、logo等。- el-aside：侧边栏组件，放置在容器组件的左侧或右侧，用于放置边栏菜单、快捷导航等。- el-footer：底部组件，位于容器组件的底部，通常用于放置页脚信息、版权声明等。阅读详情

一、弹出框的样式

二、子路由显示,点击父路由和子路由高亮的样式

三、设置标签页类似内边距的样式

四、获取元素在屏幕中的距离（位置属性）

1、返回元素的大小以及相对于视口的位置

2、元素偏移量offset、元素可视区client、元素滚动scroll

五、去掉表格全选多选框

修改element的样式的时候style标签不能加上scoped,
为了防止修改的样式影响到别的页面，建议在当前页面加一个id,修改时带上id，或者在样式前面加上 /deep/ ，控制修改的权限范围

一、弹出框的样式

el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级，所以需要设置全局style。

页面内有多个Popper的，可以使用自定义popper-class

<style lang="scss">
.el-popover {
  padding: 0px;
  .el-table th {
    background-color: #dff2ff;
  }
}
</style>

二、子路由显示,点击父路由和子路由高亮的样式

elementUI 导航栏点击之后改变背景色，背景色悬停

（在sidebar.css的.sidebar-container {}中写）

.sidebar-container {
    // 一级菜单背景色
    .el-menu-item.is-active {
      color: #fff !important;
      background: #4a6cfa !important;
    }

    // .el-submenu__title.is-active {
    //   color: #fff !important;
    //   background: #4a6cfa !important;
    // }
    // 二级菜单背景色
    .el-submenu .el-menu-item.is-active {
      background: #4a6cfa !important;
    }
    // .is-active {
    //   background: #4a6cfa !important;
    // }
    // 显示二级菜单页面时，一级菜单的背景色（二级菜单显示在菜单栏上才有效）
    .is-active>.el-submenu__title {
      color: #fff !important;
      background: #4a6cfa !important;
    }
}

三、设置标签页类似内边距的样式

elementUI的标签页，样式设置可以使用：before来实现

.el-tabs__item.is-active:before {
    background: #2e3192;
    content: 'border';
    width: 200px;
    position: absolute;
    top: -40px;
    left: 0px;
  }

四、获取元素在屏幕中的距离（位置属性）

1、返回元素的大小以及相对于视口的位置

语法：obj.getBoundingClientRect()

<div ref="bt" :style="{ height: bottomheight + 'px',}"></div>


rectObject = this.$refs.bt.getBoundingClientRect();

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

rectObject.width：是元素自身的宽

rectObject.height是元素自身的高

2、元素偏移量offset、元素可视区client、元素滚动scroll

offest偏移量（只读属性）：是指在文档中占用所有显示的宽度，包括边框内边距内容、滚动条，但是不包括overflow的部分

offsetParent	返回该元素的祖先元素中、离自己最近的、有定位的元素即返回该元素的最近的有定位的父级元素。如果父级元素都没有定位则返回body。
offsetLeft	返回他和他父亲之间左边留出的距离。
offsetTop	返回他和他父亲之间上边留的距离。
offsetWidth	返回该元素自身的宽度，包括border和padding和内容区域的宽度相加即可
offsetHeight	返回该元素自身的高度，包括border和padding和内容区域的高度相加即可

client可视区：是指元素本身能看见的内容，使用此属性可以动态的获取各个元素的边框大小、元素本身的大小等。包括padding、内容，其中它不包括border、滚动条以及overflow被折叠起来的部分。

element.clientTop	返回元素上边框大小。即上边框的厚度，一般它的值就是0，因为滚动条不会出现在顶部。
element.clientLeft	返回元素左边框大小。即左边框的厚度，一般它的值就是0，因为滚动条不会出现在左侧。
element.clientWidth	返回元素自身可见的宽度。返回的数值不带单位。该元素自身可见的宽度 = 左右padding值 + 内容区宽度 clientWidth = [padding-left] + [width] + [padding-right]
element.clientHeight	返回该元素自身可见的高度。返回的数值不带单位。该元素自身可见的高度 = 上下padding值 + 内容区高度 offsetHeight = [padding-top] + [height] + [padding-bottom]

scroll指滚动，我们是用scroll系列可以动态获得该元素的大小、滚动距离等。包括padding、内容、overflow隐藏的部分，但是不包括border、滚动条。

element.scrollTop	返回被卷去的上侧距离。返回值不带单位。用于获取或设置位于对象最顶端和窗口中可见内容的最顶端之间的距离。
element.scrollLeft	返回被卷去的左侧距离。返回值不带单位。用于获取或设置位于对象左边界和窗口中目前可见内容的最左端之间的距离。
element.scrollWidth	返回元素的滚动宽度，即元素的实际宽度。返回值不带单位该元素的滚动宽度 = 左右padding值 + 内容区宽度 + overflow的宽度 scrollWidth = [padding-left] + [width] + [overflow] + [padding-right]
element.scrollHeight	返回元素的滚动高度，即元素的实际高度。返回值不带单位该元素的滚动高度 = 上下padding值 + 内容区高度 + overflow的高度 scrollHeight = [padding-top] + [height] + [overflow] + [padding-bottom]

onscroll事件：当滚动条在滚动时会触发此事件

window.pageXOffset	返回文档在窗口左上角水平方向滚动的像素。等价于 scrollX。用于获取或设置当前页面相对于窗口显示区左上角的 X 位置。
window.pageYOffset	返回文档在窗口左上角垂直方向滚动的像素。等价于 scrollXY。用于获取或设置当前页面相对于窗口显示区左上角的 Y 位置。

五、下拉框的dropdown溢出屏幕

先在el-select上添加popper-class="select-dropdown"

<style lang="scss">
.select-dropdown {
  max-width: 83%;
}
.select-dropdown .el-select-dropdown__item {
  overflow: visible;
  display: block;
}
</style>

收录于