input.nvue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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--input
  7. placeholder="请输入内容"
  8. border="surround"
  9. v-model="value"
  10. @change="change"
  11. ></u--input>
  12. </view>
  13. </view>
  14. <view class="u-demo-block">
  15. <text class="u-demo-block__title">可清空内容</text>
  16. <view class="u-demo-block__content">
  17. <u--input
  18. placeholder="请输入内容"
  19. border="surround"
  20. clearable
  21. ></u--input>
  22. </view>
  23. </view>
  24. <view class="u-demo-block">
  25. <text class="u-demo-block__title">数字键盘</text>
  26. <view class="u-demo-block__content">
  27. <u--input
  28. placeholder="请输入内容"
  29. border="surround"
  30. type="number"
  31. clearable
  32. ></u--input>
  33. </view>
  34. </view>
  35. <view class="u-demo-block">
  36. <text class="u-demo-block__title">密码类型</text>
  37. <view class="u-demo-block__content">
  38. <u--input
  39. placeholder="请输入内容"
  40. border="surround"
  41. password
  42. clearable
  43. ></u--input>
  44. </view>
  45. </view>
  46. <view class="u-demo-block">
  47. <text class="u-demo-block__title">显示下划线</text>
  48. <view class="u-demo-block__content">
  49. <u--input
  50. placeholder="请输入内容"
  51. border="bottom"
  52. clearable
  53. ></u--input>
  54. </view>
  55. </view>
  56. <view class="u-demo-block">
  57. <text class="u-demo-block__title">禁用状态</text>
  58. <view class="u-demo-block__content">
  59. <u--input
  60. placeholder="禁用状态"
  61. border="surround"
  62. disabled
  63. ></u--input>
  64. </view>
  65. </view>
  66. <view class="u-demo-block">
  67. <text class="u-demo-block__title">圆形</text>
  68. <view class="u-demo-block__content">
  69. <u--input
  70. placeholder="请输入内容"
  71. border="surround"
  72. shape="circle"
  73. ></u--input>
  74. </view>
  75. </view>
  76. <view class="u-demo-block">
  77. <text class="u-demo-block__title">前后图标</text>
  78. <view class="u-demo-block__content">
  79. <u--input
  80. placeholder="前置图标"
  81. prefixIcon="search"
  82. prefixIconStyle="font-size: 22px;color: #909399"
  83. ></u--input>
  84. </view>
  85. <view
  86. class="u-demo-block__content"
  87. style="margin-top: 15px;"
  88. >
  89. <u--input
  90. placeholder="后置图标"
  91. suffixIcon="map-fill"
  92. suffixIconStyle="color: #909399"
  93. ></u--input>
  94. </view>
  95. </view>
  96. <view class="u-demo-block">
  97. <text class="u-demo-block__title">前后插槽</text>
  98. <view class="u-demo-block__content">
  99. <!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
  100. <!-- #ifndef APP-NVUE -->
  101. <u-input placeholder="前置插槽">
  102. <!-- #endif -->
  103. <!-- #ifdef APP-NVUE -->
  104. <u--input placeholder="前置插槽">
  105. <!-- #endif -->
  106. <u--text
  107. text="http://"
  108. slot="prefix"
  109. margin="0 3px 0 0"
  110. type="tips"
  111. ></u--text>
  112. <!-- #ifndef APP-NVUE -->
  113. </u-input>
  114. <!-- #endif -->
  115. <!-- #ifdef APP-NVUE -->
  116. </u--input>
  117. <!-- #endif -->
  118. </view>
  119. <view
  120. class="u-demo-block__content"
  121. style="margin-top: 15px;"
  122. >
  123. <!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
  124. <!-- #ifndef APP-NVUE -->
  125. <u-input placeholder="后置插槽">
  126. <!-- #endif -->
  127. <!-- #ifdef APP-NVUE -->
  128. <u--input placeholder="后置插槽">
  129. <!-- #endif -->
  130. <template slot="suffix">
  131. <u-code
  132. ref="uCode"
  133. @change="codeChange"
  134. seconds="20"
  135. changeText="X秒重新获取哈哈哈"
  136. ></u-code>
  137. <u-button
  138. @tap="getCode"
  139. :text="tips"
  140. type="success"
  141. size="mini"
  142. ></u-button>
  143. </template>
  144. <!-- #ifndef APP-NVUE -->
  145. </u-input>
  146. <!-- #endif -->
  147. <!-- #ifdef APP-NVUE -->
  148. </u--input>
  149. <!-- #endif -->
  150. </view>
  151. </view>
  152. <u-gap
  153. bgColor="#fff"
  154. height="50"
  155. ></u-gap>
  156. </view>
  157. </template>
  158. <script>
  159. export default {
  160. data() {
  161. return {
  162. tips: '',
  163. value: ''
  164. }
  165. },
  166. watch: {
  167. value(newValue, oldValue) {
  168. // console.log('v-model', newValue);
  169. }
  170. },
  171. methods: {
  172. codeChange(text) {
  173. this.tips = text;
  174. },
  175. getCode() {
  176. if (this.$refs.uCode.canGetCode) {
  177. // 模拟向后端请求验证码
  178. uni.showLoading({
  179. title: '正在获取验证码'
  180. })
  181. setTimeout(() => {
  182. uni.hideLoading();
  183. // 这里此提示会被this.start()方法中的提示覆盖
  184. uni.$u.toast('验证码已发送');
  185. // 通知验证码组件内部开始倒计时
  186. this.$refs.uCode.start();
  187. }, 2000);
  188. } else {
  189. uni.$u.toast('倒计时结束后再发送');
  190. }
  191. },
  192. change(e) {
  193. console.log('change', e);
  194. }
  195. }
  196. }
  197. </script>
  198. <style lang="scss">
  199. </style>