uniapp写一个自定义开关按钮

好的，以下是一个简单的自定义开关按钮的 UniApp 组件示例：

<template>
  <view class="switch-container" @click="toggle">
    <view :class="['switch', { 'on': value }]"></view>
    <text class="label">{{ label }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      label: {
        type: String,
        default: ''
      }
    },
    methods: {
      toggle() {
        this.$emit('input', !this.value)
      }
    }
  }
</script>

<style>
  .switch-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .switch {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: #ccc;
    position: relative;
    margin-right: 10px;
    transition: background-color 0.2s ease;
  }
  .switch.on {
    background-color: #007aff;
  }
  .switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
  }
  .switch.on::before {
    transform: translateX(20px);
  }
  .label {
    font-size: 18px;
    color: #333;
  }
</style>

使用方法：

<template>
  <view>
    <custom-switch v-model="switchValue" label="开关"></custom-switch>
  </view>
</template>

<script>
  import CustomSwitch from '@/components/CustomSwitch.vue'

  export default {
    components: {
      CustomSwitch
    },
    data() {
      return {
        switchValue: false
      }
    }
  }
</script>

这个组件由一个容器和一个圆形按钮组成，按钮的位置是根据组件的值来计算的。点击容器将触发 toggle 方法，该方法将使用 $emit 将新值发送到父组件，然后通过 v-model绑定到 switchValue 数据上。样式可以根据需要自行修改。