picker.nvue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="u-page" ref="page">
  3. <u-navbar
  4. title="选择器"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <u-cell-group>
  11. <u-cell
  12. @click="showPicker(index)"
  13. :title="item.title"
  14. v-for="(item, index) in list"
  15. :key="index"
  16. isLink
  17. >
  18. <image
  19. slot="icon"
  20. class="u-cell-icon"
  21. :src="item.iconUrl"
  22. mode="widthFix"
  23. ></image>
  24. </u-cell>
  25. </u-cell-group>
  26. <u-picker
  27. :show="show1"
  28. :columns="columns1"
  29. @change="change"
  30. @cancel="cancel"
  31. @confirm="confirm"
  32. ></u-picker>
  33. <u-picker
  34. :show="show2"
  35. :columns="columns2"
  36. :defaultIndex="[1]"
  37. @cancel="cancel"
  38. @confirm="confirm"
  39. @change="change"
  40. ></u-picker>
  41. <u-picker
  42. :show="show3"
  43. :columns="columns3"
  44. ref="uPicker3"
  45. @cancel="cancel"
  46. @confirm="confirm"
  47. @change="changeHandler1"
  48. ></u-picker>
  49. <u-picker
  50. :show="show4"
  51. :columns="columns4"
  52. @cancel="cancel"
  53. @confirm="confirm"
  54. :loading="loading"
  55. @change="changeHandler2"
  56. ref="uPicker4"
  57. ></u-picker>
  58. <u-picker
  59. :show="show5"
  60. :columns="columns5"
  61. title="标题太长就会显示省略号"
  62. @cancel="cancel"
  63. @confirm="confirm"
  64. @change="change"
  65. ></u-picker>
  66. <u-picker
  67. :show="show6"
  68. :columns="columns6"
  69. closeOnClickOverlay
  70. @cancel="cancel"
  71. @confirm="confirm"
  72. @close="close"
  73. @change="change"
  74. ></u-picker>
  75. </view>
  76. </template>
  77. <script>
  78. export default {
  79. data() {
  80. return {
  81. index: 0,
  82. loading: false,
  83. columnData: [
  84. ['深圳', '厦门', '上海', '拉萨'],
  85. ['得州', '华盛顿', '纽约', '阿拉斯加']
  86. ],
  87. columns1: [
  88. ['中国', '美国', '日本']
  89. ],
  90. columns2: [
  91. ['中国', '美国', '日本']
  92. ],
  93. columns3: [
  94. ['中国', '美国'],
  95. ['深圳', '厦门', '上海', '拉萨']
  96. ],
  97. columns4: [
  98. ['中国', '美国'],
  99. ['深圳', '厦门', '上海', '拉萨']
  100. ],
  101. columns5: [
  102. ['中国', '美国', '日本']
  103. ],
  104. columns6: [
  105. ['中国', '美国', '日本']
  106. ],
  107. show1: false,
  108. show2: false,
  109. show3: false,
  110. show4: false,
  111. show5: false,
  112. show6: false,
  113. list: [{
  114. title: '基础使用',
  115. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png'
  116. },
  117. {
  118. title: '设置默认项',
  119. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png'
  120. },
  121. {
  122. title: '多列联动',
  123. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png'
  124. },
  125. {
  126. title: '加载中状态(切换第一列)',
  127. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png'
  128. },
  129. {
  130. title: '设置标题',
  131. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png'
  132. }, {
  133. title: '允许点击遮罩关闭',
  134. iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png'
  135. },
  136. ]
  137. }
  138. },
  139. methods: {
  140. changeHandler1(e) {
  141. this.change(e)
  142. const {
  143. columnIndex,
  144. value,
  145. values,
  146. index,
  147. // 微信小程序无法将picker实例传出来,只能通过ref操作
  148. picker = this.$refs.uPicker3
  149. } = e
  150. if (columnIndex === 0) {
  151. picker.setColumnValues(1, this.columnData[index])
  152. }
  153. },
  154. changeHandler2(e) {
  155. this.change(e)
  156. const {
  157. columnIndex,
  158. value,
  159. values,
  160. index,
  161. // 微信小程序无法将picker实例传出来,只能通过ref操作
  162. picker = this.$refs.uPicker4
  163. } = e
  164. if (columnIndex === 0) {
  165. this.loading = true
  166. uni.$u.sleep(1500).then(() => {
  167. picker.setColumnValues(1, this.columnData[index])
  168. this.loading = false
  169. })
  170. }
  171. },
  172. navigateBack() {
  173. uni.navigateBack()
  174. },
  175. change(e) {
  176. // console.log('change', e);
  177. },
  178. showPicker(index) {
  179. this.index = index + 1
  180. this[`show${index + 1}`] = true
  181. },
  182. close() {
  183. // console.log('close');
  184. this[`show${this.index}`] = false
  185. },
  186. confirm(e) {
  187. // console.log('confirm', e);
  188. this[`show${this.index}`] = false
  189. },
  190. cancel() {
  191. // console.log('cancel');
  192. this[`show${this.index}`] = false
  193. }
  194. },
  195. }
  196. </script>
  197. <style lang="scss">
  198. .u-page {
  199. padding: 0;
  200. }
  201. </style>