multiple-select.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <view class="uni-select-cy" :style="{ 'z-index': zindex }">
  3. <view class="uni-select-cy-select" :class="{ active: active }" @click.stop="handleSelect">
  4. <!-- 禁用mask -->
  5. <view class="uni-disabled" v-if="disabled"></view>
  6. <!-- 清空 -->
  7. <view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
  8. <text @click.stop="handleRemove(null)"></text>
  9. </view>
  10. <!-- 显示框 -->
  11. <view
  12. class="uni-select-multiple"
  13. v-show="realValue.length"
  14. :style="{ display: realValue.length == 0 && showplaceholder ? 'none' : 'flex' }"
  15. >
  16. <view class="uni-select-multiple-item" v-for="(item, index) in realValue" :key="index">
  17. <view class="uni-select-multiple-item-row">{{ item }}</view>
  18. <view class="close-icon" v-if="showValueClear">
  19. <text @click.stop="handleRemove(index)"></text>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- 为空时的显示文案 -->
  24. <view v-if="realValue.length == 0 && showplaceholder">{{ placeholder }}</view>
  25. <!-- 禁用图标 -->
  26. <view class="uni-select-cy-icon" :class="{ disabled: disabled }"><text></text></view>
  27. </view>
  28. <!-- 下拉选项 -->
  29. <scroll-view ref="scrollRef" class="uni-select-cy-options" :scroll-y="true" v-show="active" @scrolltolower="scrolltolower">
  30. <template>
  31. <view
  32. class="uni-select-cy-item"
  33. :class="{ active: realValue.includes(item[svalue]) }"
  34. v-for="(item, index) in options"
  35. :key="index"
  36. @click.stop="handleChange(index, item)"
  37. >
  38. <view class="check-icon"></view>
  39. <view class="check-title">{{ item[slabel] }}</view>
  40. </view>
  41. <view class="select-contain">
  42. <button class="select-contain-btn" @click="active = false">确定</button>
  43. </view>
  44. </template>
  45. </scroll-view>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. name: 'select-cy',
  51. props: {
  52. //是否显示全部清空按钮
  53. showClearIcon: {
  54. type: Boolean,
  55. default: false
  56. },
  57. //是否显示单个删除
  58. showValueClear: {
  59. type: Boolean,
  60. default: true
  61. },
  62. zindex: {
  63. type: Number,
  64. default: 999
  65. },
  66. //禁用组件
  67. disabled: {
  68. type: Boolean,
  69. default: false
  70. },
  71. options: {
  72. type: Array,
  73. default() {
  74. return []
  75. }
  76. },
  77. value: {
  78. type: Array,
  79. default() {
  80. return []
  81. }
  82. },
  83. placeholder: {
  84. type: String,
  85. default: '请选择'
  86. },
  87. showplaceholder: {
  88. type: Boolean,
  89. default: true
  90. },
  91. slabel: {
  92. type: String,
  93. default: 'label'
  94. },
  95. svalue: {
  96. type: String,
  97. default: 'value'
  98. },
  99. // 是否开启分页
  100. isPaging: {
  101. type: Boolean,
  102. default: false
  103. },
  104. },
  105. data() {
  106. return {
  107. active: false, //组件是否激活,
  108. changevalue: [], //搜索框同步
  109. realValue: [],
  110. }
  111. },
  112. watch: {
  113. value: {
  114. handler(val) {
  115. console.log('value', val)
  116. //初始化
  117. this.init()
  118. },
  119. deep: true,
  120. }
  121. },
  122. mounted() {
  123. this.init()
  124. },
  125. methods: {
  126. close() {
  127. this.active = false
  128. },
  129. init() {
  130. if (this.value.length > 0) {
  131. const dataList = this.value.map(i => i.value)
  132. this.changevalue = this.options.map(item => {
  133. if (item.value.includes(dataList)) {
  134. return item.value
  135. }
  136. })
  137. this.realValue = dataList
  138. } else {
  139. this.changevalue = []
  140. this.realValue = []
  141. }
  142. },
  143. scrolltolower() {
  144. if (this.isPaging) {
  145. this.$emit('scrolltolower')
  146. }
  147. },
  148. //点击展示选项
  149. handleSelect() {
  150. if (this.disabled) return
  151. this.active = !this.active
  152. },
  153. //移除数据
  154. handleRemove(index) {
  155. if (index === null) {
  156. this.realValue = []
  157. this.changevalue = []
  158. } else {
  159. this.realValue.splice(index, 1)
  160. this.changevalue.splice(index, 1)
  161. }
  162. this.$emit('change', this.changevalue, this.realValue)
  163. },
  164. //点击组件列
  165. handleChange(index, item) {
  166. let arrIndex = this.realValue.indexOf(item[this.svalue])
  167. if (arrIndex > -1) {
  168. this.changevalue.splice(arrIndex, 1)
  169. this.realValue.splice(arrIndex, 1)
  170. } else {
  171. this.changevalue.push(item)
  172. this.realValue.push(item[this.svalue])
  173. }
  174. this.$emit('change', this.realValue)
  175. },
  176. }
  177. }
  178. </script>
  179. <style lang="scss" scoped>
  180. .uni-select-cy {
  181. position: relative;
  182. z-index: 999;
  183. .uni-select-mask {
  184. width: 100%;
  185. height: 100%;
  186. }
  187. /* 删除按钮样式*/
  188. .close-icon {
  189. height: 100%;
  190. width: 15px;
  191. display: flex;
  192. align-items: center;
  193. justify-content: center;
  194. z-index: 3;
  195. cursor: pointer;
  196. text {
  197. position: relative;
  198. background: #fff;
  199. width: 13px;
  200. height: 13px;
  201. border-radius: 50%;
  202. border: 1px solid #bbb;
  203. &::before,
  204. &::after {
  205. content: "";
  206. position: absolute;
  207. left: 20%;
  208. top: 50%;
  209. height: 1px;
  210. width: 60%;
  211. transform: rotate(45deg);
  212. background-color: #bbb;
  213. }
  214. &::after {
  215. transform: rotate(-45deg);
  216. }
  217. }
  218. }
  219. //所有清空的定位
  220. .close-postion {
  221. position: absolute;
  222. right: 35px;
  223. top: 0;
  224. height: 100%;
  225. width: 15px;
  226. }
  227. /* 多选盒子 */
  228. .uni-select-multiple {
  229. overflow-x: auto;
  230. display: flex;
  231. flex: 1;
  232. width: 0;
  233. flex-wrap: nowrap;
  234. .uni-select-multiple-item {
  235. // background: #bbb;
  236. margin-right: 5rpx;
  237. padding: 2rpx 4rpx;
  238. border-radius: 4rpx;
  239. color: #333333;
  240. display: flex;
  241. flex: 0 0 140rpx;
  242. .uni-select-multiple-item-row{
  243. flex: 1;
  244. overflow: hidden;
  245. text-overflow: ellipsis;
  246. white-space: nowrap;
  247. }
  248. }
  249. }
  250. // select部分
  251. .uni-select-cy-select {
  252. user-select: none;
  253. position: relative;
  254. z-index: 3;
  255. min-height: 90rpx;
  256. padding: 0 60rpx 0 20rpx;
  257. box-sizing: border-box;
  258. border-radius: 4px;
  259. border: 1rpx solid #cccccc;
  260. display: flex;
  261. align-items: center;
  262. font-size: 14px;
  263. color: #999;
  264. flex-wrap: nowrap;
  265. .uni-disabled {
  266. position: absolute;
  267. left: 0;
  268. width: 100%;
  269. height: 100%;
  270. z-index: 19;
  271. cursor: no-drop;
  272. background: rgba(255, 255, 255, .5);
  273. }
  274. .uni-select-cy-input {
  275. font-size: 28rpx;
  276. color: #999;
  277. display: block;
  278. width: 96%;
  279. overflow: hidden;
  280. text-overflow: ellipsis;
  281. white-space: nowrap;
  282. line-height: 30px;
  283. box-sizing: border-box;
  284. &.active {
  285. color: #333;
  286. }
  287. }
  288. .uni-select-cy-icon {
  289. cursor: pointer;
  290. position: absolute;
  291. right: 0;
  292. top: 0;
  293. height: 100%;
  294. width: 30px;
  295. display: flex;
  296. align-items: center;
  297. justify-content: center;
  298. &::before {
  299. content: "";
  300. width: 1px;
  301. height: 100%;
  302. position: absolute;
  303. left: 0;
  304. top: 0;
  305. // background-color: #e5e5e5;
  306. }
  307. text {
  308. display: block;
  309. // width: 0;
  310. // height: 0;
  311. // border-width: 12rpx 12rpx 0;
  312. // border-style: solid;
  313. // border-color: #bbb transparent transparent;
  314. transition: .3s;
  315. }
  316. text::after {
  317. content: '\276F';
  318. }
  319. &.disabled {
  320. cursor: no-drop;
  321. text {
  322. width: 20rpx;
  323. height: 20rpx;
  324. border: 2px solid #ff0000;
  325. border-radius: 50%;
  326. transition: .2s;
  327. position: relative;
  328. z-index: 999;
  329. &::after {
  330. content: "";
  331. position: absolute;
  332. top: 50%;
  333. left: 0;
  334. width: 100%;
  335. height: 2px;
  336. margin-top: -1px;
  337. background-color: #ff0000;
  338. transform: rotate(45deg);
  339. }
  340. }
  341. }
  342. }
  343. &.active .uni-select-cy-icon {
  344. text {
  345. transform: rotate(90deg);
  346. }
  347. }
  348. }
  349. // options部分
  350. .uni-select-cy-options {
  351. user-select: none;
  352. position: absolute;
  353. top: calc(100% + 5px);
  354. left: 0;
  355. width: 100%;
  356. height: 400rpx;
  357. border-radius: 4px;
  358. border: 1rpx solid #cccccc;
  359. background: #fff;
  360. padding: 33rpx 24rpx;
  361. box-sizing: border-box;
  362. z-index: 9;
  363. .uni-select-cy-item {
  364. box-sizing: border-box;
  365. cursor: pointer;
  366. // line-height: 2.5;
  367. margin-bottom: 25rpx;
  368. transition: .3s;
  369. font-size: 26rpx;
  370. color: #333333;
  371. display: flex;
  372. justify-content: space-between;
  373. .check-icon {
  374. width: 24rpx;
  375. height: 24rpx;
  376. border: 1px solid #CCCCCC;
  377. margin-top: 6rpx;
  378. }
  379. .check-title {
  380. width: 395rpx;
  381. }
  382. &.active {
  383. .check-icon {
  384. width: 36rpx;
  385. height: 36rpx;
  386. border: none;
  387. background: url(https://static.caimei365.com/app/img/icon/icon-checked.png) center;
  388. background-size: contain;
  389. margin-top: 0;
  390. border: none;
  391. }
  392. // background-color: #f5f7fa &:hover {
  393. // background-color: #f5f7fa
  394. // }
  395. }
  396. // &:hover {
  397. // background-color: #f5f5f5;
  398. // }
  399. }
  400. .select-contain {
  401. padding: 20rpx;
  402. display: flex;
  403. align-items: center;
  404. justify-content: center;
  405. .select-contain-btn {
  406. width: 210rpx;
  407. height: 60rpx;
  408. background: #FF5B00;
  409. color: #fff;
  410. line-height: 60rpx;
  411. }
  412. }
  413. }
  414. }
  415. </style>