Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

There are generations of talented people, each leading the pack for hundreds of years. On Poetry by Zhao Yi

preface

In our daily project development, we often do switch control of some functions, so we encapsulate this switch component.

Switch components

attribute

1. value

• Whether to open the
• The value is a Boolean type
• The default value is false

2. disabled

• Unavailable or not
• The value is a Boolean type
• The default value is false

3. showText

• Whether to display word, “on” or “off”
• The value is a Boolean type
• The default value is true

The event

1. Change Indicates that the value changes

• Parameter: value Whether to open (Boolean value)

The sample

template:

<div class="switch-list"> <div class="item"> <span> Enable system notification </span> <BaseSwitch V-model ="isOpen1" </div> <div class="item"> <span> <BaseSwitch v-model="isOpen2" </div> <div class="item"> <span> </span> <BaseSwitch v-model="isOpen3" :showText="false" @change="doChange"></BaseSwitch> </div> <div class="item"> <span> Do not display words: </span> <BaseSwitch v-model="isOpen4" :showText="false" @change="doChange"></BaseSwitch> </div> <div class="item"> <span> Not available: </span> <BaseSwitch V-model ="isOpen5" :disabled="true" @change="doChange"></BaseSwitch> </div> <div class="item"> </span> <BaseSwitch V-model ="isOpen6" :disabled="true" @change="doChange"></BaseSwitch> </div> </div>Copy the code

js:

import BaseSwitch from '@/components/base/switch/index.vue' export default { name: 'SwitchDemo', components: { BaseSwitch }, data () { return { isOpen1: false, isOpen2: true, isOpen3: false, isOpen4: true, isOpen5: False, isOpen6: true}}, methods: {doChange (val) {console.log(' trigger change event, value = ', val)}}}Copy the code

switch.vue

<template>
  <div class="switch-bar" :class="statusClass" @click="doSwitch">
    <span v-if="showText" class="text">{{currentValue? 'on ':' off '}}</span><div class="switch-handle"></div>
  </div>
</template>
<script>
export default {
  name: 'BaseSwitch'.props: {
    value: {
      type: Boolean.default: false
    },
    disabled: {
      type: Boolean.default: false
    },
    showText: {
      type: Boolean.default: true
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  computed: {
    statusClass () {
      let statusClass = []
      if (this.currentValue) {
        statusClass.push('on')}if (this.disabled) {
        statusClass.push('disabled')}if (this.currentValue && this.disabled) {
        statusClass.push('disabled-on')}return statusClass
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    }
  },
  methods: {
    doSwitch () {
      if (!this.disabled) {
        this.currentValue = !this.currentValue
        this.$emit('input'.this.currentValue)
        this.$emit('change'.this.currentValue)
      }
    }
  }
}
</script>
<style lang="scss" scoped px2rem="false">$bar-width: 48px; $bar-height: 24px; $bar-padding: 1px; $text-padding: 8px; .switch-bar{ position: relative; display: inline-block; box-sizing: border-box; width: $bar-width; height: $bar-height; line-height: $bar-height - 2px; border-radius: $bar-height / 2; border: 1px solid #E6E6E6; background-color: #BBB; color: #FFF; text-align: right; The transition: all 0.3 s ease - in-out; .text { margin: 0 $text-padding; } .switch-handle{ position: absolute; left: $bar-padding; top: $bar-padding; width: $bar-height - $bar-padding * 2 - 2px; height: $bar-height - $bar-padding * 2 - 2px; border-radius: 50%; background-color: #FFF; The transition: all 0.3 s ease - in-out; } } .on{ @include base-background-color(); color: #FFF; text-align: left; .switch-handle{ background-color: #FFF; transform: translateX($bar-width - $bar-height); } } .disabled { background-color: #E5E5E5; cursor: not-allowed; .switch-handle{ background-color: #F2F2F2; } } .disabled-on{ .switch-handle{ background-color: #F9F9F9; } &:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .5); border-radius: $bar-height / 2; }}</style>
<style lang="scss" scoped>
$bar-width: 116px;
$bar-height: 60px;
$bar-padding: 4px;
$text-padding: 20px;
@media (max-width: $max-mobile-width) {
  .switch-bar{
    box-sizing: content-box;
    width: $bar-width;
    height: $bar-height;
    line-height: $bar-height;
    border-radius: $bar-height / 2;/*yes*/
    .switch-handle{
      left: $bar-padding;
      top: $bar-padding;
      width: $bar-height - $bar-padding * 2;
      height: $bar-height - $bar-padding * 2;
    }
  }
  .on{
    .switch-handle{
      transform: translateX($bar-width - $bar-height);
    }
  }
  .disabled-on:before {
    border-radius: $bar-height / 2;
  }
}
</style>
Copy the code

Thanks for the comment section.

Hope to finish watching friends can give a thumbs-up, encourage once