u-select.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. <template>
  2. <view class="u-select">
  3. <!-- <view class="u-select__action" :class="{
  4. 'u-select--border': border
  5. }" @tap.stop="selectHandler">
  6. <view class="u-select__action__icon" :class="{
  7. 'u-select__action__icon--reverse': value == true
  8. }">
  9. <u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
  10. </view>
  11. </view> -->
  12. <u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
  13. <view class="u-select">
  14. <view class="u-select__header" @touchmove.stop.prevent="">
  15. <view
  16. class="u-select__header__cancel u-select__header__btn"
  17. :style="{ color: cancelColor }"
  18. hover-class="u-hover-class"
  19. :hover-stay-time="150"
  20. @tap="getResult('cancel')"
  21. >
  22. {{cancelText}}
  23. </view>
  24. <view class="u-select__header__title">
  25. {{title}}
  26. </view>
  27. <view
  28. class="u-select__header__confirm u-select__header__btn"
  29. :style="{ color: moving ? cancelColor : confirmColor }"
  30. hover-class="u-hover-class"
  31. :hover-stay-time="150"
  32. @touchmove.stop=""
  33. @tap.stop="getResult('confirm')"
  34. >
  35. {{confirmText}}
  36. </view>
  37. </view>
  38. <view class="u-select__body">
  39. <picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend" v-if="value">
  40. <picker-view-column v-for="(item, index) in columnData" :key="index">
  41. <view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
  42. <view class="u-line-1">{{ item1[labelName] }}</view>
  43. </view>
  44. </picker-view-column>
  45. </picker-view>
  46. </view>
  47. </view>
  48. </u-popup>
  49. </view>
  50. </template>
  51. <script>
  52. /**
  53. * select 列选择器
  54. * @description 此选择器用于单列,多列,多列联动的选择场景。(从1.3.0版本起,不建议使用Picker组件的单列和多列模式,Select组件是专门为列选择而构造的组件,更简单易用。)
  55. * @tutorial http://uviewui.com/components/select.html
  56. * @property {String} mode 模式选择,"single-column"-单列模式,"mutil-column"-多列模式,"mutil-column-auto"-多列联动模式
  57. * @property {Array} list 列数据,数组形式,见官网说明
  58. * @property {Boolean} v-model 布尔值变量,用于控制选择器的弹出与收起
  59. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  60. * @property {String} cancel-color 取消按钮的颜色(默认#606266)
  61. * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
  62. * @property {String} confirm-text 确认按钮的文字
  63. * @property {String} cancel-text 取消按钮的文字
  64. * @property {String} default-value 提供的默认选中的下标,见官网说明
  65. * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
  66. * @property {String Number} z-index 弹出时的z-index值(默认10075)
  67. * @property {String} value-name 自定义list数据的value属性名 1.3.6
  68. * @property {String} label-name 自定义list数据的label属性名 1.3.6
  69. * @property {String} child-name 自定义list数据的children属性名,只对多列联动模式有效 1.3.7
  70. * @event {Function} confirm 点击确定按钮,返回当前选择的值
  71. * @example <u-select v-model="show" :list="list"></u-select>
  72. */
  73. export default {
  74. props: {
  75. // 列数据
  76. list: {
  77. type: Array,
  78. default() {
  79. return [];
  80. }
  81. },
  82. // 是否显示边框
  83. border: {
  84. type: Boolean,
  85. default: true
  86. },
  87. // 通过双向绑定控制组件的弹出与收起
  88. value: {
  89. type: Boolean,
  90. default: false
  91. },
  92. // "取消"按钮的颜色
  93. cancelColor: {
  94. type: String,
  95. default: '#606266'
  96. },
  97. // "确定"按钮的颜色
  98. confirmColor: {
  99. type: String,
  100. default: '#2979ff'
  101. },
  102. // 弹出的z-index值
  103. zIndex: {
  104. type: [String, Number],
  105. default: 0
  106. },
  107. safeAreaInsetBottom: {
  108. type: Boolean,
  109. default: false
  110. },
  111. // 是否允许通过点击遮罩关闭Picker
  112. maskCloseAble: {
  113. type: Boolean,
  114. default: true
  115. },
  116. // 提供的默认选中的下标
  117. defaultValue: {
  118. type: Array,
  119. default() {
  120. return [0];
  121. }
  122. },
  123. // 模式选择,single-column-单列,mutil-column-多列,mutil-column-auto-多列联动
  124. mode: {
  125. type: String,
  126. default: 'single-column'
  127. },
  128. // 自定义value属性名
  129. valueName: {
  130. type: String,
  131. default: 'value'
  132. },
  133. // 自定义label属性名
  134. labelName: {
  135. type: String,
  136. default: 'label'
  137. },
  138. // 自定义多列联动模式的children属性名
  139. childName: {
  140. type: String,
  141. default: 'children'
  142. },
  143. // 顶部标题
  144. title: {
  145. type: String,
  146. default: ''
  147. },
  148. // 取消按钮的文字
  149. cancelText: {
  150. type: String,
  151. default: '取消'
  152. },
  153. // 确认按钮的文字
  154. confirmText: {
  155. type: String,
  156. default: '确认'
  157. }
  158. },
  159. data() {
  160. return {
  161. // 用于列改变时,保存当前的索引,下一次变化时比较得出是哪一列发生了变化
  162. defaultSelector: [0],
  163. // picker-view的数据
  164. columnData: [],
  165. // 每次队列发生变化时,保存选择的结果
  166. selectValue: [],
  167. // 上一次列变化时的index
  168. lastSelectIndex: [],
  169. // 列数
  170. columnNum: 0,
  171. // 列是否还在滑动中,微信小程序如果在滑动中就点确定,结果可能不准确
  172. moving: false
  173. };
  174. },
  175. watch: {
  176. // 在select弹起的时候,重新初始化所有数据
  177. value: {
  178. immediate: true,
  179. handler(val) {
  180. if(val) setTimeout(() => this.init(), 10);
  181. }
  182. },
  183. },
  184. computed: {
  185. uZIndex() {
  186. // 如果用户有传递z-index值,优先使用
  187. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  188. },
  189. },
  190. methods: {
  191. // 标识滑动开始,只有微信小程序才有这样的事件
  192. pickstart() {
  193. // #ifdef MP-WEIXIN
  194. this.moving = true;
  195. // #endif
  196. },
  197. // 标识滑动结束
  198. pickend() {
  199. // #ifdef MP-WEIXIN
  200. this.moving = false;
  201. // #endif
  202. },
  203. init() {
  204. this.setColumnNum();
  205. this.setDefaultSelector();
  206. this.setColumnData();
  207. this.setSelectValue();
  208. },
  209. // 获取默认选中列下标
  210. setDefaultSelector() {
  211. // 如果没有传入默认选中的值,生成长度为columnNum,用0填充的数组
  212. this.defaultSelector = this.defaultValue.length == this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0);
  213. this.lastSelectIndex = this.$u.deepClone(this.defaultSelector);
  214. },
  215. // 计算列数
  216. setColumnNum() {
  217. // 单列的列数为1
  218. if(this.mode == 'single-column') this.columnNum = 1;
  219. // 多列时,this.list数组长度就是列数
  220. else if(this.mode == 'mutil-column') this.columnNum = this.list.length;
  221. // 多列联动时,通过历遍this.list的第一个元素,得出有多少列
  222. else if(this.mode == 'mutil-column-auto') {
  223. let num = 1;
  224. let column = this.list;
  225. // 只要有元素并且第一个元素有children属性,继续历遍
  226. while(column[0][this.childName]) {
  227. column = column[0] ? column[0][this.childName] : {};
  228. num ++;
  229. }
  230. this.columnNum = num;
  231. }
  232. },
  233. // 获取需要展示在picker中的列数据
  234. setColumnData() {
  235. let data = [];
  236. this.selectValue = [];
  237. if(this.mode == 'mutil-column-auto') {
  238. // 获得所有数据中的第一个元素
  239. let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0];
  240. // 通过循环所有的列数,再根据设定列的数组,得出当前需要渲染的整个列数组
  241. for (let i = 0; i < this.columnNum; i++) {
  242. // 第一列默认为整个list数组
  243. if (i == 0) {
  244. data[i] = this.list;
  245. column = column[this.childName];
  246. } else {
  247. // 大于第一列时,判断是否有默认选中的,如果没有就用该列的第一项
  248. data[i] = column;
  249. column = column[this.defaultSelector[i]][this.childName];
  250. }
  251. }
  252. } else if(this.mode == 'single-column') {
  253. data[0] = this.list;
  254. } else {
  255. data = this.list;
  256. }
  257. this.columnData = data;
  258. },
  259. // 获取默认选中的值,如果没有设置defaultValue,就默认选中每列的第一个
  260. setSelectValue() {
  261. let tmp = null;
  262. for(let i = 0; i < this.columnNum; i++) {
  263. tmp = this.columnData[i][this.defaultSelector[i]];
  264. let data = {
  265. value: tmp ? tmp[this.valueName] : null,
  266. label: tmp ? tmp[this.labelName] : null
  267. };
  268. // 判断是否存在额外的参数,如果存在,就返回
  269. if(tmp && tmp.extra) data.extra = tmp.extra;
  270. this.selectValue.push(data)
  271. }
  272. },
  273. // 列选项
  274. columnChange(e) {
  275. let index = null;
  276. let columnIndex = e.detail.value;
  277. // 由于后面是需要push进数组的,所以需要先清空数组
  278. this.selectValue = [];
  279. this.defaultSelector = columnIndex;
  280. if(this.mode == 'mutil-column-auto') {
  281. // 对比前后两个数组,寻找变更的是哪一列,如果某一个元素不同,即可判定该列发生了变化
  282. this.lastSelectIndex.map((val, idx) => {
  283. if (val != columnIndex[idx]) index = idx;
  284. });
  285. for (let i = index + 1; i < this.columnNum; i++) {
  286. // 当前变化列的下一列的数据,需要获取上一列的数据,同时需要指定是上一列的第几个的children,再往后的
  287. // 默认是队列的第一个为默认选项
  288. this.columnData[i] = this.columnData[i - 1][i - 1 == index ? columnIndex[index] : 0][this.childName];
  289. // 改变的列之后的所有列,默认选中第一个
  290. this.defaultSelector[i] = 0;
  291. }
  292. // 在历遍的过程中,可能由于上一步修改this.columnData,导致产生连锁反应,程序触发columnChange,会有多次调用
  293. // 只有在最后一次数据稳定后的结果是正确的,此前的历遍中,可能会产生undefined,故需要判断
  294. columnIndex.map((item, index) => {
  295. let data = this.columnData[index][columnIndex[index]];
  296. let tmp = {
  297. value: data ? data[this.valueName] : null,
  298. label: data ? data[this.labelName] : null,
  299. };
  300. // 判断是否有需要额外携带的参数
  301. if(data && data.extra !== undefined) tmp.extra = data.extra;
  302. this.selectValue.push(tmp);
  303. })
  304. // 保存这一次的结果,用于下次列发生变化时作比较
  305. this.lastSelectIndex = columnIndex;
  306. } else if(this.mode == 'single-column') {
  307. let data = this.columnData[0][columnIndex[0]];
  308. // 初始默认选中值
  309. let tmp = {
  310. value: data ? data[this.valueName] : null,
  311. label: data ? data[this.labelName] : null,
  312. };
  313. // 判断是否有需要额外携带的参数
  314. if(data && data.extra !== undefined) tmp.extra = data.extra;
  315. this.selectValue.push(tmp);
  316. } else if(this.mode == 'mutil-column') {
  317. // 初始默认选中值
  318. columnIndex.map((item, index) => {
  319. let data = this.columnData[index][columnIndex[index]];
  320. // 初始默认选中值
  321. let tmp = {
  322. value: data ? data[this.valueName] : null,
  323. label: data ? data[this.labelName] : null,
  324. };
  325. // 判断是否有需要额外携带的参数
  326. if(data && data.extra !== undefined) tmp.extra = data.extra;
  327. this.selectValue.push(tmp);
  328. })
  329. }
  330. },
  331. close() {
  332. this.$emit('input', false);
  333. // 重置default-value默认值
  334. this.$set(this, 'defaultSelector', [0]);
  335. },
  336. // 点击确定或者取消
  337. getResult(event = null) {
  338. // #ifdef MP-WEIXIN
  339. if (this.moving) return;
  340. // #endif
  341. if (event) this.$emit(event, this.selectValue);
  342. this.close();
  343. },
  344. selectHandler() {
  345. this.$emit('click');
  346. }
  347. }
  348. };
  349. </script>
  350. <style scoped lang="scss">
  351. @import "../../libs/css/style.components.scss";
  352. .u-select {
  353. &__action {
  354. position: relative;
  355. line-height: $u-form-item-height;
  356. height: $u-form-item-height;
  357. &__icon {
  358. position: absolute;
  359. right: 20rpx;
  360. top: 50%;
  361. transition: transform .4s;
  362. transform: translateY(-50%);
  363. z-index: 1;
  364. &--reverse {
  365. transform: rotate(-180deg) translateY(50%);
  366. }
  367. }
  368. }
  369. &__hader {
  370. &__title {
  371. color: $u-content-color;
  372. }
  373. }
  374. &--border {
  375. border-radius: 6rpx;
  376. border-radius: 4px;
  377. border: 1px solid $u-form-item-border-color;
  378. }
  379. &__header {
  380. @include vue-flex;
  381. align-items: center;
  382. justify-content: space-between;
  383. height: 80rpx;
  384. padding: 0 40rpx;
  385. }
  386. &__body {
  387. width: 100%;
  388. height: 500rpx;
  389. overflow: hidden;
  390. background-color: #fff;
  391. &__picker-view {
  392. height: 100%;
  393. box-sizing: border-box;
  394. &__item {
  395. @include vue-flex;
  396. align-items: center;
  397. justify-content: center;
  398. font-size: 32rpx;
  399. color: $u-main-color;
  400. padding: 0 8rpx;
  401. }
  402. }
  403. }
  404. }
  405. </style>