uni-check-list.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <view class="check-list-pages">
  3. <view>
  4. <view
  5. class="selList"
  6. v-for="(item, index) in list" :key="index"
  7. >
  8. <view class="radios" @click="chooseItem(item)">
  9. <radio v-if="types=='radio'" :checked="item.checked" :value="item.id" />
  10. <checkbox v-if="types=='checkbox'" :checked="item.checked" :value="item.id" />
  11. <text>{{item[titleKeys]}}</text>
  12. </view>
  13. <view class="details" @click="rightClick(item)">
  14. <slot name="right"></slot>
  15. <u-icon v-if="showArrow" name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
  16. </view>
  17. </view>
  18. </view>
  19. <!-- 选择按钮 -->
  20. <view v-if="types=='checkbox'" @click="kpOk" class="kp-ok">
  21. 确认选择
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default{
  27. name: 'UniCheckList',
  28. props: {
  29. listData: {
  30. type: Array,
  31. default: []
  32. },
  33. // 类型 radio 或 checkbox
  34. types:{
  35. type: String,
  36. default: 'radio'
  37. },
  38. // 标题显示的字段
  39. titleKeys:{
  40. type: String,
  41. default: 'name'
  42. },
  43. // 是否显示右边箭头
  44. showArrow:{
  45. type: Boolean,
  46. default: true
  47. }
  48. },
  49. data() {
  50. return {
  51. list: this.listData,
  52. value: []
  53. }
  54. },
  55. mounted() {
  56. this.hasCheck()
  57. },
  58. methods: {
  59. hasCheck(){
  60. this.list.map(item => {
  61. let a = this.value.indexOf(item.id)
  62. item.checked = a >= 0
  63. })
  64. this.list.splice()
  65. },
  66. // 选中
  67. chooseItem(item) {
  68. // 单选
  69. if(this.types == 'radio'){
  70. this.value[0] = item.id
  71. this.$emit('ok',this.value)
  72. }else{
  73. // 取消选中
  74. if(item.checked){
  75. let index = this.value.indexOf(item.id)
  76. this.value.splice(index,1)
  77. }else{
  78. this.value.push(item.id)
  79. }
  80. }
  81. this.hasCheck()
  82. },
  83. rightClick(item){
  84. this.$emit('rightClick',item)
  85. },
  86. kpOk(){
  87. this.$emit('ok',this.value)
  88. }
  89. },
  90. }
  91. </script>
  92. <style lang="less">
  93. .check-list-pages{
  94. height: 100%;
  95. display: flex;
  96. flex-direction: column;
  97. > view{
  98. &:first-child{
  99. flex-grow: 1;
  100. }
  101. }
  102. }
  103. .selList{
  104. width: 100%;
  105. border-bottom: 1px solid #eee;
  106. display: flex;
  107. align-items: center;
  108. .radios{
  109. display: flex;
  110. align-items: center;
  111. flex-grow: 1;
  112. width: 50%;
  113. padding: 26upx 20upx;
  114. &:active{
  115. background-color: #F8F8F8;
  116. }
  117. text{
  118. word-break: break-all;
  119. }
  120. }
  121. .details{
  122. color: #007AFF;
  123. padding-right: 20upx;
  124. display: flex;
  125. align-items: center;
  126. &:active{
  127. color: #D9363E;
  128. }
  129. }
  130. }
  131. .kp-ok{
  132. text-align: center;
  133. padding: 26upx;
  134. background: #55aaff;
  135. color: #fff;
  136. font-size: 18px;
  137. }
  138. </style>