vue switch组件

最新推荐文章于 2024-08-30 21:00:18 发布

xudejun

最新推荐文章于 2024-08-30 21:00:18 发布

阅读量9k

点赞数

分类专栏： vue JS 文章标签： vue switch switch组件 vue组件 vue switch组件

本文链接：https://blog.csdn.net/xudejun/article/details/92794858

版权

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

摘要由CSDN通过智能技术生成

组件

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