switch | uni-app

switch

Attributes

Event

SwitchChangeEvent

Example

Compatibility

# switch

Component Type：UniSwitchElement

开关选择器

# # Attributes

name	type	default	description
checked	boolean	-	是否选中
color	string.ColorString	-	switch 的颜色，同 css 的 color
disabled	boolean	-	是否禁用
@change	(event: SwitchChangeEvent) => void	-	checked 改变时触发 change 事件，event.detail={ value:checked}

# # Event

# # SwitchChangeEvent

# # Constructor

name	type	required	default	description
value	boolean	YES	-	-

# # SwitchChangeEvent Values

name	type	required	default	description
detail	SwitchChangeEventDetail	YES	-	-
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

# # SwitchChangeEventDetail Values

name	type	optinal	default	description
ctors	Constructor	YES	-	-
value	boolean	YES	-	-

# # SwitchChangeEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

# # Example

hello uni-app x

<template>
 <view class="uni-padding-wrap">
   <view class="uni-common-mt">
     <view class="uni-title">默认样式</view>
     <view class="flex-row">
       <switch class="switch-checked" :checked="checked" @change="switch1Change" />
       <switch @change="switch2Change" />
       <!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
     </view>
     <view class="uni-title">禁用样式</view>
     <view class="flex-row">
       <switch class="switch-checked" :checked="checked" :disabled="true" />
       <switch :disabled="true" />
     </view>
     <view class="uni-title">不同颜色和尺寸的switch</view>
     <view class="flex-row">
       <switch class="switch-color-checked" :color="color" style="transform:scale(0.7)" :checked="true" />
       <switch class="switch-color" :color="color" style="transform:scale(0.7)" />
     </view>
     <view class="uni-title">推荐展示样式</view>
   </view>
   <view class="uni-list">
     <view class="uni-list-cell uni-list-cell-pd">
       <view class="uni-list-cell-db">开启中</view>
       <switch :checked="true" />
     </view>
     <view class="uni-list-cell uni-list-cell-pd">
       <view class="uni-list-cell-db">关闭</view>
       <switch />
     </view>
   </view>
 </view>
</template>

<script lang="uts">
 export default {
   data() {
     return {
       title: 'switch 开关',
       checked: true,
       color: '#FFCC33',
       clickCheckedValue: true
     }
   },
   methods: {
     switch1Change: function (e : SwitchChangeEvent) {
       this.clickCheckedValue = e.detail.value
       console.log('switch1 发生 change 事件，携带值为', e.detail.value)
     },
     switch2Change: function (e : SwitchChangeEvent) {
       console.log('switch2 发生 change 事件，携带值为', e.detail.value)
     }
   }
 }
</script>

<style>
 .flex-row {
   flex-direction: row;
 }
</style>