vue switch组件-蒲公英云

vue switch组件

组件

<template>
    <view>
        <view class="weui-switch"  :class="{'weui-switch-on' : me_checked}" :value="value" @click="toggle"></view>
    </view>
</template>
<script>
    export default {
        props: {
          value: {
            type: Boolean,
            default: true
          },
          event:'',
          index:0,
          item:{},
          actionurl:''
        },
        data() {
          return {
            me_checked: this.value,
            cc:this.value
          }
        },
        watch: {
          me_checked(val) {
              let status = val*1
             this.$emit(this.event, status,this.index);
          }
        },
        methods: {
          toggle(e) {
              this.me_checked = !this.me_checked;
              let status = this.me_checked
              let id = this.item.zw_id
              let g_status= status*1 
              this.$api.request(this.actionurl,{id:id, status: g_status},'post').then((res)=>{
                  uni.showToast({
                      title:res.msg,
                      icon:'none'
                  })
              }).catch((e)=>{
                 uni.showToast({
                    title:e.msg,
                    icon:'none'
                 })
                 let failstatus = false;
                 if(status== false){
                     failstatus=true
                 }else if(status==true){
                     failstatus=false
                 }
                 this.me_checked = failstatus
              })
          }
        }
  }
</script>
<style>
.weui-switch {
    display: block;
    position: relative;
    width: 84upx;
    height: 42upx;
    border: 1px solid #DFDFDF;
    outline: 0;
    border-radius: 22px;
    box-sizing: border-box;
    background-color: #DFDFDF;
    transition: background-color 0.1s, border 0.1s;
    cursor: pointer;
  }
  .weui-switch:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 80upx;
    height: 38upx;
    border-radius: 20upx;
    background-color: #FDFDFD;
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  }
  .weui-switch:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 40upx;
    height: 38upx;
    border-radius: 20upx;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }
  .weui-switch-on {
    border-color: #1AAD19;
    background-color: #1AAD19;
  }
  .weui-switch-on:before {
    border-color: #1AAD19;
    background-color: #1AAD19;
  }
  .weui-switch-on:after {
    transform: translateX(40upx);
  }
</style>

调用

<myswitch v-model="item.status" actionurl='/wapbusiness/changestatus' :item="item" :index='index' event='ffrrr' v-on:ffrrr='statuschange' style=' margin-left: 10upx;transform:scale(0.7)'></myswitch>
<script>
import myswitch from '../../components/switch'
statuschange:function(e,i){
    console.log(e)
 }
</script>