z-base-ui

Appearance

ZSlider ​

滑动输入条，对大部分浏览器支持的同时也支持触屏设备，允许用户自定义提示框，标记，拖拽句柄。

基础用法 ​

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data"></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

自定义提示 ​

使用 tooltip 插槽或属性进行自定义。

tooltip = 0 完全隐藏提示


tooltip = 1 只在移动时显示提示


numerical = false 显示百分比
0%



使用tooltip插槽可自定义提示
0
<template>
  <div class="sliderBox">
    <h5>tooltip = 0 完全隐藏提示</h5>
    <z-slider :tooltip="0" v-model:value="data"></z-slider>

    <br/>
    <br/>
    <h5>tooltip = 1 只在移动时显示提示</h5>
    <z-slider :tooltip="1" v-model:value="dataB"></z-slider>

    <br/>
    <br/>
    <h5>numerical = false 显示百分比</h5>
    <z-slider :numerical="false" v-model:value="dataC"></z-slider>

    <br/>
    <br/>
    <br/>
    <h5>使用tooltip插槽可自定义提示</h5>
    <z-slider v-model:value="dataD">
      <template #tooltip="{data}">
        <div class="custom-tips">{{data}}</div>
      </template>
    </z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
const dataB = ref(8);
const dataC = ref(65);
const dataD = ref(50);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}

.custom-tips {
  background: linear-gradient(to left, rgba(108, 43, 205, 0.5) 50%, rgba(222, 28, 244, 0.75) 100%);
  box-shadow: 0 3px 6px #99338b;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 6px;
}

h5 {
  margin-bottom: 6px;
}
</style>

mark 标记 ​

使用 marks 添加标记，支持使用 mark 插槽进行自定义。

默认标记
0
10
50
100
自定义
0
😃
50
100
自动划分，版本要求>=1.0.31
0
0
10
20
30
40
50
60
70
80
90
100
100
<template>
  <div class="sliderBox">
    <h5>默认标记</h5>
    <z-slider v-model:value="data" :marks="mark"></z-slider>

    <h5 class="mt">自定义</h5>
    <z-slider v-model:value="dataB" :marks="mark">
      <template #mark="{item}">
        <div class="item" v-if="item.value === 10">
          😃
        </div>
      </template>
    </z-slider>

    <h5 class="mt">自动划分，版本要求>=1.0.31</h5>
    <z-slider v-model:value="dataC" :marks="10"></z-slider>
  </div>
</template>

<script setup lang="ts">
import type { IZSliderMark } from "@d7ee/z-base-ui/dist/types/components/ZSlider";
import { ref } from "vue";

const mark: IZSliderMark[] = [
  {
    value: 10,
    content: "10",
  },
  {
    value: 50,
    content: "50",
  }
];

const data = ref(60);
const dataB = ref(60);
const dataC = ref(60);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
.mt {
  margin-top: 60px;
}
.item {
  color: red;
}
</style>

max和min ​

使用 max、 min 设置最大值和最小值

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" :max="50" :min="-10"></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(-5);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

步长 ​

使用 step 控制每次移动的步长

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" :min="0" :max="1" :step="0.1"></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0.2);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

禁用 ​

添加属性 disabled 用于控制是否可选。

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" disabled></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

自定义主题色 ​

使用 color 自定义主题色，注意：color只接受16进制的颜色。

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" color="#acaae5"></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(55);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

自定义句柄 ​

使用 handle 插槽自定义拖拽句柄。

<template>
  <div class="sliderBox">
    <z-slider :tooltip="0" v-model:value="data">
      <template #handle="{data}">
        <div class="handles" :style="{color: data >= 50 ? 'green' : 'red'}">
          <z-icon icon="ghost"></z-icon>
        </div>
      </template>
    </z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(49);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}

.handles {
  font-size: 24px;
}
</style>

碰边检测 ​

使用 border 开启边界检测，拖动滑动条至两边体验效果。

版本要求 >= 1.0.32

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" border></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(10);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 0;
  width: 500px;
}
</style>

垂直模式 ​

使用 vertical 开启垂直模式。

版本要求 >= 1.0.34

0
<template>
  <div class="sliderBox">
    <z-slider vh="300px" v-model:value="data" vertical></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 100px;
}
</style>

刻度线 ​

使用 tickMarks 开启刻度线。

需要配合 marks 使用。 版本要求 >= 1.1.22

0
0
10
20
30
40
50
60
70
80
90
100
100


自定义:



0
0
10
20
30
40
50
60
70
80
90
100
100
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" :marks="10" tick-marks></z-slider>
    <br/>
    <br/>
    <h3>自定义:</h3>
    <br/>
    <br/>
    <z-slider v-model:value="data" :marks="10" tick-marks>
      <template #tickMarks>
        <div class="custom-marks"></div>
      </template>
    </z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}

.custom-marks {
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  background: red;
}
</style>

高度 ​

使用 height 修改slider高度。 版本要求 >= 1.0.3

0
<template>
  <div class="sliderBox">
    <z-slider v-model:value="data" height="10px"></z-slider>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref(0);
</script>

<style lang="less" scoped>
.sliderBox {
  padding: 42px 0 0 42px;
  width: 500px;
}
</style>

常见问题 ​

  • 在使用自定义tooltip时，当你发现tooltip未居中存在偏差时，请给它设置一个css属性，transform: translateX(-100%);

兼容性 ​

  • Chrome: 从 24 版本开始
  • Firefox: 从 16 版本开始
  • Safari: 从 6 版本开始
  • Edge: 从 12 版本开始
  • Internet Explorer: 不支持
  • Opera: 从 15 版本开始

API 属性 ​

属性名说明类型默认值
value用于获取或设置默认值，使用v-model:value绑定number0
max最大值number100
min最小值number0
step步长number1
disabled禁用boolean—
color主题色，只接受 十六进制string—
numericaltooltip的内容显示数值还是百分比boolean—
tooltip控制tooltip的显示方式，0 隐藏 1 移动时显示 2 一直显示0 | 1 | 22
marks标签，详见IZSliderMark，在1.0.31及其以上支持传入numberIZSliderMark[] | number2
heightslider高度，版本>= 1.0.3string4px
bgColor柱体背景色，版本>= 1.0.3string—
lockColor使选中和未选中颜色都保持一至，需配合color使用，版本>= 1.0.3boolean—
handleStyle设置句柄基本样式如高、宽Record<string, any>
bordertooltip边界检测,版本>= 1.0.32boolean
vertical垂直模式，版本 >= 1.0.34boolean
vw垂直模式下的slider宽度string4px
vh垂直模式下的slider高度string100%
tipBgtooltip背景色，版本>= 1.1.21string—
tickMarks刻度线，版本>= 1.1.22booleanfalse
delay关闭动画，版本>= 1.2.0booleanfalse

版本特性说明 ​

  • 1.0.3
    • 添加height、bgColor、lockColor
  • 1.0.31
    • marks支持 number类型，传入10，则间隔10生成一个文本标记。
    • 添加handleStyle

slot 插槽 ​

通过插槽可接收二个参数，data为数值，percentage 为百分比类型均为number

slotName说明参数
tooltip自定义提示框{data: number, percentage: number}
handle自定义句柄{data: number, percentage: number}
mark自定义标记{item: IZSliderMark}

event 事件 ​

事件名称说明回调参数版本
change数值改变时回调function(number)>= 1.0.0
afterChange结束滑动后触发function(number)>= 1.0.31

类型声明 ​

IZSliderMark ​

typescript
interface IZSliderMark {
  // 数值
  value: number;
  // 内容
  content: string
}