Ant Design学习——Slider

最新推荐文章于 2024-04-07 09:39:49 发布
最新推荐文章于 2024-04-07 09:39:49 发布
阅读量3.1k 收藏 2
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26057771/article/details/122167288
版权

2021SC@SDUSC

Slider滑动输入条

用法：
滑动型输入器，展示当前值和可选范围。
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

API

参数说明类型默认值
allowClear支持清除, 单选模式有效booleanfalse
defaultValue设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]number | [number, number]0 | [0, 0]
disabled值为 true 时，滑块为禁用状态booleanfalse
dots是否只能拖拽到刻度上booleanfalse
getTooltipPopupContainerTooltip 渲染父节点，默认渲染到 body 上(triggerNode) => HTMLElement() => document.body
includedmarks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列booleantrue
marks刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式object{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max最大值number100
min最小值number0
range双滑块模式boolean | rangefalse
reverse反向坐标轴booleanfalse
step步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分number | null1
tipFormatterSlider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltipvalue => ReactNode | nullIDENTITY
tooltipPlacement设置 Tooltip 展示位置。string-
tooltipVisible值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时boolean-
value设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]number | [number, number]-
vertical值为 true 时，Slider 为垂直方向booleanfalse
onAfterChange与 onmouseup 触发时机一致，把当前值作为参数传入(value) => void-
onChange当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入(value) => void-

range

参数说明类型默认值版本
draggableTrack范围刻度是否可被拖拽booleanfalse4.10.0

部分源码

SliderTooltip.tsx

import * as React from 'react';
import { useRef } from 'react';
import { composeRef } from 'rc-util/lib/ref';
import raf from 'rc-util/lib/raf';
import Tooltip, { TooltipProps } from '../tooltip';

const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
  const { visible } = props;
  const innerRef = useRef<any>(null);

  const rafRef = useRef<number | null>(null);

  function cancelKeepAlign() {
    raf.cancel(rafRef.current!);
    rafRef.current = null;
  }

  function keepAlign() {
    rafRef.current = raf(() => {
      innerRef.current?.forcePopupAlign();
      rafRef.current = null;
    });
  }

  React.useEffect(() => {
    if (visible) {
      keepAlign();
    } else {
      cancelKeepAlign();
    }

    return cancelKeepAlign;
  }, [visible, props.title]);

  return <Tooltip ref={composeRef(innerRef, ref)} {...props} />;
});

export default SliderTooltip;

运用到了raf
requestAnimationFrame(rAF)是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
SliderTooltip结构较为简单，主要用到了tooltip，并设置了可见visible时就保持对齐的方法。
在这里插入图片描述
当 tooltipVisible 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。

index.tsx

import * as React from 'react';
import RcSlider, { Range as RcRange, Handle as RcHandle } from 'rc-slider';
import classNames from 'classnames';
import { TooltipPlacement } from '../tooltip';
import SliderTooltip from './SliderTooltip';
import { ConfigContext } from '../config-provider';

引入了react的slider，以及刚才提到的SliderTooltip。

export interface SliderMarks {
  [key: number]:
    | React.ReactNode
    | {
        style: React.CSSProperties;
        label: React.ReactNode;
      };
}

interface HandleGeneratorInfo {
  value?: number;
  dragging?: boolean;
  index: number;
}

export type HandleGeneratorFn = (config: {
  tooltipPrefixCls?: string;
  prefixCls?: string;
  info: HandleGeneratorInfo;
}) => React.ReactElement;

export interface SliderBaseProps {
  prefixCls?: string;
  tooltipPrefixCls?: string;
  reverse?: boolean;
  min?: number;
  max?: number;
  step?: null | number;
  marks?: SliderMarks;
  dots?: boolean;
  included?: boolean;
  disabled?: boolean;
  vertical?: boolean;
  tipFormatter?: null | ((value?: number) => React.ReactNode);
  className?: string;
  id?: string;
  style?: React.CSSProperties;
  tooltipVisible?: boolean;
  tooltipPlacement?: TooltipPlacement;
  getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  autoFocus?: boolean;
}

此处先设置了一些Slider的基础属性，比如可拖动性以及刻度标记。
Marks刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式。使用Marks可标注分段式滑块。

以下代码可实现如下效果

import { Slider } from 'antd';

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

ReactDOM.render(
  <>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />

    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />

    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />

    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </>,
  mountNode,
);

