更新记录

1.0.0（2025-03-13） 下载此版本

发布初版

平台兼容性

Switch 开关

组件名: xt-switch

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

复制代码<template>
    <view class="xt">
        <view>基本用法</view>
        <view style="display: flex;gap: 20rpx;">
            <xt-switch :inactiveValue="0" :activeValue="1" :value="0"></xt-switch>
            <xt-switch :inactiveValue="0" :activeValue="1" :value="1"></xt-switch>
        </view>
        <view>加载状态(不可点击)</view>
        <view style="display: flex;gap: 20rpx;">
            <xt-switch :inactiveValue="0" :activeValue="1" :value="0" loading></xt-switch>
            <xt-switch :inactiveValue="0" :activeValue="1" :value="1" loading></xt-switch>
        </view>
        <view>禁用状态</view>
        <view style="display: flex;gap: 20rpx;">
            <xt-switch :inactiveValue="0" :activeValue="1" :value="0" disabled></xt-switch>
            <xt-switch :inactiveValue="0" :activeValue="1" :value="1" disabled></xt-switch>
        </view>
        <view>自定义颜色</view>
        <view style="display: flex;gap: 20rpx;">
            <xt-switch :inactiveValue="0" :activeValue="1" :value="0" activeColor="red"
                inactiveColor="#668899"></xt-switch>
            <xt-switch :inactiveValue="0" :activeValue="1" :value="1" activeColor="red"
                inactiveColor="#668899"></xt-switch>
        </view>
        <view>自定义大小</view>
        <view style="display: flex;gap: 20rpx;">
            <xt-switch :inactiveValue="0" :activeValue="1" :value="0" size="50rpx"></xt-switch>
            <xt-switch :inactiveValue="0" :activeValue="1" :value="1" size="60rpx"></xt-switch>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .xt {
        padding: 0 20rpx;
        padding-top: 50rpx;
        display: flex;
        flex-direction: column;
        gap: 30rpx;
    }
</style>

API

Event