u-picker.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <u-popup
  3. :show="show"
  4. @close="closeHandler"
  5. >
  6. <view class="u-picker">
  7. <u-toolbar
  8. v-if="showToolbar"
  9. :cancelColor="cancelColor"
  10. :confirmColor="confirmColor"
  11. :cancelText="cancelText"
  12. :confirmText="confirmText"
  13. :title="title"
  14. @cancel="cancel"
  15. @confirm="confirm"
  16. ></u-toolbar>
  17. <picker-view
  18. class="u-picker__view"
  19. :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
  20. :value="innerIndex"
  21. :immediateChange="immediateChange"
  22. :style="{
  23. height: `${$u.addUnit(visibleItemCount * itemHeight)}`
  24. }"
  25. @change="changeHandler"
  26. >
  27. <picker-view-column
  28. v-for="(item, index) in innerColumns"
  29. :key="index"
  30. class="u-picker__view__column"
  31. >
  32. <text
  33. v-if="$u.test.array(item)"
  34. class="u-picker__view__column__item u-line-1"
  35. v-for="(item1, index1) in item"
  36. :key="index1"
  37. :style="{
  38. height: $u.addUnit(itemHeight),
  39. lineHeight: $u.addUnit(itemHeight),
  40. fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
  41. }"
  42. >{{ getItemText(item1) }}</text>
  43. </picker-view-column>
  44. </picker-view>
  45. <view
  46. v-if="loading"
  47. class="u-picker--loading"
  48. >
  49. <u-loading-icon mode="circle"></u-loading-icon>
  50. </view>
  51. </view>
  52. </u-popup>
  53. </template>
  54. <script>
  55. /**
  56. * u-picker
  57. * @description 选择器
  58. * @property {Boolean} show 是否显示picker弹窗(默认 false )
  59. * @property {Boolean} showToolbar 是否显示顶部的操作栏(默认 true )
  60. * @property {String} title 顶部标题
  61. * @property {Array} columns 对象数组,设置每一列的数据
  62. * @property {Boolean} loading 是否显示加载中状态(默认 false )
  63. * @property {String | Number} itemHeight 各列中,单个选项的高度(默认 44 )
  64. * @property {String} cancelText 取消按钮的文字(默认 '取消' )
  65. * @property {String} confirmText 确认按钮的文字(默认 '确定' )
  66. * @property {String} cancelColor 取消按钮的颜色(默认 '#909193' )
  67. * @property {String} confirmColor 确认按钮的颜色(默认 '#3c9cff' )
  68. * @property {Array} singleIndex 选择器只有一列时,默认选中项的索引,从0开始(默认 0 )
  69. * @property {String | Number} visibleItemCount 每列中可见选项的数量(默认 5 )
  70. * @property {String} keyName 选项对象中,需要展示的属性键名(默认 'text' )
  71. * @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器(默认 false )
  72. * @property {Array} defaultIndex 各列的默认索引
  73. * @property {Boolean} immediateChange 是否在手指松开时立即触发change事件(默认 false )
  74. * @event {Function} close 关闭选择器时触发
  75. * @event {Function} cancel 点击取消按钮触发
  76. * @event {Function} change 当选择值变化时触发
  77. * @event {Function} confirm 点击确定按钮,返回当前选择的值
  78. */
  79. import props from './props.js';
  80. export default {
  81. name: 'u-picker',
  82. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  83. data() {
  84. return {
  85. // 上一次选择的列索引
  86. lastIndex: [],
  87. // 索引值 ,对应picker-view的value
  88. innerIndex: [],
  89. // 各列的值
  90. innerColumns: [],
  91. // 上一次的变化列索引
  92. columnIndex: 0,
  93. }
  94. },
  95. watch: {
  96. // 监听默认索引的变化,重新设置对应的值
  97. defaultIndex: {
  98. immediate: true,
  99. handler(n) {
  100. this.setIndexs(n, true)
  101. }
  102. },
  103. // 监听columns参数的变化
  104. columns: {
  105. immediate: true,
  106. handler(n) {
  107. this.setColumns(n)
  108. }
  109. },
  110. },
  111. methods: {
  112. // 获取item需要显示的文字,判别为对象还是文本
  113. getItemText(item) {
  114. if (uni.$u.test.object(item)) {
  115. return item[this.keyName]
  116. } else {
  117. return item
  118. }
  119. },
  120. // 关闭选择器
  121. closeHandler() {
  122. if (this.closeOnClickOverlay) {
  123. this.$emit('close')
  124. }
  125. },
  126. // 点击工具栏的取消按钮
  127. cancel() {
  128. this.$emit('cancel')
  129. },
  130. // 点击工具栏的确定按钮
  131. confirm() {
  132. this.$emit('confirm', {
  133. indexs: this.innerIndex,
  134. value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
  135. values: this.innerColumns
  136. })
  137. },
  138. // 选择器某一列的数据发生变化时触发
  139. changeHandler(e) {
  140. const {
  141. value
  142. } = e.detail
  143. let index = 0,
  144. columnIndex = 0
  145. // 通过对比前后两次的列索引,得出当前变化的是哪一列
  146. for (let i = 0; i < value.length; i++) {
  147. let item = value[i]
  148. if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
  149. // 设置columnIndex为当前变化列的索引
  150. columnIndex = i
  151. // index则为变化列中的变化项的索引
  152. index = item
  153. break // 终止循环,即使少一次循环,也是性能的提升
  154. }
  155. }
  156. this.columnIndex = columnIndex
  157. const values = this.innerColumns
  158. // 将当前的各项变化索引,设置为"上一次"的索引变化值
  159. this.setLastIndex(value)
  160. this.setIndexs(value)
  161. this.$emit('change', {
  162. // #ifndef MP-WEIXIN
  163. // 微信小程序不能传递this,会因为循环引用而报错
  164. picker: this,
  165. // #endif
  166. value: this.innerColumns.map((item, index) => item[value[index]]),
  167. index,
  168. indexs: value,
  169. // values为当前变化列的数组内容
  170. values,
  171. columnIndex
  172. })
  173. },
  174. // 设置index索引,此方法可被外部调用设置
  175. setIndexs(index, setLastIndex) {
  176. this.innerIndex = uni.$u.deepClone(index)
  177. if (setLastIndex) {
  178. this.setLastIndex(index)
  179. }
  180. },
  181. // 记录上一次的各列索引位置
  182. setLastIndex(index) {
  183. // 当能进入此方法,意味着当前设置的各列默认索引,即为“上一次”的选中值,需要记录,是因为changeHandler中
  184. // 需要拿前后的变化值进行对比,得出当前发生改变的是哪一列
  185. this.lastIndex = uni.$u.deepClone(index)
  186. },
  187. // 设置对应列选项的所有值
  188. setColumnValues(columnIndex, values) {
  189. // 替换innerColumns数组中columnIndex索引的值为values,使用的是数组的splice方法
  190. this.innerColumns.splice(columnIndex, 1, values)
  191. // 拷贝一份原有的innerIndex做临时变量,将大于当前变化列的所有的列的默认索引设置为0
  192. let tmpIndex = uni.$u.deepClone(this.innerIndex)
  193. for (let i = 0; i < this.innerColumns.length; i++) {
  194. if (i > this.columnIndex) {
  195. tmpIndex[i] = 0
  196. }
  197. }
  198. // 一次性赋值,不能单个修改,否则无效
  199. this.setIndexs(tmpIndex)
  200. },
  201. // 获取对应列的所有选项
  202. getColumnValues(columnIndex) {
  203. // 进行同步阻塞,因为外部得到change事件之后,可能需要执行setColumnValues更新列的值
  204. // 索引如果在外部change的回调中调用getColumnValues的话,可能无法得到变更后的列值,这里进行一定延时,保证值的准确性
  205. (async () => {
  206. await uni.$u.sleep()
  207. })()
  208. return this.innerColumns[columnIndex]
  209. },
  210. // 设置整体各列的columns的值
  211. setColumns(columns) {
  212. this.innerColumns = uni.$u.deepClone(columns)
  213. // 如果在设置各列数据时,没有被设置默认的各列索引defaultIndex,那么用0去填充它,数组长度为列的数量
  214. if (this.innerIndex.length === 0) {
  215. this.innerIndex = new Array(columns.length).fill(0)
  216. }
  217. },
  218. // 获取各列选中值对应的索引
  219. getIndexs() {
  220. return this.innerIndex
  221. },
  222. // 获取各列选中的值
  223. getValues() {
  224. // 进行同步阻塞,因为外部得到change事件之后,可能需要执行setColumnValues更新列的值
  225. // 索引如果在外部change的回调中调用getValues的话,可能无法得到变更后的列值,这里进行一定延时,保证值的准确性
  226. (async () => {
  227. await uni.$u.sleep()
  228. })()
  229. return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
  230. }
  231. },
  232. }
  233. </script>
  234. <style lang="scss" scoped>
  235. @import "../../libs/css/components.scss";
  236. .u-picker {
  237. position: relative;
  238. &__view {
  239. &__column {
  240. @include flex;
  241. flex: 1;
  242. justify-content: center;
  243. &__item {
  244. @include flex;
  245. justify-content: center;
  246. align-items: center;
  247. font-size: 16px;
  248. text-align: center;
  249. /* #ifndef APP-NVUE */
  250. display: block;
  251. /* #endif */
  252. color: $u-main-color;
  253. &--disabled {
  254. /* #ifndef APP-NVUE */
  255. cursor: not-allowed;
  256. /* #endif */
  257. opacity: 0.35;
  258. }
  259. }
  260. }
  261. }
  262. &--loading {
  263. position: absolute;
  264. top: 0;
  265. right: 0;
  266. left: 0;
  267. bottom: 0;
  268. @include flex;
  269. justify-content: center;
  270. align-items: center;
  271. background-color: rgba(255, 255, 255, 0.87);
  272. z-index: 1000;
  273. }
  274. }
  275. </style>