在这里插入图片描述
当 included=false 时，表明不同标记间为并列关系。
当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。

以下接index

export interface SliderSingleProps extends SliderBaseProps {
  range?: false;
  value?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  onAfterChange?: (value: number) => void;
  handleStyle?: React.CSSProperties;
  trackStyle?: React.CSSProperties;
}

export interface SliderRangeProps extends SliderBaseProps {
  range: true | SliderRange;
  value?: [number, number];
  defaultValue?: [number, number];
  onChange?: (value: [number, number]) => void;
  onAfterChange?: (value: [number, number]) => void;
  handleStyle?: React.CSSProperties[];
  trackStyle?: React.CSSProperties[];
}

两种slider，single和range，都继承自SliderBaseProps，相当于都有了Slider基础的属性，区别主要是range是双滑块因此值应该是个范围。
以下分别是single和range
在这里插入图片描述

const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
  (props, ref: any) => {
    const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
    const [visibles, setVisibles] = React.useState<Visibles>({});

    const toggleTooltipVisible = (index: number, visible: boolean) => {
      setVisibles((prev: Visibles) => ({ ...prev, [index]: visible }));
    };

    const getTooltipPlacement = (tooltipPlacement?: TooltipPlacement, vertical?: boolean) => {
      if (tooltipPlacement) {
        return tooltipPlacement;
      }
      if (!vertical) {
        return 'top';
      }
      return direction === 'rtl' ? 'left' : 'right';
    };

    const handleWithTooltip: HandleGeneratorFn = ({
      tooltipPrefixCls,
      prefixCls,
      info: { value, dragging, index, ...restProps },
    }) => {
      const {
        tipFormatter,
        tooltipVisible,
        tooltipPlacement,
        getTooltipPopupContainer,
        vertical,
      } = props;
      const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
      const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
      const rootPrefixCls = getPrefixCls();

      return (
        <SliderTooltip
          prefixCls={tooltipPrefixCls}
          title={tipFormatter ? tipFormatter(value) : ''}
          visible={visible}
          placement={getTooltipPlacement(tooltipPlacement, vertical)}
          transitionName={`${rootPrefixCls}-zoom-down`}
          key={index}
          overlayClassName={`${prefixCls}-tooltip`}
          getPopupContainer={getTooltipPopupContainer || getPopupContainer}
        >
          <RcHandle
            {...restProps}
            value={value}
            onMouseEnter={() => toggleTooltipVisible(index, true)}
            onMouseLeave={() => toggleTooltipVisible(index, false)}
          />
        </SliderTooltip>
      );
    };

    const {
      prefixCls: customizePrefixCls,
      tooltipPrefixCls: customizeTooltipPrefixCls,
      range,
      className,
      ...restProps
    } = props;
    const prefixCls = getPrefixCls('slider', customizePrefixCls);
    const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
    const cls = classNames(className, {
      [`${prefixCls}-rtl`]: direction === 'rtl',
    });

    // make reverse default on rtl direction
    if (direction === 'rtl' && !restProps.vertical) {
      restProps.reverse = !restProps.reverse;
    }

    // extrack draggableTrack from range={{ ... }}
    let draggableTrack: boolean | undefined;
    if (typeof range === 'object') {
      draggableTrack = range.draggableTrack;
    }

    if (range) {
      return (
        <RcRange
          {...(restProps as SliderRangeProps)}
          step={restProps.step!}
          draggableTrack={draggableTrack}
          className={cls}
          ref={ref}
          handle={(info: HandleGeneratorInfo) =>
            handleWithTooltip({
              tooltipPrefixCls,
              prefixCls,
              info,
            })
          }
          prefixCls={prefixCls}
        />
      );
    }
    return (
      <RcSlider
        {...(restProps as SliderSingleProps)}
        step={restProps.step!}
        className={cls}
        ref={ref}
        handle={(info: HandleGeneratorInfo) =>
          handleWithTooltip({
            tooltipPrefixCls,
            prefixCls,
            info,
          })
        }
        prefixCls={prefixCls}
      />
    );
  },
);

forwardRef函数，用到了之前引入的tooltip，并利用react的slider进行实现。
其中
rtl用于方向的反转，从左到右变成从右到左。
draggableTrack用于设置范围刻度整体可拖动的属性。

