switch.nvue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__tag-item">
  7. <u-switch
  8. v-model="value1"
  9. @change="change"
  10. ></u-switch>
  11. </view>
  12. <view class="u-page__tag-item">
  13. <u-switch v-model="value2"></u-switch>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="u-demo-block">
  18. <text class="u-demo-block__title">加载中</text>
  19. <view class="u-demo-block__content">
  20. <view class="u-page__tag-item">
  21. <u-switch
  22. v-model="value3"
  23. loading
  24. ></u-switch>
  25. </view>
  26. <view class="u-page__tag-item">
  27. <u-switch
  28. v-model="value4"
  29. loading
  30. ></u-switch>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="u-demo-block">
  35. <text class="u-demo-block__title">禁用状态</text>
  36. <view class="u-demo-block__content">
  37. <view class="u-page__tag-item">
  38. <u-switch
  39. v-model="value5"
  40. disabled
  41. ></u-switch>
  42. </view>
  43. <view class="u-page__tag-item">
  44. <u-switch
  45. v-model="value6"
  46. disabled
  47. ></u-switch>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="u-demo-block">
  52. <text class="u-demo-block__title">自定义尺寸</text>
  53. <view class="u-demo-block__content">
  54. <view class="u-page__tag-item">
  55. <u-switch
  56. v-model="value7"
  57. size="28"
  58. ></u-switch>
  59. </view>
  60. <view class="u-page__tag-item">
  61. <u-switch
  62. v-model="value8"
  63. size="20"
  64. ></u-switch>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="u-demo-block">
  69. <text class="u-demo-block__title">自定义颜色</text>
  70. <view class="u-demo-block__content">
  71. <view class="u-page__tag-item">
  72. <u-switch
  73. v-model="value9"
  74. activeColor="#f56c6c"
  75. loading
  76. ></u-switch>
  77. </view>
  78. <view class="u-page__tag-item">
  79. <u-switch
  80. v-model="value10"
  81. activeColor="#5ac725"
  82. loading
  83. ></u-switch>
  84. </view>
  85. </view>
  86. </view>
  87. <view class="u-demo-block">
  88. <text class="u-demo-block__title">自定义样式</text>
  89. <view class="u-demo-block__content">
  90. <view class="u-page__tag-item">
  91. <u-switch
  92. :space="2"
  93. v-model="value11"
  94. activeColor="#f56c6c"
  95. inactiveColor="rgb(230, 230, 230)"
  96. ></u-switch>
  97. </view>
  98. <view class="u-page__tag-item">
  99. <u-switch
  100. space="2"
  101. v-model="value12"
  102. activeColor="#f9ae3d"
  103. inactiveColor="rgb(230, 230, 230)"
  104. ></u-switch>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="u-demo-block">
  109. <text class="u-demo-block__title">异步控制</text>
  110. <view class="u-demo-block__content">
  111. <view class="u-page__tag-item">
  112. <u-switch
  113. v-model="value13"
  114. asyncChange
  115. @change="asyncChange"
  116. ></u-switch>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. </template>
  122. <script>
  123. export default {
  124. data() {
  125. return {
  126. value1: false,
  127. value2: true,
  128. value3: false,
  129. value4: true,
  130. value5: false,
  131. value6: true,
  132. value7: false,
  133. value8: true,
  134. value9: true,
  135. value10: true,
  136. value11: false,
  137. value12: true,
  138. value13: true,
  139. }
  140. },
  141. watch: {
  142. value1(newValue, oldValue) {
  143. console.log('v-model', newValue);
  144. }
  145. },
  146. methods: {
  147. change(e) {
  148. console.log('change', e);
  149. },
  150. asyncChange(e) {
  151. uni.showModal({
  152. content: e ? '确定要打开吗' : '确定要关闭吗',
  153. success: (res) => {
  154. if (res.confirm) {
  155. this.value13 = e
  156. }
  157. }
  158. })
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="scss">
  164. .u-page {
  165. &__tag-item {
  166. margin-right: 30px;
  167. }
  168. }
  169. .u-demo-block__content {
  170. flex-direction: row;
  171. flex-wrap: wrap;
  172. align-items: center;
  173. }
  174. </style>