pc-component-v5/packages/switches/src/Switches.vue

<template>
  <label :class="classObject">
    <input
      v-model="value"
      autocomplete="off"
      type="checkbox"
      :disabled="disabled"
      @click="clickEvent($event)"
    />

    <div />

    <span
      v-if="showText === undefined || showText === null || showText === true"
      class="vue-switcher__label"
    >
      <span
        v-if="value"
        v-text="textTrue"
      />
      <span
        v-if="!value"
        v-text="textFalse"
      />
    </span>
  </label>
</template>

<script>

export default {
    name: 'Switches',   // eslint-disable-line



  props: {
    // 选择状态, false
    'modelValue':
    {
      type: Boolean,
      default: false,
    }, 
    // 禁用, false
    'disabled':
    {
      type: Boolean,
      default: false,
    }, 
    // 是否显示文字提示
    'showText':
    {
      type: Boolean,
      default: false,
    }, 
    // True状态下的文字
    'textTrueIn':
    {
      type: String,
      default: '',
    },  
    // False状态下的文字
    'textFalseIn':
    {
      type: String,
      default: '',
    }, 
    // 显示的颜色default,primary,success,info,warning,danger
    'color':
    {
      type: String,
      default: '',
    }, 
    // 大图标
    'typeBold':{
      type: Boolean,
      default: false,
    },
  },

  emits: ['update:modelValue'],

  data: function () {
    var tempValue = false;
    var colors = 'red';
    if (this.modelValue != undefined) {
      tempValue = (this.modelValue == 'true' || this.modelValue == true);
      if (this.modelValue == 'true' || this.modelValue == true) {
        colors = 'green';
      } else {
        colors = 'red';
      }
    }

    return {
      'value': tempValue,
      'textTrue': (this.textTrueIn == undefined) ? '是' : this.textTrueIn,
      'textFalse': (this.textFalseIn == undefined) ? '否' : this.textFalseIn,
      'theme': 'default',
      'colorCss': colors,
    };
  },

  computed: {
    classObject: function () {
      var _self = this;

      return {
        'vue-switcher': true,
        ['vue-switcher--unchecked']: !_self.value,
        ['vue-switcher--disabled']: !!_self.disabled,
        ['vue-switcher--bold']: !!_self.typeBold,
        ['vue-switcher--bold--unchecked']: !!_self.typeBold && !_self.value,
        [`vue-switcher-theme--${_self.theme}`]: _self.theme,
        [`vue-switcher-color--${_self.colorCss}`]: _self.colorCss,
      };
    },
  },
  watch: {
    value: function (val, oldVal) {   // eslint-disable-line
      this.$emit('update:modelValue', val);
    },

    modelValue: function (val, oldVal) {    // eslint-disable-line
      if (val != undefined) {
        this.value = (val == 'true' || val == true);
        if (val == 'true' || val == true) {
          this.colorCss = 'green';
        } else {
          this.colorCss = 'red';
        }
      }

    },
  },
  methods: {
    clickEvent: function (e) {
      var clientX = e.clientX;
      var elm = $(e.target);
      var left = elm.offset().left;
      if (clientX - left > 50) {
        e.preventDefault();
      }
    },
  },
};
</script>

