switch

开关

示例

  2. <template>
  3.   <view>
  4.     <view class="box">
  5.       <switch
  6.         checked="{{ switchValue1 }}"
  7.         label="Switch"
  8.         c-bind:change="switchChange1"
  9.       ></switch>
  10.     </view>
  11.     <view class="title"> <text> switch value: {{ switchValue1 ? 'true': 'false' }}</text></view>
  12.     <view class="box">
  13.       <switch
  14.         checked="{{ switchValue2 }}"
  15.         label="Switch"
  16.         c-bind:change="switchChange2"
  17.       >
  18.       </switch>
  19.     </view>
  20.     <view class="title"><text> switch value: {{ switchValue2  ? 'true': 'false'}}</text></view>
  21.     <view class="box">
  22.        <switch
  23.         checked="{{ switchValue3 }}"
  24.         label="Disabled Switch"
  25.         disabled="{{true}}"
  26.         ></switch>
  27.     </view>
  28.     <view class="title"><text> switch value: {{ switchValue3 ? 'true': 'false' }}</text></view>
  29.     <view class="box">
  30.       <switch
  31.         checked="{{ switchValue4 }}"
  32.         label="Disabled Switch"
  33.         disabled="{{true}}"
  34.       ></switch>
  35.     </view>
  36.     <view class="title"><text> switch value: {{ switchValue4 ? 'true': 'false' }}</text></view>
  37.   </view>
  38. </template>
  39. <script>
  40. class Switch {
  41.   data = {
  42.     switchValue1: false,
  43.     switchValue2: true,
  44.     switchValue3: true,
  45.     switchValue4: false
  46.   }
  47.   methods = {
  48.     switchChange1 (e) {
  49.       this.switchValue1 = e.detail.value
  50.     },
  51.     switchChange2 (e) {
  52.       this.switchValue2 = e.detail.value
  53.     }
  54.   }
  55. }
  57. export default new Switch();
  58. </script>
  59. <style scoped>
  60. .container {
  61.   position: absolute;
  62.   top: 88cpx;
  63.   left: 0;
  64.   right: 0;
  65.   bottom: 0;
  66. }
  67. .title {
  68.   font-size: 38cpx;
  69.   font-weight: 400;
  70.   margin: 20cpx 0;
  71.   padding: 10cpx 30cpx;
  72.   background: #eee
  73. }
  74. .radio-value {
  75.   font-size: 32cpx;
  76. }
  77. .box {
  78.   margin: 0cpx 50cpx;
  79. }
  80. </style>
  82. <script cml-type="json">
  83. {
  84.   "base": {}
  85. }
  86. </script>