uni-check-list.vue 2.3 KB

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