更新记录

1.0.4（2023-12-18）

• 修复自动计算刻度间隔可能计算为0，导致卡死的问题

1.0.3（2023-11-07）

• 修复实际应用到 popup 等默认隐藏场景时，无法正确获取组件 width 的问题

1.0.2（2023-11-06）

• 增加 start、end 事件

平台兼容性

slider-range

区间滑动选择

属性说明

刻度条配置说明

回调方法

使用示例

<slider-range
    :scale="{
        show: true,
        format: scaleFormat
    }"
    @change="changeSliderValue">
</slider-range>

import SliderRange from '@/components/tianzai-slider-range'
export default {
    components:{
        SliderRange
    },
    methods: {
        changeSliderValue(e){
            console.log(e)
        },
        scaleFormat(val, index){
            if(index % 2 != 0){
                return {...val, label: '自定义设置', fontSize: '48rpx'}
            }
            return val
        }
    }
}

插槽（微信不支持同名插槽多次渲染，需要不同的写法兼容）

// 自定义滑动块
<slider-range>
    <!-- #ifndef MP-WEIXIN -->
    <template #block>
        <image
            class="block-image"
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
        </image>
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <template #firstBlock>
        <image
            class="block-image"
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
        </image>
    </template>
    <template #secondBlock>
        <image
            class="block-image"
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
        </image>
    </template>
    <!-- 这个是用来撑起元素高度的，不传这个滑动条不会自动撑起高度 -->
    <template #placeholderBlock>
        <image
            class="block-image"
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
        </image>
    </template>
    <!-- #endif -->
</slider-range>

// 自定义滑动提示
<slider-range>
    <!-- #ifndef MP-WEIXIN -->
    <template #tips="{ value }">
        <view class="dark-mode">{{ value }}</view>
    </template>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- 微信小程序不能使用插槽传值，可以在 change 方法里获取到后显示出来对应的值 -->
    <template v-slot:firstTips>
        <view class="dark-mode">{{ firstValue }}</view>
    </template>
    <template v-slot:secondTips>
        <view class="dark-mode">{{ secondValue }}</view>
    </template>
    <!-- #endif -->
</slider-range>

其他注意点

• 组件所有属性并非绑定且没有watch监听，只用于组件渲染时的初始设置，可以在 value、min、max、step 等属性发生变化时调用组件的 create 方法来使其生效，否则可能造成组件显示错乱。

  <slider-range :max="max || 100" ref="mySliderRange"></slider-range>
  this.max = 10
  this.$nextTick(() => {
  this.$refs.mySliderRange.create()
  })

• format 在函数中改变 fontSize 时不再自动补全单位(不能只写数字)，需设置时填写完全。
• 关于微信的多个同名插槽问题，官方的 issues 上说在解决中，如果哪天解决了可以在评论区提醒我来优化 github issues
• 关于微信小程序插槽无法传值问题，HBuilderx 官方说解决了，但是我在编写过程中还是无法使用，如果有人会写，麻烦在评论区告知 github issues