uni-list-item.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
  3. <view class="uni-list-item__container">
  4. <view v-if="thumb" class="uni-list-item__icon">
  5. <image :src="thumb" class="uni-list-item__icon-img" />
  6. </view>
  7. <view v-else-if="showExtraIcon" class="uni-list-item__icon">
  8. <uni-icon class="uni-icon-wrapper" :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
  9. </view>
  10. <view class="uni-list-item__content">
  11. <view class="uni-list-item__content-title">{{ title }}</view>
  12. <view v-if="note" class="uni-list-item__content-note">{{ note }}</view>
  13. </view>
  14. <view v-if="showBadge || showArrow || showSwitch" class="uni-list-item__extra">
  15. <uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
  16. <switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
  17. <uni-icon class="uni-icon-wrapper" v-if="showArrow" :size="20" color="#bbb" type="arrowright" />
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import uniIcon from '../uni-icon/uni-icon.vue'
  24. import uniBadge from '../uni-badge/uni-badge.vue'
  25. export default {
  26. name: 'UniListItem',
  27. components: {
  28. uniIcon,
  29. uniBadge
  30. },
  31. props: {
  32. title: {
  33. type: String,
  34. default: ''
  35. }, // 列表标题
  36. note: {
  37. type: String,
  38. default: ''
  39. }, // 列表描述
  40. disabled: { // 是否禁用
  41. type: Boolean,
  42. default: false
  43. },
  44. showArrow: { // 是否显示箭头
  45. type: Boolean,
  46. default: true
  47. },
  48. showBadge: { // 是否显示数字角标
  49. type: Boolean,
  50. default: false
  51. },
  52. showSwitch: { // 是否显示Switch
  53. type: Boolean,
  54. default: false
  55. },
  56. switchChecked: { // Switch是否被选中
  57. type: Boolean,
  58. default: false
  59. },
  60. badgeText: {
  61. type: [String, Number],
  62. default: ''
  63. }, // badge内容
  64. badgeType: { // badge类型
  65. type: String,
  66. default: 'success'
  67. },
  68. thumb: {
  69. type: String,
  70. default: ''
  71. }, // 缩略图
  72. showExtraIcon: { // 是否显示扩展图标
  73. type: Boolean,
  74. default: false
  75. },
  76. extraIcon: {
  77. type: Object,
  78. default () {
  79. return {
  80. type: 'contact',
  81. color: '#000000',
  82. size: 20
  83. }
  84. }
  85. }
  86. },
  87. data() {
  88. return {
  89. }
  90. },
  91. methods: {
  92. onClick() {
  93. this.$emit('click')
  94. },
  95. onSwitchChange(e) {
  96. this.$emit('switchChange', e.detail)
  97. }
  98. }
  99. }
  100. </script>
  101. <style>
  102. @charset "UTF-8";
  103. .uni-list-item {
  104. font-size: 32upx;
  105. position: relative;
  106. display: flex;
  107. flex-direction: column;
  108. justify-content: space-between;
  109. align-items: center
  110. }
  111. .uni-list-item--disabled {
  112. opacity: .3
  113. }
  114. .uni-list-item--hover {
  115. background-color: #f1f1f1
  116. }
  117. .uni-list-item__container {
  118. padding: 24upx 30upx;
  119. width: 100%;
  120. box-sizing: border-box;
  121. flex: 1;
  122. position: relative;
  123. display: flex;
  124. flex-direction: row;
  125. justify-content: space-between;
  126. align-items: center
  127. }
  128. .uni-list-item__container:after {
  129. position: absolute;
  130. z-index: 3;
  131. right: 0;
  132. bottom: 0;
  133. left: 30upx;
  134. height: 1px;
  135. content: '';
  136. -webkit-transform: scaleY(.5);
  137. transform: scaleY(.5);
  138. background-color: #c8c7cc
  139. }
  140. .uni-list-item__content {
  141. flex: 1;
  142. overflow: hidden;
  143. display: flex;
  144. flex-direction: column
  145. }
  146. .uni-list-item__content-title {
  147. font-size: 32upx;
  148. text-overflow: ellipsis;
  149. white-space: nowrap;
  150. color: inherit;
  151. line-height: 1.5;
  152. overflow: hidden
  153. }
  154. .uni-list-item__content-note {
  155. color: #999;
  156. font-size: 28upx;
  157. white-space: normal;
  158. display: -webkit-box;
  159. -webkit-box-orient: vertical;
  160. -webkit-line-clamp: 2;
  161. overflow: hidden
  162. }
  163. .uni-list-item__extra {
  164. width: 25%;
  165. display: flex;
  166. flex-direction: row;
  167. justify-content: flex-end;
  168. align-items: center
  169. }
  170. .uni-list-item__icon {
  171. margin-right: 18upx;
  172. display: flex;
  173. flex-direction: row;
  174. justify-content: center;
  175. align-items: center
  176. }
  177. .uni-list-item__icon-img {
  178. height: 52upx;
  179. width: 52upx
  180. }
  181. .uni-list>.uni-list-item:last-child .uni-list-item-container:after {
  182. height: 0
  183. }
  184. </style>