更新记录

v1.1.0（2021-05-20）

1.适配了H5-pc端 2.添加了属性moveHeight，默认500，在pc端需要设置，表示PC端鼠标按下并离开滑块后仍可滑动的范围高度半径。

v1.0.0（2021-01-18）

第一版本，完成了基本功能

平台兼容性

前言

该组件参考uView UI的设计思路，在uView UI的滑动条组件基础上，进行了扩展，实现双向滑动条，并添加了一些其他功能。

说明

本项目在App、微信小程序、H5-pc、H5-mobile均已测试通过，其他平台未知。

导入

import cjSlider from '@/components/cj-slider/cj-slider.vue'

属性

方法

示例代码

<template>
    <view class="cj-slider">
    <view class="cj-slide__text">{{`最小值(${priceValue[0]}) - 最大值(${priceValue[1]})`}}</view>
      <cj-slider v-model="priceValue" :min="-2000" :max="8000" :step="100" :blockWidth="40" @start="blockStart" @moving="blockMoving" @end="blockEnd" />
    </view>
</template>

<script>
  import cjSlider from '../../components/cj-slider/cj-slider.vue'
    export default {
    components: { cjSlider },
        data() {
            return {
        priceValue: [2000, 5000]  // 可以指定默认值
            }
        },
        methods: {
      blockStart() {
        // console.log('滑动触发')
      },
      blockMoving() {
        // console.log('正在滑动中')
      },
      blockEnd() {
        // console.log('滑动结束')
      }
        }
    }
</script>

<style scoped>
  .cj-slider {
    width: 90%;
    margin: auto;
  }

  .cj-slide__text {
    text-align: center;
    padding: 20rpx;
  }

</style>