Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

pickerMultiSelect.vue 3.9 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <view>
  3. <!-- components/pickerMultiSelect.wxml -->
  4. <!-- <view class='showPicker' bindtap='showPicker'>MyPicker</view> -->
  5. <view class="list" @tap="showPickerFun">
  6. <view class="listName">{{title}}</view>
  7. <view class="listName2">{{value}}</view>
  8. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png" class="listImg"></image>
  9. </view>
  10. <view :class="showPicker ? 'shade-container' : 'hide-container'" v-if="firstShow">
  11. <view class="left-shade" @tap="hidePicker"></view>
  12. <view class="right-choose">
  13. <view class="button-container">
  14. <view class="cancal" @tap="cancal">取消</view>
  15. <view class="sure" @tap="sure">确定</view>
  16. </view>
  17. <view class="picker-container">
  18. <view v-for="(item, index) in myChooseList" :key="index" :class="'picker-item ' + ( item.flag ? 'picker-item-choose' : '' )" @tap="chooseItem" :data-value="item.value">
  19. {{ item.label }}
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. // components/pickerMultiSelect.js
  28. export default {
  29. data() {
  30. return {
  31. showPicker: false,
  32. firstShow: false,
  33. myList: this.list,
  34. myChooseList:[],
  35. flag: false
  36. };
  37. },
  38. components: {},
  39. mounted(){
  40. this.myChooseList=this.chooseList;
  41. },
  42. props: {
  43. chooseList: {
  44. type: Array
  45. },
  46. multiple: {
  47. type: Boolean
  48. },
  49. title: {
  50. type: String
  51. },
  52. value: {
  53. type: String
  54. },
  55. list: {
  56. type: Array||String
  57. }
  58. },
  59. methods: {
  60. // 点击picker元素事件
  61. chooseItem(e) {
  62. if (this.multiple) {
  63. // 多选事件
  64. let val = e.target.dataset.value;
  65. let arr = this.myChooseList;
  66. let flag = '';
  67. let index = null;
  68. for (let i = 0, len = arr.length; i < len; i++) {
  69. if (arr[i].value == val) {
  70. index = i;
  71. flag = `chooseList[${i}].flag`;
  72. }
  73. }
  74. if (!this.myChooseList[index].flag) {
  75. this.setData({
  76. [flag]: true
  77. });
  78. } else {
  79. this.setData({
  80. [flag]: false
  81. });
  82. }
  83. } else {
  84. // 单选事件
  85. let val = e.target.dataset.value;
  86. let arr = this.myChooseList;
  87. let flag = '';
  88. let index = null;
  89. for (let i = 0, len = arr.length; i < len; i++) {
  90. index = i;
  91. flag = `chooseList[${i}].flag`;
  92. if (arr[i].value == val) {
  93. this.setData({
  94. [flag]: true
  95. });
  96. } else {
  97. this.setData({
  98. [flag]: false
  99. });
  100. }
  101. }
  102. }
  103. },
  104. // 展示picker
  105. showPickerFun() {
  106. this.myChooseList=this.chooseList
  107. if (!this.firstShow) {
  108. this.setData({
  109. firstShow: true
  110. });
  111. }
  112. this.setData({
  113. showPicker: true
  114. }); // 加载时重新渲染已选择元素
  115. let arr = this.myChooseList;
  116. let array = this.myList;
  117. let flag = '';
  118. let index = null;
  119. for (let i = 0, len = arr.length; i < len; i++) {
  120. index = i;
  121. flag = `chooseList[${i}].flag`;
  122. if (!array.includes(arr[i].value)) {
  123. this.setData({
  124. [flag]: false
  125. });
  126. } else {
  127. this.setData({
  128. [flag]: true
  129. });
  130. }
  131. }
  132. },
  133. // 隐藏picker
  134. hidePicker() {
  135. this.setData({
  136. showPicker: false
  137. });
  138. },
  139. // 取消按钮事件
  140. cancal() {
  141. this.hidePicker();
  142. },
  143. // 确定按钮事件
  144. sure() {
  145. var list = [];
  146. for (let item of this.myChooseList) {
  147. if (item.flag) {
  148. list.push(item.value);
  149. }
  150. }
  151. this.setData({
  152. myList:list
  153. });
  154. this.hidePicker();
  155. this.$emit('chooseEvent', {
  156. detail: {
  157. chooseArray: this.myList
  158. }
  159. });
  160. }
  161. }
  162. };
  163. </script>
  164. <style>
  165. @import "./pickerMultiSelect.css";
  166. </style>