一个简单的基于vue的开关组件

先看看效果：

 

它可以绑定id并且返回开关的状态

 后台打印：

 

switcher.html





<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Document</title>




  <!-- 在此导入样式switch.css -->





</head>


<body>


  <div id="app">


    <!-- 使用示例 -->


  　　<m-switch v-model="switch1" :pid="1" small @switch="onChange" ></m-switch>


  </div>





  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


　　<!-- 在此导入vue-switch.js -->


  <script>


    // 示例


    const vm = new Vue({


      el: '#app',


      data: {


        switch1: false


      },


      methods: {


        onChange (val) {


          console.log(val)


        }


      }


    })


  </script>


</body>


</html>





 




 


vue-switch.js




    Vue.component('m-switch', {
      template: `<span
                  :class="[
                    'm-switch',
                    'm-switch-' + type,
                    {
                      active: booleanVal,
                      'is-disabled': disabled,
                      'is-small': small
                    }
                  ]"
                  @touchend.prevent="change"
                  @mouseup.prevent="change"
                ></span>`,
      model: {
        prop: 'value',
        event: 'change'
      },
      props: {
        value: {
          type: [Boolean, Number, String],
          default: false
        },
        disabled: Boolean,
        type: {
          type: String, // 颜色类型，可选['primary', 'minor', 'wanr'， 'danger']
          default: 'primary'
        },
        pid: [String, Number],
        small: Boolean // 是否小开关
      },
      computed: {
        booleanVal () {
          return Boolean(Number(this.value));
        }
      },
      methods: {
        change () {
          if (!this.disabled) {
            this.$emit('change', !this.value)
            this.$emit('switch', {
              status: Number(!this.value),
              id: this.pid
            })
          }
        }
      }
    })




 


switch.css




.m-switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
    background-color: #d9d9d9;
    border-radius: 30px;
    transition: background-color .1s linear;
    -webkit-transition:  background-color .1s linear;
    -moz-transition:  background-color .1s linear;
    -o-transition:  background-color .1s linear;
  }

  .m-switch::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    display: block;
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    
    transition: left .1s linear;
    -webkit-transition: left .1s linear;
    -moz-transition: left .1s linear;
    -o-transition: left .1s linear;
  }

  .m-switch.active { background-color: #1890ff; }
  .m-switch.active:after { left: 26px; }

  .m-switch-primary.active { background-color: #1890ff; }
  .m-switch-minor.active { background-color: #a0d911; }
  .m-switch-warn.active { background-color: #faad14; }
  .m-switch-danger.active { background-color: #f5222d; }

  .m-switch.is-small {
    width: 36px;
    height: 20px;
    border-radius: 20px;
  }

  .m-switch.is-small::after {
    width: 16px;
    height: 16px;
    box-shadow: 0 2px 3px rgba(0,0,0,.3);
  }

  .m-switch.is-small.active::after { left: 18px; }

  .m-switch.is-disabled { opacity: .4; }




 







            

            
posted @ 
2021-07-27 15:15 
不如饲猪 
阅读(868) 
评论(0) 
 
收藏 
举报