Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

u-select.vue 12 KiB

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