https://github.com/markthree/usescrollbarstyle
响应式地变换滚动条样式 (vue3)
https://github.com/markthree/usescrollbarstyle
Last synced: 7 months ago
JSON representation
响应式地变换滚动条样式 (vue3)
- Host: GitHub
- URL: https://github.com/markthree/usescrollbarstyle
- Owner: markthree
- License: mit
- Created: 2022-12-13T10:04:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-10T05:16:05.000Z (over 3 years ago)
- Last Synced: 2024-11-13T17:52:08.156Z (over 1 year ago)
- Language: TypeScript
- Size: 9.66 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
useScrollBarStyle
响应式可编程的滚动条样式 (vue3)
## Motivation
大多数人都会选择改掉 `web` 原生难看的滚动条样式，但是原生滚动条的选择器实在是复杂。所以有了这个库，当然得益于 `vue3` 的支持，一切都是响应式可编程的，例如你可以根据不同场景变换滚动条的样式，尤其是在 `web` 网站有多主题需求时，一切都会变得简单。
## Usage
### install
```shell
npm i use-scroll-bar-style
```
### import
```html
import { useScrollBarStyle } from 'use-scroll-bar-style'
const {
width,
thumbBackgroundColor,
darkThumbBackgroundColor
// ... etc
} = useScrollBarStyle()
width.value = '10px' // 宽度
thumbBackgroundColor.value = 'red' // thumb 背景颜色
darkThumbBackgroundColor.value = 'blue' // 暗黑模式下 thumb 背景颜色
```
## Refs
该组件由以下库搭建而成
- [vite](https://cn.vitejs.dev/)
- [vueuse](https://vueuse.org/)
- [unocss](https://github.com/unocss/unocss)
## Support
该库由 [vue3-exports](https://github.com/dishait/vue3-exports) 提供支持，[vue-dark-switch](https://github.com/dishait/vue-dark-switch) 提供暗黑模式下的测试。
## License
Made with [markthree](https://github.com/markthree)
Published under [MIT License](./LICENSE).