江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

283 lines
8.4 KiB

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