vue switch组件

最新推荐文章于 2025-06-04 09:49:02 发布

原创最新推荐文章于 2025-06-04 09:49:02 发布 · 9.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue switch #switch组件 #vue组件 #vue switch组件

JS 同时被 2 个专栏收录

14 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文将深入探讨Vue框架中的Switch组件，介绍如何在项目中调用和配置该组件，以实现开关选择功能。通过学习，你可以理解Vue Switch组件的基本用法和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

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