leol1901
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记
geyaoisnice的博客
04-07 293
ant design mobile实现tab滚动效果和闪屏小记
自定义的滑杆(Slider)效果
04-04
一个自定义的滑杆(Slider)效果案例，源码WLRangeSlider，WLRangeSlider是自定义的slider,具有左右两个滑块,可更改滑块颜色，圆角以及轨迹的颜色和高亮。
slider-design
05-29
滑块设计 我决定做一个很酷的滑块 :squinting_face_with_tongue: 预习 :magnifying_glass_tilted_left:
推荐一款创新的前端验证工具：RC-Slider-Captcha
最新发布
gitblog_00095的博客
04-07 335
推荐一款创新的前端验证工具：RC-Slider-Captcha 项目地址:https://gitcode.com/caijf/rc-slider-captcha RC-Slider-Captcha 是一个基于React开发的滑动验证码组件库，它将传统的图文验证码与交互式滑块验证相结合，为用户提供了一种更友好、更具用户体验的验证方式。在确保网站安全的同时，也提升了用户操作的便捷性。 技术分析 R...
antd - 常用封装方法之sliderEach
successLadder的博客
10-02 356
import React from "react"; import { Menu , Icon } from 'antd'; const { SubMenu } = Menu; export default (routes) => { let fn = (child) => { return <SubMenu key={ch...
多个slider的应用
yu3000的专栏
02-07 331
http://try.sencha.com/touch/2.0.1/demos/Ext.field.Slider.component.allowThumbsOverlapping/viewer.html
antd库Slider组件使用要特别小心
GahoYeung的博客
06-22 2331
如果设置了一个过小的step，那么就会有危险。 因为每一个step都是一个刻度，而Slider组件会将每一个刻度渲染成一个span元素。 当min为-4000，max为4000，step为0.0625时，中间的刻度就会有80000+，光渲染这8W个元素就能把浏览器拖死。 ...
antd Slider 根据数据展示
臧小川的博客
12-13 1300
index import React from 'react' import styles from './style.less' import { Slider } from 'antd'; const data = [ { height: 148.9, name: '羽神', money: 250, }, { height: 159, name: '少主', money: 189, .
tooltip的api【getPopupContainer】
y_yinkedada的博客
03-22 5034
使用tooltip或者其他使用之后，节点与当前页面节点不同级的组件，他们都会有个类似getPopupContainer的API，官方介绍用法：Function(triggerNode)，默认值是() => document.body。 这样的结果就是： tooltip组件绑定在了body上面，和我们当前页面的层级是平级，那如果想要自定义组件里面的内容，样式用了scoped的话，就改不了。不免要改全局样式。 所以就要加上getPopupContainer这个属性，写法 : 将改组件绑定到当前用到该组件
Vue及Antd组件修改滚动条样式
小龙狗的博客
07-14 3820
Vue及Antd组件修改滚动条样式
react-rcsliderReact的滑块UI组件
08-15
rc-slider - React的滑块UI组件
ScopeControl.zip范围控件——Slider、ProgressBar滑块、进度条案例
11-29
各种属性的案例
jq22jqueryslider4678201807262215.zip
07-11
一款实用的轮播图插件，基于jq基础上的开发，内有demo简单易用，引用jq和js文件后即可使用
幻灯片插件——Nivo Slider的使用（示例代码+Nivo Slider3.2）
11-04
详细说明，请参考博文:http://blog.csdn.net/yousuosi/article/details/14129861 欢迎批评指正！
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 ...v-slider组件onchange方法不起作用 作者
Slider滑动输入条（antd-design组件库）简单使用
我都博客
02-17 676
滑动型输入器，展示当前值和可选范围。
隐藏滚动条但保持页面滚动及页面滚动条样式
qq_36384745的博客
03-24 1250
anchor滚动失效，隐藏滚动条但保持页面滚动，滚动条样式
解决react + ant-design中Select下拉框分离随页面滚动问题
go
07-12 1228
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。 很多方法试了并没有成功，最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性： 2、在的上一层用包裹
ant design vue的滑动输入条slider怎么在后面显示值
04-11
你好！关于ant design vue的slider如何显示值，可以通过在slider组件中设置v-model来自动显示当前值。具体示例代码如下： ``` <template> <div> <a-slider v-model="sliderValue" :min="0" :max="100" /> <span>{{ sliderValue }}</span> </div> </template> <script> export default { data() { return { sliderValue: 50, }; }, }; </script> ``` 以上是关于ant design vue的slider如何显示值的回答，希望能对您有所帮助。如果您还有其他问题，欢迎随时问我哦~

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值