VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Slider 滑块

示例

尺寸

可供选用的尺寸 ui 属性值：s / m。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider v-model="value"/>
  <veui-slider
    v-model="value"
    ui="s"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 0.5
    }
  }
}
</script>

只读/禁用

设置 readonly 属性来使设置滑块只读，设置 disabled 属性来使设置滑块禁用。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider v-model="value"/>
  <veui-slider
    v-model="value"
    readonly
  />
  <veui-slider
    v-model="value"
    disabled
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 0.5
    }
  }
}
</script>

步进

使用 step 属性来指定步进值，使点击调节按钮或按下 ←、→ 键时根据指定步进值来调整输入值。

在使用 step 属性设置步长后，可以通过 mark 属性来显示刻度。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider
    v-model="value"
    :min="min"
    :max="max"
    :step="step"
    mark
  />
  <veui-slider
    v-model="value"
    :min="min"
    :max="max"
    :step="step"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 55,
      min: 0,
      max: 100,
      step: 8
    }
  }
}
</script>

范围

使用 max / min 属性来指定拖动范围两端的值。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="100"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: [22, 66]
    }
  }
}
</script>

次级条

使用 secondary-progress 属性来指定一个次级进度条。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider
    v-model="videoPlayProgress"
    :secondary-progress="videoBufferProgress"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      videoPlayProgress: 0.11,
      videoBufferProgress: 0.57
    }
  }
}
</script>

纵向

使用 vertical 属性来指定是否使用纵向样式。

在使用 step 属性设置步长后，可以通过 mark 属性来显示刻度。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="100"
    vertical
    style="height: 180px"
  />
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    return {
      value: 42
    }
  }
}
</script>

定制内容

使用 thumb / tip 插槽来自定义滑块按钮、悬浮提示等内容。

"hsl(60, 50%, 50%)", "hsl(120, 50%, 50%)", "hsl(180, 50%, 50%)", "hsl(240, 50%, 50%)", "hsl(300, 50%, 50%)"
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-slider
    v-model="value"
    :min="0"
    :max="360"
    :step="1"
    :parse="parseColorHue"
    :format="formatColorHue"
  >
    <template #track>
      <div
        style="width: 100%; height: 20px;"
        :style="{background: colorGradient}"
      />
    </template>
    <template #thumb="{ index }">
      <div
        :key="`thumb_${index}`"
        style="margin-top: 2px"
      >
        <div style="width: 16px; height: 12px">
          <svg
            width="16"
            height="12"
            viewBox="0 0 16 12"
          ><polygon points="8,0 16,12 0,12"/></svg>
        </div>
      </div>
    </template>
    <template #tip="{ open, activeIndex }">
      <div
        v-show="open"
        class="custom-tip"
        :style="{
          left: `${(activeIndex >= 0 ? parseColorHue(value[activeIndex]) : 0) / 360 * 100}%`,
          backgroundColor: value[activeIndex]
        }"
      />
    </template>
  </veui-slider>
  <section>
    <span
      v-for="(val, index) in value"
      :key="`color-value-${index}`"
    >
      "<span :style="{ color: val }">{{ val }}</span>"<span v-if="index < value.length - 1">,</span>
    </span>
  </section>
</article>
</template>

<script>
import { Slider } from 'veui'

export default {
  components: {
    'veui-slider': Slider
  },
  data () {
    let value = [1, 1, 1, 1, 1].map((_, i) => `hsl(${(i + 1) * 60}, 50%, 50%)`)
    return { value }
  },
  computed: {
    colorGradient () {
      let colors = [1, 1, 1, 1, 1, 1, 1].map(function (_, index) {
        return `hsl(${60 * index}, 50%, 50%) ${(100 / 6) * index}%`
      })
      return `linear-gradient(to right, ${colors.join(',')})`
    }
  },
  methods: {
    parseColorHue (val) {
      return parseInt(val.substring(val.indexOf('(') + 1, val.indexOf(',')), 10)
    },
    formatColorHue (val) {
      return `hsl(${val}, 50%, 50%)`
    }
  }
}
</script>

<style lang="less" scoped>
.custom-tip {
  position: absolute;
  top: -24px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  text-align: center;
  border: 1px solid #fff;
  font-size: 12px;
}

section {
  margin-top: 1em;
  background-color: #fafafa;
  padding: 0.5em 1em;
  border-radius: 4px;
  font-size: 12px;
}
</style>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
s小尺寸样式。
m中尺寸样式。
value*|Array<*>-

值。

默认值类型为 number，经过 parse 函数处理后值大小范围应在 min 和 max 之间。 当值为 Array<number> 形式时，组件则渲染多个滑块与值一一对应。

secondary-progressnumber | Array<number>0次要条。
minnumber0value 经过 parse 函数处理后允许的最小值。
maxnumber1value 经过 parse 函数处理后允许的最大值。
stepnumber0value 经过 parse 函数处理后的步进值。
markbooleanfalse是否显示步进标记。
verticalbooleanfalse是否使用纵向样式。
parsefunctionval => val传入值处理函数。
formatfunctionval => val输出值处理函数。

插槽

名称描述
track滑轨。默认内容：横线。
tip-label浮动提示文本。默认内容：当前 value 值。
thumb

滑块。

默认内容：圆形按钮。

名称类型描述
indexnumber滑块索引。
focusboolean滑块是否聚焦。
hoverboolean鼠标是否悬浮。
draggingboolean滑块是否正在被拖动。
tip

浮动提示。

默认内容：内容为 value 的 Tooltip 组件。

名称类型描述
targetHTMLElement滑块元素。
openboolean是否存在激活的滑块。
active-indexboolean激活的滑块索引。

事件

名称描述
input

v-model

修改后触发，回调参数为 (value: *)。value 为改变后经 format 函数处理过的新值。

在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024