uni-check-list.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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&&types!='views'" 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: function(){
  32. return []
  33. }
  34. },
  35. // 类型 radio 或 checkbox 或 views 指 只是展示列表
  36. types:{
  37. type: String,
  38. default: 'radio'
  39. },
  40. // 标题显示的字段
  41. titleKeys:{
  42. type: String,
  43. default: 'name'
  44. },
  45. // 是否显示右边箭头
  46. showArrow:{
  47. type: Boolean,
  48. default: true
  49. },
  50. defValue:{
  51. type: Array,
  52. default:function(){
  53. return []
  54. }
  55. }
  56. },
  57. data() {
  58. return {
  59. list: this.listData,
  60. value: []
  61. }
  62. },
  63. watch: {
  64. listData(newValue, oldValue) {
  65. this.list = newValue
  66. },
  67. defValue(newValue){
  68. this.value = newValue
  69. this.hasCheck()
  70. }
  71. },
  72. mounted() {
  73. this.hasCheck()
  74. },
  75. methods: {
  76. hasCheck(){
  77. this.list.map(item => {
  78. let a = this.value.indexOf(item.id)
  79. item.checked = a >= 0
  80. })
  81. this.list.splice()
  82. },
  83. // 选中
  84. chooseItem(item) {
  85. // 单选
  86. if(this.types == 'radio'){
  87. this.value[0] = item.id
  88. this.$emit('ok',this.value)
  89. }else{
  90. // 取消选中
  91. if(item.checked){
  92. let index = this.value.indexOf(item.id)
  93. this.value.splice(index,1)
  94. }else{
  95. this.value.push(item.id)
  96. }
  97. }
  98. this.hasCheck()
  99. },
  100. rightClick(item){
  101. this.$emit('rightClick',item)
  102. },
  103. kpOk(){
  104. this.$emit('ok',this.value)
  105. }
  106. },
  107. }
  108. </script>
  109. <style lang="less">
  110. .check-list-pages{
  111. height: 100%;
  112. display: flex;
  113. flex-direction: column;
  114. > view{
  115. &:first-child{
  116. flex-grow: 1;
  117. }
  118. }
  119. }
  120. .selList{
  121. width: 100%;
  122. border-bottom: 1px solid #eee;
  123. display: flex;
  124. align-items: center;
  125. .radios{
  126. display: flex;
  127. align-items: center;
  128. flex-grow: 1;
  129. width: 50%;
  130. padding: 26upx 20upx;
  131. &:active{
  132. background-color: #F8F8F8;
  133. }
  134. text{
  135. word-break: break-all;
  136. }
  137. }
  138. .details{
  139. color: #007AFF;
  140. padding-right: 20upx;
  141. display: flex;
  142. align-items: center;
  143. &:active{
  144. color: #D9363E;
  145. }
  146. }
  147. }
  148. .kp-ok{
  149. text-align: center;
  150. padding: 26upx;
  151. background: #55aaff;
  152. color: #fff;
  153. font-size: 18px;
  154. }
  155. </style>