numberBox.nvue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <view class="">
  3. <u-cell-group :border="true">
  4. <u-cell
  5. :border="true"
  6. title="基础用法"
  7. >
  8. <u-number-box
  9. slot="right-icon"
  10. v-model="value1"
  11. step="1"
  12. @change="change"
  13. >
  14. </u-number-box>
  15. </u-cell>
  16. <u-cell
  17. :border="true"
  18. title="步长设置"
  19. >
  20. <u-number-box
  21. slot="right-icon"
  22. v-model="value2"
  23. :step="step1"
  24. @change="change"
  25. >
  26. </u-number-box>
  27. </u-cell>
  28. <u-cell
  29. :border="true"
  30. title="限制输入范围"
  31. >
  32. <u-number-box
  33. slot="right-icon"
  34. v-model="value3"
  35. step="1"
  36. :min="min1"
  37. :max="max1"
  38. @change="change"
  39. >
  40. </u-number-box>
  41. </u-cell>
  42. <u-cell
  43. :border="true"
  44. title="限制输入整数"
  45. >
  46. <u-number-box
  47. slot="right-icon"
  48. v-model="value4"
  49. step="1"
  50. integer
  51. @change="change"
  52. >
  53. </u-number-box>
  54. </u-cell>
  55. <u-cell
  56. :border="true"
  57. title="禁用状态"
  58. >
  59. <u-number-box
  60. slot="right-icon"
  61. v-model="value5"
  62. step="1"
  63. :disabled="true"
  64. @change="change"
  65. >
  66. </u-number-box>
  67. </u-cell>
  68. <u-cell
  69. :border="true"
  70. title="禁用输入框"
  71. >
  72. <u-number-box
  73. slot="right-icon"
  74. v-model="value6"
  75. step="1"
  76. :disabledInput="true"
  77. @change="change"
  78. >
  79. </u-number-box>
  80. </u-cell>
  81. <u-cell
  82. :border="true"
  83. title="禁用长按"
  84. >
  85. <u-number-box
  86. slot="right-icon"
  87. v-model="value7"
  88. step="1"
  89. :longPress="false"
  90. @change="change"
  91. >
  92. </u-number-box>
  93. </u-cell>
  94. <u-cell
  95. :border="true"
  96. title="固定小数位数"
  97. >
  98. <u-number-box
  99. slot="right-icon"
  100. v-model="value8"
  101. step="0.2"
  102. decimalLength="1"
  103. @change="change"
  104. >
  105. </u-number-box>
  106. </u-cell>
  107. <u-cell
  108. :border="true"
  109. title="异步变更"
  110. >
  111. <u-number-box
  112. slot="right-icon"
  113. v-model="value9"
  114. step="1"
  115. :asyncChange="asyncChange"
  116. @change="myAsyncChange"
  117. >
  118. </u-number-box>
  119. </u-cell>
  120. <u-cell
  121. :border="true"
  122. title="自定义大小颜色样式"
  123. >
  124. <u-number-box
  125. slot="right-icon"
  126. v-model="value10"
  127. step="1"
  128. :color="color"
  129. :buttonSize="buttonSize"
  130. :bgColor="bgColor"
  131. @change="change"
  132. iconStyle="color: #fff"
  133. >
  134. </u-number-box>
  135. </u-cell>
  136. <u-cell
  137. :border="true"
  138. title="自定义(为0时减少按钮会消失)"
  139. >
  140. <u-number-box
  141. slot="right-icon"
  142. v-model="value11"
  143. step="1"
  144. :min="0"
  145. :showMinus="value11 > 0"
  146. >
  147. <view
  148. slot="minus"
  149. class="minus"
  150. >
  151. <u-icon
  152. name="minus"
  153. size="12"
  154. ></u-icon>
  155. </view>
  156. <text
  157. slot="input"
  158. style="width: 50px;text-align: center;"
  159. class="input"
  160. >{{value11}}</text>
  161. <view
  162. slot="plus"
  163. class="plus"
  164. >
  165. <u-icon
  166. name="plus"
  167. color="#FFFFFF"
  168. size="12"
  169. ></u-icon>
  170. </view>
  171. </u-number-box>
  172. </u-cell>
  173. </u-cell-group>
  174. </view>
  175. </template>
  176. <script>
  177. export default {
  178. data() {
  179. return {
  180. value1: 3,
  181. value2: 3,
  182. value3: 3,
  183. value4: 3,
  184. value5: 3,
  185. value6: 3,
  186. value7: 3,
  187. value8: 3.1,
  188. value9: 3,
  189. value10: 3,
  190. value11: 3,
  191. step1: 2,
  192. min1: 5,
  193. max1: 8,
  194. asyncChange: true,
  195. color: '#FFFFFF',
  196. buttonSize: 36,
  197. bgColor: '#2979ff'
  198. }
  199. },
  200. methods: {
  201. change(e) {
  202. console.log('change', e);
  203. },
  204. myAsyncChange(e) {
  205. this.asyncChange = false
  206. uni.showLoading({
  207. title: '正在加载'
  208. })
  209. setTimeout(() => {
  210. uni.hideLoading()
  211. this.value9 = e
  212. this.asyncChange = true
  213. }, 3000)
  214. }
  215. }
  216. }
  217. </script>
  218. <style lang="scss">
  219. .minus {
  220. width: 22px;
  221. height: 22px;
  222. border-width: 1px;
  223. border-color: #E6E6E6;
  224. border-top-left-radius: 100px;
  225. border-top-right-radius: 100px;
  226. border-bottom-left-radius: 100px;
  227. border-bottom-right-radius: 100px;
  228. @include flex;
  229. justify-content: center;
  230. align-items: center;
  231. }
  232. .input {
  233. padding: 0 10px;
  234. }
  235. .plus {
  236. width: 22px;
  237. height: 22px;
  238. background-color: #FF0000;
  239. border-radius: 50%;
  240. /* #ifndef APP-NVUE */
  241. display: flex;
  242. /* #endif */
  243. justify-content: center;
  244. align-items: center;
  245. }
  246. </style>