uni-check-list.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <view class="check-list-pages">
  3. <view>
  4. <view class="selList" v-for="(item, index) in list" :key="index">
  5. <view class="radios" @click="chooseItem(item)">
  6. <radio v-if="types == 'radio'" :checked="item.checked" :value="item.id" />
  7. <checkbox v-if="types == 'checkbox'" :checked="item.checked" :value="item.id" />
  8. <text>{{ item[titleKeys] }}</text>
  9. </view>
  10. <view class="details" @click="rightClick(item)">
  11. <slot name="right"></slot>
  12. <u-icon v-if="showArrow && types != 'views'" name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
  13. </view>
  14. </view>
  15. <view style="padding-top: 10vh;" v-if="list.length==0">
  16. <u-empty text="暂无考评方案" mode="list"></u-empty>
  17. </view>
  18. </view>
  19. <!-- 选择按钮 -->
  20. <view v-if="types == 'checkbox'" @click="kpOk" class="kp-ok">确认选择</view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name: 'UniCheckList',
  26. props: {
  27. listData: {
  28. type: Array,
  29. default: function() {
  30. return [];
  31. }
  32. },
  33. // 类型 radio 或 checkbox 或 views 指 只是展示列表
  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. defValue: {
  49. type: Array,
  50. default: function() {
  51. return [];
  52. }
  53. }
  54. },
  55. data() {
  56. return {
  57. list: this.listData,
  58. value: []
  59. };
  60. },
  61. watch: {
  62. listData(newValue, oldValue) {
  63. this.list = newValue;
  64. },
  65. defValue(newValue) {
  66. this.value = newValue;
  67. this.hasCheck();
  68. }
  69. },
  70. mounted() {
  71. this.hasCheck();
  72. },
  73. methods: {
  74. hasCheck() {
  75. this.list.map(item => {
  76. let a = this.value.indexOf(item.id);
  77. item.checked = a >= 0;
  78. });
  79. this.list.splice();
  80. },
  81. // 选中
  82. chooseItem(item) {
  83. // 单选
  84. if (this.types == 'radio') {
  85. this.value[0] = item.id;
  86. this.$emit('ok', this.value);
  87. } else {
  88. // 取消选中
  89. if (item.checked) {
  90. let index = this.value.indexOf(item.id);
  91. this.value.splice(index, 1);
  92. } else {
  93. this.value.push(item.id);
  94. }
  95. }
  96. this.hasCheck();
  97. },
  98. rightClick(item) {
  99. this.$emit('rightClick', item);
  100. },
  101. kpOk() {
  102. this.$emit('ok', this.value);
  103. }
  104. }
  105. };
  106. </script>
  107. <style lang="less">
  108. .check-list-pages {
  109. height: 100%;
  110. display: flex;
  111. flex-direction: column;
  112. > view {
  113. &:first-child {
  114. flex-grow: 1;
  115. }
  116. }
  117. }
  118. .selList {
  119. width: 100%;
  120. border-bottom: 1px solid #eee;
  121. display: flex;
  122. align-items: center;
  123. .radios {
  124. display: flex;
  125. align-items: center;
  126. flex-grow: 1;
  127. width: 50%;
  128. padding: 26upx 20upx;
  129. &:active {
  130. background-color: #f8f8f8;
  131. }
  132. text {
  133. word-break: break-all;
  134. }
  135. }
  136. .details {
  137. color: #007aff;
  138. padding-right: 20upx;
  139. display: flex;
  140. align-items: center;
  141. &:active {
  142. color: #d9363e;
  143. }
  144. }
  145. }
  146. .kp-ok {
  147. text-align: center;
  148. padding: 26upx;
  149. background: #55aaff;
  150. color: #fff;
  151. font-size: 18px;
  152. }
  153. </style>