Vue的elementui项目里加滚动条的样式

Vue项目里加滚动条的样式

elementui的Table里添加y轴滚动条,默认样式太丑了,需要手动更改滚动条样式。
1、

// x轴滚动条
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  ::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: rgba(32, 86, 131, 0.3);
}
//里面滑块
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #205683;
    border-radius: 3px;
}
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
}

这样会给滚动条修改样式和颜色。
2、直接隐藏滚动条滑轮,但是能滑动,将底颜色修改可以完全隐藏。

::-webkit-scrollbar {
	/*隐藏滚轮*/
	display: none;
	}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以给你简单介绍一下如何进行 Vue ElementUI 项目实战。 首先,你需要安装 Vue CLI(Vue 的脚手架工具)和 ElementUI。在命令行中输入以下命令进行安装: ``` npm install -g @vue/cli npm install element-ui -S ``` 接着,你可以使用 Vue CLI 创建一个新的 Vue 项目: ``` vue create my-project ``` 然后,你需要在项目中引入 ElementUI。在 `main.js` 文件中添加以下代码: ```js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 这样就可以在项目中使用 ElementUI 的组件了。 接下来,你可以根据自己的需求使用 ElementUI 的组件进行开发。例如,你可以在 `App.vue` 文件中添加一个按钮: ```html <template> <div class="container"> <el-button @click="handleClick">Click me!</el-button> </div> </template> <script> export default { name: 'App', methods: { handleClick() { alert('Hello, world!'); }, }, }; </script> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> ``` 运行项目: ``` npm run serve ``` 然后在浏览器中打开 http://localhost:8080,你就可以看到一个带有一个按钮的页面了。当你点击按钮时,会出现一个弹窗显示 "Hello, world!"。 以上就是一个简单的 Vue ElementUI 项目实战示例。当然,在实际开发中,你需要根据自己的需求进行更加详细的配置和开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值