uni-list-item.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <cell>
  4. <!-- #endif -->
  5. <view :class="{ 'uni-list-item--disabled': disabled }" :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click.stop="onClick">
  6. <view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
  7. <view class="uni-list-item__container" :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
  8. <slot name="header">
  9. <view class="uni-list-item__header">
  10. <view v-if="thumb" class="uni-list-item__icon">
  11. <image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
  12. </view>
  13. <view v-else-if="showExtraIcon" class="uni-list-item__icon">
  14. <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
  15. </view>
  16. </view>
  17. </slot>
  18. <slot name="body">
  19. <view class="uni-list-item__content" :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
  20. <text v-if="title" class="uni-list-item__content-title" :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
  21. <text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
  22. </view>
  23. </slot>
  24. <slot name="footer">
  25. <view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra" :class="{ 'flex--justify': direction === 'column' }">
  26. <text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
  27. <uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
  28. <switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
  29. </view>
  30. </slot>
  31. </view>
  32. <uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
  33. </view>
  34. <!-- #ifdef APP-NVUE -->
  35. </cell>
  36. <!-- #endif -->
  37. </template>
  38. <script>
  39. import uniIcons from '../uni-icons/uni-icons.vue';
  40. import uniBadge from '../uni-badge/uni-badge.vue';
  41. /**
  42. * ListItem 列表子组件
  43. * @description 列表子组件
  44. * @tutorial https://ext.dcloud.net.cn/plugin?id=24
  45. * @property {String} title 标题
  46. * @property {String} note 描述
  47. * @property {String} thumb 左侧缩略图,若thumb有值,则不会显示扩展图标
  48. * @property {String} thumbSize = [lg|base|sm] 略缩图大小
  49. * @value lg 大图
  50. * @value base 一般
  51. * @value sm 小图
  52. * @property {String} badgeText 数字角标内容
  53. * @property {String} badgeType 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
  54. * @property {String} rightText 右侧文字内容
  55. * @property {Boolean} disabled = [true|false] 是否禁用
  56. * @property {Boolean} clickable = [true|false] 是否开启点击反馈
  57. * @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
  58. * @value navigateTo 同 uni.navigateTo()
  59. * @value redirectTo 同 uni.redirectTo()
  60. * @value reLaunch 同 uni.reLaunch()
  61. * @value switchTab 同 uni.switchTab()
  62. * @property {String | PageURIString} to 跳转目标页面
  63. * @property {Boolean} showBadge = [true|false] 是否显示数字角标
  64. * @property {Boolean} showSwitch = [true|false] 是否显示Switch
  65. * @property {Boolean} switchChecked = [true|false] Switch是否被选中
  66. * @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
  67. * @property {Object} extraIcon 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'}
  68. * @property {String} direction = [row|column] 排版方向
  69. * @value row 水平排列
  70. * @value column 垂直排列
  71. * @event {Function} click 点击 uniListItem 触发事件
  72. * @event {Function} switchChange 点击切换 Switch 时触发
  73. */
  74. export default {
  75. name: 'UniListItem',
  76. components: {
  77. uniIcons,
  78. uniBadge
  79. },
  80. props: {
  81. direction: {
  82. type: String,
  83. default: 'row'
  84. },
  85. title: {
  86. type: String,
  87. default: ''
  88. },
  89. note: {
  90. type: String,
  91. default: ''
  92. },
  93. ellipsis: {
  94. type: [Number],
  95. default: 0
  96. },
  97. disabled: {
  98. type: [Boolean, String],
  99. default: false
  100. },
  101. clickable: {
  102. type: Boolean,
  103. default: false
  104. },
  105. showArrow: {
  106. type: [Boolean, String],
  107. default: false
  108. },
  109. link: {
  110. type: [Boolean, String],
  111. default: false
  112. },
  113. to: {
  114. type: String,
  115. default: ''
  116. },
  117. showBadge: {
  118. type: [Boolean, String],
  119. default: false
  120. },
  121. showSwitch: {
  122. type: [Boolean, String],
  123. default: false
  124. },
  125. switchChecked: {
  126. type: [Boolean, String],
  127. default: false
  128. },
  129. badgeText: {
  130. type: String,
  131. default: ''
  132. },
  133. badgeType: {
  134. type: String,
  135. default: 'success'
  136. },
  137. rightText: {
  138. type: String,
  139. default: ''
  140. },
  141. thumb: {
  142. type: String,
  143. default: ''
  144. },
  145. thumbSize: {
  146. type: String,
  147. default: 'base'
  148. },
  149. showExtraIcon: {
  150. type: [Boolean, String],
  151. default: false
  152. },
  153. extraIcon: {
  154. type: Object,
  155. default () {
  156. return {
  157. type: 'contact',
  158. color: '#000000',
  159. size: 20
  160. };
  161. }
  162. },
  163. border: {
  164. type: Boolean,
  165. default: true
  166. }
  167. },
  168. inject: ['list'],
  169. data() {
  170. return {
  171. isFirstChild: false
  172. };
  173. },
  174. mounted() {
  175. if (!this.list.firstChildAppend) {
  176. this.list.firstChildAppend = true;
  177. this.isFirstChild = true;
  178. }
  179. },
  180. methods: {
  181. onClick() {
  182. if (this.to !== '') {
  183. this.openPage();
  184. return;
  185. }
  186. if (this.clickable || this.link) {
  187. this.$emit('click', {
  188. data: {}
  189. });
  190. }
  191. },
  192. onSwitchChange(e) {
  193. this.$emit('switchChange', e.detail);
  194. },
  195. openPage() {
  196. if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
  197. this.pageApi(this.link);
  198. } else {
  199. this.pageApi('navigateTo');
  200. }
  201. },
  202. pageApi(api) {
  203. uni[api]({
  204. url: this.to,
  205. success: res => {
  206. this.$emit('click', {
  207. data: res
  208. });
  209. },
  210. fail: err => {
  211. this.$emit('click', {
  212. data: err
  213. });
  214. console.error(err.errMsg);
  215. }
  216. });
  217. }
  218. }
  219. };
  220. </script>
  221. <style scoped>
  222. .uni-list-item {
  223. /* #ifndef APP-NVUE */
  224. display: flex;
  225. /* #endif */
  226. font-size: 16px;
  227. position: relative;
  228. justify-content: space-between;
  229. background-color: #fff;
  230. flex-direction: row;
  231. }
  232. .uni-list-item--disabled {
  233. opacity: 0.3;
  234. }
  235. .uni-list-item--hover {
  236. background-color: #f1f1f1;
  237. }
  238. .uni-list-item__container {
  239. position: relative;
  240. /* #ifndef APP-NVUE */
  241. display: flex;
  242. /* #endif */
  243. flex-direction: row;
  244. padding: 12px 15px;
  245. padding-left: 15px;
  246. flex: 1;
  247. overflow: hidden;
  248. }
  249. .container--right {
  250. padding-right: 0;
  251. }
  252. .uni-list--border {
  253. position: absolute;
  254. top: 0;
  255. right: 0;
  256. left: 0;
  257. /* #ifdef APP-NVUE */
  258. border-top-color: #e5e5e5;
  259. border-top-style: solid;
  260. border-top-width: 0.5px;
  261. /* #endif */
  262. }
  263. /* #ifndef APP-NVUE */
  264. .uni-list--border:after {
  265. position: absolute;
  266. top: 0;
  267. right: 0;
  268. left: 0;
  269. height: 1px;
  270. content: '';
  271. -webkit-transform: scaleY(0.5);
  272. transform: scaleY(0.5);
  273. background-color: #e5e5e5;
  274. }
  275. /* #endif */
  276. .uni-list-item__content {
  277. /* #ifndef APP-NVUE */
  278. display: flex;
  279. /* #endif */
  280. padding-right: 8px;
  281. flex: 1;
  282. color: #3b4144;
  283. flex-direction: column;
  284. justify-content: space-between;
  285. overflow: hidden;
  286. }
  287. .uni-list-item__content--center {
  288. justify-content: center;
  289. }
  290. .uni-list-item__content-title {
  291. font-size: 14px;
  292. color: #3b4144;
  293. overflow: hidden;
  294. }
  295. .uni-list-item__content-note {
  296. margin-top: 6rpx;
  297. color: #999;
  298. font-size: 12px;
  299. overflow: hidden;
  300. }
  301. .uni-list-item__extra {
  302. /* #ifndef APP-NVUE */
  303. display: flex;
  304. /* #endif */
  305. flex-direction: row;
  306. justify-content: flex-end;
  307. align-items: center;
  308. }
  309. .uni-list-item__header {
  310. /* #ifndef APP-NVUE */
  311. display: flex;
  312. /* #endif */
  313. flex-direction: row;
  314. align-items: center;
  315. }
  316. .uni-list-item__icon {
  317. margin-right: 18rpx;
  318. flex-direction: row;
  319. justify-content: center;
  320. align-items: center;
  321. }
  322. .uni-list-item__icon-img {
  323. /* #ifndef APP-NVUE */
  324. display: block;
  325. /* #endif */
  326. height: 26px;
  327. width: 26px;
  328. }
  329. .uni-icon-wrapper {
  330. /* #ifndef APP-NVUE */
  331. display: flex;
  332. /* #endif */
  333. align-items: center;
  334. padding: 0 10px;
  335. }
  336. .flex--direction {
  337. flex-direction: column;
  338. align-items: initial;
  339. }
  340. .flex--justify {
  341. justify-content: initial;
  342. }
  343. .uni-list--lg {
  344. height: 40px;
  345. width: 40px;
  346. }
  347. .uni-list--base {
  348. height: 26px;
  349. width: 26px;
  350. }
  351. .uni-list--sm {
  352. height: 20px;
  353. width: 20px;
  354. }
  355. .uni-list-item__extra-text {
  356. color: #999;
  357. font-size: 12px;
  358. }
  359. .uni-ellipsis-1 {
  360. /* #ifndef APP-NVUE */
  361. overflow: hidden;
  362. white-space: nowrap;
  363. text-overflow: ellipsis;
  364. /* #endif */
  365. /* #ifdef APP-NVUE */
  366. lines: 1;
  367. /* #endif */
  368. }
  369. .uni-ellipsis-2 {
  370. /* #ifndef APP-NVUE */
  371. overflow: hidden;
  372. text-overflow: ellipsis;
  373. display: -webkit-box;
  374. -webkit-line-clamp: 2;
  375. -webkit-box-orient: vertical;
  376. /* #endif */
  377. /* #ifdef APP-NVUE */
  378. lines: 2;
  379. /* #endif */
  380. }
  381. </style>