Ant Design Vue Slider 属性

Ant Design Vue Slider 属性的列表,dots、included、marks、max、range、step等属性。

属性列表

属性名称类型说明
auto-focusboolean组件是否自动获取焦点
default-valuenumber|number[]初始化值,0 或  [0, 0]
disabledboolean控件是否禁用,默认false
dotsboolean是否只能拖到刻度上,默认false
included

marksobject刻度标记,key 的类型必须为数字且取值在闭区间 [min, max] 内
每个标记可以单独设置样式
maxnumber宽度最大值
minnumber刻度最小值
rangeboolean默认false,双滑块模式,区间模式
reverseboolean默认false,反向坐标轴
stepnumber|null默认1,步长每次滑动的刻度长度
tip-formatterFunction|null实时把当前的值在Tooltip 提示中显示,比如你要显示进度条
value(v-model)number当前值
verticalBoolean是否垂直显示,默认false
tooltip-placementstring设置 Tooltip 展示位置。参考tooltip组件
top left right bottom topLeft topRight bottomLeft
bottomRight leftTop leftBottom rightTop rightBottom
tooltip-visiblebooleantrue始终显示提示,false始终不显示提示
getTooltipPopupContainerFunctionTooltip 渲染父节点,默认渲染到 body 上。
() => document.body

代码例子

<template>
  <div>
    <a-slider :tip-formatter="formatter" :getTooltipPopupContainer="cc"/> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: false,
    };
  },
  methods: {
    formatter(value) {
      return `${value}%`;
    },
    //tooltip提示浮层渲染父节点
   cc(){
     return  document.body;
   }
  },
};
</script>