希望组件能够自定义滚动条的样式

qilin2008201 commented 7 months ago

Clear and concise description of the problem

目前组件中滚动条的宽度太细了，在一些没有滚轮的特殊鼠标下操作困难，希望组件中能够引入一个自定义滚动条样式的参数

Alternative

No response

Additional context

No response

Validations

[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

jizai1125 commented 7 months ago

可以通过 theme-overrides prop 的 common.scrollbarWidth 修改，在组件上覆盖如下：

<script setup lang="ts">
import { type GlobalThemeOverrides, type ScrollbarProps } from 'naive-ui';

type ScrollbarThemeOverrides = NonNullable<ScrollbarProps['themeOverrides']>
const scrollbarThemeOverrides: ScrollbarThemeOverrides =  {
  common: {
    scrollbarWidth: '20px'
  }
}
</script>

<template>
  <n-scrollbar style="max-height: 120px" :theme-overrides="scrollbarThemeOverrides" trigger="none">
    我们在田野上面找猪<br>
    想象中已找到了三只<br>
    小鸟在白云上面追逐<br>
    它们在树底下跳舞<br>
    啦啦啦啦啦啦啦啦咧<br>
    啦啦啦啦咧<br>
    我们在想象中度过了许多年<br>
    想象中我们是如此的疯狂<br>
    我们在城市里面找猪<br>
    想象中已找到了几百万只<br>
    小鸟在公园里面唱歌<br>
    它们独自在想象里跳舞<br>
    啦啦啦啦啦啦啦啦咧<br>
    啦啦啦啦咧<br>
    我们在想象中度过了许多年<br>
    许多年之后我们又开始想象<br>
    啦啦啦啦啦啦啦啦咧
  </n-scrollbar>
</template>

也可以通过 config-provider 修改

qilin2008201 commented 7 months ago

非常感谢解答，但是按照上面提供的写法，ts似乎会报不存在scrollbarWidth这个属性的错误？是我的navie-ui版本不对吗？我目前使用的应该是最新版navie-ui（2.37.3），另外，GlobalThemeOverrides这个好像也没用到？

Type '{ scrollbarWidth: string; }' is missing the following properties from type '{ baseColor: string; primaryColor: string; primaryColorHover: string; primaryColorPressed: string; primaryColorSuppl: string; infoColor: string; infoColorHover: string; infoColorPressed: string; ... 94 more ...; name: "common"; }': baseColor, primaryColor, primaryColorHover, primaryColorPressed, and 98 more.

jizai1125 commented 7 months ago

非常感谢解答，但是按照上面提供的写法，ts似乎会报不存在scrollbarWidth这个属性的错误？是我的navie-ui版本不对吗？我目前使用的应该是最新版navie-ui（2.37.3），另外，GlobalThemeOverrides这个好像也没用到？
Type '{ scrollbarWidth: string; }' is missing the following properties from type '{ baseColor: string; primaryColor: string; primaryColorHover: string; primaryColorPressed: string; primaryColorSuppl: string; infoColor: string; infoColorHover: string; infoColorPressed: string; ... 94 more ...; name: "common"; }': baseColor, primaryColor, primaryColorHover, primaryColorPressed, and 98 more.

应该是ts有问题，实际是有效的，或者可以用 config-provider

<script setup lang="ts">
import { type GlobalThemeOverrides } from "naive-ui";
const themeOverrides: GlobalThemeOverrides = {
  common: {
    // 纵向滚动条宽
    scrollbarWidth: "20px"
   // 横向滚动条高
    scrollbarHeight: "20px"
  },
};
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <n-scrollbar style="max-height: 120px" trigger="none">
      我们在田野上面找猪<br />
      想象中已找到了三只<br />
      小鸟在白云上面追逐<br />
      它们在树底下跳舞<br />
      我们在想象中度过了许多年<br />
      许多年之后我们又开始想象<br />
      啦啦啦啦啦啦啦啦咧
    </n-scrollbar>
  </n-config-provider>
</template>

qilin2008201 commented 7 months ago

谢谢，上面的方法确实是有效的，但目前有一个需求是加粗n-data-table的竖直和水平方向上的滚动条，上述方法能够改变纵向滚动条的宽度，但横向滚动条的宽度似乎依然维持原样？

jizai1125 commented 7 months ago

谢谢，上面的方法确实是有效的，但目前有一个需求是加粗n-data-table的竖直和水平方向上的滚动条，上述方法能够改变纵向滚动条的宽度，但横向滚动条的宽度似乎依然维持原样？

还有个 scrollbarHeight 设置的横向滚动条高，组件的 size 设置影响的横向、纵向滚动条的长度

qilin2008201 commented 7 months ago

好的，谢谢解答

SvenMeiLing commented 4 months ago

@jizai1125 兄弟问个问题,假设我写了个自己的滚动条, 如何使其我在naiveUI中切换主题的时候也可以使其我的滚动条切换.因为我发现官网文档中ThemeOverrides只能更改naiveui组件的样式无法自己拓展.而自带滚动条虽然好用但是我页面全是100%宽度这样布局,然后有个区域用这个滚动条正常但是当我把:


<template>
    <n-scrollbar style="height: 100%;" content-style="height:100%">
        <n-layout style="height: 100%;"  embedded content-style="padding: 20px;height:100%;border:1px solid red">
            <n-space justify="center" align="center">
                <n-grid cols="1 s:1 m:2 l:2 xl:2" responsive="screen" x-gap="30"
                        y-gap="20">
                    <n-grid-item>
                        <n-grid cols="1" responsive="screen" y-gap="10">
                            <n-grid-item>
                                <n-text tag="div" style="font-size: 250%;font-weight: 100;">
                                    植物病害鉴定
                                </n-text>
                                <n-text code style="color: palevioletred;">Plant Disease Identification</n-text>
                            </n-grid-item>
                            <n-grid-item style="width: 100%">
                                <n-image src="src/assets/images/corn2.jpg"
                                         style="width: 100%;"
                                         class="sm:max-h-52 md:max-h-[15rem] xl:max-h-[10rem] 2xl:max-h-72"
                                         width="100%" object-fit="cover"></n-image>
                            </n-grid-item>
                            <n-grid-item>
                                <n-h2 style="font-weight: 100;" prefix="bar">植物病害诊断变得简单</n-h2>
                                <n-text style="font-weight: 100; font-size: 120%">
                                    <n-ellipsis expand-trigger="click" line-clamp="2" :tooltip="false">
                                        欢迎来到我们的植物病害识别网站！我们致力于帮助园艺爱好者、农民和业余爱好者轻松准确地诊断植物病害。
                                        我们的平台采用最先进的人工智能技术，让用户可以快速识别和了解常见的植物病害。通过我们友好的用户界面，
                                        您可以轻松上传植物图片并获得即时诊断，以及有效管理疾病的建议。加入我们的社区，让您的植物健康茁壮成长！
                                    </n-ellipsis>
                                </n-text>
                            </n-grid-item>
                        </n-grid>
                    </n-grid-item>

                    <n-grid-item>
                        <n-grid cols="1" responsive="screen">
                            <n-grid-item>
                                <n-image src="src/assets/images/corn3.jpg"
                                         style="width: 100%;"
                                         width="100%"
                                         class="sm:max-h-52 md:max-h-[15rem] xl:max-h-[10rem] 2xl:max-h-72"
                                         object-fit="cover"></n-image>
                            </n-grid-item>
                            <n-grid-item>
                                <n-h2 style="font-weight: 300" prefix="bar" type="info">基于计算机视觉与深度定制的模型技术
                                </n-h2>
                                <n-text>
                                    <n-ellipsis expand-trigger="click" line-clamp="5" :tooltip="false">
                                        利用计算机视觉和人工智能，结合神经网络识别和高精度模型检测玉米病虫害的技术，
                                        通过视频扫描技术和物联网无人机技术，实现了对大面积玉米田地进行快速、准确的监测和诊断。
                                        这项技术能够实现对玉米植株状况的实时监测、自动识别病虫害类型，并准确评估病虫害的严重程度，
                                        为农民提供及时的防治建议和精准农药施用方案。通过无人机技术，可以实现对田地的全方位覆盖，高效地获取图像数据，
                                        并与云端智能分析系统结合，实现玉米病虫害的早期预警和治理，进而提高农作物的产量和质量。这项技术整合了先进的信息技术和农业生产，
                                        为现代农业提供了一种智能化、高效化的解决方案，展现了数字化农业的巨大潜力。
                                    </n-ellipsis>

                                </n-text>
                            </n-grid-item>
                        </n-grid>

                    </n-grid-item>
                </n-grid>
            </n-space>
        </n-layout>
    </n-scrollbar>

  <!--    </n-space>-->

</template>
``` 我的高度设置100%后滚动条变成原生的了,但是我又不想高度写死这样当我在大屏幕下的时候我那块内容不会居中显示,绝对布局滚动条也会消失变成原生的.我的布局喜欢先搭好框架,比如flex:1 0 0这样写比例.不知道是不是正确的然后导致我要写很多个height:100%我的组件中出现了很多个这种东西.没办法我想实现响应式布局在pc和移动端都能切换自如

jizai1125 commented 4 months ago

兄弟问个问题,假设我写了个自己的滚动条, 如何使其我在naiveUI中切换主题的时候也可以使其我的滚动条切换.因为我发现官网文档中ThemeOverrides只能更改naiveui组件的样式无法自己拓展

@SvenMeiLing 可以用 useThemeVars 拿到主题相关的变量，文档创建适配主题的组件

SvenMeiLing commented 4 months ago

@jahnli 能否给个示例?难道是从useThemeVars中取出自己定义的那套的变量动态变更自定义组件的样式吗???

jahnli commented 4 months ago

@jahnli 能否给个示例?难道是从useThemeVars中取出自己定义的那套的变量动态变更自定义组件的样式吗???

n-config-provider :theme

tusen-ai / naive-ui