vue switch组件

左手的ㄟ右手 2022-10-02 11:51 163阅读 0赞

组件

<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>