更新记录

1.0.1（2025-05-16） 下载此版本

优化组件

1.0.0（2025-05-15） 下载此版本

新增组件

平台兼容性

hbxw-switch开关组件

自定义的开关组件，支持配置颜色和尺寸，同时支持插槽完全自定义样式

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中

<!-- 基本用法 -->
<template>
    <view>
        <view class="title">基础使用</view>
        <hbxw-switch v-model:checked="isChecked" size="64rpx"></hbxw-switch>

        <view class="title">自定义颜色</view>
        <hbxw-switch v-model:checked="isChecked" size="64rpx" selectColor="#00ff00" normalColor="#ff0000"></hbxw-switch>

        <view class="title">禁用</view>
        <hbxw-switch v-model:checked="isChecked" size="64rpx" disabled></hbxw-switch>

        <view class="title">通过插槽自定义开关款式</view>
        <hbxw-switch v-model:checked="isChecked">
            <template v-slot="{ checked }">
                <image :src="checked ? '/static/hbxw-switch/on.png' : '/static/hbxw-switch/off.png'" mode="widthFix" class="switch-item" />
            </template>
        </hbxw-switch>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isChecked: false
            }
        },
        methods: {

        }
    }
</script>

<style>
.switch-item{
  width: 232rpx;
  height: 102rpx;
}
.title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
}
</style>

参数说明

事件说明

Slots

注意事项

1. 组件源码很小的，显示大是因为有示例图片，真正打包到项目中的是很小的，请放心使用
2. 使用中有任何问题请留言，我看到会回复