<style>
.vue-switcher {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 26px;
    line-height: 26px;
    margin-bottom: 0px;
    top: 7px;
}
.vue-switcher__label {
    position: absolute;
    left: 50px;
    top: 0px;
    height: 26px;
    line-height: 26px;
    display: block;
    font-size: 10px;
    margin-bottom: 0px;
}
.vue-switcher input {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 26px;
    line-height: 26px;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: 0px !important;
}
.vue-switcher div {
    position: absolute;
    left: 0px;
    top: 8px;
    width: 40px;
    height: 10px;
    border-radius: 30px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.vue-switcher div:after {
    position: absolute;
    top: -4;
    left: 100%;
    content: "";
    height: 18px;
    width: 18px;
    border-radius: 100px;
    display: block;
    transition: all ease 0.3s;
    margin-left: -17px;
    cursor: pointer;
}
.vue-switcher--unchecked div {
    justify-content: flex-end;
}
.vue-switcher--unchecked div:after {
    left: 15px;
}
.vue-switcher--disabled div {
    opacity: 0.3;
}
.vue-switcher--disabled input {
    cursor: not-allowed;
}
.vue-switcher--bold div {
    top: 0px;
    height: 26px;
    width: 50px;
}
.vue-switcher--bold div:after {
    margin-left: -22px;
    top: 4px;
}
.vue-switcher--bold--unchecked div:after {
    left: 26px;
}
.vue-switcher--bold .vue-switcher__label span {
    padding-bottom: 7px;
    display: inline-block;
}
.vue-switcher-theme--default.vue-switcher-color--default div {
    background-color: #b7b7b7;
}
.vue-switcher-theme--default.vue-switcher-color--default div:after {
    background-color: #9d9d9d;
}
.vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked
    div {
    background-color: #aaa;
}
.vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked
    div:after {
    background-color: #c4c4c4;
}
.vue-switcher-theme--default.vue-switcher-color--blue div {
    background-color: #77b0c8;
}
.vue-switcher-theme--default.vue-switcher-color--blue div:after {
    background-color: #539bb9;
}
.vue-switcher-theme--default.vue-switcher-color--blue.vue-switcher--unchecked
    div {
    background-color: #c0dae5;
}
.vue-switcher-theme--default.vue-switcher-color--blue.vue-switcher--unchecked
    div:after {
    background-color: #77b0c8;
}
.vue-switcher-theme--default.vue-switcher-color--red div {
    background-color: #c87777;
}
.vue-switcher-theme--default.vue-switcher-color--red div:after {
    background-color: #b95353;
}
.vue-switcher-theme--default.vue-switcher-color--red.vue-switcher--unchecked
    div {
    background-color: #e5c0c0;
}
.vue-switcher-theme--default.vue-switcher-color--red.vue-switcher--unchecked
    div:after {
    background-color: #c87777;
}
.vue-switcher-theme--default.vue-switcher-color--yellow div {
    background-color: #c9c377;
}
.vue-switcher-theme--default.vue-switcher-color--yellow div:after {
    background-color: #bab353;
}
.vue-switcher-theme--default.vue-switcher-color--yellow.vue-switcher--unchecked
    div {
    background-color: #e6e3c0;
}
.vue-switcher-theme--default.vue-switcher-color--yellow.vue-switcher--unchecked
    div:after {
    background-color: #c9c377;
}
.vue-switcher-theme--default.vue-switcher-color--orange div {
    background-color: #c89577;
}
.vue-switcher-theme--default.vue-switcher-color--orange div:after {
    background-color: #b97953;
}
.vue-switcher-theme--default.vue-switcher-color--orange.vue-switcher--unchecked
    div {
    background-color: #e5cec0;
}
.vue-switcher-theme--default.vue-switcher-color--orange.vue-switcher--unchecked
    div:after {
    background-color: #c89577;
}
.vue-switcher-theme--default.vue-switcher-color--green div {
    background-color: #77c88d;
}
.vue-switcher-theme--default.vue-switcher-color--green div:after {
    background-color: #53b96e;
}
.vue-switcher-theme--default.vue-switcher-color--green.vue-switcher--unchecked
    div {
    background-color: #c0e5ca;
}
.vue-switcher-theme--default.vue-switcher-color--green.vue-switcher--unchecked
    div:after {
    background-color: #77c88d;
}
</style>
<!--<style lang="scss">
    /**
     * Default
     */
    $color-default-default: #aaa;
    $color-default-green: #53b96e;
    $color-default-blue: #539bb9;
    $color-default-red: #b95353;
    $color-default-orange: #b97953;
    $color-default-yellow: #bab353;
    $switch-width: 100px;
    $switch-height: 26px;

    $theme-default-colors: (
        default : $color-default-default,
        blue    : $color-default-blue,
        red     : $color-default-red,
        yellow  : $color-default-yellow,
        orange  : $color-default-orange,
        green   : $color-default-green
    );

    .vue-switcher {
        position: relative;
        display: inline-block;
        width: $switch-width;
        height: $switch-height;
        line-height: $switch-height;
        margin-bottom: 0px;
        top: 7px;

        &__label {
            position: absolute;
            left: $switch-width * 0.6;
            top: 0px;
            height: $switch-height;
            line-height: $switch-height;
            display: block;
            font-size: 10px;
            margin-bottom: 0px;
        }

        input {
            position: absolute;
            left: 0px;
            top: 0px;
            width: $switch-width * 0.6;
            height: $switch-height;
            line-height: $switch-height;
            opacity: 0;
            z-index: 1;
            cursor: pointer;
            margin: 0px !important;
        }

        div {
            position: absolute;
            left: 0px;
            top: ($switch-height - 10) * 0.5;
            width: $switch-width * 0.4;
            height: 10px;

            border-radius: 30px;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;

            &:after {
                position: absolute;
                top: (10 - 18) * 0.5;
                left: 100%;
                content: '';
                height: 18px;
                width: 18px;
                border-radius: 100px;
                display: block;
                transition: all ease .3s;
                margin-left: -17px;
                cursor: pointer;
            }
        }

        &--unchecked {
            div {
                justify-content: flex-end;

                &:after {
                    left: 15px;
                }
            }
        }

        &--disabled {
            div {
                opacity: .3;
            }

            input {
                cursor: not-allowed;
            }
        }

        &--bold {
            div {
                top: ($switch-height - 26) * 0.5;
                height: $switch-height;
                width: 51px;

                &:after {
                    margin-left: -22px;
                    top: 4px;
                }
            }

            &--unchecked {
                div {
                    &:after {
                        left: 26px;
                    }
                }
            }

            .vue-switcher__label {
                span {
                    padding-bottom: 7px;
                    display: inline-block;
                }
            }
        }

        &-theme--default {
            @each $colorName, $color in $theme-default-colors {
                &.vue-switcher-color--#{$colorName} {

                    div {
                        @if $colorName == 'default' {
                            background-color: lighten($color, 5%);
                        } @else {
                            background-color: lighten($color, 10%);
                        }

                        &:after {
                            @if $colorName == 'default' {
                                background-color: darken($color, 5%);
                            } @else {
                                background-color: $color
                            }
                        }
                    }

                    &.vue-switcher--unchecked {
                        div {

                            @if $colorName == 'default' {
                                background-color: $color;
                            } @else {
                                background-color: lighten($color, 30%);
                            }

                            &:after {
                                background-color: lighten($color, 10%);
                            }
                        }
                    }

                }
            }
        }
    }
</style>-->