首页 > 其他分享 >vue+css: 引用的组件快速改变滚动条样式

vue+css: 引用的组件快速改变滚动条样式

时间:2023-06-14 17:55:06浏览次数:41  
标签:vue 0.2 滚动条 webkit scrollbar background 组件 css

在a组件页面内有b组件,b组件产生的滚动条太丑不好看但是又不想改变b组件(b组件公共用的地方很多)又不想专门复制份在此基础上改。

只要在使用的组件上增加css代码即可同时让组件内滚动条生效,原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效

comp.vue

<style scoped lang="scss">
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
  //  添加 vertical ,单独设置垂直方向上的 滑块
  &:vertical {
    // background-color: red;
  }
}
/* 滚动条整体 */
::-webkit-scrollbar {
  height: 12px;
  width: 4px;
  cursor: pointer;
}
/* 两个滚动条交接处 -- x轴和y轴 */
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #6d6868;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 4px; background: #ededed; cursor: pointer; } /* 滚动条两端按钮 */ ::-webkit-scrollbar-button { } </style>

实际上滚动条时在uploadFIle组件内的,但是在父组件内设置(不想改组件)同样可以快速生效
<template>
 
        <uploadFile class="uploadstyle" style="" :files="filesArr" :folderName="folderName"></uploadFile>
    
</template>

 

 




标签:vue,0.2,滚动条,webkit,scrollbar,background,组件,css
From: https://www.cnblogs.com/zbbk/p/17480989.html

相关文章

  • css边框斜角
    为实现下面图形形状<style>.box{width:200px;height:100px;}</style><divclass="box"></div>1、利用linear-gradient.box{background:linear-gradient(135deg,transparent15px,#3b30)topleft,   linear-gradient(-135deg,......
  • 2023.6.14 - vue多页面项目配置
    抽离multipage.config.js多页面配置文件const{resolve}=require('path');constfs=require('fs');//获取多页的入口配置constpagesPath='src/pages';//pages页面配置constpages=getAllPages(resolve(pagesPath));//alias配置constaliasConfi......
  • vue封装包含区域内不可拖拽的可拖拽组件
    标题比较绕口,大概意思就是封装一个可拖拽组件,但是因为组件内有文件或者表单或者其它原因而不可在这个区域内使用拖拽,所以在绑定拖拽区域方法的同时限制不可拖拽区域。实现方式很简单  直接看代码drag.jsimportVuefrom'vue'exportconstdrag=Vue.directive('drag',{......
  • vue3 css ts 双重弹跳加载动画
    /双重弹跳加载动画*/效果如同页面https://codepen.io/yjx123/pen/zYMvbML<ahref="javascript:void(0)"@click="startLoading"><inline-svg:src="getAssetPath(iconPath)"></inline-svg><div:style="{......
  • 【React工作记录一百零五】springBoot+vue实现登录操作和JWT验证
    前言大家好我是歌谣今天继续进行前后端的一个学习目前进入的是javaweb部分今天来聊聊登录部分和JWT验证部分的书写用户登录loginControllerpackagecom.itheima.controller;importcom.itheima.pojo.Emp;importcom.itheima.pojo.Result;importcom.itheima.service.EmpSer......
  • 2023-06-14 记录一下vue组件如何调用App.vue里面的方法(代码来至chatGpt)
    可以通过在子组件中使用$emit方法来触发App.vue中的方法。具体步骤如下:在App.vue中定义一个方法<script>exportdefault{methods:{appMethod(){console.log('调用了App.vue中的方法')}}}</script>在子组件中使用$emit方法触发该方......
  • CSS动画和过渡的区别
    CSS动画和过渡都是用来实现网页元素的动态效果,但它们在实现方式和应用场景上有一些区别。CSS过渡(CSSTransitions)是在元素状态改变时实现平滑过渡效果的一种机制。过渡通过指定元素的属性变化,使元素从一个状态平滑地过渡到另一个状态。过渡通常用于响应用户操作、交互效果或状态......
  • vue watch deep 用法
    简单案例<template><div><h1>watchdeep</h1><p>obj:{{obj}}</p><p>调用watch次数:{{times}}</p><button@click="chgObj">改变对象</button></div></t......
  • Vue3中循环任务优化方案
    需求在使用循环任务时,往往需要使用到setInterval方法。其接受三个参数,分别是1.具体执行的函数2.执行时间间隔3.传递个函数的参数,并返回一个id,后续可以使用这个id来停止循环的执行。具体的使用可以查阅MDN。在实际开发中,很容易重复创建相同的interval实例,进行反复的执行,并且在......
  • Vue.js 组件基础 #yyds干货盘点#【yyds干货盘点】
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......