uni-app实现自定义switch组件

前言

项目需求需要用到switc带文字功能，翻阅了uniapp的官方文档发现switch不能加文字，于是自己打算写一个。

注意

采用的是vue2+ts写法

效果

组件代码

<template>
  <view class="container">
    <!-- @click="switchClick(isChecked)" -->
    <label :class="isChecked ? 'switch-checked' : 'switch-nochecked'">
      <view class="open">开启</view>
      <view class="close">关闭</view>
    </label>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";

@Component
export default class SwitchCustom extends Vue {
  @Prop({ required: false, default: false }) isChecked!: boolean;
}
</script>

<style lang="scss" scoped>
.container {
  width: 120rpx;

  label {
    position: relative;
    display: block;
    border-radius: 55rpx;
    height: 55rpx;
    width: 100%;
    &:before {
      content: " ";
      display: block;
      border-radius: 55rpx;
      height: 100%;
      background-color: #d5d5d5;
      transform: scale(1, 1);
      transition: all 0.3s ease;
    }
    &:after {
      content: " ";
      position: absolute;
      top: 9%;
      margin-left: 5%;
      width: 45rpx;
      height: 45rpx;
      border-radius: 45rpx;
      background-color: white;
      box-shadow: 2rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }
  }
  %font-style {
    top: 0;
    color: #ffffff;
    font-size: 20rpx;
    height: 100%;
    line-height: 55rpx;
    position: absolute;
    transition: all 1s ease;
  }
  .switch-checked {
    &:after {
      margin-left: calc(94% - 45rpx);
      left: unset;
    }
    &:before {
      background-color: #01a2ff;
    }
    .close {
      display: none;
    }
  }
  .switch-nochecked {
    .open {
      display: none;
    }
  }

  .open {
    left: 10rpx;
    @extend %font-style;
  }
  .close {
    right: 10rpx;
    @extend %font-style;
    color: #6b6b6b;
  }
}
</style>

使用

<switch-custom @click.native="formData.volunteer=formData.volunteer===1?0:1" :isChecked="formData.volunteer ? true : false"/>