code.nvue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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. <u-code
  7. ref="uCode"
  8. @change="codeChange"
  9. seconds="20"
  10. change-text="XS获取"
  11. @start="disabled1 = true"
  12. @end="disabled1 = false"
  13. ></u-code>
  14. <u-button
  15. @tap="getCode"
  16. :text="tips"
  17. type="success"
  18. size="small"
  19. :disabled="disabled1"
  20. ></u-button>
  21. </view>
  22. </view>
  23. <view class="u-demo-block">
  24. <text class="u-demo-block__title">保持倒计时(开始后,左上角返退出此页面再进入,会发现倒计时还在继续)</text>
  25. <view class="u-demo-block__content">
  26. <u-code
  27. ref="uCode1"
  28. @change="codeChange1"
  29. keep-running
  30. change-text="倒计时XS"
  31. @start="disabled2 = true"
  32. @end="disabled2 = false"
  33. ></u-code>
  34. <u-button
  35. type="primary"
  36. @tap="getCode1"
  37. :text="tips1"
  38. size="small"
  39. :disabled="disabled2"
  40. ></u-button>
  41. </view>
  42. </view>
  43. <view class="u-demo-block">
  44. <text class="u-demo-block__title">文本样式</text>
  45. <view class="u-demo-block__content">
  46. <u-code
  47. ref="uCode2"
  48. @change="codeChange2"
  49. keep-running
  50. start-text="点我获取验证码"
  51. ></u-code>
  52. <text
  53. @tap="getCode2"
  54. :text="tips2"
  55. class="u-page__code-text"
  56. >{{tips2}}</text>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. export default {
  63. data() {
  64. return {
  65. tips: '',
  66. // 此为错误定义,见下方说明
  67. // refCode: null,
  68. tips1: '',
  69. tips2: '',
  70. disabled1: false,
  71. disabled2: false,
  72. disabled3: false
  73. }
  74. },
  75. onReady() {
  76. // 注意这里不能将一个组件赋值给data的一个变量,否则在微信小程序会
  77. // 造成循环引用而报错,如果你想这样做,请在onReady或者onLoad生命周期中定义,如下
  78. // this.refCode = this.$refs.uCode;
  79. },
  80. methods: {
  81. codeChange(text) {
  82. this.tips = text;
  83. },
  84. codeChange1(text) {
  85. this.tips1 = text;
  86. },
  87. codeChange2(text) {
  88. this.tips2 = text;
  89. },
  90. getCode() {
  91. if (this.$refs.uCode.canGetCode) {
  92. // 模拟向后端请求验证码
  93. uni.showLoading({
  94. title: '正在获取验证码'
  95. })
  96. setTimeout(() => {
  97. uni.hideLoading();
  98. // 这里此提示会被this.start()方法中的提示覆盖
  99. uni.$u.toast('验证码已发送');
  100. // 通知验证码组件内部开始倒计时
  101. this.$refs.uCode.start();
  102. }, 2000);
  103. } else {
  104. uni.$u.toast('倒计时结束后再发送');
  105. }
  106. },
  107. getCode1() {
  108. if (this.$refs.uCode1.canGetCode) {
  109. // 模拟向后端请求验证码
  110. uni.showLoading({
  111. title: '正在获取验证码'
  112. })
  113. setTimeout(() => {
  114. uni.hideLoading();
  115. // 这里此提示会被this.start()方法中的提示覆盖
  116. uni.$u.toast('验证码已发送');
  117. // 通知验证码组件内部开始倒计时
  118. this.$refs.uCode1.start();
  119. }, 2000);
  120. } else {
  121. uni.$u.toast('倒计时结束后再发送');
  122. }
  123. },
  124. getCode2() {
  125. if (this.$refs.uCode2.canGetCode) {
  126. // 模拟向后端请求验证码
  127. uni.showLoading({
  128. title: '正在获取验证码'
  129. })
  130. setTimeout(() => {
  131. uni.hideLoading();
  132. // 这里此提示会被this.start()方法中的提示覆盖
  133. uni.$u.toast('验证码已发送');
  134. // 通知验证码组件内部开始倒计时
  135. this.$refs.uCode2.start();
  136. }, 2000);
  137. } else {
  138. uni.$u.toast('倒计时结束后再发送');
  139. }
  140. }
  141. }
  142. }
  143. </script>
  144. <style lang="scss">
  145. .u-page {
  146. &__code-text {
  147. color: $u-primary;
  148. font-size: 15px;
  149. }
  150. }
  151. .u-demo-block__content {
  152. @include flex;
  153. }
  154. </style>