Vant4 Slider 滑塊

2023-02-16 17:55 更新

介紹

滑動輸入條,用于在給定的范圍內(nèi)選擇一個值。

引入

通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊

import { createApp } from 'vue';
import { Slider } from 'vant';

const app = createApp();
app.use(Slider);

代碼演示

基礎(chǔ)用法

<van-slider v-model="value" @change="onChange" />
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const value = ref(50);
    const onChange = (value) => showToast('當(dāng)前值:' + value);
    return {
      value,
      onChange,
    };
  },
};

雙滑塊

添加 ?range? 屬性就可以開啟雙滑塊模式,確保 ?value? 的值是一個數(shù)組。

<van-slider v-model="value" range @change="onChange" />
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    // 雙滑塊模式時,值必須是數(shù)組
    const value = ref([10, 50]);
    const onChange = (value) => showToast('當(dāng)前值:' + value);
    return {
      value,
      onChange,
    };
  },
};

指定選擇范圍

<van-slider v-model="value" :min="-50" :max="50" />

禁用

<van-slider v-model="value" disabled />

指定步長

<van-slider v-model="value" :step="10" />

自定義樣式

<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />

自定義按鈕

<van-slider v-model="value">
  <template #button>
    <div class="custom-button">{{ value }}</div>
  </template>
</van-slider>

<style>
  .custom-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: var(--van-primary-color);
    border-radius: 100px;
  }
</style>

垂直方向

設(shè)置 ?vertical? 屬性后,滑塊會垂直展示,且高度為 100% 父元素高度。

<div :style="{ height: '150px' }">
  <van-slider v-model="value" vertical @change="onChange" />
  <van-slider
    v-model="value2"
    range
    vertical
    style="margin-left: 100px;"
    @change="onChange"
  />
</div>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const value = ref(50);
    const value2 = ref([10, 50]);
    const onChange = (value) => showToast('當(dāng)前值:' + value);
    return {
      value,
      value2,
      onChange,
    };
  },
};

API

Props

參數(shù) 說明 類型 默認(rèn)值
v-model 當(dāng)前進(jìn)度百分比,在雙滑塊模式下為數(shù)組格式 number | [number, number] 0
max 最大值 number | string 100
min 最小值 number | string 0
step 步長 number | string 1
bar-height 進(jìn)度條高度,默認(rèn)單位為 px number | string 2px
button-size 滑塊按鈕大小,默認(rèn)單位為 px number | string 24px
active-color 進(jìn)度條激活態(tài)顏色 string #1989fa
inactive-color 進(jìn)度條非激活態(tài)顏色 string #e5e5e5
range 是否開啟雙滑塊模式 boolean false
reverse v3.2.1 是否將進(jìn)度條反轉(zhuǎn) false
disabled 是否禁用滑塊 boolean false
readonly v3.0.5 是否為只讀狀態(tài),只讀狀態(tài)下無法修改滑塊的值 boolean false
vertical 是否垂直展示 boolean false

Events

事件名 說明 回調(diào)參數(shù)
update:model-value 進(jìn)度變化時實時觸發(fā) value: number
change 進(jìn)度變化且結(jié)束拖動后觸發(fā) value: number
drag-start 開始拖動時觸發(fā) event: TouchEvent
drag-end 結(jié)束拖動時觸發(fā) event: TouchEvent

Slots

名稱 說明 參數(shù)
button 自定義滑塊按鈕 { value: number }
left-button v3.1.3 自定義左側(cè)滑塊按鈕(雙滑塊模式下) { value: number }
right-button v3.1.3 自定義右側(cè)滑塊按鈕(雙滑塊模式下) { value: number }

類型定義

組件導(dǎo)出以下類型定義:

import type { SliderProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件

名稱 默認(rèn)值 描述
--van-slider-active-background var(--van-primary-color) -
--van-slider-inactive-background var(--van-gray-3) -
--van-slider-disabled-opacity var(--van-disabled-opacity) -
--van-slider-bar-height 2px -
--van-slider-button-width 24px -
--van-slider-button-height 24px -
--van-slider-button-radius 50% -
--van-slider-button-background var(--van-white) -
--van-slider-button-shadow 0 1px 2px rgba(0, 0, 0, 0.5) -


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號